[Chartjs]-Changing width and height in angular-chart.js module

by

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.

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.

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.

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.

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

Leave a comment