yuro yuro - 3 months ago 56
AngularJS Question

Changing width and height in angular-chart.js module

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 ?

Answer

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.