JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label doesn't overlap the Chart -->
<div id="chartContainer" style="height: 360px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer", {
axisX: {
stripLines:[
{
value: 3,
showOnTop: true
},
{
value: 5,
showOnTop: true
},
{
value: 7,
showOnTop: true
},
]
},
data: [{
dataPoints: [
{ label: "Jan 2020", y: 71 },
{ label: "Feb 2020", y: 55},
{ label: "Mar 2020", y: 50 },
{ label: "Apr 2020", y: 65 },
{ label: "May 2020", y: 95 },
{ label: "Jun 2020", y: 68 },
{ label: "Jul 2020", y: 28 },
{ label: "Aug 2020", y: 34 },
{ label: "Sep 2020", y: 14},
{ label: "Oct 2020", y: 24}
]
}]
});
chart.render();