JSFiddle - React, Tailwind, and code Playground

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": 0
      },{
        "y": 0.00076,
        "x": 1
      }
    ],
  },
  {
    "name": "minutes_avg_2",
    "type": "column",
		axisYType: "secondary",
		"showInLegend": true,
    "dataPoints": [
      {
        "y": 0.07147,
        "x": 0
      },{
        "y": 0.00176,
        "x": 1
      }
    ],
  }
  ],
  "axisX": [{
    "labelAngle": -45,
  }],
  "axisY": [{
    "title": "minutes_avg",        
  }],
        legend: {
            cursor: "pointer",
            itemclick: function (e) {
                if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
                    e.dataSeries.visible = false;
                } else {
                    e.dataSeries.visible = true;
                }

                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);
  }
}