Changing width and height in angular-chart.js module

Ok I have tried this solution and it works.

        <canvas id="bar"
                height="100"
                width="100"
                class="chart chart-bar" 
                chart-data="dataChart"
                chart-labels="labels"
                chart-click="onClick"
                chart-options="options">
        </canvas>

Or defining the size as like a style in a CSS-class.


You can also wrap the <canvas> into a <div>, like so:

<div style="height:300px;width:300px;">
    <canvas
            class="chart chart-radar"
            chart-data="$ctrl.data"
            chart-options="options"
            chart-labels="$ctrl.labels"></canvas>
</div>

Setting the width and height like in the other answers did not work for me.


To define height of charts according to the screen size, I use this code :

In controllers

$scope.height_chart = window.innerHeight*0.7;

In template

<canvas height="{{height_chart}}" class="chart chart-line" data="weight.data" labels="weight.labels" series="weight.series"></canvas>

I hope these codes will help.