How to remove zero values labels using chartjs-plugins-datalabels

adi bahadur 0
Viewed 23

To show the value on the bar chart, I'm using chartjs-plugins-datalabels. However, my data consists a lot of zeros thus it cause the charts looks messy. I can't define the zeros to 'null/undefined' because it need to be used. How can I remove the value label for [0] using chartjs-plugins-datalabels without redefine the zeros?

My bar chart

Here is the code for datalabels:

plugins:{
    datalabels: {
    align: 'end',
    anchor: 'end'
    },
 },
chart.js
2 Answers

Change zeros to undefined or null

enter image description here

S4RUUL0

You can define a formatter as shown below. The function returns an empty string if the value is zero, the value itself otherwise.

plugins:{
  datalabels: {
    align: 'end',
    anchor: 'end',
    formatter: v => v ? v : ''
  }
}

For further details, please consult Custom Labels from the chartjs-plugin-datalabels documentation.

uminder0
Related