Range Area Chart with different line color- CanvasJS

Range Area Chart with different line color

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: "Range Area Chart"
  },
  data: [{
    type: "rangeArea",
    color: "red",
    lineColor: "blue",
    dataPoints: [
      { x: 10, y: [30, 71] },
      { x: 20, y: [22, 55]},
      { x: 30, y: [22, 50] },
      { x: 40, y: [24, 65] },
      { x: 50, y: [29, 95] },
      { x: 60, y: [24, 68] },
      { x: 70, y: [12, 28] },
      { x: 80, y: [15, 34] },
      { x: 90, y: [5, 14]}
    ]
  }]
});


chart.render();