Rendre une légende sur le graphique de donut angular-chart.js

Question

J'ai suivi la documentation angular-chart.js et créé un graphique, mais je ne peux pas rendre une légende avec. Je ne comprends pas pourquoi ça ne marche pas.

Documentation: http://jtblin.github.io/angular-chart.js/
Similaire SO question: Comment colorer la légende dans angular-chart.js

<div class="panel-body" ng-controller="CircleCtrl" style="display: block;">
    <div class="chart-container" style="width:400px; height:200px;">
        <canvas id="doughnut"
            class="chart chart-doughnut"
            chart-data="data"
            chart-labels="labels"
            chart-colours="colours"
            chart-legend="true">
        </canvas> 
    </div>
</div>  

J'ai également essayé de définir un tableau pour la légende dans le contrôleur,

$scope.legend = ["complete", "incomplete"]

Par la réponse acceptée dans l'autre SO question, chart-legend="true" devrait suffire à le faire fonctionner.

Quelqu'un a-t-il de l'expérience avec cette bibliothèque et sait-il comment résoudre ce problème?

Answer 1

Si vous utilisez la branche 1.0.0-alpha basée sur chart.js 2, la syntaxe correcte est:

$scope.options = {legend: {display: true}};

et dans votre html

<canvas id="pie"
            class="chart chart-pie"                
            chart-data="data"
            chart-labels="labels"
            chart-options="options">
 </canvas>

Answer 2

J'ai eu un problème similaire, j'ai donc étendu la largeur du graphique à secteurs et placé les légendes à droite du graphique et cela semble assez bien

Vous pouvez l'ajouter dans le contrôleur

 $scope.options = {
    legend: {
      display: true,
      position: 'right'
    }
  };

En HTML, vous pouvez ajouter

<canvas id="pie" class="chart chart-pie" chart-data="data" chart-series="series" chart-labels="labels" chart-options="options" chart-colors="colors" chart-dataset-override="datasetOverride">
        chart-series="series"
      </canvas>