date Time Label Formats for stock chart - Javascript highcharts

Javascript examples for highcharts:Chart Label

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

Description

date Time Label Formats for stock 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="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
var SERIES = [/*from  w w w  . j  a v  a 2 s.  com*/
{
    name: 'TEST',
    data: [
        [ Date.UTC(2014, 0, 1), 10.82413772161932 ],
        [ Date.UTC(2014, 1, 1), 0.10286926951274679 ],
        [ Date.UTC(2014, 2, 1), 0.4359489916094994 ],
        [ Date.UTC(2014, 3, 1), 0.4359489916094994 ]
    ]
}]
$(function () {
        $('#container').highcharts({
            chart: {
                type: 'spline'
            },
            title: {
                text: 'Snow depth at Vikjafjellet, Norway'
            },
            subtitle: {
                text: 'Irregular time data in Highcharts JS'
            },
            xAxis: {
                type: 'datetime',
                 tickPositioner: function() {
                     var ticks = [
                    Date.UTC(2014, 0, 1),
                    Date.UTC(2014, 1, 1),
                    Date.UTC(2014, 2, 1),
                    Date.UTC(2014, 3, 1)];
                     ticks.info = {
                    unitName: "day",
                    higherRanks: {} // Omitting this would break things
                };
                return ticks;
            },
                dateTimeLabelFormats: { // don't display the dummy year
                    month: '%e. %b',
                    year: '%b'
                },
                title: {
                    text: 'Date'
                }
            },
            yAxis: {
                title: {
                    text: 'Snow depth (m)'
                },
                min: 0
            },
            tooltip: {
                headerFormat: '<b>{series.name}</b><br>',
                pointFormat: '{point.x:%e. %b}: {point.y:.2f} m'
            },
            series: SERIES
        });
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials