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: 360px; width: 720px;"></div>

JavaScript

var colors = ["red", "yellow", "green"];
var chart = new CanvasJS.Chart("chartContainer", {
  axisY: {
    maximum: 1
  },
  dataPointWidth: 76,
  data: [
    {
      type: "column",
      dataPoints: [
        { y: 1, value: 1  },
        { y: 1, value: 2  },
        { y: 1, value: 0  },
        { y: 1, value: 2  },
        { y: 1, value: 2  },
        { y: 1, value: 2  },
        { y: 1, value: 2  },
        { y: 1, value: 2  },
        { y: 1, value: 2  }
      ]
    }					
  ]
});

setColors(chart);
chart.render();

function setColors(chart) {
  for(var i = 0; i < chart.options.data[0].dataPoints.length; i++) {
    chart.options.data[0].dataPoints[i].color = colors[chart.options.data[0].dataPoints[i].value]
  }
}