JSFiddle - React, Tailwind, and code Playground
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.5.0/Chart.js"></script>
<canvas id="chart"></canvas>
JavaScript
const ctx = document.getElementById('chart').getContext('2d');
const data = [10, 20, 40, 30, 10, 55,60];
const colours = data.map((value) => value < 0 ? 'red' : 'green');
new Chart(ctx, {
type: 'bar',
data: {
labels: ["January", "February", "March", "April", "May", "June", "July"],
datasets: [{
label: "My First dataset",
borderColor: colours,
backgroundColor: colours,
data: data,
fill: false,
}]
},
options: {
legend: {
display: false
}
}
})