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

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

CSS

#container {
  max-width: 800px;
  min-width: 380px;
  margin: 0 auto;
}
.fade-out {
    opacity: 0.4;
}

JavaScript

Highcharts.chart('container', {
  "title": {
    "text": ""
  },
  "subtitle": {
    "text": ""
  },
  "legend": {
    "enabled": true,
    "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": "",
    },
    "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": {
      "enabled": true,
      "step": 1,
      "style": {
        "color": "#777777",
        "fontSize": "12px",
        "fontFamily": "Arial, Helvetica, sans-serif"
      },
      "useHTML": true,
      "autoRotation": [-90],
      "rotation": -90,
      "overflow": "justify",
      "reserveSpace": true
    },
    "title": {
      "text": "",
      "style": {
        "color": "#777777",
        "fontSize": 12,
        "fontFamily": "Arial, Helvetica, sans-serif"
      }
    },
    "visible": true,
    "categories": [
      "ADEL",
      "ACKLEY"
    ],
    "tickmarkPlacement": "on"
  },
  "yAxis": {
    "gridLineColor": "#e6e6e6",
    "gridLineDashStyle": "solid",
    "gridLineWidth": 1,
    "lineColor": "#ccd6eb",
    "lineWidth": 1,
    "labels": {
      "enabled": true,
      "style": {
        "color": "#777777",
        "fontSize": "12px",
        "fontFamily": "Arial, Helvetica,...