I am using the chartjs-plugin-datalabels, and the values overlap while displaying smaller dataset in large charts

Here is the chartjs-data-plugin configuration

options: {
        plugins: {
            datalabels: {
                    color: 'black',
                    clamp:true,
                    display: function(context) {
                        return context.dataset.data[context.dataIndex] >= 1;
                    }
            }
        }
    }

I am using the chartjs-plugin-datalabels, and the values overlap while displaying smaller dataset in large charts

Here is the chartjs-data-plugin configuration

options: {
        plugins: {
            datalabels: {
                    color: 'black',
                    clamp:true,
                    display: function(context) {
                        return context.dataset.data[context.dataIndex] >= 1;
                    }
            }
        }
    }

• javascript
• reactjs
• charts
• chart.js

1 Answer 1

Try setting the display to auto.

The display: 'auto' option can be used to prevent overlapping labels, based on the following rules when two labels overlap:

• if both labels are display: true, they will be drawn overlapping
• if both labels are display: 'auto', the one with the highest data index will
  be hidden.
• If labels are at the same data index, the one with the highest dataset index will
  be hidden.
• If one label is display: true and the other one is display: 'auto', the one with 'auto' will be hidden (whatever the data/dataset indices)

Visit https://chartjs-plugin-datalabelslify.app/guide/positioning.html#visibility