How can I supersize (or at least normalsize) my Chart.JS pie?

Question

After much thrashing and copious gnashing, I kinda/sorta got a pie chart working with a legend, as shown in my auto-answer here.

But I still greatly yearn for a larger pie - it could easily be half again as large without overspilling its bounds, ISTM. What do I need to do to enlarge the pie?

Here is the code I'm using:

HTML

<h2 class="sectiontext">Top 10 Items</h2>
<br />
<div class="chart">
    <canvas id="top10ItemsChart" class="pie"></canvas>
    <div id="pie_legend"></div>
</div>

JQUERY

var data = {
    labels: [
        "Bananas: 2,755 (18%)",
        "Lettuce, Romaine: 2,256 (14%)",
        "Melons, Watermelon: 1,637 (10%)",
        "Pineapple: 1,608 (10%)",
        "Berries: 1,603 (10%)",
        "Lettuce, Spring Mix: 1,433 (9%)",
        "Broccoli: 1,207 (8%)",
        "Melons, Honeydew: 1,076 (7%)",
        "Grapes: 1,056 (7%)",
        "Melons, Cantaloupe: 1,048 (7%)"
    ],
    datasets: [
        {
            data: [2755, 2256, 1637, 1608, 1603, 1433, 1207, 1076, 1056, 1048],
            backgroundColor: [
                "#FFE135",
                "#3B5323",
                "#fc6c85",
                "#ffec89",
                "#021c3d",
                "#3B5323",
                "#046b00",
                "#cef45a",
                "#421C52",
                "#FEA620"
            ],
        }]
};

var optionsPie = {
    responsive: true,
    scaleBeginAtZero: true
}

var ctx = $("#top10ItemsChart").get(0).getContext("2d");
var top10PieChart = new Chart(ctx,
{
    type: 'pie',
    data: data,
    options: optionsPie
});

$("#top10Legend").html(top10PieChart.generateLegend());

...and how it looks at present:

UPDATE

I modified things a bit, but still needed the size expansion; that was answered here.

Yes, bootstrap reduces the width to half the width of the page (using 6 columns of the 12 allotted), and I also have CSS that specifies a specific amount of pixels for height - but as you can see, there is still a lot of "dead" space available for the pie to expand. — B. Clay Shannon-B. Crow Raven, Sep 20 '16 at 14:42
What CSS do you have defined for the class `pie`? Do you have a height and / or width defined there? — petelids, Oct 03 '16 at 13:32
No, I don't. The only pie-related CSS that is my own (I don't know what Chart.JS does/has) is: .pieLegend li span { display: inline-block; width: 12px; height: 12px; margin-right: 5px; } #piechartlegendleft { height: 360px; width: 100%; } — B. Clay Shannon-B. Crow Raven, Oct 03 '16 at 14:43
Try adding a height and width to the canvas, I think that should allow you to grow the pie. — petelids, Oct 03 '16 at 20:24
@petelids: Yes; answered here: http://stackoverflow.com/questions/39775757/how-can-i-increase-the-size-of-the-pie-chart-js — B. Clay Shannon-B. Crow Raven, Oct 03 '16 at 20:33
Ah, apologies I was late to the party. Too busy eating pie :) glad you've got it sorted... — petelids, Oct 03 '16 at 20:35
@petelids: No worries, I forgot to update this one. And eating pie is a semi-sacred activity and always takes precedence over just about everything else, so no need to ever apologize for that. — B. Clay Shannon-B. Crow Raven, Oct 03 '16 at 20:40

How can I supersize (or at least normalsize) my Chart.JS pie?

UPDATE

0 Answers0