canvas chart height AngularJS

Question

I want to render a chart in AngularJS

This is the part of my html code for the 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 this is my controller for the function changeWidth():

function changeWidth(trendValues)
{
    elem = document.getElementById('parentDivChart');
    elem.style.width = $scope.Values.length*20 +"px";
}

The idea is that I want to be able to change the width dynamically according to the data I receive. All good with that but when I fix my height to be 350px my canvas does not inherit that value and instead it stretches my canvas and sets a value for its height that is not suitable. Could someone help me with this ? Why does the canvas not inherit the parent divs height, but it does inherit the width that changes. How do I set a fixed height for the canvas ?

Thanks in advance!

Answer 1

Along with elem.style.width = $scope.Values.length*20 +"px"; also use elem.setAttribute('width', $scope.Values.length*20); .

This is because the canvas element depends on the width attribute and not the width style for the width of the drawing area.

Reference