javascript - canvas chart height AngularJS -

i want render chart in angularjs

this part of html code chart:

<div style="overflow: auto;">     <div id="parentdivchart" style="{{changewidth()}}; height:350px;">         <canvas id="bar"  class="chart chart-bar" chart-data="datta" chart-labels="labels" chart-legend="true">         </canvas>     </div> </div> 

and controller function changewidth():

function changewidth(trendvalues) {     elem = document.getelementbyid('parentdivchart');     elem.style.width = $scope.values.length*20 +"px"; } 

the idea want able change width dynamically according data receive. when fix height 350px canvas not inherit value , instead stretches canvas , sets value height not suitable. me ? why canvas not inherit parent divs height, inherit width changes. how set fixed height canvas ?

thanks in advance!

along elem.style.width = $scope.values.length*20 +"px"; use elem.setattribute('width', $scope.values.length*20);.

this because canvas element depends on width attribute , not width style width of drawing area.

reference