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] }
        ]
      },
    ]
  });
  
  chart.options.data.push({type: "line", color: "green", dataPoints: []})
  
  for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
  	chart.options.data[1].dataPoints.push({
    	x: chart.options.data[0].dataPoints[i].x,
      y: chart.options.data[0].dataPoints[i].y[1] 
    })
  }
  
  chart.render();
}