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.