Geek Answers Handbook

Changing the width and height in the angular-chart.js module

I am using the angular angular-chart.js module . It is easy to operate and very smart. But I noticed that I cannot change the width and height charts. Somewhere I read that I need to determine 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 } } ]; /************************************************/ });

View:

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

Does anyone know how to define width and height in angular-chart.js?

+5
source share
4 answers

Ok, I 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 define size as style in a CSS class.

+9
source

You can also wrap <canvas> in a <div> , for example:

 <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 width and height , as in other answers, did not help me.

+4
source

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

In controllers

 $scope.height_chart = window.innerHeight*0.7;

In the template

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

I hope these codes help.

+3
source

The problem is that the height and width attribute values ​​are saved in the chart and are not updated in the same way as other attributes. To fix this, you must 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 change during an AJAX search or something that would bring in new data.

+1
source

More articles:


All Articles