Buen día , antes que nada le agradezco aquien pueda ayudarme, soy nuevo en esto y estoy creando un gráfico con chart.js necesito que cada barra cambie de color de acuerdo a condicionales diferentes, por ejemplo para a debe ser verde si el valor se encuentra entre 0 -15, naranja entre 16 y 30. mientras que para b verde 0 - 10, naranja de 11-20, espero puedan ayudarme.
var chartColors = {
color1: 'rgba(132, 228, 57, 0.7)',
color2: 'rgba(197, 228, 51, 0.9)',
color3: 'rgba(251, 251, 0, 0.9)',
color4: 'rgba(218, 117, 57, 0.5)',
color5: 'rgba(218, 57, 57, 0.5)'
};
var ctx = document.getElementById("myChart").getContext("2d");
var myChart = new Chart(ctx, {
type: 'bar',
data: {
labels: ["Categorías"],
datasets: [{
label: 'a',
backgroundColor: [
chartColors.color1,
chartColors.color1,
chartColors.color1,
chartColors.color1,
chartColors.color1
],
data: [29]
},{
label: "b",
data: [31],
backgroundColor: [
chartColors.color1
],
},{
label: "c",
data: [41],
backgroundColor: [
chartColors.color1
],
},{
label: "d",
data: [30],
backgroundColor: [
chartColors.color1
],
},{
label: "e",
data: [61],
backgroundColor: [
chartColors.color1
],
}
],
}
});
var colorChangeValue = 50; //set this to whatever is the deciding color change value
var dataset = myChart.data.datasets[0];
for (var i = 0; i < dataset.data.length; i++) {
if (dataset.data[i] < 30) {
dataset.backgroundColor[i] = chartColors.color1;
}
else if ((dataset.data[i] > 31) && (dataset.data[i] <= 39)){
dataset.backgroundColor[i] = chartColors.color2;
}
else if ((dataset.data[i] > 40) && (dataset.data[i] <= 50)){
dataset.backgroundColor[i] = chartColors.color3;
}
else if ((dataset.data[i] > 51) && (dataset.data[i] <= 60)){
dataset.backgroundColor[i] = chartColors.color4;
}
else{
dataset.backgroundColor[i] = chartColors.color5;
}
}
myChart.update();
Desconozco si es la forma correcta ya que no se como crear o asilar cada barra para aplicar la condicional requerida a cada una de estas.