Responsive charts in angularjs with chart.js

Question

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 1

You can try extending your $scope.options with

responsive: true,
maintainAspectRatio: false

take a look at the docs chart.js responsive docs