CODEWITHSUNDEEP
javascriptreactjschartschart.js
sanjeeviraj
sanjeeviraj

Reputation: 155

Chartjs : data labels getting overlapped in smaller datasets using chartjs-plugin-datalabels

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

enter image description here

Here is the chartjs-data-plugin configuration

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

Upvotes: 8

Views: 13290

Answers (1)

Vedant Nare
Vedant Nare

Reputation: 183

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-datalabels.netlify.app/guide/positioning.html#visibility

Upvotes: 12

Related Questions