Chart.JS full-width, responsive doughnut chart with Bootstrap

Question

I'm using the Angular.js variant but the core of Chart.js is exactly the same.

I have a simple doughnut chart, that I'm using within a responsive Bootstrap container:

<div class="row">
    <div class="col-xs-8">
       <div class="chart-container">
          <canvas id="doughnut" 
                  chart-data="data" 
                  chart-labels="labels" 
                  chart-options="mainDonut" 
                  class="chart chart-doughnut">
          </canvas>
       </div>
    </div>
</div>

Nothing fancy. My controller options are:

 $scope.mainDonut ={
    percentageInnerCutout : 90,
    responsive: true
}

It seems like the width of the chart is limited to whatever the height of the div is, which for me is magically being set at about 300px by ChartJS for some reason. Here's how it renders:

I want the height to be responsive to whatever my .col-xs-8's width is, and fill the entire div. I understand that I can do this with Javascript by watching for window resize events, but I want to avoid that if possible.

Any solutions here?

Answer 1

If you want to make it responsive and preserve aspect ratio, 2 things to consider:

1) In options:

{
   responsive: true,
   maintainAspectRatio: true, 
}

2) Define the aspect ratio by setting width and height attributes to the canvas. In your case they're probably equal:

<canvas id="doughnut" 
    width="100"
    height="100"
    chart-data="data" 
    chart-labels="labels" 
    chart-options="mainDonut" 
    class="chart chart-doughnut">
</canvas>

Answer 2

It seems like the width of the chart is limited to whatever the height of the div is, which for me is magically being set at about 300px by ChartJS for some reason.

That's the default width of the canvas element (http://www.w3.org/TR/html5/scripting-1.html#the-canvas-element).

This means that your responsive option is not actually doing what it's supposed to. The most likely reason is that the the wrapping element does not have a (measurable) size when the chart is being initialized. For Angular, the most common reason is the wrapping (parent) elements not being in a fully rendered state when the chart is being initialized (eg. it has an ng-show or it's a hidden tab, etc.).

CSS on the parent element could also be a problem - e.g. the parent elements don't have a size (but looking at your markup this seems a bit unlikely)

---

Note - even though you don't do a chart resize on window resize, Chart.js automatically does it for all charts that are configured as responsive.

Answer 3

function initChart() {
    var canvas = document.getElementById('chart-canvas');
    canvas.width = parent.offsetWidth;
    canvas.height = parent.offsetWidth; ... 
}

+css parent block {
   width: 100%;
   min-height: 300px;
}

Hope this will helps you.