JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>

JavaScript

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      "text":"Daily Metrics"
    },
    axisX: {
      "valueFormatString":null,
      "title":"Date", 
      scaleBreaks: {
        autoCalculate: true,
        collapsibleThreshold: "15%", 
        lineThickness: 0,
        spacing: 0
      }
    },
    axisY2: {
      "title":"Daily Total",
      "prefix":"",
      "suffix":"",
      "interval":1
    },
    toolTip: {
      "shared":true
    },
    legend: {
      cursor:'pointer',
      verticalAlign:'top',
      horizontalAlign:'center',
      dockInsidePlotArea:true,
      itemclick:toggleDataSeries
    },
    data: [{
      type:'line',
      axisYType:'secondary',
      name:'Brainstorm',
      showInLegend:true,
      markerSize:0,
      yValueFormatString:null,
      dataPoints:[
        {x:new Date(2021,05,01),y:7},
        {x:new Date(2021,05,02),y:10},
        {x:new Date(2021,05,03),y:9},
        {x:new Date(2021,05,07),y:7},
        {x:new Date(2021,05,08),y:7}
      ]},
			{
        type:'line',
        axisYType:'secondary',
        name:'Asked For Break',
        showInLegend:true,
        markerSize:0,
        yValueFormatString:null,
        dataPoints:[
          {x:new Date(2021,05,01),y:2},
          {x:new Date(2021,05,02),y:6},
          {x:new Date(2021,05,03),y:4},
          {x:new Date(2021,05,07),y:2},
          {x:new Date(2021,05,08),y:2}]
      }]
  });
  chart.render();

  function toggleDataSeries(e) {
    if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
      e.dataSeries.visible = false;
    } else {
      e.dataSeries.visible = true;
    }
    chart.render();
  }
}