JSFiddle - React, Tailwind, and code Playground

by Swapnil V

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<body>
  <div id="chartContainer" style="height: 400px; width: 100%;">
  </div>
</body>

JavaScript

var yMax = 77.4;
var yMin = 31.8;

var minMaxDifference = yMax - yMin;

var YAxisNumberOfIntervals = 7;
// does not work if set to 7,9,11,13,17,23
// Works for 1,2,3,4,5,6,8,10,12,14,15,16,18,19,20,21,22,24,25

var yAxisInterval = Math.abs(parseFloat(minMaxDifference/YAxisNumberOfIntervals));


var chart = new CanvasJS.Chart("chartContainer",
    {
      title: {
        text: "Axis Y Last Label Issue",
      },
      axisY:{
       interval: yAxisInterval,
        minimum:yMin,
         maximum:yMax,
     },
      data: [
      {
        type: "column",
          dataPoints: [
        { x: 100, y: 35 },
        { x: 200, y: 55},
        { x: 300, y: 50 },
        { x: 400, y: 65 },
        { x: 500, y: 45 },
        { x: 600, y: 68 },
        { x: 700, y: 58 },
        { x: 800, y: 34 },
        { x: 900, y: 64}
        ]
      }
      ]
    });

    chart.render();