Is there a way to combine splines with grouped columns in HighCharts?
Here is what I have.
- 4 Categories on the X axis
- Each category has 3 columns
- In fact, I will have 4 groups with each group, each of which will show 3 columns.
- Now, on the secondary Y axis, I want to draw a spline that intersects all 3 columns in all four groups.
In addition, I would like the spline point to be centered on each column on the corresponding column.
http://jsfiddle.net/3SjWT/8/
Is it possible?
Thank Advance
code:
$(function () {
$('#container').highcharts({
chart: {},
title: {
text: 'Combination chart'
},
xAxis: {
categories: ['North', 'East', 'West', 'South'],
gridLineWidth: 0
},
yAxis: [{ // Primary yAxis
gridLineWidth: 0,
labels: {
style: {
color: '#89A54E'
}
},
title: {
text: 'Sales',
style: {
color: '#89A54E'
}
}
}, { // Secondary yAxis
title: {
text: 'Profit %',
style: {
color: Highcharts.getOptions().colors[3]
}
},
labels: {
style: {
color: '#4572A7'
}
},
opposite: true
}],
tooltip: {
formatter: function () {
var s;
if (this.point.name) { // the pie chart
s = '' + this.point.name + ': ' + this.y;
} else {
s = '' + this.x + ': ' + this.y;
}
return s;
}
},
labels: {
items: [{
html: '',
style: {
left: '40px',
top: '8px',
color: 'black'
}
}]
},
series: [{
type: 'column',
name: 'Black',
data: [136, 123, 147, 133]
}, {
type: 'column',
name: 'BW Print',
data: [213, 187, 226, 200]
}, {
type: 'column',
name: 'Fashion',
data: [213, 187, 226, 200]
},
{
type: 'spline',
name: 'Profit %',
yAxis: 1,
data: [20, 30, 40],
/* Profit % for Black, BW Print and Fashion
For North, -> 20, 30, 40 %
For East -> 35, 45, 55%
For West -> 45, 35, 50%
Four South -> 33, 42, 55%
*/
color: '#CD0000',
marker: {
lineWidth: 1,
lineColor: '#CD0000',
fillColor: '#CD0000'
}
}
]
});
});