Highcharts: Avoid showing extra x axis points when max x-axis value defined

Question

I have a Highchart where i am showing a scrollbar. i have defined the
xAxis: { min:0, max:6,

For instances where data is less than 6 grids..it shows extra points with null. How to avoid showing those extra points?

In the below example see the extra points are 12,13, 14..I want to remove them. http://jsfiddle.net/highcharts/fj6d2/

var chart = new Highcharts.Chart({

chart: {
    renderTo: 'container'
},

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    min: 0,
    max: 14
},

legend: {
    verticalAlign: 'top',
    y: 100,
    align: 'right'
},

scrollbar: {
    enabled: true
},

series: [{
    data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]
}]

});

here is a relevant feature request that you can add your votes and comments to: highcharts.uservoice.com/forums/55896-general/suggestions/… — jlbriggs

Paweł Fus Paweł Fus · Accepted Answer · 2013-08-20T10:25:34

You can simply get length of data, and then set proper max, see: http://jsfiddle.net/Fusher/fj6d2/2378/

var data = [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4],
    len = data.length;

len = len < 6 ? len : 6;

Then in options for Highcharts:

xAxis: {
    categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
    min: len
},
series: [{ 
    data: data 
}]

Highcharts: Avoid showing extra x axis points when max x-axis value defined

1 Answers