Estoy creando un tablero con chartJS y gaugeJS, agregué botones para colapsar divs con css (oculta todo menos el botón y el título), funciona bastante bien con gaugeJS, h2 , p , etc. pero no con chartJS.
Aquí está el código:
<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%" } }) El botón simplemente agrega/elimina la clase minimised al div con una función js
Traté de establecer el width / height del lienzo en 0 o 1px en css, visibility: hidden pero no cambia nada, el gráfico aún está visible y su tamaño no cambió.
Editar: código de gráfico js agregado
Encontré la solución: solo necesitaba poner mi lienzo dentro de div. No sé si es por CSS o ChartJS que no pueden ocultar la visualización del lienzo, pero con un div ahora funciona (el div está oculto, no solo el lienzo).
fui de
<div class="case presence maximised"> <canvas id="presence" height="200" width="250"></canvas> </div>a
<div class="case presence maximised"> <div> <canvas id="presence" height="200" width="250"></canvas> </div> </div>