JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

window.onload = function () {

  var dps = [
    { x: 1, y: "1:57:420" },
    { x: 2, y: "1:57:340" }, 
    { x: 3, y: "1:56:587" }, 
    { x: 4, y: "1:56:225" }, 
    { x: 5, y: "2:0:110" }, 
    { x: 6, y: "2:2:102" }
  ]

  dps.forEach(dp => {
    var splitString = dp.y.split(":");
    dp.y = parseInt(splitString[0]) * 60 * 1000 + parseInt(splitString[1]) * 1000 + parseInt(splitString[2]);
  })

  function formatMilliSeconds(val) {
    var minutes = parseInt(val / (60 * 1000));
    var seconds = parseInt(val % (60 * 1000) / 1000);
    var ms = parseInt(val % (60 * 1000) % 1000);
    return minutes + ":" + seconds + ":" + ms;
  }


  var chart = new CanvasJS.Chart("chartContainer", {
    title:{
      text: "Show laptimes in y-axis"              
    },
    axisY: {
      labelFormatter: function(e) {
        return formatMilliSeconds(e.value)
      }
    },
    toolTip: {
    	contentFormatter: function(e) {
      	toolTipContent = "";
      	e.entries.forEach( (entry) => {
        	toolTipContent += "x -> " + entry.dataPoint.x + "<br/>y -> " + formatMilliSeconds(entry.dataPoint.y) + "<br/>"
        })
      	return toolTipContent;
      }
    },
    data: [              
      {
        // Change type to "doughnut", "line", "splineArea", etc.
        type: "column",
        dataPoints: dps
      }
    ]
  });
  chart.render();
}