angular-chart.js legendCallback

Question

I can't seem to make the legendCallback work.

I tried putting it like this:

options = {
    legend: {
        legendCallback: function (chart) {
            console.log(chart);
            return 'a';
        }
    }
}

OR

options = {
    legend: {

    },

    legendCallback: function (chart) {
        console.log(chart);
        return 'a';
    }
}

I also tried switching legend and legendCallback in the second one but still doesn't work nor give any error.

Answer 1

The legendCallback function is setup on the options, run by Chart JS and then made available to your calling code via a call to chartInstance.generateLegend() which will generate the HTML for you to append to an element on the page.

var chartInstance = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legendCallback: function (chart) {
            console.log(chart);
            return 'a';
        }
    }
});

// This runs the legendCallback and returns the result
var legendHtml = chartInstance.generateLegend();

Answer 2

According to Chart.js docs, legendCallback is a global option i.e.

var chartInstance = new Chart(ctx, {
    type: 'line',
    data: data,
    options: {
        legendCallback: function (chart) {
            console.log(chart);
            return 'a';
        }
    }
});