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', {

  "yAxis": {
    "gridLineColor": "#e6e6e6",
    "gridLineDashStyle": "solid",
    "gridLineWidth": 1,
    "lineColor": "#ccd6eb",
    "lineWidth": 1,
    "labels": {
      "enabled": true,
      "style": {
        "color": "#777777",
        "fontSize": "12px",
        "fontFamily": "Arial, Helvetica, sans-serif"
      },
      "step": 1
    },
    "title": {
      "text": "",
      "style": {
        "color": "#777777",
        "fontSize": "12px",
        "fontFamily": "Arial, Helvetica, sans-serif"
      }
    },
    "type": "logarithmic",
    "reversedStacks": false,
    "visible": true,
    "min": null,
    "max": 100
  },
  "plotOptions": {
    "variwide": {
      "allowPointSelect": true,
      "stacking": "percent"
    }
  },
  "series": [{
    "allowPointSelect": true,
    "colorByPoint": true,
    "data": [{
      "allowPointSelect": true,
      "grouping": false,
      "name": "Sale (Dollars) - ACKLEY",
      "id": "Sale (Dollars) - ACKLEY",
      "value": 490.2,
      "xAxisLabel": "City",
      "highlightValue": 0,
      "x": 0,
      "y": 100,
      "highlightValueY": 0,
      "z": 490.2
    }],
    "name": "(Blank)",
    "id": "(Blank)",
    "type": "variwide",
    "stacking": "percent",
    "seriesIndexNumber": 0
  }],
});