0
432
ViewsHow to create constant space between bars/columns in Highcharts?
When I say space, I mean not only the space between bars/columns, but also the space between the sides of the chart (y axis and other size). I am looking at this example
Highcharts.chart('container', {
chart: {
type: 'column',
},
plotOptions: {
column: {
stacking: 'normal',
groupPadding: 0.3,
pointPadding: 0,
pointWidth: 20,
}
},
series: [{
data: [5, 3, 4]
}, {
data: [2, 2, 3]
}]
});<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container"></div>
As you see, there is EQUAL SPACING between 0-1, and 1-2, BUT the spacing it NOT equal between the Y-Axis to 0, and 2 to the right side of the chart (the opposite side of the Y axis). How do I adjust these? Can I set them to a set pixel padding/margin for between the Y axis and the 0 bar, and similarly to the other side?
1 answers
Answer question0
You can use minPadding and maxPadding properties, but their value is relative to the length of the axis.
You can also define pointRange as 2 and correct ticks by using tickPositions or tickPositioner:
plotOptions: {
column: {
stacking: 'normal',
pointRange: 2,
pointWidth: 20,
}
},
xAxis: {
maxPadding: 0,
minPadding: 0,
tickPositions: [0, 1, 2]
},
Live demo: http://jsfiddle.net/BlackLabel/2xdwuah9/
Finally, you can reset default margins and specify min and max for the x-axis:
plotOptions: {
column: {
stacking: 'normal',
pointRange: 0,
pointWidth: 20,
}
},
xAxis: {
maxPadding: 0,
minPadding: 0,
min: -1,
max: 3
},
Live demo: http://jsfiddle.net/BlackLabel/96pw12u0/
API Reference:
https://api.highcharts.com/highcharts/xAxis.minPadding
https://api.highcharts.com/highcharts/series.column.pointRange