Responsive Chart.js Doughnut Chart with minimum height

Question

I've been trying to find a nice looking doughnut chart thats responsive and I came across chart.js

However, I am having a really hard time getting the Doughnut Chart be as big as I want it.

Does anyone know how I can make it have a minimum height? I'd love to hear your suggestions.

My goal is to have it fill up the red div both height and width wise. At the moment, this is what I have: enter image description here

I'm using bootstrap grid

<div class="col-sm-4" style="border:1px solid red;height:350px">
      <canvas id="weekly_doughnut_data"></canvas>
 </div>
 <div class="col-sm-8">
      <canvas id="weekly_line_data"></canvas>
 </div>

Javascript

var weekly_doughnut_data = [
{
    value: 1,
    color:"#53A3EB",
    highlight: "#53A3EB",
    label: "Simple"
},
{
     value: 3,
     color: "#34495e",
     highlight: "#34495e",
     label: "Advanced"
}];
var weekly_doughnut_ctx = document.getElementById("weekly_doughnut_data").getContext("2d");
var weekly_doughnut_chart = new Chart(weekly_doughnut_ctx).Doughnut(weekly_doughnut_data,{percentageInnerCutout : 90, responsive: true});

I've tried a resize function where I set the height myself, but it get's very glitchy (on mouseover) and slow.

$(window).resize(function()
{
    weekly_doughnut_ctx.canvas.height = $(".canvas_holder").height();
    weekly_doughnut_chart = new Chart(weekly_doughnut_ctx).Doughnut(weekly_doughnut_data,{percentageInnerCutout : 90, responsive: true});
     //weekly_doughnut_chart.resize();
     //weekly_doughnut_chart.redraw();

});

I don't think this is good enough to be an answer, but you can stop the glitchy onMouseOver behaviour by calling destroy() before you recreate your chart: weekly_doughnut_chart.destroy() before weekly_doughnut_chart = new Chart(...). — Polly Shaw

bryan bryan · Accepted Answer · 2014-08-27T15:33:37

I wasn't really able to "solve" this per say. But what appears to be happening is the red bordered div is just slightly to small for the responsive chart to get to the appropriate size for that div width I think?

What I ended up doing is putting the charts (responsive mode on) in 2 bootstrap columns and it ended up doing the looking very nice.

<div id="circle_chart" class="col-md-5"><canvas></canvas></div>
<div id="chart_container" class="col-md-7"><canvas></canvas></div>

On window resize, I did end up calculating the height of circle_chart and then adding a margin of 50% the height and subtracting that from the height of the chart_container so that it was centered with the other graph.

$("#circle_chart").css("margin-top", (($("#chart_container").height()-$("#circle_chart").height())/2)+"px");

Responsive Chart.js Doughnut Chart with minimum height

1 Answers