How would I get rid of the 'invisible' spacing as indicated in the picture?
I intend to use the chart in inverted mode (as a gantt chart), but this shows the gaps more obvious. To be able to play with it: http://jsfiddle.net/j03ceom5/
I consired an 'xrange' type but it has the same issue: https://jsfiddle.net/agxu6ffc/
-inserting some code snippet to get the jsfiddle links accepted, eventhough it's not necessarily needed to understand the question-
chart: {
renderTo: 'container',
type: 'columnrange',
inverted:false,
},
You can use workaround which justify columns redraw / load chart event.
var justifyColumns = function (chart) {
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++;
}
});
}
});
distanceBetweenColumns = categoriesWidth / (sum + 1);
number = 1;
each(chart.series, function (p, k) {
if (p.visible) {
each(p.data, function (ob, j) {
if (ob.category == categories[i]) {
ob.graphic.element.x.baseVal.value = i * categoriesWidth + distanceBetweenColumns * number - ob.pointWidth / 2;
number++;
}
});
}
});
}
};
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.