JSFiddle - React, Tailwind, and code Playground
by canvasjs
HTML
<div id="chartContainer" style="height: 370px; width: 100%;"></div>
<script>
window.onload = function () {
var options = {
exportEnabled: true,
animationEnabled: true,
title:{
text: "Open VS Close"
},
subtitles: [{
text: "Click Legend to Hide or Unhide Data Series"
}],
axisX: {
title: "States"
},
axisY: {
title: "Open Price",
titleFontColor: "#4F81BC",
lineColor: "#4F81BC",
labelFontColor: "#4F81BC",
tickColor: "#4F81BC",
includeZero: false
},
axisY2: {
title: "Closed Price",
titleFontColor: "#C0504E",
lineColor: "#C0504E",
labelFontColor: "#C0504E",
tickColor: "#C0504E",
includeZero: false
},
toolTip: {
shared: true
},
legend: {
cursor: "pointer",
itemclick: toggleDataSeries
},
data: [{
type: "spline",
name: "Open",
showInLegend: true,
xValueFormatString: "DD MMM YYYY",
yValueFormatString: "$###0.##",
dataPoints: [
{x: new Date('2018-03-01'), y: 178.54},
{x: new Date('2018-03-02'), y: 172.8},
{x: new Date('2018-03-03'), y: 175.21}
]
},
{
type: "spline",
name: "Close",
axisYType: "secondary",
...