JSFiddle - React, Tailwind, and code Playground

by Greg Lowery

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>
<a href="javascript:void(0);" onclick="toggle_unranked();">Toggle Unranked</a>

CSS

#chartContainer {
    clear: both;
}

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
		animationEnabled: true,
		zoomEnabled: true,
		zoomType: "xy",
		title: {
			text: "Avg Rank by Week"
		},
		toolTip: {
			shared: true,
			contentFormatter: function (e) {
				var content = "";

				e.entries.sort(function (a, b) {
					return b.dataPoint.y - a.dataPoint.y;
				});

				content += e.entries[0].dataPoint.label;
				content += "<br/>";

				var entries = e.entries;
				for (var j = 0; j < entries.length; j++) {
					content += "<div id=\"rc_tooltip_" + j + "\"><span style=\"color:" + entries[j].dataSeries.color + ";\"\>" + entries[j].dataSeries.name + " </span>: " + "<strong>" + entries[j].dataPoint.y + "</strong></div>";
					//content += "<br/>";
				}
				return content;
			}
		},
		legend: {
			cursor: "pointer",
			itemclick: function (e) {
				if (typeof (e.dataSeries.visible) === "undefined" || e.dataSeries.visible) {
					e.dataSeries.visible = false;
				} else {
					e.dataSeries.visible = true;
				}
				alert(e);
				e.chart.render();
			}
		},
		data: [{type: "spline",name: "Greg Lowery",showInLegend: true,dataPoints: [{"label":"01/05","y":5.970},{"label":"01/12","y":4.470},{"label":"01/19","y":4.593},{"label":"02/02","y":5.320},{"label":"02/09","y":5.356},{"label":"02/16","y":5.380},{"label":"03/02","y":5.703},{"label":"03/09","y":5.945},{"label":"03/16","y":5.945},{"label":"03/16","y":6.133},{"label":"04/06","y":6.085}]},{type: "spline",name: "Ben Forester",lineDashType: "dash",markerSize: 5,markerType: "square",highlightEnabled: false,showInLegend: true,dataPoints: [{"label":"01/05","y":4.970},{"label":"01/12","y":5.470},{"label":"01/19","y":5.593},{"label":"02/02","y":5.820},{"label":"02/09","y":5.820},{"label":"02/16","y":6.156},{"label":"03/02","y":6.156},{"label":"03/09","y":6.156},{"label":"03/16","y":6.156},{"label":"03/16","y":6.070},{"label":"04/06","y":6.070}]},{type: "spline",name: "Dylan Stopher",showInLegend: true,dataPoints:...