JSFiddle - React, Tailwind, and code Playground

by flanguy

HTML

<script type="text/javascript" src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
  <div id ="avg_ppm"></div>

JavaScript

new CanvasJS.Chart("avg_ppm", {
	animationEnabled:false, exportEnabled:true, theme:"light2",
	title:{text:"24-hour cumulative ppm rate"},
	axisX:{
		title:"Date",
		labelAngle:-45,
		// intervalType: "day",
		minimum: new Date(2026,0,4,12,0,0),
		valueFormatString: "DD/MM/YY",
		
  intervalType: "day",

		crosshair: {
			enabled: true,
		},
	},
	axisY:{
		title:"Cumulative PPM/24h Rate",
		maximum: 10,
		includeZero:true,
		crosshair: {
				enabled: true,
		},
		stripLines:[
			{                
				value: 2,
				color: 'red',
				opacity: 0.4,
				thickness: 2,
				label: "Max",
				labelFontColor:"rgba(255,0,0,0.4)",
				labelAlign: "near",
				// labelPlacement: "outside",
			}
		],
	},
	toolTip:{shared:true},

	data:[
				{
		  type:"line",showInLegend:true,name:"465",
		  dataPoints:[
								{x:new Date(2026,0,5,12,0,0),y:0},
								{x:new Date(2026,0,6,12,0,0),y:0.95364238410596},
								{x:new Date(2026,0,7,12,0,0),y:0.97527937690484},
								{x:new Date(2026,0,8,12,0,0),y:1.6400911161731},
								{x:new Date(2026,0,9,12,0,0),y:1.7328519855596},
								{x:new Date(2026,0,12,12,0,0),y:1.5549229410032},
							]
		},
				{
		  type:"line",showInLegend:true,name:"246",
		  dataPoints:[
								{x:new Date(2026,0,5,12,0,0),y:8.3236994219653},
								{x:new Date(2026,0,6,12,0,0),y:2.8666224286662},
								{x:new Date(2026,0,7,12,0,0),y:2.9268292682927},
								{x:new Date(2026,0,8,12,0,0),y:4.9236380214269},
								{x:new Date(2026,0,9,12,0,0),y:9.1625107480653},
								{x:new Date(2026,0,12,12,0,0),y:6.7864506627393},
							]
		},
				{
		  type:"line",showInLegend:true,name:"296",
		  dataPoints:[
								{x:new Date(2026,0,7,12,0,0),y:0},
								{x:new Date(2026,0,8,12,0,0),y:0},
								{x:new Date(2026,0,9,12,0,0),y:0},
								{x:new Date(2026,0,12,12,0,0),y:0.17243443898934},
							]
		},
				{
		  type:"line",showInLegend:true,name:"205",
		 ...