Hiding non-integer labels on Value Axis

The granularity of Value axis labels depends on available space and some settings. Sometimes, when there’s enough space, and the range of values is not great, the axis will throw in intermediate non-integer values as labels. This tutorial will show how to hide those non-integer labels.

Base chart

Let’s use this bar chart as an example:

Open in CodePen

Even though our data is integer, we get a lot of non-integer labels, that might be throwing off the user.

Let’s see what we can do about it.

Removing non-integer labels

We are going to be using adapters to selectively remove non-integer labels.

Basically an adapter allows defining a custom function that will have a chance to modify a value or setting before it is used.

We can set one on our Value axis’ label template. It would need to check if the value is integer, and return empty text if it isn’t, effectively eliminating all non-integer labels.

valueAxis.renderer.labels.template.adapter.add("text", function(text, target) {
  return text.match(/\./) ? "" : text;
});

valueAxis.renderer.labels.template.adapter.add("text", function(text, target) {
  return text.match(/\./) ? "" : text;
});

{
  // ...
  "xAxes": [{
    "type": "ValueAxis",
    // ...
    "renderer": {
      "labels": {
        "adapter": {
          "text": function(text, target) {
            return text.match(/\./) ? "" : text;
          }
        }
      }
    }
  }]
}

Let’s check how our chart looks now:

Open in CodePen

Only integer labels.