JSFiddle - React, Tailwind, and code Playground

by nehamahajan

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.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 upperLowerBoundsSeries = [];
var actualValue = [];

_.forEach(data[0].timeseries, (val) => {
	upperLowerBoundsSeries.push({
  	x: val.time,
    y: [val.valueLowerBound, val.valueUpperBound]
  });
  
  actualValue.push({
  x: val.time,
  y: val.value
  })
});


var chart = new CanvasJS.Chart("chartContainer", {
  axisY: {
  },
  data: [{			
  	type: "rangeArea",
    markerSize: 0,
    lineThickness: 0, 
    color: "#4F91A9",
    fillOpacity: 0.5,
    name: "Error 1",
    highlightEnabled: false,
    dataPoints: upperLowerBoundsSeries
  },{			
  	type: "line",
    color: "#4F91A9",
    name: "Task 1",
    showInLegend: true,
    dataPoints: actualValue
  }]
});

chart.render();