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:

Answer 1

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>

Answer 2

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>