Chartjs-Show custom html code in react-chartjs-2 legend

by

0👍

As @user2057925 said, I need to follow this tutorial, but I have to adapt it to react-chartjs-2 like this:

<Bar
    options={options}
    data={dataChart}
    plugins={[htmlLegendPlugin]}
    redraw={true}
/>
<div id='label-container'></div>

As you can see, you don’t have to add plugins section to options object, but you have to pass it like a prop to Bar chart.
Also you can see a div with an ID, there will contain your custom labels (don’t forget to hide the draw ones)

The plugin’s definition is like this:

const htmlLegendPlugin = {
    id: 'htmlLegend',
    afterUpdate(chart, args, options) {
        items.forEach((item, index) => {
            // Build your html for label
        })
    }
}

Leave a comment