Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/variwide.js"></script>

<div id="container"></div>

CSS

#container {
  max-width: 800px;
  min-width: 380px;
  margin: 0 auto;
}

JavaScript

Highcharts.chart('container', {
  "boost": {
    "useGPUTranslations": true
  },
  "chart": {
    "backgroundColor": "transparent",
    "inverted": false,
    "spacingBottom": 38,
    "events": {}
  },
  "title": {
    "text": ""
  },
  "subtitle": {
    "text": "",
    "style": {
      "fontSize": "NaNpx",
      "fontFamily": "Arial, Helvetica, sans-serif"
    }
  },
  "legend": {
    "enabled": false,
    "align": "left",
    "verticalAlign": "top",
    "layout": "horizontal",
    "navigation": {
      "activeColor": "#494949",
      "animation": false,
      "arrowSize": 12,
      "inactiveColor": "#e2e2e2",
      "style": {
        "color": "#333",
        "fontFamily": "Arial, Helvetica, sans-serif",
        "fontSize": "12px",
        "fontWeight": "normal"
      }
    },
    "title": {
      "text": "",
      "style": {
        "color": "#777777",
        "fontFamily": "Arial, Helvetica, sans-serif",
        "fontSize": "12px",
        "fontWeight": "normal"
      }
    },
    "itemHoverStyle": {
      "color": "#777777"
    },
    "itemStyle": {
      "fontSize": "12px",
      "color": "#777777",
      "fontFamily": "Arial, Helvetica, sans-serif",
      "fontWeight": "normal"
    },
    "rtl": false,
    "padding": 16,
    "maxHeight": 52,
    "itemMarginBottom": 10,
    "itemDistance": 0,
    "itemWidth": 200,
    "singleSeriesEnabled": false,
    "useHTML": false
  },
  "xAxis": {
    "crosshair": true,
    "opposite": false,
    "lineColor": "#ccd6eb",
    "lineWidth": 1,
    "labels": {
      "autoRotation": [0],
      "enabled": true,
      "style": {
        "color": "#777777",
        "fontSize": "12px",
        "fontFamily": "Arial, Helvetica, sans-serif"
      },
      "useHTML": false,
      "rotation": 0,
      "events": {}
    },
    "title": {
      "text": "",
      "style": {
        "color": "#777777",
        "fontSize": 12,
        "fontFamily": "Arial, Helvetica, sans-serif"
      }
    },
    "visible": true,
    "categories":...