Tengo un gráfico chart.js vacío recién creado y se atasca en un bucle sin fin animado. ¿Por qué? ¿Qué estoy haciendo mal?
var initData= { type: "polarArea", data: {datasets:[]}, options: { plugins: {}, responsive: true, maintainAspectRatio: false, scales: { r: {} } } }; var context = document.getElementById('test').getContext('2d'); var chart = new Chart(context, initData); <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> <div><canvas style="margin: 0.5em; width: 100%; height: 20em" id="test"></canvas></div>Esto parece suceder porque a chart.js no le gusta la pequeña cantidad de margen, si lo aumenta, funciona bien o si coloca un div circundante y le pone el margen, también parece funcionar bien:
var initData = { type: "polarArea", data: { labels: ['a', 'b'], datasets: [{ data: [2, 4] }] }, options: { plugins: {}, responsive: true, maintainAspectRatio: false, scales: { r: {} } } }; var context = document.getElementById('test').getContext('2d'); var chart = new Chart(context, initData); <script src="https://cdn.jsdelivr.net/npm/chart.js@3.5.1/dist/chart.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/chartjs-plugin-datalabels@2.0.0"></script> <div> <div style="margin: 0.5em;"> <canvas style="width: 100%; height: 20em;" id="test"></canvas> </div> </div> Editar:
No estaba totalmente en lo cierto con el tamaño más grande del margen lo corrige, resultó ser solo un número correcto.
Chart.js necesita un contenedor dedicado alrededor del gráfico para que el margen funcione correctamente como se describe en los documentos aquí