How to make a custom legend in angular-chart.js Pie Chart
<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>