Highcharts Demo

author(s): Torstein Hønsi

by Amit Sinha

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>

<div id=chart_ID class="chart" style="height: ; width: "></div>

JavaScript

var chart_id = chart_ID
var series = [{
  //'color': '#653487',
  'data': [1, 2, 1, 1, 2, 1, 2, 1, 2, 1, 1, 1, 2, 2, 2, 2, 1, 1, 1, 2, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
  'name': 'H'
}, {
  //'color': '#8A2BE2',
  'data': [2, 2, 1, 1, 2, 2, 1, 2, 2, 2, 2, 2, 1, 2, 2, 2, 1, 2, 2, 1, 2, 2, 1, 0, 0, 0, 0, 0, 0, 0],
  'name': 'P'
}, {
  //'color': '#FF00FF',
  'data': [1, 2, 2, 1, 2, 1, 1, 1, 1, 1, 2, 2, 1, 2, 1, 1, 1, 2, 1, 2, 1, 2, 1, 0, 0, 0, 0, 0, 0, 0],
  'name': 'C'
}]
var title = {
  'text': 'History for user',
  'style': {
    'color': '#653487',
    'font-size': '30px',
    'font-weight': 'bold'
  }
}
var xAxis = {
  'labels': {
    'style': {
      'font-size': '13px',
      'font-weight': 'bold'
    },
    'format': '{value:%d-%b-%y}'
  },
  'type': 'datetime',
  'categories': [1531267200000, 1531353600000, 1531440000000, 1531526400000, 1531612800000, 1531699200000, 1531785600000, 1531872000000, 1531958400000, 1532044800000, 1532131200000, 1532217600000, 1532304000000, 1532390400000, 1532476800000, 1532563200000, 1532649600000, 1532736000000, 1532822400000, 1532908800000, 1532995200000, 1533081600000, 1533168000000, 1533254400000, 1533340800000, 1533427200000, 1533513600000, 1533600000000, 1533686400000, 1533772800000]
}
var yAxis = {
  //'max': 7,
  'tickInterval': 1,
  'title': {
    'text': 'Types',
    'style': {
      'color': '#653487',
      'font-size': '20px',
      'font-weight': 'bold'
    }
  },
  stackLabels: {
    enabled: true
  },
}
var chart = {
  'width': 1500,
  'renderTo': 'chart_ID',
  'type': 'column',
  'height': 750,
  events: {
    load: function() {
      var stackLabelsValues = []
      for (let i = 0; i < this.userOptions.xAxis.categories.length; i++) {
        stackLabelsValues.push(this.yAxis[0].stacks.column[i].total);
      }

      var chart = this
      var series = this.series[0]
      var points = stackLabelsValues
      var newSeriesData = [
        [],
        [],
        []
      ]
      var newSeries = []
      //...