Tenho um indicador de coluna e quando clico na legenda a coluna some mas os valores não.
Alguém poderia me auxiliar?
Utilizo estas bibliotecas:
Chart.js
Chart.min.js
chartjs-plugin-datalabels.js
chartjs-plugin-datalabels.min.js
Segue o código que utilizo.
function ChartQuantMes() {
StatusMesGT.length = 0;
StatusMesG.length = 0;
CarregarQuantMes();
var chttT = document.getElementById("myChartQuantMes");
var ctx100 = chttT.getContext("2d");
window.myChartQuantMes = new Chart(ctx100, {
type: 'bar',
data: {
labels: ['JAN', 'FEV', 'MAR', 'ABR', 'MAI', 'JUN', 'JUL', 'AGO', 'SET', 'OUT', 'NOV', 'DEZ'],
datasets: [
{
label: 'Etiqueta',
data: StatusMesG,
backgroundColor: '#1E90FF',
},
{
label: 'Cartão',
data: StatusMesGT,
backgroundColor: '#ADD8E6',
}],
},
options: {
plugins: {
datalabels: {
anchor: function (context) {
var value = context.dataset.data[context.dataIndex];
return value > 1 ? 'end' : 'end';
},
align: function (context) {
if (context.dataset.label == "Etiqueta") {
var value = context.dataset.data[context.dataIndex];
return value > 1 ? 'end' : 'end';
} else {
var value = context.dataset.data[context.dataIndex];
return value > 1 ? 'end' : 'end';
}
},
color: function (context) {
var value = context.dataset.data[context.dataIndex];
return value.v < 50 ? context.dataset.backgroundColor : 'black';
},
font: function (context) {
var width = context.dataset.data;
return { size: 18 };
},
},
},
responsive: true,
title: {
display: true,
text: "Quantidade Mensal de Etiquetas / Cartão - Depto " + $('#Depto').val(),
lineHeight: '5',
fontSize: 20,
},
responsive: true,
legend: {
display: true,
position: 'bottom'
},
scaleShowHorizintalLines: false,
scales: {
xAxes: [{
stacked: false,
display: true,
}],
yAxes: [{
stacked: false,
ticks: {
beginAtZero: false,
bounds: false,
display: false,
mirror: true,
max: MatrizC1 + 10,
},
gridLines: {
display: false,
},
}]
},
}
});
}