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] },
          { x: 40, y: [67, 99] },
          { x: 50, y: [25, 51] }
        ]
      }, {
        color: "green",
        type: "line",
        dataPoints: [ 
          { x: 10, y: 40 }, 
          { x: 20, y: 78 },
          { x: 30, y: 72 },
          { x: 40, y: 99 },
          { x: 50, y: 51 }
        ]
      }
    ]
  });
  chart.render();
}