Highcharts Demo

author(s): Torstein Hønsi

by Rajesh Danabal

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<div id="container-left" style="height: 200px"></div>
<div id="container-right" style="height: 200px"></div>

<div id="areaspline-left" style="height: 200px"></div>
<div id="areaspline-right" style="height: 200px"></div>


<div id="column-left" style="height: 200px"></div>
<div id="column-right" style="height: 200px"></div>

JavaScript

Highcharts.chart('container-left', {
  "xAxis": {
    "categories": ["Product 1", "Product 2"]
  },
  "plotOptions": {
    "series": {
      "animation": false,
      "dataLabels": {
        "align": "left",
        "enabled": true
      },
      "allowPointSelect": true,
      "borderWidth": 0,
      "states": {
        "inactive": {
          "opacity": 1
        },
        "hover": {
          "enabled": false,
          "halo": {
            "opacity": 1
          }
        }
      },
      "pointPadding": 0,
      "groupPadding": 0.04
    }
  },
  "series": [{
    "name": "Non Renewable",
    "color": "#744EC2",
    "data": [{
      "y": 92,
      "color": "#744EC2",
    },{
      "y": 52,
      "color": "#744EC2",
    }],
    "id": "Non Renewable - 0",
    "yAxis": 0,
    "type": "column",
    "stack": 0,
    "stacking": "normal",
    "visible": true
  }, {
    "name": "Renewable",
    "color": "#D9B300",
    "data": [{
      "y": 113,
      "color": "#D9B300",
    },{
      "y": 73,
      "color": "#D9B300",
    }],
    "id": "Renewable - 0",
    "yAxis": 0,
    "type": "column",
    "stack": 0,
    "stacking": "normal",
    "visible": true
  },{
    "name": "Non Renewable",
    "linkedTo": "Non Renewable - 0",
    "color": "#744EC2",
    "data": [{
      "y": 15,
      "color": "#744EC2",
    },{
      "y": 165,
      "color": "#744EC2",
    }],
    "id": "Non Renewable - 1",
    "yAxis": 0,
    "type": "areaspline",
    "stack": 0,
    "stacking": "normal",
    "visible": true
  }, {
    "name": "Renewable",
    "linkedTo": "Renewable - 0",
    "color": "#D9B300",
    "data": [{
      "y": 120,
      "color": "#D9B300",
    },{
      "y": 130,
      "color": "#D9B300",
    }],
    "id": "Renewable - 1",
    "yAxis": 0,
    "type": "areaspline",
    "stack": 0,
    "stacking": "normal",
    "visible": true
  }],
  "title":{
  "text": "Aligned Left"
  }
});
Highcharts.chart('container-right', {
  "xAxis": {
    "categories": ["Product 1", "Product 2"]
 ...