Highcharts Demo

author(s): Torstein Hønsi

by Rajan Paneru

HTML

<script src="https://code.highcharts.com/stock/highstock.js"></script>

<div id="container" style="height: 400px; min-width: 500px"></div>

CSS

body {
  background-color: #002b52;
}

JavaScript

var data = {
  "dates": ["2021-06-01", "2021-06-22", "2021-06-23", "2021-06-24", "2021-06-25", "2021-06-26", "2021-06-27", "2021-06-28", "2021-06-29", "2021-06-30", "2021-07-01", "2021-07-02", "2021-07-03", "2021-07-04", "2021-07-05", "2021-07-06", "2021-07-07", "2021-07-08", "2021-07-09", "2021-07-10", "2021-07-11", "2021-07-12", "2021-07-13", "2021-07-14", "2021-07-15", "2021-07-16", "2021-07-17", "2021-07-18", "2021-07-19", "2021-07-20", "2021-07-21", "2021-07-22", "2021-07-23", "2021-07-24", "2021-07-25", "2021-07-26", "2021-07-27", "2021-07-28", "2021-07-29", "2021-07-30", "2021-07-31", "2021-08-01", "2021-08-02", "2021-08-03", "2021-08-04", "2021-08-05"].map(date => +new Date(date)),
  "counts": [0, 1, 3, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 2, 3, 1, 1, 0, 0, 0, 2, 1, 1, 0, 0, 1, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1]
}

Highcharts.chart('container', {
  chart: {
    type: 'area',
    backgroundColor: 'transparent'
  },
  title: {
    text: null
  },
  // turn off the highcharts credit
  credits: {
    enabled: false
  },
  tooltip: {
    backgroundColor: null,
    borderWidth: 0,
    shadow: false,
    useHTML: true,
    style: {
      padding: 0,
      color: '#fff'
    },
    formatter: function() {
      if ('z' in this.point) {
        return '<div class="tool-tip-date">' + this.point.category + '</div><div class="tool-tip-note"> ' + this.point.z + '</div>';
      } else {
        return false;
      }
    }
  },
  xAxis: {
    lineWidth: 0,
    type: 'datetime',
    gridLineWidth: 1,
    labels: {
      align: 'center'
    }
  },
  yAxis: {
    lineWidth: 0,
    gridLineWidth: 0,
    title: false,
    labels: {
      enabled: false
    },
  },
  plotOptions: {
    series: {
      pointStart: +new Date('2021-06-01'),
      pointInterval: 1,
      pointIntervalUnit: 'month',
      cursor: 'pointer',
      fillColor: {
        linearGradient: {
          x1: 0,
          x2: 0,
          y1: 0,
          y2: 1
        },
        stops: [
  ...