Highcharts Demo

author(s): Torstein Hønsi

by rafaelrozon

HTML

<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"></div>

JavaScript

Highcharts.chart('container', {
  "chart": {
    "type": "column",
    "zoomType": "x",
    "spacingRight": 20,
    "spacingTop": 80,
    "backgroundColor": "Transparent",
    "style": {
      "fontFamily": "montserrat"
    }
  },
  "title": {
    "text": null
  },
  "credits": {
    "enabled": false
  },
  "subtitle": {
    "text": null
  },
  "xAxis": {
    "type": "datetime",
    "title": {
      "text": null
    },
    "lineWidth": 1,
    "gridLineWidth": 0,
    "tickWidth": 0,
    "labels": {
      "enabled": true,
      "style": {
        "color": "#333"
      }
    },
    "tickInterval": 3600000,
    "startOnTick": true,
    "endOnTick": true,
    "tickPositions": [
      1531378800000,
      1531382400000,
      1531386000000,
      1531389600000,
      1531393200000,
      1531396800000,
      1531400400000,
      1531404000000,
      1531407600000,
      1531411200000,
      1531414800000,
      1531418400000,
      1531422000000,
      1531425600000,
      1531429200000,
      1531432800000,
      1531436400000,
      1531440000000,
      1531443600000,
      1531447200000,
      1531450800000,
      1531454400000,
      1531458000000,
      1531461600000
    ]
  },
  "yAxis": {
    "title": {},
    "gridLineDashStyle": "dot",
    "gridLineColor": "#fff",
    "gridLineWidth": 0,
    "tickPixelInterval": 80,
    "endOnTick": false,
    "lineWidth": 0,
    "labels": {
      "enabled": true
    },
    "min": 0
  },
  "legend": {
    "itemStyle": {
      "color": "#333",
      "cursor": "pointer",
      "fontSize": "12px",
      "fontWeight": "normal"
    }
  },
  "tooltip": {
    "shared": true
  },
  "plotOptions": {
    "series": {
      "stacking": "normal",
      "dataLabels": {
        "enabled": false
      }
    },
    "column": {
      "dataLabels": {
        "enabled": true
      },
      "borderWidth": 0
    }
  },
  "series": [
    {
      "pointInterval": 86400000,
      "pointStart": 0,
      "name": "smb.frequency_graph_high",
      "color":...