Highcharts Demo

author(s): Øystein Moseng

by Rajesh Danabal

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/offline-exporting.js"></script>

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

CSS

#container {
    max-width: 800px;
    height: 400px;
    margin: 1em auto;
}

JavaScript

Highcharts.chart('container', {
  "boost": {
    "useGPUTranslations": false,
    "enabled": false
  },
  "mapNavigation": {},
  "chart": {
    "animation": false,
    "renderTo": {},
    "backgroundColor": "transparent",
    "enableDeviation": false,
    "zoomType": "xy",
    "marginLeft": null,
    "marginRight": null,
    "events": {},
    "inverted": false
  },
  "legend": {
    "singleSeriesEnabled": false,
    "useHTML": false,
    "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": "Legend",
      "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
  },
  "xAxis": {
    "categories": ["Aberdeen", "Abilene"],
    "min": 0,
    "scrollbar": {
      "enabled": false,
      "showFull": false,
      "height": 7,
      "buttonArrowColor": "#b7b7b7",
      "rifleColor": "#cccccc",
      "buttonBorderRadius": 2
    },
    "labels": {
      "events": {},
      "rotation": -90,
      "useHTML": true,
      "autoRotation": [0, -90],
      "enabled": true,
      "step": 0,
      "style": {
        "color": "#777777",
        "fontSize": "12px",
...