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: "House Median Price"
    },
    axisY2: {
      title: "Median List Price",
      prefix: "$",
      suffix: "K"
    },
    toolTip: {
      contentFormatter: function(e){
        var content = "", dataPoint;
        for (var i = 0; i < e.chart.data.length; i++) {
          dataPoint = e.chart.data[i].dataPoints[e.entries[0].index];
          if(dataPoint && dataPoint.x === e.entries[0].dataPoint.x && dataPoint.y === e.entries[0].dataPoint.y){
            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 },
               { x: 7, y: 698 },
               { x: 8, y: 621 }
             ]
           },
           {
             type:"line",
            ...