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

var axisLabels = [0,4,8,10,12,16,18,20], stripLines = [];

var chart = new CanvasJS.Chart("chartContainer",{
  title:{
    text: "Chart Title"
  },
  axisX: {
    title:"Axis X Title",
    labelFormatter: function(e){
      return "";
    },
    stripLines: stripLines,
    tickThickness: 0
  },
  axisY:{
    title: "Axis Y Title",
    interval: 1
  },
  data: [
    {
      type: "line",
      dataPoints: [
        // { x: 1, y: 2 } low-value, single data points (like this) work
        
        // NOTE: Uncomment ONLY this first point to display bug
        // Large x values (for example, the current time in microseconds) cause problems        
        { x: 15809208154, y: 5791153006821934 }, // Updating this value close to the other Y value (diff less than 3) crashes the browser.
        { x: 158208154,   y: 5791153006821936 } 
      ]
    }
  ]
});

for(var i = 0; i < axisLabels.length; i++){
  stripLines.push({
    value: axisLabels[i],
    label: axisLabels[i],
    thickness: 0,
    labelPlacement: "outside",
    labelFontColor: "black",
    color: "black",
    labelBackgroundColor: "trasparent"
  });              
}

chart.render();