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 chart = new CanvasJS.Chart("chartContainer", {
  "data": [{
      "name": "minutes_avg",
      "type": "column",
      "color": "#C6EAB2",
      "showInLegend": true,
      "dataPoints": [
      		{ "y": 0.07847, "x": new Date(2018, 09, 17) },
          { "y": 0.00076, "x": new Date(2018, 09, 18) }
      ],
    },
    {
      "name": "minutes_avg_2",
      "type": "column",
      axisYType: "secondary",
      "showInLegend": true,
      "dataPoints": [
      		{ "y": 0.07147, "x": new Date(2018, 09, 17) },
          { "y": 0.00176, "x": new Date(2018, 09, 18) }
      	],
    }
  ],
  "axisX": [{
    "labelAngle": -45,
    "valueFormatString": "hh:mm DD-MMM"
  }],
  "axisY": [{
    "title": "minutes_avg",
  }],
  legend: {
    cursor: "pointer",
    itemclick: function(e) {

      var axisYMin = Number(e.chart.options.axisY[0].minimum);
      var axisY2Min = Number(e.chart.options.axisY2[0].minimum);

      if (typeof(e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
        if (e.dataSeries.name === "minutes_avg_2") {
          e.dataSeries.visible = false;
          e.chart.options.axisY2[0].minimum = null;
        } else {
          e.dataSeries.visible = false;
          e.chart.options.axisY[0].minimum = null;
        }
      } else {
        e.dataSeries.visible = true;
        e.chart.options.axisY[0].minimum = axisYMin;
        e.chart.options.axisY2[0].minimum = axisY2Min;
      }
      e.chart.render();
    }
  },

});

chart.render();
setMinimum(chart);

function setMinimum(chart) {
  var isNegative = false;
  for (var i = 0; i < chart.data.length; i++) {
    for (var j = 0; j < chart.data[i].dataPoints.length; j++) {
      if (chart.data[i].dataPoints[j].y < 0) {
        isNegative = true;
      }
    }
  }
  if (!isNegative && chart.axisY[0].includeZero) {
    chart.axisY[0].set("minimum", 0);
    chart.axisY2[0].set("minimum", 0);
  }
}