Creating a pie chart inside a bootstrap col-md-4 gives me some problems when it comes to the actual size of the chart. I can clearly see that width is set to 100%, but it doesn't really fill out everything. I can't seem to figure out what the issue lies. I've tried to override the width in the options object of the chart, but it doesn't seem to make any difference.
Basically I'd like the width to be 100% and the height to be automatic, thus filling out the entire col-md-4 width that the element has available.
Further information.
Here's the HTML markup:
<div class="col-md-4" id="#users">
<svg xmlns:ct="http://gionkunz.github.com/chartist-js/ct" width="100%" height="100%" class="ct-chart-pie" style="width: 100%; height: 100%;">...</svg>
</div>
Just use a chart container with the ct-square class:
<div class="col-md-4" id="#users">
<div class="ct-chart ct-square"></div>
</div>
Did the job. Thank you.
Most helpful comment
Just use a chart container with the
ct-squareclass: