Tengo problema para asignarle el color a las barras de mi grafica chart js, me gustaria que el backgroundColor cambiara de acuerdo a una condición (IF, y en esta condición agregar el rango y por rango que cambie el color de la barra de mi gráfica, si cambia el valor de la variable que cambie el color de la barra también), tenia una idea pero no funciona correctamente, desconozco como codificar esta condición, de antemano muchas gracias!
var dato = 230;
var colorBar;
if(dato >= 0 && dato <= 100){
var verde = 'rgb(0,228,0)';
// colorBar.backgroundColor(verde);
}if(dato > 101 && dato <= 200){
var amarillo = 'rgb(255,255,0)';
//colorBar.backgroundColor(amarillo);
}if(dato > 201 && dato <= 300){
var naranja = 'rgb(255,126,0)';
//colorBar.backgroundColor(naranja);
}
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels:"Informacion",
datasets:[
{
label:"Dato ",
backgroundColor:colorBar,
data: [dato]
}
]
},
options:{
scales:{
yAxes:[{
stacked: true,
ticks:{
max: 500,
beginAtZero: true
}
}],
xAxes:[{
barThickness : 23
}]
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.4/Chart.js" integrity="sha512-hZf9Qhp3rlDJBvAKvmiG+goaaKRZA6LKUO35oK6EsM0/kjPK32Yw7URqrq3Q+Nvbbt8Usss+IekL7CRn83dYmw==" crossorigin="anonymous"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="Chart.js"></script>
<script type="text/javascript" src="chartjs-plugin-streaming.js"></script>
<canvas id="myChart" width="100px" height="80px"> </canvas>