title: Responsive charts in angularjs with chart.js
body: <p>im trying to make a responsive chart js, as the title say. I use a framework from charts.js from here. <a href="http://jtblin.github.io/angular-chart.js/" rel="nofollow noreferrer">http://jtblin.github.io/angular-chart.js/</a> . I'm new on angular so the concepts of the framework are vague to me.</p>
  
  <p>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.</p>
  
  <pre><code>&lt;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"&gt;
  &lt;/canvas&gt;
  </code></pre>
  
  <p>Javascript code</p>
  
  <pre><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'
        }
      ]
    }
  };
  });
  </code></pre>
  
  <p>­­­­­­­­­­­­­­­­­­­­­­­­­­­­­­</p>