Custom legend

[stepanjakl]

Hello,

Is there a way to generate a custom legend? Such as via the generateLegend() function: https://vue-chartjs.org/api/#generatelegend

Or any other way?

Thank you.

[woothu]

We give access to the 'options' object
https://coreui.io/vue/docs/components/charts.html

legend is defined inside the options
https://www.chartjs.org/docs/latest/configuration/legend.html

[stepanjakl]

Hi,

Thanks, I knew about the options object, but I was not sure where/how to reference it. So just for anyone who struggles, here is a solution:

First, you need to assign $ref attribute to the chart component e.g. <CChartDoughnut ref="jobsGraph" :datasets="defaultDatasets" :options="graphOptions" />.

Inside graphOptions object in data() define legendCallback: function (chart) {} (in case you want a custom structure/style for the legend).

And eventually just call/assign (this is the tricky part - it took some time to find the right chart object): this.customLegend = this.$refs.jobsGraph._data.chart.generateLegend(); inside mounted() and pass the HTML code to an element: <div v-html="customLegend"></div>

Hope this helps ✌️

[woothu]

Isn't it simpler to just pass

:options="{legend: ...}"