Highcharts Demo

author(s): Torstein Hønsi

by Sundarapandiyan_pa

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<div id="container"></div>

CSS

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

JavaScript

Highcharts.chart('container', {
  "title": {
    "text": ""
  },
  "chart": {
    "type": "waterfall"
  },
  "xAxis": {
    "title": {
      "text": "State"
    },
    "categories": [
      "CA",
      "WA",
      "OR",
      "NY",
      "IL",
      "MA"
    ]
  },
  "yAxis": [
    {
      "title": {
        "text": "Net Sales ($)"
      }
    },
    {
      "title": {
        "text": "Gross Sales ($)"
      }
    },
    {
      "title": {
        "text": "Check Count"
      }
    }
  ],
  "series": [
    {
      "name": "Net Sales ($)",
      "data": [
        12187898.1800008,
        1327186.45000002,
        834915.270000005,
        646857.780000003,
        623318.280000003,
        418957.119999999
      ],
      "yAxis": 0,
      "marker": {
        "symbol": "circle"
      }
    },
    {
      "name": "Gross Sales ($)",
      "data": [
        128352323.1400009,
        1368097.82000002,
        867654.750000005,
        687035.740000003,
        651357.040000003,
        431888.969999999
      ],
      "yAxis": 1,
      "marker": {
        "symbol": "circle"
      }
    },
    {
      "name": "Check Count",
      "data": [
        609348,
        68741,
        41863,
        36519,
        36800,
        20279
      ],
      "marker": {
        "symbol": "circle"
      }
    }
  ],
  "plotOptions": {
    "series": {
      "stacking": "normal"
    }
  }
});