Highcharts Demo

author(s): Torstein Hønsi

by Gert Vaartjes

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/data.js"></script>


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

CSS

#container {
    height: 300px;
    max-width: 800px;
    margin: 2em auto;
}
pre {
    border: 1px solid silver;
    border-radius: 0.5em;
    padding: 1em;
    color: green;
}

JavaScript

var chart = new Highcharts.Chart('container', {
  "title": {
    "text": "My Chart"
  },
  "subtitle": {
    "text": "My Untitled Chart"
  },
  "yAxis": [
    {
      "_linkedTo": 0,
      "title": {
        "text": "Gas Export, bcm"
      },
      gridLineColor: '#197F07',
      gridLineWidth: 2,
      "max": 40,
      "tickColor": "#212121",
      "tickPixelInterval": 100,
      "visible": true
    },
    {
      "title": {
        "text": "Market Share %"
      },
      "_linkedTo": 1,
      "max": 10,
      "min": 0,
      "maxZoom": 38,
      "opposite": true
    }
  ],
  "series": [
    {
    	
      "name": "Gas Export",
      "turboThreshold": 0,
      "type": "column"
    },
    {
      "name": "market share",
      "turboThreshold": 0
    }
  ],
  "plotOptions": {
    "series": {
      "dataLabels": {
        "enabled": true
      }
    }
  },
  "data": {
    "csv": "\"Column 1\";\"Gas Export\";\"market share\"\n\"2019E\";1;0\n\"2020E\";7;2\n\"2021E\";13;4\n\"2022E\";19;5\n\"2023E\";26;6\n\"2024E\";32;7\n\"2025E\";38;8",
    "googleSpreadsheetKey": false,
    "googleSpreadsheetWorksheet": false
  }
});