Bar chart with Stacked bar - highcharts

Question

Dear Highcharts experts,
I am very new to highchart and slowly making my way up. I want to create a highchart combined with normal bar graph & with stacked bars. I am having issues in making it.
Below is my jsfiddle version
http://jsfiddle.net/wt45e6mL/9/
plotOptions: {
series: {
cursor: 'pointer',
pointPadding: 0,
groupPadding: 0.01,
point: {
events: {
click: function () {
if(this.category=='60') return false;
alert('Category: ' + this.category + ', value: ' + this.y);
selected = this;
},
}
},
allowPointSelect: true,
states: {
select: {
color: null,
borderWidth: 10,
borderColor: 'Blue'
}
}
},
column: {
stacking: 'normal',
dataLabels: {
enabled: false,
color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white',
style: {
textShadow: '0 0 3px black'
}
}
},
}
Below are my difficult points:
1) Here for 60, 61, 62 I want to feed different data(series) to create a normal bar and rest stack bar. If the data is not there then do not create it. So stack bar should start from a value coming from another source , before that vale normal bars
2) I want to have a onclick event which i am able to do but this event is called on series data. When on click i want to highlight the whole stack bar along with the x axis value. The first three it should not be selected.
3) I want to feed one more data(series) which will show a straight line and highlight its y axis value.
Need some help on above points.
Thanks.

Answer 1

You've got a ridiculous amount of questions in this one question. In the future separate them out, it makes it easier to answer and it makes the questions more useful for future readers. But, let me see if I can help:
1) You can either use null for the series you don't want to overlap or use x and y coordinates
series: [{
name: 'A',
//stack: 1,
data: [{x:60, y:4000}, {x:61, y:4000}, {x:62, y:4000}, {x:63, y:4000}]
}, {
name: 'B',
id: 'B',
color: 'red',
//stack: 2,
data: [{x:63, y:1000}, {x:64, y:1000}, {x:65, y:1000}, {x:66, y:1000}, {x:67, y:1000}, {x:68, y:1000}, {x:69, y:1000}, {x:70, y:1000}]
}, {
name: 'C',
linkedTo:'B',
color: 'red',
//stack: 2,
data: [{x:66, y:400}, {x:67, y:400}, {x:68, y:400}, {x:69, y:400}, {x:70, y:400}, {x:71, y:400}, {x:72, y:400}, {x:73, y:400}, {x:74, y:400}]
},{
name: 'D',
//stack: 2,
data: [{x:63, y:400}, {x:64, y:600}, {x:65, y:700}, {x:66, y:800}, {x:67, y:1100}, {x:68, y:1100}, {x:69, y:1100}, {x:70, y:1100}, {x:71, y:1100}, {x:72, y:1100}, {x:73, y:1100}, {x:74, y:1100}]
}, {
name: 'E',
//stack: 2,
data: [{x:64, y:400}, {x:65, y:400},{x:66, y:400},{x:67, y:400}, {x:68, y:400}, {x:69, y:400}, {x:70, y:400}, {x:71, y:400}, {x:72, y:400}, {x:73, y:400}, {x:74, y:400}]
}]
2) You seem to have figured out the click events. Note that you can override the click event per series, so for your series that you don't want to have events just add a click event to the series that does nothing:
series: [{
name: 'A',
events: {
click: function() {
return true;
}
},
3) The line you are looking for is a y-Axis plot line
yAxis: {
labels: {
formatter: function() {
return '\u20ac' + ' ' + this.value
},
x: -20,
y: 0
},
plotLines: [{
value: 1000,
color: 'red',
width: 3,
zIndex: 10,
id: 'plot-line-1'
}],
4 - from comments) Showing 2 series as one color and one legend item for both. You can set each series' color manually. Use that to set them both as the same color. To only show one in the legend, use linkedTo
, {
name: 'B',
id: 'B',
color: 'red',
//stack: 2,
data: [{x:63, y:1000}, {x:64, y:1000}, {x:65, y:1000}, {x:66, y:1000}, {x:67, y:1000}, {x:68, y:1000}, {x:69, y:1000}, {x:70, y:1000}]
}, {
name: 'C',
linkedTo:'B',
color: 'red',
//stack: 2,
data: [{x:66, y:400}, {x:67, y:400}, {x:68, y:400}, {x:69, y:400}, {x:70, y:400}, {x:71, y:400}, {x:72, y:400}, {x:73, y:400}, {x:74, y:400}]
}
5 - also from comments) Highlighting the value on the axis. You can use the formatter function to modify the labels on the axis
yAxis: {
labels: {
useHTML: true,
formatter: function() {
if (this.value == 1000) return '<span class="highlight">' + '\u20ac' + ' ' + this.value + '</span>'
return '\u20ac' + ' ' + this.value
},
x: -20,
y: 0
},
http://jsfiddle.net/wt45e6mL/31/

Answer 2

1) This is complicated problem without simple solution. You can set grouping parameter to false for your stacked columns:
bar.grouping
You can use series.stack if you want to have three separate stacks for your columns instead of having one stack for columns:
stack
You can use groupPadding and pointPadding to 0 and your series.grouping to false. It should help you with your chart.
groupPadding
pointPadding
grouping
Here you can see example how it can work:
http://jsfiddle.net/y6tLaz1a/3/
2) Inside your click event callback function you can check if point category is smaller than 63. If It is smaller, you can return false like you are doing it right now. In other case you can iterate over all points and check if they have category equal to category of point you have just clicked. If they have the same category, you can select them using Point.select. Here you can read about this method:
Point.select
For example your click event callback function can look like that:
click: function() {
var point = this;
if (point.category <= 63) {
return false;
}
point.select(true, false)
Highcharts.each(this.series.chart.series, function(series, ind) {
Highcharts.each(series.data, function(p, i) {
if (p.category == point.category) {
p.select(true, true)
}
})
})
},
Here you can see example of this functionallity:
http://jsfiddle.net/wt45e6mL/22/
3) You can use plotLine in your case:
addPlotLine
You can add text to your plotLine by using label.text parameter:
label.text
Here you can see an example:
http://jsfiddle.net/eyLz09xv/
So taking all three examples into one, here you can see the final result:
http://jsfiddle.net/y6tLaz1a/4/
Related topic on highcharts forum:
http://forum.highcharts.com/highcharts-usage/bar-chart-with-stacked-bar-t34981/
Kind regards.