23833
Question:
I want to create a chart with a bar inside of a stacked bar as seen on the image bellow. <a href="http://i61.tinypic.com/317axx4.jpg" rel="nofollow">Chart http://i61.tinypic.com/317axx4.jpg</a>
I managed to put the column inside of the column but, I can't make it work for the bar. How can I put the bar inside of the stacked bar?
<a href="http://jsfiddle.net/danijelf/zs6juetp/1/" rel="nofollow">My code - JsFiddle</a>
var chart = new Highcharts.Chart({
chart: {
renderTo:'container',
},
title: {
text: 'Test %'
},
xAxis: {
categories: ['2014', '2013', '2012', '2011']
},
yAxis: {
opposite: true,
labels: {
format: '{value}%',
},
},
plotOptions: {
series: {
stacking: 'normal'
},
column: {
stacking: 'percent'
}
},
legend: {
enabled: false
},
series: [{
name: 'red',
type: 'bar',
data: [70, 70, 70, 70],
color: 'rgba(253, 155, 155, 1)',
pointPadding: 0.1,
pointPlacement: -0.2,
stack: 'bar'
}, {
name: 'yellow',
type: 'bar',
data: [5, 5, 5, 5],
color: 'rgba(255, 255, 153, 1)',
pointPadding: 0.1,
pointPlacement: -0.2,
stack: 'bar'
}, {
name: 'green',
type: 'bar',
data: [25, 25, 25, 25],
color: 'rgba(204, 255, 153, 1)',
pointPadding: 0.1,
pointPlacement: -0.2,
stack: 'bar'
}, {
name: 'Value',
type: 'bar',
data: [35, 30, 25, 20],
color: 'rgba(126,86,134,.9)',
pointPadding: 0.35,
pointPlacement: -0.2,
dataLabels: {
enabled: true,
format: '{y}%'
},
}]
});
Any help appreciated.
Answer1:You could set grouping to false, so all stacks will be placed on top of each other - overlap each other.
Example: <a href="http://jsfiddle.net/zs6juetp/2/" rel="nofollow">http://jsfiddle.net/zs6juetp/2/</a>
plotOptions: {
series: {
grouping: false
...
API reference: <a href="http://api.highcharts.com/highcharts#plotOptions.bar.grouping" rel="nofollow">plotOptions.bar.grouping</a>
Answer2:It looks like you're making a bullet graph.
I have examples of this here:
<ul><li><a href="http://jsfiddle.net/jlbriggs/UGs2E/17/" rel="nofollow">http://jsfiddle.net/jlbriggs/UGs2E/17/</a></li> </ul>.
plotOptions:{
bar:{
grouping: false,
shadow:false,
borderWidth:0,
pointPadding:.25,
groupPadding:0
},
scatter:{
marker:{
symbol:'line',
lineWidth:3,
radius:9,
lineColor:'#333'
}
}
}
Also uses a function to extend the marker object for the target line, on a scatter series:
Highcharts.Renderer.prototype.symbols.line = function(x, y, width, height) {
return ['M',x ,y + width / 2,'L',x+height,y + width / 2];
};
