how to place same highcharts series beside each other - php

Question

i am using highcharts for drawing column charts
i have a column chart with multiple series like this
and this is my code :
$(function () {
var chart;
$(document).ready(function() {
// Radialize the colors
Highcharts.getOptions().colors = Highcharts.map(Highcharts.getOptions().colors, function(color) {
return {
radialGradient: { cx: 0.5, cy: 0.3, r: 0.7 },
stops: [
[0, color],
[1, Highcharts.Color(color).brighten(-0.2).get("rgb")]
]
};
});
chart = new Highcharts.Chart({
chart: {
renderTo: "container"
},
title: {
text: "نمودار کلی عملکرد داوطلب",
style:
{
direction: "rtl",
fontSize: "16px"
}
},
yAxis: {
min: -33.3,
max: 100,
startOnTick: false,
title: {
enabled: true,
text: "درصد"
}
},
xAxis: {
categories: [' . implode(",", $chartCats) . ']
},
tooltip: {
formatter: function() {
return this.series.name+"<br/>% "+this.point.y+"<br/>";
}
},
plotOptions: {
column: {
dataLabels: {
enabled: true
},
pointWidth: 20
},
series: {
animation: {
duration: 3000
}
}
},
credits: {
enabled: false
},
series:
[' . $chartData . ']
});
});
});
how can i place all columns with same color beside each other?
for example : all blue columns beside each other then all red column beside each other

Answer 1

In general something like this is not supported, however you can split data into different arrays, as each column will be one series, just linked to 'master' one, see: http://jsfiddle.net/CVvjZ/
Of course this has limitations, since you need to pre calculate values for for x:
xAxis: {
min: 0,
startOnTick: true,
max: 1,
endOnTick: true,
categories: ['Jan', 'Feb', 'Mar']
},
plotOptions: {
column: {
grouping: false,
pointWidth: 20
}
},
series: [{
color: colors[0],
name: 'Tokyo',
id: 'tokyo',
data: [[0.3, 15]]
}, {
color: colors[0],
name: 'Tokyo',
linkedTo: 'tokyo',
data: [[0, 10]]
}, {
color: colors[0],
name: 'Tokyo',
linkedTo: 'tokyo',
data: [[-0.3, 10]]
},{
color: colors[1],
name: 'Osaka',
id: 'osaka',
data: [[1.3, 15]]
}, {
color: colors[1],
name: 'Osaka',
linkedTo: 'osaka',
data: [[1, 10]]
}, {
color: colors[1],
name: 'Osaka',
linkedTo: 'osaka',
data: [[0.7, 10]]
}]
There is also second solution, a little easier is to use stacking options instead of calculating values: http://jsfiddle.net/CVvjZ/1/
And code:
xAxis: {
categories: ['Jan', 'Feb', 'Mar']
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
color: colors[0],
stack: 1,
name: 'Tokyo',
id: 'tokyo',
data: [15]
}, {
color: colors[0],
stack: 2,
name: 'Tokyo',
linkedTo: 'tokyo',
data: [15]
}, {
color: colors[0],
stack: 3,
name: 'Tokyo',
linkedTo: 'tokyo',
data: [11]
},{
color: colors[1],
stack: 1,
name: 'Osaka',
id: 'osaka',
data: [[1,12]]
}, {
color: colors[1],
stack: 2,
name: 'Osaka',
linkedTo: 'osaka',
data: [[1,13]]
}, {
color: colors[1],
stack: 3,
name: 'Osaka',
linkedTo: 'osaka',
data: [[1,14]]
}]