I am graphing the percentage of compliance of the plans of the areas for which my company is distributed, 2 different lists are filled in and I send the data by ajax where I receive the lists of the hundreds and the of the colors and it shows me as I show it in the example, in the legend it gives me the first color that comes in the list of colors and it does not work for me, I would like to show in the legend 3 colors the green, blue and red they could help
var labels=['Aplicaciones','Comunicaciones','Telematica','Ofimatica'];
var ColorCumplidoCUP=["red","#2ecc71","#2ecc71","red"];
var ColorCumplidoCUC=[ "red","red","red","#3498db"];
var cumplidoCUP=[40.55,100.00,120.00,90.00];
var cumplidoCUC=[60.00,90.00,80.00,110,00];
var ctx3 = document.getElementById("PCplanmesXarea");
var PCplanmesArea = new Chart(ctx3, {
type: 'bar',
data: {
labels: labels,
datasets: [
{
label: 'CUP',
data: cumplidoCUP,
backgroundColor: ColorCumplidoCUP,
borderWidth: 1
},
{
label: 'CUC',
data: cumplidoCUC,
backgroundColor: ColorCumplidoCUC,
borderWidth: 1
}]
},
options: {
events: false,
scales: {
xAxes: [{
display: true,
scaleLabel: {display: true, labelString: 'Áreas'}
}],
yAxes: [{
ticks: {
min: 0,
max: 150,
callback: function (value) {
return value + '%';
}
}
}]
},
animation: {
duration: 800,
easing: "easeOutQuart",
onComplete: function () {
var ctx = this.chart.ctx;
ctx.font = '12px LatoRegular, Helvetica,sans-serif';
ctx.textAlign = 'center';
ctx.textBaseline = 'bottom';
this.data.datasets.forEach(function (dataset) {
for (var i = 0; i < dataset.data.length; i++) {
var m = dataset._meta[Object.keys(dataset._meta)[0]].data[i]._model;
ctx.fillText(dataset.data[i] + '%', m.x + 1, m.y - 5);
}
})
}
}
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.0/Chart.js"></script>
<div class="col-lg-6 ">
<h4 class="col-md-offset-2">Por Ciento del Plan Cumplido </h4>
<canvas id="PCplanmesXarea" width="400" height="200"></canvas>
</div>