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 yRange = 10;
  var xRange = 1;

  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "House Median Price"
    },
    axisY2: {
      title: "Median List Price",
      prefix: "$",
      suffix: "K"
    },
    toolTip: {
      contentFormatter: function(e){
        var content = "", dataPoint, yWithinRange, xWithinRange;

        var toolTipXValue = e.chart.axisX[0].convertValueToPixel(e.entries[0].dataPoint.x);
        var toolTipYValue = e.chart.axisY2[0].convertValueToPixel(e.entries[0].dataPoint.y);    

        for (var i = 0; i < e.chart.data.length; i++){
        
          dataPoint = e.chart.data[i].dataPoints[e.entries[0].index];      

          if(dataPoint){

            yWithinRange = ((toolTipYValue - yRange) <= e.chart.axisY2[0].convertValueToPixel(dataPoint.y) && e.chart.axisY2[0].convertValueToPixel(dataPoint.y) <= (toolTipYValue + yRange));

            xWithinRange = ((toolTipXValue - xRange) <= e.chart.axisX[0].convertValueToPixel(dataPoint.x) && e.chart.axisX[0].convertValueToPixel(dataPoint.x) <= (toolTipXValue + xRange));

            if(yWithinRange === true && xWithinRange === true){

              content += "<span style='color:" + e.chart.selectedColorSet[i] + "'>" + e.chart.data[i].name + "</span>: " + "<strong>" + dataPoint.y + "</strong>";
              content += "<br/>";
            }
          }
        }
        return content;
      }
    },
    legend: {
      cursor: "pointer",
      verticalAlign: "top",
      horizontalAlign: "center",
      dockInsidePlotArea: true,
      itemclick: toogleDataSeries
    },
    data: [{
      type:"line",
      axisYType: "secondary",
      name: "San Fransisco",
      showInLegend: true,
      markerSize: 0,
      yValueFormatString: "$#,###k",
      dataPoints: [		
        { x: 0.8, y: 850 },
        { x: 2.1, y: 889 },
        { x: 3, y: 790 },
        { x: 4, y: 690 },
        { x: 5, y: 791 },
        { x: 6, y: 809 },
       ...