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", {
  title:{
    text: "AFTER"
  },
  axisY: {
  	title: "accuracy"
  },
  toolTip: {
  	shared: true
  },
  legend: {
    horizontalAlign: "right",
    dockInsidePlotArea: true
  },
  data: [{			
  	type: "rangeArea",
    markerSize: 0,
    lineThickness: 0, 
    color: "#4F91A9",
    fillOpacity: 0.5,
    name: "Error 1",
    highlightEnabled: false,
    dataPoints: [
      { label: "week1", y: [26, 50] },
      { label: "week2", y: [51, 68] },
      { label: "week3", y: [63, 78] },
      { label: "week4", y: [66, 79] },
      { label: "week5", y: [75, 87] }
    ]
  },{			
  	type: "line",
    color: "#4F91A9",
    name: "Task 1",
    showInLegend: true,
    dataPoints: [
      { label: "week1", y: 40 },
      { label: "week2", y: 60 },
      { label: "week3", y: 70 },
      { label: "week4", y: 73 },
      { label: "week5", y: 80 }
    ]
  },
  {			
  	type: "rangeArea",
    markerSize: 0,
    lineThickness: 0,
    color: "#717171",
    fillOpacity: 0.5,
    name: "Error 2",
    highlightEnabled: false,
    dataPoints: [
      { label: "week1", y: [60, 82] },
      { label: "week2", y: [75, 90] },
      { label: "week3", y: [80, 93] },
      { label: "week4", y: [82, 94] },
      { label: "week5", y: [81, 92] }
    ]
  },{			
  	type: "line",
    color: "#717171",
    name: "Task 2",
    showInLegend: true,
    dataPoints: [
      { label: "week1", y: 70 },
      { label: "week2", y: 83 },
      { label: "week3", y: 87 },
      { label: "week4", y: 89 },
      { label: "week5", y: 87 }
    ]
  }]
});

chart.render();