JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
<br/><!-- Just so that JSFiddle's Result label it is not displayed on the Chart -->
<div id="chartContainer" style="height: 200px; width: 100%;"></div>
JavaScript
var chart = new CanvasJS.Chart("chartContainer");
chart.options = {
"title": {
"text": "red - 1"
},
"interactivityEnabled": true,
"animationDuration": 1200,
"animationEnabled": true,
"exportEnabled": true,
"zoomEnabled": true,
"zoomType": "xy",
"backgroundColor": "#ffffff",
"culture": "eng",
"creditText": "",
"creditHref": "",
"axisX": {
"labelFontColor": "FF",
"tickLength":5,
"stripLines": [
{
"startValue": 921,
"endValue": 1402,
"color": "orange",
"opacity": 0.3
}
]
},
"data": [
{
"type": "line",
"showInLegend": false,
"color": "#16B1B2",
"dataPoints": [
{
"x": 421,
"y": 0.9822872507286887
},
{
"x": 439,
"y": 0.9921147013144779
},
{
"x": 458,
"y": 0.9980267284282716
},
{
"x": 477,
"y": 1
},
{
"x": 495,
"y": 0.9980267284282716
},
{
"x": 514,
"y": 0.9921147013144778
},
{
"x": 532,
"y": 0.9822872507286886
},
{
"x": 551,
"y": 0.9685831611286311
},
{
"x": 569,
...