Puedo ocultar la barra al hacer clic en la leyenda, pero el valor no está oculto para el gráfico de barras en charts.js No puedo ocultar los valores de datos al hacer clic en la leyenda, solo la barra está oculta

He compartido el enlace del código js fiddle a continuación

Aquí está el js fiddle https://jsfiddle.net/npyvw1L8/

 var ctx = document.getElementById("canvas").getContext("2d"); var nomi = \[2017, 2018, 2019\]; var myChart = new Chart(ctx, { type: 'bar', data: { labels: nomi, datasets: \[{ label: 'PP PERVENUTI', data: \[50, 30, 45\], backgroundColor: "#8A0808", fill: false, borderColor: "#8A0808", borderWidth: 3 }, { label: 'PP EVASI', data: \[60, 45, 12\], backgroundColor: "#0B610B", fill: false, borderColor: "#0B610B", borderWidth: 3 }, { label: 'PI PERVENUTI', data: \[20, 25, 35\], backgroundColor: "#8A0886", fill: false, borderColor: "#8A0886", borderWidth: 3 }, { label: 'PI EVASI', data: \[10, 20, 30\], backgroundColor: "#0404B4", fill: false, borderColor: "#0404B4", borderWidth: 3 } \] }, options: { legend: { display: true, position: "bottom" }, hover: { animationDuration: 0 }, animation: { onComplete: function() { var ctx = this.chart.ctx; ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontFamily, 'normal', Chart.defaults.global.defaultFontFamily); ctx.fillStyle = "black"; ctx.textAlign = 'center'; ctx.textBaseline = 'bottom'; debugger this.data.datasets.forEach(function(dataset) { for (var i = 0; i < dataset.data.length; i++) { for (var key in dataset._meta) { var model = dataset._meta\[key\].data\[i\]._model; ctx.fillText(dataset.data\[i\], model.x, model.y - 5); } } }); } } } });

Estoy trabajando en Vue y he implementado este gráfico, cualquier ayuda será apreciada