JSFiddle - React, Tailwind, and code Playground

by Anjali Jain

HTML

<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 300px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
	{
	title: {
		text: "duplicate months demo"
	},
	axisX: {
		valueFormatString: "MMM",
		interval: 1,
		intervalType: "month",
	},
	axisY: {
		valueFormatString: "#0%",
		gridColor: "Silver",
		tickColor: "silver"
	},
	data: [
	{
		type: "line",
		showInLegend: true,
		lineThickness: 2,
		name: "Line 1",
		markerType: "square",
		color: "#F08080",
		dataPoints: [
			{ x: new Date(2014, 0), y: 1 },
			{ x: new Date(2014, 1), y: 5 },
			{ x: new Date(2014, 2), y: 15 },
			{ x: new Date(2014, 3), y: 25 },
			{ x: new Date(2014, 4), y: 35 },
			{ x: new Date(2014, 5), y: 45 },
			{ x: new Date(2014, 6), y: 55 }
		]
	},
	{
		type: "line",
		showInLegend: true,
		name: "Line 2",
		color: "#20B2AA",
		lineThickness: 2,
		dataPoints: [
			{ x: new Date(2014, 0), y: 3 },
			{ x: new Date(2014, 1), y: 10 },
			{ x: new Date(2014, 2), y: 17 },
			{ x: new Date(2014, 3), y: 22 },
			{ x: new Date(2014, 4), y: 30 },
			{ x: new Date(2014, 5), y: 40 },
			{ x: new Date(2014, 6), y: 50 }
			]
		}
	]
	});
	chart.render();