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"
  },
  xAxis: {
  	categories: [2019, 2020,2021,2022,2023,2024,2025]
  },
  "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",
      data: [1,7,13,19,26,32,38]
    },
    {
      "name": "market share",
      "turboThreshold": 0,
      data: [1,2,4,5,6,7,8]
    }
  ],
  "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
  }
});