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 = 100;
  var xRange = 10;
  
  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;
        toolTipXValue = e.entries[0].dataPoint.x;
        toolTipYValue = 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 && (toolTipYValue - yRange) <= dataPoint.y && dataPoint.y <= (toolTipYValue + yRange) && (toolTipXValue - xRange) <= dataPoint.x && dataPoint.x <= (toolTipXValue + xRange)){
            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 },
        { x: 7, y: 598 },
        { x: 8, y: 621 }
      ]
    },
		{
      type:"line",
      axisYType: "secondary",
      name: "Valencia",
      showInLegend: true,
      markerSize: 0,
      yValueFormatString: "$#,###k",
      dataPoints: [		
        { x: 0.8, y: 850 },
        { x: 2.1, y: 889 },
        { x: 3, y: 790 },
        { x: 4, y: 590 },
        { x: 5, y: 791 },
        { x: 6, y: 809 },
 ...