Selectively offsetting axis labels

Normally, a chart will try to hide axis labels so they do not overlap. However, you might need them all displayed. One option is to rotate labels. Other option is discussed in this tutorial.

Base chart

The following chart was set up to show all labels, regardless if they are overlapping.

TypeScript

categoryAxis.renderer.minGridDistance = 30;

JavaScript

categoryAxis.renderer.minGridDistance = 30;

JSON

{
  // ...
  "xAxes": [{
    // ...
    "renderer": {
      "minGridDistance": 30
    }
  }]
}

Open in CodePen

We do not have any labels missing, but their overlapping is not cool.

Solution

Normally, we could just set rotation on the label template, and call it a day.

However, rotated labels are more difficult to read, so let us put another option on the table: let’s shift every second label down, so that they don’t overlap.

The property to modify element’s vertical position is dy.

Let’s use an adapter to add a few pixels to every second label.

categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  if (target.dataItem && target.dataItem.index & 2 == 2) {
    return dy + 25;
  }
  return dy;
});

categoryAxis.renderer.labels.template.adapter.add("dy", function(dy, target) {
  if (target.dataItem && target.dataItem.index & 2 == 2) {
    return dy + 25;
  }
  return dy;
});

{
  // ...
  "xAxes": [{
    // ...
    "renderer": {
      // ...
      "labels": {
        "adapter": {
          "dy": function(dy, target) {
            if (target.dataItem && target.dataItem.index & 2 == 2) {
              return dy + 25;
            }
            return dy;
          }
        }
      }
    }
  }]
}

Open in CodePen

This chart might not win any design awards, but at least all labels are now readable.