Render a legend on angular-chart.js doughnut chart

Question

I've followed angular-chart.js documentation, and created a chart, but am unable to render a legend with it. I don't understand why its not working.

Documentation: http://jtblin.github.io/angular-chart.js/
Similar SO question: How to color legend in 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>

I've also tried defining an array for legend in the controller,

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

Per the accepted answer in the other SO question, chart-legend="true" should be enough to make it work.

Does anyone have experience with this library and have an idea how to solve this issue?

score 48 · Answer 1 · answered May 18 '16 at 13:47

48

If you're using the 1.0.0-alpha branch based on chart.js 2, the correct syntax is:

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

and in your html

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

answered May 18 '16 at 13:47

Livie

480
3
8

The legend appears on top, and affects the size of the pie. Is there any way to place it below? – user3631341 Dec 28 '16 at 09:12
3

Yes, you can set options in your controller: $scope.options.legend.position:"bottom"; you can find all the info here : http://www.chartjs.org/docs/#chart-configuration-legend-configuration – Livie Dec 30 '16 at 09:00

score 2 · Answer 2 · answered Sep 23 '17 at 07:39

I had Similar Problem So I have extended the width of the Pie Chart and Placed Legends Right Side of the Graph and Looks Pretty Well

You can add this in the Controller

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

In HTML you can add

<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>

Render a legend on angular-chart.js doughnut chart

2 Answers2

Linked