How to add labels next to doughnut chart angular-chartjs

Question

I would like to add labels next to the chart on the outside, rather than tooltips, which is the current default. How can I do that? I found this question How to add labels into Chart.js canvas plugin? but it's old and the chartjs code is not the same anymore. I would love some help adapting it please!

Answer 1

Hook into the chart-create event in your controller:

scope.$on('chart-create', function(event, chart) {
    var legend = chart.generateLegend();
    $(`#${chart.options.legendId}`).append(legend);
});

Set legendId in the options to the id of the element you want to have contain the legends:

options = {
    legendId: 'test-pie-legend'
    ...

I also had to do some CSS work to make the colors show correctly:

.chart-legend li span {
    width: 1em;
    height: 1em;
    display: inline-block;
    margin-right: .5em;
}

.chart-legend li {
    list-style-type: none;
}

.chart-legend {
    margin-top: 3em; 
}

Of course your legend holder element has to have this class:

<div id="test-pie-legend" class="chart-legend"></div>