JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.canvasjs.com/canvasjs.min.js"></script>

<div id="chartContainer" style="height: 300px; width: 100%;">
</div>

JavaScript

window.onload = function () {
  var chart = new CanvasJS.Chart("chartContainer", {
    title: {
      text: "Range Area chart with differnt line color"
    },
    data: [
      {
        color: "red",
        type: "rangeArea",
        dataPoints: [ 
          { x: 10, y: [18, 40] },
          { x: 20, y: [55, 78] },
          { x: 30, y: [48, 72] },
        
        ]
      }, {
        color: "green",
        type: "rangeArea",
        dataPoints: [ 
        	{ x: 30, y: [48, 72] },
       	  { x: 40, y: [67, 99] },
          { x: 50, y: [25, 51] }
        ]
      }
    ]
  });
  chart.render();
}