CODEWITHSUNDEEP
javascriptjqueryhighcharts
looshi
looshi

Reputation: 1236

Highcharts - set xAxis range when using xAxis Categories?

How to update the highcharts xAxis range at runtime when using xAxis Categories ?

In the following JsFiddle, the desired result is when the user clicks 'All Months' they will see the full series data, and when the user clicks 'Two Months' , they will see only two months of data.

http://jsfiddle.net/looshi/4tuvC/453/

I've tried to use the xAxis functions setExtremes, and setCategories, but can't get it to work.

var chart = new Highcharts.Chart({

    chart: {
        renderTo: 'container'
    },

    xAxis: {
        categories: ['Jan', 'Feb', 'Mar']
    },

    series: [{
        data: [29.9, 71.5, 106.4]
    }]

});

$('#show-all-months').click(function() {
    //chart.xAxis[0].setCategories(['Jan', 'Feb','Mar']);
    chart.xAxis[0].setExtremes(0,2);
});

$('#show-two-months').click(function() {
    //chart.xAxis[0].setCategories(['Jan', 'Feb']);
    chart.xAxis[0].setExtremes(0,1);
});

Upvotes: 1

Views: 1244

Answers (1)

Kacper Madej
Kacper Madej

Reputation: 7886

As Nathan already pointed out in his comment - you are setting extremes that are below default minRange, so to fix this you could set mentioned option to e.g. 1.

...
xAxis: {
    categories: ['Jan', 'Feb', 'Mar'],
    minRange: 1
},
...

JSFiddle: http://jsfiddle.net/4tuvC/468/

Upvotes: 2

Related Questions