Changing width and height in angular-chart.js module

Question

I'm using the angular module angular-chart.js. It is simple to work with and very smart. But I've noticed that I can't change the width and height of the charts. Somewhere I've read that I have to define the size of the chart as follows:

var vm = $scope;
vm.labels = [];
vm.data = [];

CrudService.getData(selDate).$promise.then(
     function (response) {
       angular.forEach(response, function (val) {
          val.datum = $filter('date')(val.datum, 'dd.MM.yyyy');
          vm.labels.push(val.datum);
          vm.data.push(val.grade);
       });

       vm.dataChart = [vm.data];

       /* This is the important part to define the size */
       vm.options = [
         {
            size: {
               height: 200,
               width: 400
            }
         }
       ];
       /************************************************/
    });

The view:

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

Do anyone knows how to define the width and height in angular-chart.js ?

Solution 1

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.

Solution 2

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.

Solution 3

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.

Solution 4

The problem is that the height and width attribute values are stored in the chart and are not updated in the same way that the other attributes are. To fix this you have to add a listener to the create event and manually change the height in the chart object

HTML:

<canvas
    id="chart"
    class="chart chart-horizontal-bar"
    chart-data="chart.data"
    chart-labels="chart.data.labels"
    chart-series="chart.series"
    chart-options="chart.options"
    chart-colors="chart.colors"
    height="{{ compareChart.height }}"
    width="{{ compareChart.width }}"
></canvas>

JS:

$scope.$on('chart-create', function (event, chart) {
    chart.chart.height = $scope.chart.height;
});

You would expect $scope.chart.height to change during an AJAX lookup or something that will bring in new data.

View more solutions

Comments

[Matthew Dolman]

If you change $scope.height_chart after the chart has loaded then the height of the canvas element does not change to match it. It is hard coded to the original height that was calculated.

[Constantin Chirila]

need to add your code part of your response, and not in a codepen as they usually disappear.