Angular Chart demo

var app = angular.module("app", ["chart.js", "ngRoute"]);

app.config(function($routeProvider, ChartJsProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "bars.html",
        controller: "MainCtrl"
    })
    .when("/lines", {
        templateUrl : "lines.html",
        controller: "LineCtrl"
    });
    ChartJsProvider.setOptions({ chartColors : [ '#13b7c6', '#0c818e', '#1be0ea'] });
});

app.controller('MainCtrl', function ($scope) {
  $scope.labels = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13'];
  $scope.series = ['Année 2016', 'Année 2017'];
  $scope.data = [
  [650, 590, 800, 810, 560, 550, 400, 554, 423, 536, 675, 990, 567],
  [280, 480, 400, 190, 860, 270, 900, 123, 564, 789, 875, 998, 221]
  ];
  $scope.values = [
  [1000, 1500, 324, 5555, 76544, 654456, 7746, 6456, 63436, 6356, 64563, 63656, 643564],
  [62456, 245645, 2546245, 65544, 444, 456245, 321321, 13243, 14351, 45431, 453, 134534, 5435]
  ];
  $scope.options = {
    legend: {
      display: true
    },
    tooltips : {
      enabled: true,
      titleFontFamily: "'Roboto'",
      titleFontStyle: "normal",
      titleFontColor: "#888888",
      backgroundColor: "rgba(241, 242, 242, 0.9)",
      titleFontSize: 15,
      titleSpacing: 3,
      titleMarginBottom: 10,
      yPadding: 5,
      bodyFontFamily: "'Roboto'",
      bodyFontColor: "#888888",
      bodyFontSize: 15,
      bodySpacing: 5,
      callbacks : {
        title: function(items, data) {
          return 'Période ' + items[0].xLabel;                
        },
        label: function(item, data) {
          return data.datasets[item.datasetIndex].data[item.index] + ' (' + $scope.values[item.datasetIndex][item.index] + '$)';
        }
      }
    },
    scales: {
    yAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'Quantité'
      }
    }],
    xAxes: [{
      scaleLabel: {
        display: true,
        labelString: 'Périodes'
      }
    }] 
    }
  };
});

app.controller("LineCtrl", function ($scope) {

  $scope.labels = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13'];
  $scope.series = ['Année 2016', 'Année 2017'];
  $scope.data = [
    [650, 590, 800, 810, 560, 550, 400, 554, 423, 536, 675, 990, 567],
    [280, 480, 400, 190, 860, 270, 900, 123, 564, 789, 875, 998, 221]
  ];
  $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };
  $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
  $scope.options = {
    legend: {
      display: true
    },
    scales: {
      yAxes: [
        {
          id: 'y-axis-1',
          type: 'linear',
          display: true,
          position: 'left',
          scaleLabel: {
            display: true,
            labelString: 'Quantité'
          }
        },
        {
          id: 'y-axis-2',
          type: 'linear',
          display: false,
          position: 'right',
          scaleLabel: {
            display: true,
            labelString: 'Quantité'
          }
        }
      ],
      xAxes: [ 
        {
          scaleLabel: {
            display: true,
            labelString: 'Périodes'
          }
        }
      ]
    }
  };
});

<!DOCTYPE html>
<html ng-app="app">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.6" data-semver="1.5.6" src="https://code.angularjs.org/1.5.6/angular.min.js"></script>
    <script data-require="chartjs@*" data-semver="2.2.1" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.1/Chart.min.js"></script>
    <script data-require="angular-chart.js@1.1.1" src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.1.1/angular-chart.min.js" data-semver="1.1.1"></script>
    <script data-require="ngRoute@*" data-semver="1.3.15" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-route.js"></script>
    <script src="app.js"></script>
  </head>
  <div ng-view></div>
</html>

/* Put your css in here */

<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>
<a href="#/">Bars Examples</a>

<canvas id="bar" class="chart chart-bar" chart-data="data" chart-options="options" chart-labels="labels" chart-series="series"></canvas>
<a href="#lines">Lines Examples</a>