I'm creating a dashboard with chartJS and gaugeJS, I added buttons to collapse divs with css (it hide everything but the button and the title), it work pretty good with gaugeJS, h2, p etc. but not with chartJS.

Here's the code :

<div class="case presence maximised">
    <canvas id="presence" height="200" width="250"></canvas>
</div>

div.minimised * {
    display: none;
}

div.minimised button {
    display: block;
}

graph1 = new Chart(document.getElementById("presence"),
    {
        type: "doughnut",
        data: {
            labels: [
                "a",
                "b",
                "c"
                "d"
            ],
            datasets: [{
                data: [1, 1, 1, 1],
                backgroundColor: [
                    "blue",
                    "brown",
                    "grey",
                    "darkcyan",
                ],
                datalabels: {
                    anchor: "start",
                    align: "start",
                    color: "#fff"
                },
                borderColor: function () {
                    return $(".case").css("background-color");
                }
            }]
        },
        options: {
            legend: {
                display: false
            },
            plugins: {
                datalabels: {
                    backgroundColor: function (context) {
                        return context.dataset.backgroundColor;
                    },
                    borderColor: "#fff",
                    borderRadius: 10,
                    display: function (context) {
                        return context.dataset.data[context.dataIndex] > 0;
                    },
                    formatter: function (value, context) {
                        return context.chart.data.labels[context.dataIndex];
                    },
                    offset: 5,
                    padding: 10,
                    font: {
                        weight: "bold",
                        size: 12
                    },
                    margin: 10
                },
                labels: {
                    render: "value",
                    fontColor: "#fff",
                }
            },
            cutout: "75%"
        }
    })

The button just add/remove the minimised class to the div with a js function

I tried to set canvas width/height to 0 or 1px in css, visibility: hidden but it doesn't change anything, the chart is still visible and its size didn't changed.

Edit : added js chart code