Removing DataPoint from x-axis redraw issues
We get strange behavior when removing a data point from a chart inside a load event.
We are using Highcharts JS v4.1.7 (2015-06-26).
If the series contains more than 6 data points and we delete the first data point, the chart re-draws correctly. When a series has 6 or fewer data points, the deleted data label is still visible. As well as as a label for a new category, which appears to be the original number of categories (eg 6). See screenshots below:
Working:
Does not work:
This is the load event code that we are using in the example that does not work
$(function () {
// create the chart
$('#container').highcharts({
chart: {
events: {
load: function () {
var chart = $('#container').highcharts(),
series = chart.series[0];
if (series.data.length) {
chart.series[0].data[0].remove();
}
}
}
},
xAxis: {
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
series: [{
data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0]
}]
});
});
Here are JsFiddle examples showing it works and doesn't work
- working - http://jsfiddle.net/arty_/418xcrq9/
- doesn't work - http://jsfiddle.net/arty_/0cu5cu9t/
Any suggestions to fix this
Greetings
source to share
This is because of the behavior of xAxis minRange
( docs ), which defines the minimum range the axis should show. In your case, it defaults to 5, which explains why it tries to maintain a wider axis even when you lose points. Set minRange to something below (like 1) and you shouldn't have any problems!
xAxis: {
minRange: 1,
categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun']
},
source to share