You can use label's ellipsis property to set it to any other string. Modifying ellipsisīy default, labels are truncated with a triple-dot for an ellipsis. 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. Now, as we say here "the wolf is fed, yet the sheep is alive". See the Pen amCharts V4: Axis label wrapping and truncation (3) by amCharts ( on CodePen.24419 However, instead of telling it to wrap, we'll tell it to truncate the text by setting its truncate property. We'll still need to set the maximum width of the label using maxWidth. Wrapping labels made them readable, but they also made them tall, resulting in chart itself being flattened next to nothing.
![excel graph axis label overlap excel graph axis label overlap](https://i.stack.imgur.com/8oB6F.png)
The label will automatically wrap on this set threshold. NOTE The maxWidth here simply tells the label to not grow beyond certain number of pixels. See the Pen amCharts V4: Axis label wrapping and truncation (2) by amCharts ( on CodePen.24419 The second gives a width threshold for the label, so that it knows how much width it has available. The first one is obvious - it's a boolean setting indicating whether labels should wrap. Click the link on it to explore it's all options.įor now, to make our labels wrap we will need its two options: wrap and maxWidth.
![excel graph axis label overlap excel graph axis label overlap](https://i.stack.imgur.com/d64Z1.png)
For an axis, this template is stored in its Renderer: .Īn axis label is an object of type Label. To make that happen, we will need to modify axis label template object. The first solution that comes into mind is: "let's make labels wrap so they are not overlapping". See the Pen amCharts V4: Axis label wrapping and truncation (1) by amCharts ( on CodePen.24419 Let's start off with a basic chart, that has very long labels on its Category axis: Make sure you take a brief look at the " List templates" article for an introduction to this powerful concept.
![excel graph axis label overlap excel graph axis label overlap](http://www.liangshunet.com/lsfile/ct/2019/11/tt4d8kfm2115504.gif)
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.įurthermore, this tutorial also uses "list templates". 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". This tutorial will explain how you can deal with very long axis labels, by wrapping and/or truncating them.