score:1

Accepted answer

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


More Query from same tag