JSFiddle - React, Tailwind, and code Playground
by Anjali Jain
HTML
<script type="text/javascript" src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<div id="chartContainer" style="height: 600px; width: 100%;">
</div>
JavaScript
<script type="text/javascript">
window.onload = function () {
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Simple Date-Time Chart"
},
axisX:{
title: "timeline",
gridThickness: 1
},
axisY: {
title: "Downloads"
},
data: [
{
type: "column",
showlegend: true,
legendtext: "orange",
dataPoints: [//array
{ x: new Date(2012, 01, 1), y: 26},
{ x: new Date(2012, 01, 3), y: 38},
{ x: new Date(2012, 01, 5), y: 43},
{ x: new Date(2012, 01, 7), y: 29},
{ x: new Date(2012, 01, 11), y: 41},
{ x: new Date(2012, 01, 13), y: 54},
{ x: new Date(2012, 01, 20), y: 66},
{ x: new Date(2012, 01, 21), y: 60},
{ x: new Date(2012, 01, 25), y: 53},
{ x: new Date(2012, 01, 27), y: 60}
]
},
{
type: "line",
showlegend: true,
legendtext: "apple",
dataPoints: [//array
{ x: new Date(2012, 01, 1), y: 26},
{ x: new Date(2012, 01, 3), y: 38},
{...