Estoy graficando el porciento de cumplimiento de los planes de las áreas por las que esta distribuida mi empresa, se grafican 2 listas diferentes que se llenan en la controladora y envio los datos por ajax donde recibo las listas de los por cientos y la de los colores y me muestra asi como lo muestro en el ejemplo, en la leyenda me pone el primer color que viene en la lista de colores y no me sirve asi , quisiera mostrar en la leyenda 3 colores el verde, azul y el rojo me podrian ayudar
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>