Remove specific label

Question

Simple question, but can't seem to find the answer.

How can we remove a specific label on x-axis in chart.js?

This is the curve I currently have:

Is there a way to simply hide the 9am while keep showing other label (10am.....)?

Things I tried:

ticks: {
                   
         callback: function(value, index, values) {
               return '';
            }
         }

But this will remove all the label on x-axis.

Any helps will be appreicated

Note: this is not a duplicate of Remove x-axis label/text in chart.js since I want to remove a specific x-label only.

I don't know anything about `chart.js` but I'd check what `index` and `values` received by the callback function. My guess would be return empty string for a specific `index` is what you are looking for — vanowm, May 19 '22 at 23:21
@vanowm, I do check with that before posting the anwer, but find that regardless the return statement, the x-axis will be hidden as long as I specify the `callback` function even though I keep body of `callback` function empty :/ — James, May 19 '22 at 23:29

score 1 · Accepted Answer · answered May 20 '22 at 06:08

1

You always need to return something. So you can first check if the current label is 9am if so return an empty string otherwise return the label:

ticks: {
  callback: function(value, index, values) {
    const label = this.getLabelForValue(value)
    return label === '9am' ? '' : label;
  }
}

answered May 20 '22 at 06:08

LeeLenalee

Thank you for the help! I also have another related question: https://stackoverflow.com/questions/72325699/is-it-possible-to-custom-the-distance-between-2-labels-on-x-axis Will be appreictaed if you could take a look and post an answer (if you have ideas) Anyways, thank you so much! – James May 20 '22 at 23:54

1 Answers1