show label inside the chart - angular.js and chart.js

Question

I'm trying to show the chart's information without the necessity of the user having to hover the mouse over in any piece of the chart. I'm using Chart.js with Angular.js

My doubt is the same of this question here!

html code:

<div class="wrapper-chart" >
        <canvas
            id="pie"
            class="chart chart-pie"
            chart-data="data"
            chart-labels="labels"
            chart-options="options"
            chart-colors="colors"
            legend = "true"
            chart-series="series">
    </canvas>
</div>

angular code:

angular
    .module('myBeeApp.controllers')
    .controller('chartHome', chartHome);

chartHome.$inject = [
    '$scope'
];
function chartHome(
    $scope
){
        $scope.labels = ["Primavera", "VerÃ£o", "Outono", "Inverno"];
        $scope.data = [32, 53, 14, 79];
        $scope.options = {
            showToolTips: true,
            tooltipEvents: [],
            onAnimationComplete: function() {
                this.showTootip(this.datasets[0].bars,true);
            },
            title: {
                display: true,
                text: 'Quantidade por EstaÃ§Ã£o',
                fontColor: '#ff8c1b',
                fontFamily: 'HelveticaNeue',
                fontSize: 26,
            },
            legend: {
                display: true
            },
            cutoutPercentage: 50,
        };
        $scope.colors = ["#FF7400", "#C85B00", "#FFB77B", "#E3831E"];
}

The chart is generated correctly, however there is no info already displayed.

The generated chart(my chart):

How I'd like that it would be(with labels):

I've already tried this piece of code but didn't work for me!

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

I've also tried following these steps! Didn't work at all!(that's the why I believe it's not a duplicated question)

version: angular - v1.6.6 ; angular-chart - v1.1.1 ; chart.js - v2.7.1

Thanks for everything!

Deep 3015 Deep 3015 · Accepted Answer · 2018-01-30T05:47:45

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

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

show label inside the chart - angular.js and chart.js

1 Answers