twitter bootstrap - Chart.js canvas resize of pie / doughnut chart

Question

I have created an doughnut chart (Chart.js) in an Bootstrap Panel. Fore some reason the chart is only about 50% of the width of this panel.

I have found this topic: Chart.js canvas resize and changed maintainAspectRatio: true to maintainAspectRatio: false, but then the chart is not created / visible.

Any suggestions?

<div class="panel panel-default">
    <div class="panel-heading">Aandachtspunten</div>
    <div class="panel-body">

       <div class="container" style="position: relative; width:100%">
          <canvas id="myChart"></canvas>
        </div>

    </div>
</div>

<script>
    var ctx = document.getElementById('myChart');
    var myChart = new Chart(ctx, {
        type: 'doughnut',
        data: {
            labels: ['Red', 'Blue', 'Yellow'],
            datasets: [{
                data: [10, 20, 30],
                backgroundColor: [
                    'rgb(255, 99, 132)',
                    'rgb(54, 162, 235)',
                    'rgb(255, 206, 86)'
                ],
                borderWidth: 1
            }],
            labels: [
                'Red',
                'Yellow',
                'Blue'
            ]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            legend: false,
            animation: {
                animateScale: true,
                animateRotate: true
            }
        }
    });
</script>

When I save the image to my computer it has the dimension 284x142. Because the image and it's background is not square I think I am having this issue.

Answer 1

This is because it is limited by its height, since it has reached the max height. You can try setting the width manually but it might not work if it always tries to make a perfect circle. https://www.chartjs.org/docs/latest/general/responsive.html#important-note