JSFiddle - React, Tailwind, and code Playground

by zdogz

HTML

<div id="chartContainer" style="height: 400px; width: 100%;">
</div>

JavaScript

<script type="text/javascript">window.onload = function () {
CanvasJS.addColorSet("greenShades",
[//colorSet Array
"#2F4F4F",
"#008080",
"#2E8B57",
"#3CB371",
"#90EE90",
]);
var chart = new CanvasJS.Chart("chartContainer", {
theme: "theme1",
title:{
text: "Recent Performance"
},
data: [ //array of dataSeries
{
type: "line",
markerType: "square",
name: "Fewer Data Points",
showInLegend: true,
markerColor: "#99EB99",
lineColor: "#000000",
dataPoints: [
	{ label: "Mon Jul 01", y: 1 },
	{ label: "Wed Jul 03", y: 2 },
	{ label: "Mon Jul 08", y: 3 },
	{ label: "Wed Jul 10", y: 4 },
	{ label: "Mon Jul 15", y: 5 },
	{ label: "Wed Jul 17", y: 6 },
	{ label: "Mon Jul 22", y: 7 },
	{ label: "Wed Jul 24", y: 8 },
	{ label: "Mon Jul 29", y: 9 },
	{ label: "Wed Jul 31", y: 10 }
]
},{
type: "line",
markerType: "square",
name: "More Data Points",
showInLegend: true,
markerColor: "#6666FF",
lineColor: "#000000",
dataPoints: [
	{ label: "Mon Jul 01", y: 12 },
	{ label: "Wed Jul 03", y: 11 },
	{ label: "Mon Jul 08", y: 10 },
	{ label: "Wed Jul 10", y: 9 },
	{ label: "Fri Jul 12", y: 8 },
	{ label: "Mon Jul 15", y: 7 },
	{ label: "Wed Jul 17", y: 6 },
	{ label: "Fri Jul 19", y: 5 },
	{ label: "Mon Jul 22", y: 4 },
	{ label: "Wed Jul 24", y: 3 },
	{ label: "Fri Jul 26", y: 4 },
	{ label: "Mon Jul 29", y: 5 },
	{ label: "Wed Jul 31", y: 6 }
]
}],
axisY:{
}
});
chart.render();
} </script>