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": false,
    "dataPoints": [
      {
        "y": 0.07847,
        "x": 0
      },{
        "y": 0.00076,
        "x": 1
      }
    ],
  }],
  "axisX": [{
    "labelAngle": -45,
  }],
  "axisY": [{
    "title": "minutes_avg",        
  }]
});

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