show custom date on xAxis in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

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

Description

show custom date on xAxis in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="code.jquery.com/jquery-3.1.1.js"></script> 
      <script type="text/javascript">
    window.onload=function(){//from  ww  w.  j  a v  a  2 s.c  o m
$(function() {
  var data = [
    [1456731000000, 2965015374],
    [1459409400000, 5930030748],
    [1462001400000, 522930401.058],
    [1464679800000, 1568791203.174],
    [1467271800000, 2353186804.762],
    [1469950200000, 3529780207.144],
    [1472628600000, 3529780207.144],
    [1475220600000, 980494501.984],
    [1477899000000, 245123625.496],
    [1480491000000, 490247250.992],
    [1483169400000, 980494501.984]
  ];
  Highcharts.stockChart('container', {
    rangeSelector: {
      selected: 5
    },
    title: {
      text: 'AAPL Stock Price'
    },
    xAxis: {
      type: 'datetime',
      tickInterval: 30 * 24 * 3600 * 1000,
      labels: {
        formatter: function() {
          return Highcharts.dateFormat('%e. %b', this.value - 3600000);
        }
      },
    },
    series: [{
      name: 'AAPL',
      data: data,
      tooltip: {
        valueDecimals: 2
      }
    }]
  });
});
    }

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/stock/highstock.js"></script> 
      <script src="https://code.highcharts.com/stock/modules/exporting.js"></script> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-3.1.1.js"></script> 
      <div id="container" style="height:400px;min-width:310px;"></div>  
   </body>
</html>

Related Tutorials