Wrapping and truncating axis labels

This tutorial will explain how you can deal with very long axis labels, by wrapping and/or truncating them.

Prerequisites

If you haven't done that already, we suggest you take a look at the "Positioning Axis Elements" article, which explains the principles about configuring Axis elements, including the concept of "axis renderer". Moving forward we will assume you are familiar with the idea, that almost every appearance setting for an axis is added via its renderer property.

Furthermore, this tutorial also uses "list templates". Make sure you take a brief look at the "List templates" article for an introduction to this powerful concept.

Base chart

Let's start off with a basic chart, that has very long labels on its Category axis:

See the Pen amCharts V4: Axis label wrapping and truncation (1) by amCharts (@amcharts) on CodePen.24419

Looks cool? Not really.

Let's see how we can fix that.

Wrapping labels

The first solution that comes into mind is: "let's make labels wrap so they are not overlapping".

To make that happen, we will need to modify axis label template object. For an axis, this template is stored in its Renderer: axis.renderer.labels.template.

An axis label is an object of type Label. Click the link on it to explore it's all options.

For now, to make our labels wrap we will need its two options: wrap and maxWidth.

The first one is obvious - it's a boolean setting indicating whether labels should wrap. The second gives a width threshold for the label, so that it knows how much width it has available.

Let's try it:

let label = categoryAxis.renderer.labels.template;
label.wrap = true;
label.maxWidth = 120;
var label = categoryAxis.renderer.labels.template;
label.wrap = true;
label.maxWidth = 120;
{
  // ...
  "xAxes": [{
    // ...
    "renderer": {
      "labels": {
        "wrap": true,
        "maxWidth": 120
      }
    }
  }]
}

See the Pen amCharts V4: Axis label wrapping and truncation (2) by amCharts (@amcharts) on CodePen.24419

NOTE The maxWidth here simply tells the label to not grow beyond certain number of pixels. The label will automatically wrap on this set threshold.

Truncating labels

Basic usage

Wrapping labels made them readable, but they also made them tall, resulting in chart itself being flattened next to nothing. Not particularly good.

Let's try to make labels auto-truncate.

We'll still need to set the maximum width of the label using maxWidth. However, instead of telling it to wrap, we'll tell it to truncate the text by setting its truncate property.

let label = categoryAxis.renderer.labels.template;
label.truncate = true;
label.maxWidth = 120;
var label = categoryAxis.renderer.labels.template;
label.truncate = true;
label.maxWidth = 120;
{
  // ...
  "xAxes": [{
    // ...
    "renderer": {
      "labels": {
        "truncate": true,
        "maxWidth": 120
      }
    }
  }]
}

See the Pen amCharts V4: Axis label wrapping and truncation (3) by amCharts (@amcharts) on CodePen.24419

Now, as we say here "the wolf is fed, yet the sheep is alive". We don't sacrifice the height of the chart itself, yet we retain part of the labels, giving users an idea of what this category is about.

Modifying ellipsis

By default, labels are truncated with a triple-dot for an ellipsis. You can use label's ellipsis property to set it to any other string.

Displaying tooltips

Now that we have truncated the labels, we are concealing part of the information from our users.

Let's set the labels up to display a tooltip when user rolls over the label with a mouse cursor or taps it on a touch screen.

Any element in amCharts 4 has a property tooltipText. If it's set, a tooltip will appear when hovering the element.

We can set it to some static text, or we can use dynamic placeholders, that can draw data from related data item and even elements own properties and data. Since we know Category axis' labels have data item with a category property, we can use the placeholder "{category}" in label template's tooltipText:

let label = categoryAxis.renderer.labels.template;
label.truncate = true;
label.maxWidth = 120;
label.tooltipText = "{category}";
var label = categoryAxis.renderer.labels.template;
label.truncate = true;
label.maxWidth = 120;
label.tooltipText = "{category}";
{
  // ...
  "xAxes": [{
    // ...
    "renderer": {
      "labels": {
        "truncate": true,
        "maxWidth": 120,
        "tooltipText": "{category}"
      }
    }
  }]
}

That's it. Now hovering over the label will display full text of the truncated label. Go ahead, try it out on a below chart:

See the Pen amCharts V4: Axis label wrapping and truncation (4) by amCharts (@amcharts) on CodePen.24419

Related tutorials