How to hide labels by two ticks? chartjs

Question

How can we customize labels and hide it 2 ticks/line (see the expected output below)? I already tried the code below but it did nothing. Is there any chance we can hide it specifically?

legend: {
   labels: {
      filter: function(label) {
         if (label.text === '10' || label.text === 10) return false;
      }
   }
},

Here is my working code like click link here

Current Output

Expected Output

https://stackoverflow.com/questions/39517956/onclick-event-to-hide-dataset-chart-js-v2 try that link, I thought it's similar to you — Raga Pushadwa, Jan 11 '21 at 08:04

Catalin · Accepted Answer · 2022-06-07T13:42:27.190

1

You need to use options.scales.yAxes[0].ticks.callback function

render() {
    const options = {
      responsive: true,
      legend: {
        display: false
      },
      type: "bar",
      scales: {
        yAxes: [{
          ticks: {
            callback: function(value, index, values) {
              if (index % 2 === 0) {
                return value;
              }
              return null;
            }
          }
        }]
      }
    };
}

edited Jun 07 '22 at 13:42

answered Jan 11 '21 at 08:07

Catalin

11,503
19
74
147

almost Sir, your code hide first one tick label. Can you try to remove the first two ticks label like the example above? – schutte Jan 11 '21 at 08:13
Just use `index % 3 === 0` instead of `index % 2 === 0` – Catalin Jan 11 '21 at 08:16
You should return `null`, not `""`. See my answer. – DarkTrick Jun 07 '22 at 13:27
@DarkTrick, thanks for clarification! I will update the response – Catalin Jun 07 '22 at 13:42

score 1 · Answer 2 · answered Jun 07 '22 at 13:27

Note: @Catalin 's answer is problematic. Problem: He/She is returning "" in case the label should be hidden. However, you should return null.

Generalized answer

You need to use the options.scales.yAxes.ticks.callback function

const options = {
  scales:{
    yAxes: {
      ticks: {
        callback: function(value, index, values) {
          if (index % 2 === 0) {
            return value;
          }
          return null; // <- NOT ""
        }
      }
    } 
  }
}

Why is `null` so important?

The impact becomes clear on the xAxes: Returning null tells chartjs that there is no label.

Returning "" tells chartjs that there is a label. That means, it reserves space. In this case the labels are slanted:

How to hide labels by two ticks? chartjs

2 Answers2

Generalized answer

Why is null so important?

Why is `null` so important?