We Keep Coding

combination chart (area and bar) highchart

I have a bar graph, I want to plot a shaded area on the same graph whose max and min range say are -1000k and -1250k, which most probably is a area-range graph. I cannot find an example in highchart doc, so need help.
The graph I have now -> http://jsfiddle.net/hhh2zx3w/6/
var c2chart3=Highcharts.chart("container1", {
colors: ['rgb(90,198,140)','rgb(255,179,137)','rgb(246,151,159)','rgb(55,183,74)','rgb(169,99,169)','rgb(0,191,243)','rgb(223,200,24)','rgb(242,100,38)'],
chart: {
type: 'bar',
backgroundColor: 'rgba(0,0,0,0.7)',
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
},
title: {
text: ''
},
xAxis: {
title: {
text: null
},
gridLineWidth:0,
lineWidth:0,
tickWidth: 0,
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px',
fontFamily: 'MP'
},
formatter: function(){
return ""
}
},
},
yAxis: {
// min: -2000000,
// max: 1000000,
gridLineColor: '#fff',
gridLineWidth: 0,
lineWidth:0,
plotLines: [{
color: '#fff',
width: 1,
value: 0
}],
title: {
text: '',
align: 'high'
},
title: {
text: ''
},
labels: {
style: {
color: '#FFF',
fontSize: '9px'
},
},
},
tooltip: { enabled: false },
credits: { enabled: false },
exporting: { enabled: false },
plotOptions: {
bar: {
dataLabels: {
enabled: true,
style: {
textOutline: false,
color:'#fff',
}
}
},
series: {
colorByPoint: true,
pointWidth: 1,
borderWidth:0,
dataLabels: {
enabled: true,
formatter: function(){
}
}
}
},
legend: { enabled: false },
credits: { enabled: false },
series: [{
data: [-510362,-371233,-1593711,-388465,352395,179298,-1190969,-907204]
}]
});
What I want is something like shown in the image

The feature you are referring to is called as the "Plot Bands" in Highchart
Here is how you can do it.
plotBands: [{
color: 'tomato',
from: -1000000,
to: -1250000
}],
you can have plot bands with respect to any axis.
Here is a jsfiddle for your ref: http://jsfiddle.net/hhh2zx3w/7/
Highcharts API ref: https://api.highcharts.com/highcharts/yAxis.plotBands

HIGHCHARTS - Value of Columns Based on previous Column Value

I got some issue using Highcharts.
I need to draw the height of third column "C" based on values of the column "B"
(As default the draw of height at column "C" is based on Column "A")
I created a simple example here
$('#container').each(function () {
chart = new Highcharts.Chart({
chart: {
renderTo: this,
type: 'column',
margin: 0,
spacingTop: 0
},
title: {
text: ''
},
xAxis: {
categories: [
'A',
'B',
'C'
], title: {
text: null
},
labels: {
style: {
fontSize: '9px',
font: '9px Arial, Helvetica'
},
enabled: false
}
},
yAxis: {
endOnTick: false,
maxPadding: 0.1,
gridLineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
title: {
text: ''
},
labels: {
enabled: false
}
}, tooltip: {
pointFormat: ' <b>{point.val}</b> ',
shared: true
},
legend: {
enabled: true
},
plotOptions: {
bar: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series: {
slicedOffset: 0,
shadow: false,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
return this.y + '%';
}
}
}
},
legend: {
itemStyle: {
fontSize: '8px',
font: '8px Arial, Helvetica'
},
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
{ y:100, val: 2111, color: '#199ED8' },
{ y: Math.round(748 / 2111 * 100), val: 748, color: '#6CF' },
{ y: Math.round(433 / 748 * 100), val: 433, color: '#6FF' }
],
connectNulls: true,
pointWidth: 58
}], exporting: {
buttons: {
contextButton: {
enabled: false
}
}
}
});
});

I'm working with Julio in this case, and we Solve it.
Resolution: http://jsfiddle.net/JVNjs/1203/
$('#container').each(function () {
var publico = 2111;
var abordados = 748;
chart = new Highcharts.Chart({
chart: {
renderTo: this,
type: 'column',
margin: 0,
spacingTop: 0
},
title: {
text: ''
},
xAxis: {
categories: [
'Público',
'Abordados',
'Conversão'
], title: {
text: null
},
labels: {
style: {
fontSize: '9px',
font: '9px Arial, Helvetica'
},
enabled: false
}
},
yAxis: {
endOnTick: false,
maxPadding: 0.1,
gridLineColor: 'transparent',
minorTickLength: 0,
tickLength: 0,
min: 0,
title: {
text: ''
},
labels: {
enabled: false
}
}, tooltip: {
pointFormat: ' <b>{point.y}</b> ',
shared: true
},
legend: {
enabled: false
},
plotOptions: {
bar: {
slicedOffset: 0,
size: '100%',
dataLabels: {
enabled: false
}
},
series: {
slicedOffset: 0,
shadow: false,
borderWidth: 0,
dataLabels: {
enabled: true,
formatter: function () {
if(this.x == 'Conversão'){
return Math.round(this.y / abordados * 100, 0) + '%';
}else{
return Math.round(this.y / publico * 100, 0) + '%';
}
}
}
}
},
legend: {
itemStyle: {
fontSize: '8px',
font: '8px Arial, Helvetica'
},
enabled: false
},
credits: {
enabled: false
},
series: [{
data: [
{ y:publico, color: '#199ED8' },
{ y:abordados, color: '#6CF' },
{ y:433, color: '#6FF' }
],
connectNulls: true,
pointWidth: 58
}], exporting: {
buttons: {
contextButton: {
enabled: false
}
}
}
});
});

Create four chart with same data different rendering(HIGHCHARTS)

Please I need help , I need to create four chart with the SAME data but with different rendering , how can I do this please ?
Here My highcharts code,
var chart;
chart = new Highcharts.Chart({
chart: {
renderTo: 'tv_chart_container',
type: 'area',
backgroundColor: '#1E2229',
//#1E2A38
marginRight: 10,
panning:true,
mapNavigation: {
buttons: {
zoomIn: {
// the lower the value, the greater the zoom in
onclick: function () { this.mapZoom(0.1); }
},
zoomOut: {
// the higher the value, the greater the zoom out
onclick: function () { this.mapZoom(10); }
}
}
//enableButtons: false
},
credits: {
enabled: false
},
title: {
text: '',
},
xAxis: {
type: 'datetime',
crosshair: {
color: '#335A81',
label: {
enabled: true,
padding: 8,
format: '{value: %H:%M:%S}'
}
},
minTickInterval: 1000 * 60, //one minute
gridLineWidth: 0.1,
plotLines: [{
value: pur_time, // Value of where the line will appear
width: 2 ,
color: '#656568',
dashStyle: 'dash',
id: 'plotline',
label: {
text: 'Purchase deadline',
verticalAlign: 'top',
textAlign: 'center',
rotation: 270,
x: -5,
y: 50,
style: {
color: '#656568',
fontWeight: 'bold'
}
}
},{
value: exp_time, // Value of where the line will appear
width: 2 ,
color: '#A28F29',
id: 'plotline1',
label: {
text: 'Expiration time',
verticalAlign: 'top',
textAlign: 'center',
rotation: 270,
x: -5,
y: 50,
style: {
color: '#686A3B',
fontWeight: 'bold'
}
}
}]
},
yAxis: {
title: {
text: '',
},
opposite: true,
crosshair: {
color: '#335A81',
label: {
enabled: true,
format: '{value:.2f}'
}
},
gridLineWidth: 0.1,
labels: {
align: 'right',
x: 10
},
opposite: true,
minorGridLineWidth: 0,
},
tooltip: { enabled: false },
legend: {
enabled: false
},
plotOptions: {
series: {
enableMouseTracking: true
},
area: {
fillColor: {
linearGradient: {
x1: 0,
y1: 0,
x2: 0,
y2: 1
},
stops: [
[0, Highcharts.getOptions().colors[0]],
[1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
]
},
lineWidth: 1,
states: {
hover: {
lineWidth: 1
}
},
threshold: null,
marker: {
enabled: false
}
}
},
exporting: {
enabled: false
},
series: [{
name: 'Random data',
type: 'area',
color: '#0AB9F1',
data: (function() {
// generate an array of random data
var data = [],
time = (new Date()).getTime(),
i;
for (i = -999; i <= 0; i++) {
data.push([
time + i * 6000,
Math.random()*100,
Math.random()*100,
Math.random()*100,
Math.random()*100
]);
}
return data;
})()},{data:[{ x:14654694989093 , y: 50,y: 52,y: 56,y: 57}], color: 'rgba(0,0,0,0)',enableMouseTracking:true}]
});
i have four different id to rendering chart with same data

Is it possible to have the category displayed above the series in a horizontal bar jsHighchart?

Is it possible to have the category displayed above the series in a horizontal bar jsHighchart?
I know it is possible if you are using only 1 series per category. But I was wondering if this is possible as well, when using multiple series.
What i have now:
$(function () {
var cats = ['1', '2', '3', '4', '5'];
var width = 375;
var height = cats.length * 100;
var value = 0;
var maxScore = 2453 + 50;
var chart = $('.highchart').highcharts({
chart: {
backgroundColor:'#fff',
type: 'bar',
width:width,
height:height,
},
title: {
text: ''
},
credits: {
enabled: false
},
exporting: { enabled: false },
legend: {
enabled: false
},
scrollbar: {
enabled: false
},
xAxis: {
categories: cats,
labels: {
style: {
display:'block',
fontWeight: 'bold',
}
},
min:0,
},
yAxis: {
/* stackLabels: {
formatter: function() {
return this.axis.chart.xAxis[0].categories[this.x];
},
enabled: true,
verticalAlign: 'top',
align: 'left',
y: -5
},*/
allowDecimals: false,
min: 0,
max: maxScore,
gridLineWidth: 0,
title: {
text: '',
rotation:0,
margin:0
},
labels: {
formatter: function () {
return '';
},
},
},
tooltip: {
enabled:false,
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: { bar:{borderWidth:0, dataLabels:{align:'right'}},series: { pointWidth: 25, pointPadding: 0, groupPadding: 0.24} },
series: [{
name: 'score1',
data: [800, 1312, 833, 944, 432],
stack: 'you',
color: 'blue',
dataLabels: {
enabled: true,
color: 'blue',
align: 'center',
x: 25,
y: 0,
style: {
fontSize: '13px',
fontWeight: 'bold',
},
useHTML: true
}
}, {
name: 'score2',
data: [2208, 800, 1375, 1531, 971],
stack: 'academy',
color: 'red',
dataLabels: {
enabled: true,
color: 'red',
align: 'center',
x: 25,
y: 0,
style: {
fontSize: '13px',
fontWeight: 'bold',
},
useHTML: true
}
}],
});
$hc = $('.highchart');
});
http://jsfiddle.net/jbw8ou5g/
The idea is to have the 1,2,3,4,5 left from the bars, but above the corresponding bars.

Try this mate.Replace your x-axis properties with the below
xAxis: {
categories: cats,
labels: {
style: {
display:'block',
fontWeight: 'bold',
},
x:350,
},
min:0,
},
Fiddle

highcharts grouping with overflow

I made highcharts for petrol tank(credit prepayment)
I want to make that each line should start from the beginning of the bar instead of grouping(adding) at the end.(I don't need to have sum of all data)
Thanks.
![var options = {
chart: {
type: 'bar',
height: 300,
width:420
},
title: {
text: 'Prepayment'
},
yAxis: {
gridLineColor: '#eee',
title: {
text: 'Prepayment'
}
},
xAxis: {
categories: \['Credit'\],
labels: {
step: 0,
rotation: -45,
align: 'right'
}
},
legend: {
enabled: true
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
series: \[{
color:'#89C35C',
name: 'Current Credit',
data: \[10\] }, {
color:'#FFD801',
name: 'Warning Threshold',
data: \[5\] }, {
color:'#E42217',
name: 'Cut-Off Threshold',
data: \[1\] }\],
};
$('#container').highcharts(options);][1]
Example:
http://jsfiddle.net/2se5q/

you will find all the explanations on this link http://api.highcharts.com/highcharts
To answer your question if you delete only "plotOptions:" You will not find more than the sum of the graphics on a line but starting from 0.
Here : http://jsfiddle.net/2se5q/3/
plotOptions: {
series: {
stacking: 'normal'
}

I made it like this,where type = area
http://jsfiddle.net/2se5q/4/
var options = {
chart: {
type: 'area',
height: 300,
width:420
},
title: {
text: 'Prepayment'
},
yAxis: {
gridLineColor: '#eee',
title: {
text: 'Prepayment'
}
},
xAxis: {
categories: ['Credit'],
labels: {
step: 0,
rotation: -45,
align: 'right'
}
},
legend: {
enabled: true
},
tooltip: {
shared: true,
crosshairs: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
credits: {
enabled: false
},
series: [{
color:'#89C35C',
name: 'Current Credit',
data: [10,10] }, {
color:'#FFD801',
name: 'Warning Threshold',
data: [5,5] }, {
color:'#E42217',
name: 'Cut-Off Threshold',
data: [1,1] }],
};
$('#container').highcharts(options);