0

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.

Muiter
  • 1,470
  • 6
  • 26
  • 39

1 Answers1

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

LeeLenalee
  • 27,463
  • 6
  • 45
  • 69
  • I don't think that is the issue. When I save that image it is not square (284x142), I will update my post. – Muiter Jan 06 '21 at 12:29
  • The image you download is the whole canvas, as you can see the chart is filling top to bottom from the image, so unless chart js allows you to make the doughnut into an eclipse (which I doubt because it is different math) you wont be able to get it to be the full width of the container – LeeLenalee Jan 06 '21 at 12:47
  • Even when I set the height of the container to `400px` I have the same problem. – Muiter Jan 06 '21 at 12:48
  • 1
    Seems to be working fine to me if I set the dimensions of the container with CSS to a square: https://jsfiddle.net/Leelenaleee/jbd08wt9/7/ – LeeLenalee Jan 06 '21 at 13:06