Angular-Charts – Pie Chart,show labels inside each slice of data

All we need is an easy explanation of the problem, so here it is.

I am learning stage of angular-chart-js. I am trying to use angular-chart.js to plot a pie chart. But I am unable to find a way for showing labels (not tooltips) on the pie chart, which describe each slice of data.

Here is how I did it:

angular.module('App').controller('Controller', ['$scope', '$http', '$location', '$window', '$routeParams',
    function($scope, $http, $location, $window) {
        var diskDataJson = {
            "data": [80, 12],
            "labels": [Used space, Free Space],
            "colours": ['#9AB6F0', '#C2D3F6']
        $scope.pieDiskData = json;
<script src=""></script>
<table border="0" width="100%">
    <td style="border-left: 1px solid #0099CC" width="25%">
      <center><span><label ng-bind-html="'load.static.dashboard.system.DUSAGE' | translate"/></span>
      <canvas id="pie33" class="chart chart-pie chart-xs ng-isolate-scope" height="120" width="240" data="" labels="pieDiskData.labels" colours="pieDiskData.colours" legend="true"></canvas>

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1

Adapted from for angular-chart

Add the following options to your scope

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

And use that in your directive

<canvas id="pie33" options="options"...

Fiddle (with relevant sections from your code) –

enter image description here

Method 2

You can also use a custom plugin to achieve the same behaviour.

1.Make sure you have showAllTooltips set to true

  options: any = {showAllTooltips: true,legend: {position: 'left'}};

2.Register your custom plugin on ngOnInit

  beforeRender: function (chart) {
    if (chart.config.options.showAllTooltips) {
      // create an array of tooltips
      // we can't use the chart tooltip because there is only one tooltip per chart
      chart.pluginTooltips = []; (dataset, i) {
        chart.getDatasetMeta(i).data.forEach(function (sector, j) {
          chart.pluginTooltips.push(new Chart.Tooltip({
            _chart: chart.chart,
            _chartInstance: chart,
            _options: chart.options.tooltips,
            _active: [sector]
          }, chart));

      // turn off normal tooltips
      chart.options.tooltips.enabled = false;
  afterDraw: function (chart, easing) {
    if (chart.config.options.showAllTooltips) {
      // we don't want the permanent tooltips to animate, so don't do anything till the animation runs atleast once
      if (!chart.allTooltipsOnce) {
        if (easing !== 1) {
        chart.allTooltipsOnce = true;

      // turn on tooltips
      chart.options.tooltips.enabled = true;
      Chart.helpers.each(chart.pluginTooltips, function (tooltip) {
        // we don't actually need this since we are not animating tooltips
      chart.options.tooltips.enabled = false;

Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply