JSFiddle - React, Tailwind, and code Playground
HTML
<script type="text/javascript" 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", {
theme: "theme3",
title: {
text: "Multi StripLine Demo"
},
axisX:{
stripLines:[
{
startValue:1935,
endValue:1935.1,
color:"#d8d8d8",
label : "StripLine 1",
labelFontColor: "#a8a8a8"
},
{
startValue:1955,
endValue:1965,
color:"#d8d8d8",
label : "StripLIne 2",
labelFontColor: "#a8a8a8"
}
],
minimum:1910,
maximum:1990,
valueFormatString: "####"
},
axisY:{
stripLines:[
{
startValue:8,
endValue:10,
color:"#d8d8d8",
label : "Stripline 1",
labelFontColor: "#a8a8a8"
},
{
startValue:15,
endValue:20,
color:"#d8d8d8",
label : "StripLine 2",
labelFontColor: "#a8a8a8"
}
],
minimum:5,
maximum:25,
/*valueFormatString: "####"*/
lineColor:"#a8a8a8",
lineThickness:1
},
data: [{
//showInLegend: true,
type: "splineArea",
color: "rgba(83, 223, 128, .6)",
dataPoints: [{
x: 1910,
y: 5
}, {
x: 1920,
y: 9
}, {
x: 1930,
y: 17
}, {
x: 1940,
y: 32
}, {
x: 1950,
y: 22
}, {
x: 1960,
y: 14
...