JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.canvasjs.com/assets/script/canvasjs.min.js"></script>
  <div id="chartContainer" style="width:400; height:350;"></div>

JavaScript

var chart = new CanvasJS.Chart("chartContainer",
    {
        title: {
            text: "Series Colors to red, green"
        },

        axisX: { tickLength: 10, minimum: 0, maximum: 100 },
        axisY: { tickLength: 10, minimum: 0, maximum: 100 },
        width: 461,
        height: 350,
        data: [
      {
          type: "area",
          color: "red",        // change color here
         
          dataPoints: [
        { x: 0, y: 100 },
        { x: 100, y: 100 }
        ]
      },
          {
            type: "area",
            color: "yellow",
            toolTipContent: null,
            dataPoints: [
              { x: 100, y: 100 },
              { x: 0, y: 10 },

            ]
          },
          {
            type: "area",
            color: "green",
            dataPoints: [
              { x: 0, y: 0 },
              { x: 100, y: 90 }
            ]
          },
          {
            type: "line",
            color: "black",
            toolTipContent: null,
            dataPoints: [
              { x: 0, y: 5 },
              { x: 32, y: 32 },
              { x: 49, y: 60 },
              { x: 100, y: 80 }
            ]
          }
      ]
    });

        chart.render();