JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
<div id="imageContainer">
  <img id="chartImage" width="100%" height="360px">
</div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
{
		title: {
			text: "Adding Decimal points"
		},
    axisY:{
     //valueFormatString: "#0.00",
     interval: 1,
     labelFormatter: function(e) {
     	if(e.value >= 0 && e.value <= 1)
      	return CanvasJS.formatNumber(e.value, "0.00");
      else if (e.value >= 1 && e.value <=10 )
      	return CanvasJS.formatNumber(e.value, "0.0");
      else 
      	return CanvasJS.formatNumber(e.value, "0");
     }
     
    },
   
		data: [
		{
			type: "spline",
			dataPoints: [ 
				{ x: 10, y: 0 }, 
				{ x: 20, y: 0.5 },
				{ x: 30, y: 0.8 },
				{ x: 40, y: 5 },
        { x: 60, y: 10 },
         { x: 60, y: 11 }
			]
		}
		]
});

chart.render();

var base64Image = chart.canvas.toDataURL();
document.getElementById('chartContainer').style.display = 'none';
document.getElementById('chartImage').src = base64Image;