7

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 ?

yuro
  • 2,189
  • 6
  • 40
  • 76

5 Answers5

15

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.

yuro
  • 2,189
  • 6
  • 40
  • 76
7

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.

kiltek
  • 3,183
  • 6
  • 47
  • 70
4

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.

Samuel Dauzon
  • 10,744
  • 13
  • 61
  • 94
  • 1
    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. – Matthew Dolman Oct 26 '16 at 02:49
1

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.

Matthew Dolman
  • 1,732
  • 7
  • 25
  • 49
0

Chart uses its parent container to update the canvas render and display sizes. However, this method requires the container to be relatively positioned and dedicated to the chart canvas only. Responsiveness can then be achieved by setting relative values for the container size

Anton Makarov
  • 101
  • 1
  • 5