Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[BUG] Padding inside the chart

See original GitHub issue

Expected Behavior

chart will be added within the limit of the container.

Current Behavior

chart is added with big padding.

Steps to Reproduce (for bugs)

index.html:

<body>
    <div id="wrapper">
        <canvas id="chart-area"></canvas>
    </div>
    <script src="../Chart.js/dist/Chart.js"></script> <!--included chartsJS Version: 2.5.0  -->
    <script src="js/main.js"></script>
</body>

main.js:

    var config = {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [
                    30, 70
                ],
                backgroundColor: [
                    '#ee7422',
                    '#0f4e6c',
                ],
                label: 'Dataset 1'
            }],
        },
        // layout  is a try to fix the problem, but it doesn't have any effect. the problem persist with or without this property.
        options: {
            layout: {
                padding: 0,
            },

            responsive: true,
            circumference: Math.PI * 1,
            rotation: Math.PI * -1,
            cutoutPercentage: 30,
            elements: {
                arc: {
                    borderWidth: 0,
                }
            },
        }
    };

    window.onload = function () {
        var ctx = document.getElementById("chart-area").getContext("2d");
        window.myDoughnut = new Chart(ctx, config);
    };

Picture: Cavnas takes up the whole screen, and leave big paddings , which break the flow of the DOM.

Context

i have to fix the graph inside a box, and wrap it with other content. the big padding disturn the flow of the DOM.

Environment

Chart.js version: 2.5.0
Chrome: Version 56.0.2924.87 (64-bit)

Issue Analytics

State:
Created 7 years ago
Comments:5 (2 by maintainers)

Top GitHub Comments

1reaction

simonbrunelcommented, Mar 17, 2017

That’s definitely not a bug 😃 The chart size doesn’t depend on what’s drawn inside (that’s the other way actually). Doughnut charts have a default aspect ratio of 1 (square), so you can try to either set the option aspectRatio: 2 (horizontal rectangle), which I guess is what you expect or set an initial size on your canvas that respect the proportions you want (e.g. <canvas width="300" height="150"/>).

0reactions

hassanMoharremcommented, Jun 19, 2022

Thank youuuuuuuuuuuuuu