Space in clustered chart
by amrutaJgtp
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
JavaScript
var justifyColumns = function (chart) {
console.log("Chart plot size X = "+chart.plotSizeX);
var categoriesWidth = chart.plotSizeX / (1 + chart.xAxis[0].max - chart.xAxis[0].min),
distanceBetweenColumns = 0,
each = Highcharts.each,
sum, categories = chart.xAxis[0].categories,
number;
for (var i = 0; i < categories.length; i++) {
sum = 0;
each(chart.series, function (p, k) {
if (p.visible) {
each(p.data, function (ob, j) {
if (ob.category == categories[i]) {
sum++;
}
});
}
});
console.log("Sum = "+sum);
distanceBetweenColumns = categoriesWidth / (sum + 1);
console.log("Distance betn columns = "+distanceBetweenColumns);
number = 1;
each(chart.series, function (p, k) {
if (p.visible) {
each(p.data, function (ob, j) {
if (ob.category == categories[i]) {
console.log("PointWidth = "+ob.pointWidth);
ob.graphic.element.x.baseVal.value = i * categoriesWidth + distanceBetweenColumns * number - ob.pointWidth / 2;
console.log("Element x base value = "+ob.graphic.element.x.baseVal.value);
number++;
}
});
}
});
}
};
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
load: function () {
justifyColumns(this);
},
redraw: function () {
justifyColumns(this);
}
}
},
title: {
text: 'Monthly Average Rainfall'
},
subtitle: {
text: 'Source: WorldClimate.com'
},
zoomType: "xy",
xAxis: {
categories: [
'Jan',
'Feb',
'Mar',
...