JSFiddle - React, Tailwind, and code Playground

by ben551445

HTML

<script src="https://canvasjs.com/assets/script/canvasjs.stock.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the StockChart -->
<div id="totalWealth" style="height: 450px; width: 100%;"></div>

JavaScript

var totalWealth = new CanvasJS.StockChart("totalWealth", {
		exportEnabled: false,
		title: {
			// text:"StockChart with Line using JSON Data"
		},
		subtitles: [{
			// text:"Evolution de la valeur de l'unité de compte (v1)"
		}],
		culture: "fr",
		charts: [{
			axisX: {
				labelFontSize: 15,
				crosshair: {
					enabled: true,
					snapToDataPoint: true,
					valueFormatString: "DD/MM/YYYY"
				}
			},
			axisY: {
				labelFontSize: 15,
				// title: "Million of Dollars",
				// prefix: "$",
				// suffix: "M",
				includeZero: false,
				// maximum: 200000,
				interval: 25000,
				crosshair: {
					enabled: true,
					snapToDataPoint: true,
					valueFormatString: "# ###.##",
				}
			},
			data: [{
				type: "line",
				lineThickness: 1,
				lineColor: "black",
				// markerColor: "black",
				markerSize: 4,
				xValueFormatString: "DD/MM/YYYY",
				yValueFormatString: "# ###.##",
				indexLabel: "{y}",
				indexLabelFontSize: 10,
				dataPoints : [{x: new Date("2003-01-01"), y: Number(2937.58), color:"black"},{x: new Date("2003-02-01"), y: Number(3117.58), color:"black"},{x: new Date("2003-03-01"), y: Number(1786), color:"black"},{x: new Date("2003-04-01"), y: Number(1622.51), color:"black"},{x: new Date("2003-05-01"), y: Number(875.67), color:"black"},{x: new Date("2003-06-01"), y: Number(1334.34), color:"black"},{x: new Date("2003-07-01"), y: Number(1358.04), color:"black"},{x: new Date("2003-08-01"), y: Number(1626.9), color:"black"},{x: new Date("2003-09-01"), y: Number(4877.84), color:"black"},{x: new Date("2003-10-01"), y: Number(4469.53), color:"black"},{x: new Date("2003-11-01"), y: Number(4297.1), color:"black"},{x: new Date("2003-12-01"), y: Number(4687.73), color:"black"},{x: new Date("2004-01-01"), y: Number(4490.04), color:"black"},{x: new Date("2004-02-01"), y: Number(5596.69), color:"black"},{x: new Date("2004-03-01"), y: Number(5985.11), color:"black"},{x: new Date("2004-04-01"), y: Number(7301.39), color:"black"},{x: new...