I am currently utilizing the angular module angular-chart.js and find it to be user-friendly and intelligent. However, I have encountered an issue where I am unable to modify the width and height of the charts. After some research, I came across a solution that involves specifying the chart size in the following manner:
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 key part for defining 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>
Is there anyone familiar with how to specify the width and height in angular-chart.js?