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

Design help Custom code
1

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 -> Edit fiddle - JSFiddle - Code Playground

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);
                });
            });
        }
    },

}
});
2

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.

3

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.

4

This is screenshoot first:

1
11370×694 6.77 KB
and after selection
2
21368×659 24.3 KB

The code is here: Edit fiddle - JSFiddle - Code Playground

5

The problem lies in your options: animations code block.

6

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

7

@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.

8

HiFrancesco, did you resolve this problem. I am having now the same problem? If you could me help.