JSFiddle - React, Tailwind, and code Playground

by canvasjs

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

var dataPoints = [];

var chart = new CanvasJS.Chart("chartContainer", {
  animationEnabled: true,
  title: {
    text: "Basic Column Chart with Index"
  },
  data: [{
    type: "splineArea",
    dataPoints: dataPoints,
    xValueFormatString:"D/MM"
  }]
});

function addData(data) {
  var lowest = data[0].ppm, highest = data[0].ppm, label;
  for(var i = 0; i < data.length; i++){
  	var ppm = Number(data[i].ppm);
    highest = (highest >= ppm) ? highest : ppm;
    lowest = 	(lowest <= ppm) ? lowest : ppm;
  }

  for (var j = 0; j < data.length; j++) {
  	var yValue = Number(data[j].ppm);
    label = ( yValue === highest ||  yValue === lowest)?( yValue===highest?"high":"low"):"";
    dataPoints.push({
      x: new Date(data[j].time),
      y:  yValue,
      indexLabel: label
    });
  }
  chart.render();
}

$.getJSON("https://api.myjson.com/bins/1g0yt2", addData);