Dan Rubio Dan Rubio - 2 months ago 5
jQuery Question

Why doesn't this simple Highcarts JS Fiddle example reset the XAxis with SetCategories call?

The title of the question says it all. I have this fiddle SetCateforiesFiddleExample

What I want to do is to change the categories from months to numbers as a simple example to apply to my real application. Can someone assit me as to why this fiddle doesn't properly set the categories to numbers?

$(function () {
$('#container').highcharts({

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

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]
}]
});


// the button action
$('#button').click(function () {
var chart = $('#container').highcharts();
chart.xAxis[0].remove(false);
chart.addAxis({
lineWidth: 2,
lineColor: '#08F'},
true,false);
chart.xAxis[0].setCategories(['1','2','3','4','5','6','7','8','9','10','11','12'], false);
chart.redraw();
});


});

Answer

Instead of removing your axis, adding new axis and set its categories, I would rather update axis with new categories and options using Axis.update():

    chart.xAxis[0].update({
    lineWidth: 2,
    lineColor: '#08F',
    categories: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
  },
  true, false);

Here you can see an example how it can work; http://jsfiddle.net/5tzjoq3h/17/

Comments