date time data on column type in column stack chart - Javascript highcharts

Javascript examples for highcharts:Column Chart

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

Description

date time data on column type in column stack chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Highcharts Demo</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
   </head> 
   <body> 
      <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="height: 400px; min-width: 310px"></div> 
      <script type="text/javascript">
// Create the chart
Highcharts.chart('container', {
  global: {//w  w  w. j  av a 2  s .  c  om
    useUTC: false
  },
  title: {
    text: '',
    x: -20 //center
  },
  subtitle: {
    text: '',
    x: -20
  },
  xAxis: {
    categories: [],
    labels: {
      formatter: function() {
        return '#' + this.value;
      }
    }
  },
  yAxis: {
    title: {
      text: ''
    },
    type: 'datetime',
    dateTimeLabelFormats: {
      millisecond: '%H:%M:%S',
      second: '%H:%M:%S',
      minute: '%H:%M:%S',
      hour: '%H:%M:%S'
    },
    _labels: {
      format: '{value:%H:%M:%S}'
    },
    gridLineWidth: 0
  },
  tooltip: {
    enabled: true,
    type: 'datetime',
    formatter: function() {
      return Highcharts.dateFormat('%H:%M:%S', new Date(this.y))
    }
  },
  legend: {
    enabled: false
  },
  plotOptions: {
    series: {
      pointPadding: 0.05,
      groupPadding: 0
    },
    column: {
      stacking: 'normal'
    },
    line: {
      marker: {
        radius: 2,
        fillColor: '#ad050b'
      },
      dashStyle: 'ShortDash',
      lineWidth: 1,
    }
  },
  series: [{
    "name": "Estimate",
    "type": "column",
    "data": [1517018400000, 1517014800000, 1517014800000, 1517018400000, 1517017200000, 1517015700000, 1517013900000, 1517013900000, 1517013900000]
  }, {
    "name": "Process",
    "type": "column",
    "data": [1517018400000, 1517013666000, 1517014800000, 1517016664000, 1517015107000, 1517014984000, 1517013604000, 1517013900000, 1517013900000]
  }]
});

      </script>  
   </body>
</html>

Related Tutorials