Highcharts Demo

author(s): Torstein Hønsi

by Torstein Hønsi

HTML

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

<div id="container" style="height: 400px"></div>

JavaScript

Highcharts.wrap(Highcharts.Axis.prototype, 'alignToOthers', function(proceed) {
	if (this.options.min === undefined && this.options.max === undefined) {
    	return proceed.call(this);
    }
    return;
});

var options = {
  "title": {
    "text": "My Chart"
  },
  "subtitle": {
    "text": "My Untitled Chart"
  },
  "yAxis": [{
    "title": {
      "text": "Gas Export, bcm"
    },
    "max": 40,
    "opposite": true,
    "gridLineWidth": 0,
    "lineWidth": 1,
    "minorTickWidth": 0,
    "minorTickLength": 2,
    "tickWidth": 2,
    "tickColor": "#b0bec5",
    "tickInterval": 5,
    "tickLength": 5,
    "tickPixelInterval": 25
  }, {
    "title": {
      "text": "Market Share, %"
    },
    "max": 8,
    "labels": {
      "format": "{value} %"
    },
    "tickInterval": 1,
    "tooltipValueFormat": "undefined",
    "lineColor": "#ccd6eb",
    "gridLineWidth": 0,
    "gridLineColor": "#e6e6e6",
    "tickWidth": 1,
    "tickLength": 5,
    "lineWidth": 1,
    "tickPixelInterval": 25
  }],
  "series": [{
    "name": "Export Gas",
    "turboThreshold": 0,
    "type": "column"
  }, {
    "name": "Market Share",
    "turboThreshold": 0,
    "yAxis": 1
  }],
  "pane": {
    "background": []
  },
  "responsive": {
    "rules": []
  },
  "data": {
    "csv": "\"Year\";\"Export Gas\";\"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
  }
}


Highcharts.chart('container',options);