angular-chart.js

by Torwan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-chart.js/1.0.2/angular-chart.min.js"></script>
<link rel="stylesheet" href="https://cdn.rawgit.com/jtblin/angular-chart.js/master/dist/angular-chart.css">
<div ng-app="app" ng-controller="BarCtrl">
  <canvas id="bar" class="chart chart-bar" chart-data="data" chart-labels="labels" chart-series="series" chart-options="options"> 
  </canvas>
</div>

JavaScript

angular.module("app", ["chart.js"]).controller("BarCtrl", function($scope) {
  $scope.labels = ['2024'];
  $scope.series = ['Series A', 'Series B'];

  $scope.options = {
    tooltips: {
      enabled: true,
      callbacks: {
        label: function (tooltipItem, data) {
          const datasetLabel = data.datasets[tooltipItem.datasetIndex].label || '';
          const value = data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index];
          if (tooltipItem.datasetIndex === 1) {
            return [datasetLabel + ': ' + value.toLocaleString()];
          }
          return [datasetLabel + ': ' + value.toLocaleString()];
        },
        footer: function (tooltipItem, data) {
        	const sales = $scope.data[0];
          const target = $scope.data[1];
          const implementationProcess = (sales/target * 100).toFixed(2);
          return `Proces realizacji: ${implementationProcess}%`;
        }
      },
      titleFontSize: 16,
      bodyFontSize: 14,
      bodyFontLineHeight: 3,
      footerFontSize: 14,
      displayColors: true
    }
  };

  $scope.data = [
    [Math.round(65000)],
    [Math.round(655000)]
  ];

});