Column Chart Weird X Axis Behavior
When using column charts, the x axis goes beyond min and max values if more than one element in the series data is present.
by piet23
HTML
<script src="https://code.highcharts.com/highcharts.js"></script>
<figure class="highcharts-figure">
<div id="container1"></div>
</figure>
<figure class="highcharts-figure">
<div id="container2"></div>
</figure>
JavaScript
// Here, with two elements in the series data, the x axis starts somewhere below the min of 0 and ends somewhere after the max of 10
Highcharts.chart('container1', {
chart: {
type: 'spline'
},
series: [{
data: [
{x: 1, y: 1},
{x: 2, y: 2},
{x: 3, y: 1.5},
{x: 5, y: 2},
{x: 6, y: 1}
]
}]
});
// Here, with a single element in the series data, the x axis starts and ends exactly at the min and max values
Highcharts.chart('container2', {
chart: {
type: 'column'
},
xAxis: {
min: 0,
max: 10,
plotBands: [
{
color: 'orange',
from: 5,
to: 6
}
]
},
series: [{
data: [
{x: 2.5, y: 1}
]
}]
});