Streaming live at 10am (PST)

Chart.js the value on the bar graph does not disappear when deselected

I have a line chart and a bar chart where the values are visible.

The problem is that if I unselect an argument, only the bar disappears but not its value. Can you help me? Referer -> https://jsfiddle.net/ds8r2apg/

Here is my code:

var ctx = document.getElementById("popChart").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: {
        duration: 1,
        onComplete: function () {
            var chartInstance = this.chart,
                ctx = chartInstance.ctx;
            ctx.font = Chart.helpers.fontString(Chart.defaults.global.defaultFontSize, Chart.defaults.global.defaultFontStyle, Chart.defaults.global.defaultFontFamily);
            ctx.textAlign = 'center';
            ctx.textBaseline = 'bottom';

            this.data.datasets.forEach(function (dataset, i)
            {
                var meta = chartInstance.controller.getDatasetMeta(i);
                meta.data.forEach(function (bar, index) {
                    var data = dataset.data[index];
                    ctx.fillText(data, bar._model.x, bar._model.y - 5);
                });
            });
        }
    },

}
});

Hi @Francesco,

Maybe if there’s someone with chart.js experience they could help you. Otherwise I suggest you ask this question on the chart.js forum or github.

Also, reading through the docs might answer this.

It would be helpful if you shared a screenshot of what you did and what happened. Or create a new fiddle with the change and share that.

This is screenshoot first:

and after selection

The code is here: https://jsfiddle.net/ds8r2apg/

The problem lies in your options: animations code block.

What is the correct code? Can you modify the jsfiddle link?

@Francesco - Did you write the code yourself or did you copy and paste from some resource?

If you copied and pasted it, remove it. If you want animations, refer to the API. I can’t take the time off billable to write code for you. I hope you understand.