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,
    "events": {}
  },
  "title": {
    "text": ""
  },
  "subtitle": {
    "text": ""
  },
  "legend": {
    "enabled": true,
    "align": "left",
    "verticalAlign": "top",
    "layout": "horizontal",
    "navigation": {
      "activeColor": "#494949",
      "animation": false,
      "arrowSize": 10,
      "inactiveColor": "#e2e2e2",
      "style": {
        "color": "#333",
        "fontFamily": "\"Segoe UI\", wf_segoe-ui_normal, helvetica, arial, sans-serif",
        "fontSize": "10px",
        "fontWeight": "normal"
      }
    },
    "title": {
      "text": "Segment",
      "style": {
        "color": "#777777",
        "fontFamily": "\"Segoe UI\", wf_segoe-ui_normal, helvetica, arial, sans-serif",
        "fontSize": "10px",
        "fontWeight": "normal"
      }
    },
    "itemHoverStyle": {
      "color": "#777777"
    },
    "itemStyle": {
      "fontSize": "10px",
      "color": "#777777",
      "fontFamily": "\"Segoe UI\", wf_segoe-ui_normal, helvetica, arial, sans-serif",
      "fontWeight": "normal"
    },
    "rtl": false,
    "padding": 16,
    "itemMarginTop": 2,
    "maxHeight": 68,
    "itemMarginBottom": 10,
    "itemDistance": 10,
    "singleSeriesEnabled": false,
    "useHTML": false
  },
  "xAxis": [{
    "crosshair": true,
    "opposite": false,
    "lineColor": "#ccd6eb",
    "lineWidth": 0,
    "labels": {
      "useHTML": false,
      "autoRotation": [0, -45, -90],
      "rotation": 0,
      "enabled": true,
      "style": {
        "color": "#777777",
        "fontSize": "11px",
        "fontFamily": "\"Segoe UI\", wf_segoe-ui_normal, helvetica, arial, sans-serif"
      },
      "events": {}
    },
    "title": {
      "text": "",
      "style": {
        "color": "#777777",
        "fontSize": "12px",
        "fontFamily": "\"Segoe UI\", wf_segoe-ui_normal, helvetica, arial,...