[Chartjs]-Responsive Chart.js Doughnut Chart with minimum height

by

2👍

✅

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");

Leave a comment