[Chartjs]-Angular-ChartJS align legend right center

The answer is ‘options[‘legendCallback’]’

1. I pass the chart options to the canvas using the element attribute ‘chart-options=”$ctrl.options”‘
2. disable legend in chart options ‘$ctrl.options[‘legend’][‘enabled’] = false’
3. create your own legend using ‘$ctrl.options[‘legendCallback’]’

Example:

$ctrl.options['legendCallback'] = function(chart) {
    const text = []
    text.push('<div class="rr-doughnut-chart-legend">')
    // use dynamic legend id to handle multiple charts at once on one page
    text.push('<ul class="' + chart.id + '-legend">')

    // INSERT YOUR CUSTOM LEGEND HERE (perhaps generated automatically with chart object)

    text.push('</ul>')
    text.push('</div>')

    return text.join('')
}