Highcharts Line Chart XAxis Label Order

Question

Is there currently a way to reverse the order of the line chart xaxis labels to make the labels ordered in an ascending manner and have the far right tick be the 'start'? My current code looks like this:

legend: { enabled: false},
  xAxis: {
    title: { text: null},
    categories: chartCategories,
    tickmarkPlacement: 'on',
    labels: {
        useHTML: false,
        step: 2,
        rotation: -40
    },
    y: 30
}

Here is my example

http://jsfiddle.net/skqshs9e/1/

I have sorted my data array to be in the correct order and it displays the labels in ascending order BUT it still does not treat the furthest right tick mark as the starting point. If you hover over the last plot you will see the label '2015-12-19 - 2015-12-31' in the tooltip.

I want that to be the starting point and show on the xaxis and step 2 and not have the first one '2015-01-01 - 2015-02-01' show on the xaxis. Any help would be appreciated!

Paweł Fus Paweł Fus · Accepted Answer · 2015-07-01T10:52:24

You can always reverse your data: http://jsfiddle.net/skqshs9e/4/

var chartCategories = [
    '2015-01-01 - 2015-02-01',
    '2015-02-02 - 2015-03-04',
    '2015-03-05 - 2015-04-05',
    '2015-04-06 - 2015-05-06',
    '2015-05-07 - 2015-06-08',
    '2015-06-09 - 2015-07-10',
    '2015-07-11 - 2015-08-11',
    '2015-08-12 - 2015-09-12',
    '2015-09-13 - 2015-10-14',
    '2015-10-15 - 2015-11-16',
    '2015-11-17 - 2015-12-18',
    '2015-12-19 - 2015-12-31'
].reverse();
$('#container').highcharts({
    legend: { enabled: false},
    xAxis: {
        title: { text: null},
        categories: chartCategories,
        tickmarkPlacement: 'on',
        labels: {
            useHTML: false,
            step: 2,
            rotation: -40
        },
        y: 30
    },

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

Highcharts Line Chart XAxis Label Order

2 Answers