JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.0.0-beta.7/chart.js"></script>
<body onload="addData()"> 
<canvas id="line-chart" width="100%" height="20" onclick="addData"></canvas>

JavaScript

var myChart = new Chart('line-chart', {
  type: "scatter",
  data: {
    datasets: [],
  },
  options: {
    responsive: true,
    animation: false,
    layout: {
      padding: {
        left: 10,
        right: 10
      }
    },
    plugins: {
      legend: {
        display: false
      },
      tooltips: {
        enabled: false
      }
    },
    scales: {
      yAxes: {
        ticks: {
          display: false,
          beginAtZero: false
        },
        gridLines: {
        	drawOnChartArea: false,
          drawBorder: false,
          display: false,
        }
      },
      xAxes: {
				ticks: {
          display: false,
        },
        gridLines: {
        	drawOnChartArea: false,
        	drawBorder: false,
          display: false
        }
      }
    }
  }
});

function addData() {
  var dataset = 0;
  var colors = ["blue", "yellow", "green", "gray", "pink", "black"];
  
	for (var index=0;index < 200;index++) {
    
    if (index == 0 || (index%100) == 0) {
    	var colorVal = colors[dataset];
      
      // Add new sction 
      var newDataPoint = {
        data: [{x:index, y:0}],
        showLine: false,
        borderWidth: 0,
        lineTension: 0,
        borderColor: colorVal,
        backgroundColor: colorVal,
        pointBackgroundColor: colorVal,
        pointBorderColor: colorVal,
        pointBorderWidth: 2,
        pointRadius: 15,
      };
      
      myChart.data.datasets.push(newDataPoint);
      dataset++;

      // Add new sction 
      var newDataLine = {
        data: [],
        showLine: true,
        lineTension: 0,
        borderWidth: 5,
        borderColor: colorVal,
        pointRadius: 0,
        pointBorderWidth: 0,
        spanGaps: true,
      };
      
      myChart.data.datasets.push(newDataLine);
      dataset++;

    }

	  myChart.data.datasets[dataset-1].data.push({x:index, y:0});
 	  myChart.update();
  }
}

function addTestData() {

}