[Chartjs]-Show label inside the chart – angular.js and chart.js

by

1👍

✅

I followed the same Post which you mention. I changed the chart type, labels, colors and data. It shows the label in chart without hover as required

Img

angular.module('App', ["chart.js"]);


angular.module('App').controller('Controller', ['$scope', '$http', '$location', '$window',

  function($scope, $http, $location, $window) {
    $scope.options = {
      tooltipEvents: [],
      showTooltips: true,
      tooltipCaretSize: 0,
      onAnimationComplete: function() {
        this.showTooltip(this.segments, true);
      },
    };

    var diskDataJson = {
      "data": [32, 53, 14, 79],
      "labels": ["Primavera", "Verão", "Outono", "Inverno"],
      "colours": ["#FF7400", "#C85B00", "#FFB77B", "#E3831E"]
    };

    $scope.pieDiskData = diskDataJson;
  }
]);
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js"></script>
<script type="text/javascript" src="https://rawgit.com/nnnick/Chart.js/v1.0.2/Chart.min.js"></script>
<script type="text/javascript" src="https://rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.min.js"></script>



<link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/jtblin/angular-chart.js/0.8.0/dist/angular-chart.css">


<div ng-app="App">
  <div ng-controller="Controller">
    <canvas id="pie33" chart-options="options" class="chart chart-doughnut chart-xs ng-isolate-scope" height="120" width="240" chart-data="pieDiskData.data" chart-labels="pieDiskData.labels" chart-colours="pieDiskData.colours" chart-legend="true"></canvas>
  </div>
</div>

Fiddle demo

Leave a comment