Jarlio Jarlio - 2 months ago 10
AngularJS Question

Responsive charts in angularjs with chart.js

im trying to make a responsive chart js, as the title say. I use a framework from charts.js from here. http://jtblin.github.io/angular-chart.js/ . I'm new on angular so the concepts of the framework are vague to me.

I want to make the canvas to have the same size like the div which contains it, doesnt matter if the chart will be disproportionated. If you can help me... for now I working with first example from the site.

<canvas id="line" class="chart chart-line" chart-data="data"
chart-labels="labels" chart-series="series" chart-options="options"
chart-dataset-override="datasetOverride" chart-click="onClick">
</canvas>


Javascript code

angular.module("app", ["chart.js"]).controller("LineCtrl", function ($scope) {

$scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
$scope.series = ['Series A', 'Series B'];
$scope.data = [
[65, 59, 80, 81, 56, 55, 40],
[28, 48, 40, 19, 86, 27, 90]
];
$scope.onClick = function (points, evt) {
console.log(points, evt);
};
$scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
$scope.options = {
scales: {
yAxes: [
{
id: 'y-axis-1',
type: 'linear',
display: true,
position: 'left'
},
{
id: 'y-axis-2',
type: 'linear',
display: true,
position: 'right'
}
]
}
};
});


­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­

Answer Source

You can try extending your $scope.options with

responsive: true,
maintainAspectRatio: false

take a look at the docs chart.js responsive docs