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: 300px; width: 100%;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer", {
  data: [
    {
      type: "line",
      lineColor: "#dfdfdf",      
      dataPoints: [
        {y: 5},{y: 6},{y: 4},{y: 7},{y: 6},{y: 5},{y: 7},{y: 5},{y: 8},{y: 7},{y: 10},{y: 9},{y: 7},{y: 6},{y: 5},{y: 7},{y: 7},{y: 8},{y: 8},{y: 6},{y: 9},{y: 10},{y: 9},{y: 9},{y: 10},{y: 5},{y: 6},{y: 7},{y: 7},{y: 9},{y: 10},{y: 10},{y: 10},{y: 7},{y: 8},{y: 7},{y: 8},{y: 8},{y: 9},{y: 10},{y: 9},{y: 9},{y: 8},{y: 8},{y: 10},{y: 8},{y: 10},{y: 8},{y: 9}
      ]
    }, {
      type: "line",
      lineColor: "#87b1e8"
    }					
  ]
});

setColors(chart.options.data[0]);
chart.render();

function setColors(dataSeries) {
  for(var i = 0; i < dataSeries.dataPoints.length; i++) {
    if(dataSeries.dataPoints[i].y <= 6)
      dataSeries.dataPoints[i].color = "#eb6e67";  
    else if(dataSeries.dataPoints[i].y > 6 && dataSeries.dataPoints[i].y <= 8)
      dataSeries.dataPoints[i].color = "#f7b54a";
    else
      dataSeries.dataPoints[i].color = "#4bc076";
  }
  chart.options.data[1].dataPoints = [chart.options.data[0].dataPoints[0], chart.options.data[0].dataPoints[chart.options.data[0].dataPoints.length - 1]];
}