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. 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. 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. 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.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |