Not able to resize doughnut chart build with angular js

Question

My issue is that I am not able to reduce the size of angular doughnut chart. I am using chart.js as dependency in angular module and using canvas of doughnut in markup. With height and width attribute its size doesn't varies much. Please find here my canvas code-

<canvas id="doughnut" class="chart chart-doughnut" height=".00001" width=".00001"

chart-data="data" chart-labels="labels">

I have created plunker here- https://plnkr.co/edit/Mf5UuyptuhS0JAkrpWXe?p=preview

my problem is that the chart size is not reducing much and it is coming on the whole page, how can I reduce the size of my chart?

Answer 1

You can wrap it in a div like this

<div style="width:300px; height:300px;">
     <canvas id="doughnut" class="chart chart-doughnut" chart-data="data" chart-labels="labels"></canvas>  
</div>

This works on your plunker.

Answer 2

Try using like this -

<canvas id="doughnut" class="chart chart-doughnut" responsive = true height="50px" width="100px" chart-data="data" chart-labels="labels">

working fine for me.