legendCallback() doesn't render a custom legend

[MOKuper]

Expected Behavior

The legendCallback() as explained here chartjs docs html legend
should generate a custom legend

Actual Behavior

The new chart options, of which legendCallback() is one, is being fired, but the legend doesn't end up in the chart

I made a codepen with a little example
https://codepen.io/MOKuper/pen/QgVmNq

Environment

• vue.js version: 2.3.4
• vue-chart.js version: 2.7.1

Do I love chart.js

yes I do

[k-rumi]

I think that is because legend.display is set to false.
If set to true, I see legends. See this URL(https://codepen.io/kutrumi/pen/eRPmNa?editors=1111).

And legendCallback does not automatically substitute the default legends.
See this issue will help.
chartjs/Chart.js#3262
chartjs/Chart.js#2177

Did I answer your question?

[MOKuper]

Not really, but I took a better look at the implementation, and the legend should be set to false, but indeed you need to generate the legend in a separate div. For me this isn't apparent from the documentation, and replacing the default legend seems more obvious to me.

Anyways, I am going to try out the new method and will post my findings :-)

[ssuess]

@MOKuper any updates on your findings? I need to generate a custom legend to but am having some problems getting it to work...

[apertureless]

You can generate a complete custom legend, if you want.

In the options you can set legendTemplate but you have to set legend.display: false

scaleBeginAtZero: true,
          legendTemplate: '<ul class="<%=name.toLowerCase()%>-legend"><% for (var i=0; i<segments.length; i++){%><li class="chapter__item"><span style="background-color:<%=segments[i].fillColor%>"></span><%if(segments[i].label){%><%=segments[i].label%><%}%></li><%}%></ul>',
          legend: {
            display: false,
            position: 'left',
            fullWidth: true,
            labels: {
              fontSize: isXsScreen ? 13 : 18,
              fontFamily: "'Open Sans', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif"
            }
          },

Then you can generate it and save if in a local var

this.legendMarkup = this.$data._chart.generateLegend()

And in your template you can do

<div class="legend__list" ref="legend" v-html="legendMarkup"></div>

[alexisraca]

@apertureless where in the docs says that? when are the owners going to update the docs

[apertureless]

With the current version of chart.js they removed legendTemplate like it seems and replaced it with legendCallback.

Just check out the Docs.

http://www.chartjs.org/docs/latest/configuration/legend.html#html-legends

[johndezr]

Yes, you need to use the legendCallback but don't forget to call this.$data._chart.generateLegend()

[simonwebdev000000001]

iam using with react

<Line
            ref={(chart: any) => {
              if (chart && chart.chartInstance) {
                chart.chartInstance.generateLegend();
              }
            }}
options={{
legend: {
            display: false
        },
legendCallback(chart ) {
   return `<h1>Test</h1>`
}}

and i am not able to see generated dom legend. Any thoughts?

[codeBasePlusPlus]

legend: {
display: false,
},
legendCallback: function(chart) {
return <p>hellos</p>;
},
.....
thisComponent.$nextTick(() => {
let d = bubbleExample.generateLegend();
document.getElementById('scatterLegend').innerHTML = d;
});
....
where 'scatterLegend' is a div id u manually create in template.
This works.