Highcharts Demo

author(s): Torstein Hønsi

by valk

HTML

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

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

JavaScript

Highcharts.chart('container', {
  "title": {
    "text": ""
  },
  "credits": {
    "enabled": false
  },
  "series": [{
    "name": "Metascore",
    "type": "line",
    "data": [88, 75, 77, 87, 93, 94, 95, 95, 88, 87, 94, 94],
    "color": "#000000",
    "zoneAxis": "y",
    "zones": [{
      "value": 35,
      "color": "#1db232"
    }, {
      "value": 47,
      "color": "#f6a200"
    }, {
      "value": 70,
      "color": "#f65700"
    }, {
      "value": 100,
      "color": "#f6004f"
    }]
  }],
  "chart": {
    "spacingBottom": 20,
    "spacingLeft": 0,
    "spacingRight": 0,
    "spacingTop": 20,
    "backgroundColor": "rgba(0,0,0,0)",
    "height": 250
  },
  "legend": {
    "enabled": false
  },
  "yAxis": {
    "title": {
      "text": ""
    },
    "tickPositions": [0, 35, 47, 70, 100],
    "labels": {}
  },
  "xAxis": {
    "categories": ["2020-02", "2020-03", "2020-04", "2020-05", "2020-06", "2020-07", "2020-08", "2020-09", "2020-10", "2020-11", "2020-12", "2021-01"],
    labels: {
                formatter: function() {
                    console.log(this.value);
                    return Highcharts.dateFormat('%b', Date.parse(this.value));
                }
            }
  },
  "tooltip": {}
});