Highcharts Demo

author(s): Torstein Hønsi

HTML

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

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

CSS

#container {
  min-width: 310px;
  height: 400px;
  margin: 0 auto;
}

JavaScript

let data = [],
  zones = [];

Highcharts.chart('container', {
  chart: {
    type: 'spline',
    marginRight: 10,
  },

  time: {
    useUTC: false
  },

  title: {
    text: ''
  },
  xAxis: {
    type: 'datetime',
    tickPixelInterval: 150
  },
  yAxis: {
    title: {
      text: 'Value'
    },
    plotLines: [{
      value: 0,
      width: 1,
      color: '#808080'
    }]
  },
  tooltip: {
    headerFormat: '<b>{series.name}</b><br/>',
    pointFormat: '{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}'
  },
  legend: {
    enabled: false
  },
  exporting: {
    enabled: false
  },
    series: [{
      name: 'Random data',
      colorByPoint: true,
      data: (function() {
        // generate an array of random data
        var time = (new Date()).getTime(),
          i,
          yValue;

        for (i = -19; i <= 0; i += 1) {
          yValue = Math.random();

          if (i > -19 && yValue > data[data.length - 1].y) { // Green point
            zones.push({
              color: "#5f9",
              value: time + i * 1000,
            });
          } else if (i > -19 && yValue <= data[data.length - 1].y) { // black point
            zones.push({
              color: "#000",
              value: time + i * 1000,
            });
          } else { // first point alway green
            zones.push({
              color: "#5f9",
              value: time + i * 1000,
            });
          }
          data.push({
            x: time + i * 1000,
            y: yValue
          });
        }
        return data;
      }()),
      zoneAxis: "x",
      zones: zones
    }]
});