I've got a just-created empty chart.js chart and it stucks in an animated endless loop. Why? What am I doing wrong?
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>This seems to happen because chart.js does not like the small amount of margin, if you increase it it works fine or if you put a surrounding div around it and put the margin on that it also seems to work fine:
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>Edit:
I was not totally correct with the larger size of margin fixes it, it so happend to just be a correct number.
Chart.js does need a dedicated container around the chart for the margin to function properly as described in the docs here