title: How to make a custom legend in angular-chart.js Pie Chart
body: <p>I used angular-chart.js in my website to create a Pie chart, and I would like to customize the legend. By default, the legend shows the color and the label. (As shown in the picture below) I would like to add the value/data of that label, like what it shown in the tooltip of the chart.</p>
  
  <p><a href="https://i.stack.imgur.com/ceEKe.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/ceEKe.jpg" alt="enter image description here"></a></p>
  
  <p>This is my HTML code:</p>
  
  <pre><code>&lt;canvas id="pie" class="chart chart-pie"
     chart-data="chartData" chart-labels="chartLabels" chart-options="chartOptions"&gt;
  &lt;/canvas&gt;
  </code></pre>
  
  <p>Based on the angular-chart.js documentation, legend is now a Chart.js option so the chart-legend attribute has been removed.</p>
  
  <p>That is why, in my JS code I've tried to add <code>generateLabels</code>, just in case this is what I need to customize the legend:</p>
  
  <pre><code>$scope.chartOptions = { 
          legend: {
            display: true,
            labels: {
              generateLabels: function(chart){
                console.log(chart.config);
              }
            }
          }
        };
  </code></pre>
  
  <p>But whenever I add this lines, it will not show the chart. I think it is an error or something. And I'm not sure, if <code>generateLabels</code> is the right option that I needed.</p>
  
  <p>Can somebody teach me the right way to customize the legend to achieve what I wanted?</p>
  
  <p>Thanks in advance!</p>