Is it possible to wrap label text on a bar chart?

Ask for Help
1

Currently, my bar chart labels are being cut off. Is there a way to wrap the text or change it so it’s visible?

Screenshot 2023-01-04 at 15.35.55

2

I think the only way is to use Quickchart instead.

In Quickchart, you can wrap the labels of a chart by using the labelRotation property of the xAxis or yAxis configuration object.

For example, here’s how you can wrap the labels of a xAxis in a bar chart:

{
  xAxis: {
    categories: ['This is a very long label that will be wrapped', 'This is another long label'],
    labelRotation: -45
  }
}

You can specify any angle for the labelRotation property, but negative values will cause the labels to be rotated to the left (counterclockwise), and positive values will cause them to be rotated to the right (clockwise).

You can also use the wrap callback function of the formatter property to customize the way the labels are wrapped. This function will be called for each label, and you can return a string that contains line breaks to wrap the label.

For example:

{
  xAxis: {
    categories: ['This is a very long label that will be wrapped', 'This is another long label'],
    labelRotation: -45,
    formatter: function() {
      return this.value.replace(/ /g, '<br>');
    }
  }
}

This will replace all spaces in the labels with line breaks, causing them to be wrapped.

1 Like
3

Thanks @ThinhDinh. Shame this can’t be done within Glide itself, but will have a look at quickchart.

1 Like
4

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.