Set Line Chart XAxis Label Order - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

Set Line Chart XAxis Label Order

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {/*from  w w w  .  j  a v a2s  .c o  m*/
    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()
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px; width: 500px"></div>  
   </body>
</html>

Related Tutorials