Consegui…
Segue solução:
<script>
$(function () {
//Variáveis que receberão os dados para popular o gráfico
const mes = [];
const resultado = [];
const target = [];
//Dados recebidos do res.render na rota
'<% DTResutadoKPIMensal.forEach((row, index) => { %>'
mes.push('<%= row.resultado_mensal %>');
resultado.push('<%= row.ila_resultado %>');
//Repete o target para cada bloco
'<% DTTargets.forEach((row, index) => { %>'
target.push('<%= row.ila_target %>');
'<% }); %>'
'<% }); %>'
//Define a cor baseado no resultado vs target
const bordercolor = [];
const backgroundcolor = [];
for (let i = 0; i < resultado.length; i++) {
if (resultado[i] >= target[0] || resultado[i] >= 100) {
//Dentro do target
bordercolor.push('"#385E9B"')
backgroundcolor.push('rgba(56,94,155, 0.7)')
} else {
//Abaixo do target
bordercolor.push('#9b385e')
backgroundcolor.push('rgba(155,56,94, 0.7)')
}
}
//Line chart definido no canvas da página
//var ctx = document.getElementById('tempo_stage_recebimento').getContext('2d');
var canvas = document.getElementById('ila_mensal');
var ctx = canvas.getContext("2d");
var myChart = new Chart(ctx, {
plugins: [ChartDataLabels],
type: 'bar',
data: {
labels: mes, //Não esquecer
datasets: [{
data: target, //Não esquecer
label: "Target",
borderColor: "#DB7093", //PaleVioletRed
borderDash: [10, 5],
fill: false,
backgroundColor: "rgba(219,112,147, 0.7)",
pointStyle: 'circle',
radius: '0',
type: 'line',
//Rótulo das barras
datalabels: {
backgroundColor: function (context) {
if (context.dataIndex === context.dataset.data.length - 1) {
return context.dataset.backgroundColor;
}
},
formatter: function (value, context) {
if (context.dataIndex === context.dataset.data.length - 1) {
return value + '%';
}
return "";
},
borderRadius: 4,
color: 'white',
anchor: 'center', //start, center, end (Posição vertical)
align: 'right', //start, center, end (Sobreposição dentro da posição vertical)
rotation: 0,
clamp: true,
labels: {
title: {
font: {
weight: 'bold',
size: 13
}
}
}
},
},
{
data: resultado, //Não esquecer
label: "ILA",
borderColor: bordercolor,
fill: true,
backgroundColor: backgroundcolor,
pointStyle: 'circle',
radius: '4',
//Rótulo das barras
datalabels: {
formatter: function (value, context) {
return value + '%';
},
color: '#fff', //Cor
anchor: 'start', //start, center, end (Posição vertical)
align: 'end', //start, center, end (Sobreposição dentro da posição vertical)
rotation: -90,
clamp: true,
labels: {
title: {
font: {
weight: 'normal',
size: 13
}
}
}
},
}
]
},
animation: true,
options: {
maintainAspectRatio: false,
responsive: true,
title: {
display: false,
text: 'Qtde'
},
legend: {
display: false,
position: 'bottom',
labels: {
boxWidth: 15
}
},
tooltips: {
enabled: true,
mode: 'index',
intersect: false,
displayColors: true,
callbacks: {
label: function (tooltipItem, data) {
var label = data.datasets[tooltipItem.datasetIndex].label || '';
if (label) {
label += ': ';
}
label += tooltipItem.yLabel + '%';
return label;
}
}
},
plugins: {
title: {
display: true,
text: "Graph"
},
legend: {
display: false,
},
},
hover: {
mode: 'nearest',
intersect: true,
},
scales: {
xAxes: [{
gridLines: {
display: false,
drawBorder: true
}
}],
yAxes: [{
display: true,
gridLines: {
display: true,
borderDash: [2],
drawBorder: false
},
ticks: {
min: 0,
max: 100,
stepSize: 10,
scaleStartValue: 0,
fontSize: 10,
callback: function (value) {
return value + "%"
}
}
}]
},
},
});
});
</script>
Resultado:
