JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div style="margin-top:16px;color:dimgrey;font-size:9px;font-family: Verdana, Arial, Helvetica, sans-serif;text-decoration:none;">Source: <a href="https://canvasjs.com/javascript-charts/multi-series-line-chart/" target="_blank" title="JavaScript Multi Series Line Charts ">https://canvasjs.com/javascript-charts/multi-series-line-chart/</a></div>

JavaScript

window.onload = function () {

var chart = new CanvasJS.Chart("chartContainer", {
	title: {
		text: "House Median Price"
	},
	axisX: {
		valueFormatString: "MMM YYYY"
	},
	axisY2: {
		title: "Median List Price",
		prefix: "$",
		suffix: "K"
	},
	toolTip: {
		shared: false
	},
	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",
    markerSize: 12,
		dataPoints: [		
			{ x: new Date(2014, 00, 01), y: 850, indexLabel:"850", markerType: "triangle",  markerColor: "#6B8E23" },
			{ x: new Date(2014, 01, 01), y: 889, indexLabel:"889", markerType: "triangle",  markerColor: "#6B8E23"  },
			{ x: new Date(2014, 02, 01), y: 890, indexLabel:"890", markerType: "triangle",  markerColor: "#6B8E23"  },
			{ x: new Date(2014, 03, 01), y: 899,  indexLabel:"899", markerType: "triangle",  markerColor: "#6B8E23"  },
			{ x: new Date(2014, 04, 01), y: 903,  indexLabel:"903", markerType: "triangle",  markerColor: "#6B8E23"  },
			{ x: new Date(2014, 05, 01), y: 925,  indexLabel:"925", markerType: "triangle",  markerColor: "#6B8E23"  },
			{ x: new Date(2014, 06, 01), y: 899,  indexLabel:"899", markerType: "triangle",  markerColor: "#6B8E23"  },
			{ x: new Date(2014, 07, 01), y: 875,  indexLabel:"875", markerType: "triangle",  markerColor: "#6B8E23"  },
			{ x: new Date(2014, 08, 01), y: 927,  indexLabel:"927", markerType: "triangle",  markerColor: "#6B8E23"  },
			{ x: new Date(2014, 09, 01), y: 949,  indexLabel:"949", markerType: "triangle",  markerColor: "#6B8E23"  },
			{ x: new Date(2014, 10, 01), y: 946,  indexLabel:"946", markerType: "triangle",  markerColor: "#6B8E23"  },
			{ x: new Date(2014, 11, 01), y: 927,  indexLabel:"927", markerType: "triangle",  markerColor: "#6B8E23"  },
			{ x: new Date(2015, 00, 01), y: 950,  indexLabel:"950",...