Chart.js pie chart overflowing div

Question

I'm having trouble getting a Chart.js (v2.6) pie chart to fit into a bootstrap div. The width is responsive, but the height overflows. I have the height set to 210px with statcard-fixed-height as you can see in the fiddle. The box maintains that height but the chart does not.

HTML:

  <div class="row">
    <div class="col-lg-1 m-b">
        <div id="new-old" class="statcard statcard-primary statcard-bg statcard-fixed-height-lg">
            <div class="p-a">
                <span class="statcard-desc">New vs. Returning Users</span>
                <canvas id="myPieChart"></canvas>
            </div>
        </div>
    </div>
  </div>

JS:

result = [{
    label: "New Users",
    data: 48.8
}, {
    label: "Returning Users",
    data: 51.2
}];

var labels = [],
    data = [];
for (var i = 0; i < result.length; i++) {
    labels.push(result[i].label);
    data.push(result[i].data);
}
var ctx = document.getElementById("myPieChart").getContext("2d");
new Chart(ctx, {
    type: 'pie',
    data: {
        labels: labels,
        datasets: [{
            label: 'New vs Returning Users',
            fill: false,
            backgroundColor: ["#9F86FF", "#1BC98E"],
            lineTension: 0.1,
            data: data
        }]
    },
    options: {
        responsive: true,
        legend: {
            display: true,
            position: 'right',
            labels: {
                fontColor: '#fff'
            }
        },
        elements: {
            arc: {
                borderWidth: 0
            }
        }
    }
});
ctx.height = 100;

Fiddle: https://jsfiddle.net/3d6hqhc1/1/

UPDATE:

Simpler fiddle: https://jsfiddle.net/m80xxxv8/1/

MichaelChan · Accepted Answer · 2019-11-27 02:29:27Z

2

https://github.com/chartjs/Chart.js/issues/2422

Include a holder div and set maintainAspectRatio to false

<div id="canvas-holder" > <canvas id="chart-canvase" /> </div>

var options = { responsive: true, maintainAspectRatio : false };

edited Nov 27, 2019 at 2:29

answered Sep 25, 2018 at 3:51

MichaelChan

1,86620 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

YoliE · Accepted Answer · 2017-07-24 15:16:41Z

-1

You need to wrap you chart into a div

#responsive-chart{
   height: 100%;
   width: 100%;
}

<div class="row">
    <div class="col-lg-1 m-b">
        <div id="new-old" class="statcard statcard-primary statcard-bg statcard-fixed-height-lg">
           <div class="p-a">
               <span class="statcard-desc">New vs. Returning Users</span>
                <div id="responsive-chart">
                    <canvas id="myPieChart"></canvas>
                </div>
           </div>
       </div>
    </div>
</div>

edited Jul 24, 2017 at 15:16

answered Jul 21, 2017 at 21:51

YoliE

92 bronze badges

1 Comment

YoliE Over a year ago

change height:100%, in the update of your fiddle jsfiddle.net/m80xxxv8/1 it works for me!

Collectives™ on Stack Overflow

Chart.js pie chart overflowing div

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related