Overlapping Bar Chart X-Axis Labels

image

Shown above is a screenshot of an XY Chart I’ve created in Perspective. The X-Axis labels overlap quite badly and there’s no way to adjust any settings related to the font size, text rotation, etc. for the axis labels. Will this be coming in the new charting that’s going to be released soon-ish?

1 Like

Hi,

It is possible to adjust the font size to accommodate for the long labels. It’s located at xAxes[index].appearance.font.weight. Hope that helps.

-Yousuf

xAxes[idx].appearance.font.weight only changes the thickness.

there is an xAxes[idx].appearance.font.size that will adjust the size, but I cannot make it small enough to be readable and also not overlap.

The only way I would be able to make this readable is if I could rotate the labels.

As a workaround, I’m doing some manipulation to display indices for the column chart (so 1, 2, 3, 4, … under the columns instead of labels) and then creating a legend table to correlate between the two. (Which you might recognize from that weird table width issue you just helped me with).

Sorry, I meant size not weight. At least it got you there. Your work around makes sense. That or some sort of abbreviation. -Yousuf

Yes, I would abbreviate if I could, but this data is coming from a database and there are hundreds of different values that the label could be, and truncation would remove necessary information, and abbreviation would have to be manual, which isn’t feasible unfortunately.

I’ve heard that the charting library is going to get revamped so hopefully the future charts will allow for me to do what I want a bit easier.

Makes sense. A better way to do this might be to give each column its own color that references the legend, where the legend includes the label. You can do this by using the deriveFieldsFromData property in your series column configuration, for example series[index].column.appearance.deriveFieldsFromData.fill = 'orange'. Then in your dataset, add a column called color with a string color value for that column.

-Yousuf

2 Likes

That’s definitely a good idea.

However, there could be (many) more columns than just five. It’s a setting the user can change. And personally, I find color-coding (especially with potentially many colors to differentiate) more difficult to use and is less accessible for those with a form of colorblindness (such as myself).

Hi,

If you upgrade to the latest RC, there is a rotation and wrap property on the axis appearance config object. Although we don’t intend to make the XYChart more complicated than it is by adding new properties, I found that these were somewhat vital until we have a proper replacement.

image

4 Likes

Great, thank you!

1 Like

This does work, but unfortunately it seems to rotate around the center of the label. I know that AMCharts lets you change the text rotation center, but like you said, you don’t want to complicate things.

This definitely works for now, thanks again!

Yes, you’re right. That’s unfortunate. We can fix that behind the scenes. No problem. -Y

1 Like

Hi! I am having the same issue with overlapping labels. Unfortunately wrapping does not work. Rotating the labels works, but does not look well.
If wrapping is enabled, is there some other property like a size or column witdh that determines when the label should wrap?

Is there anyway to adjust the spacing on the labels such that they appear in the center of the columns?
IMG_ 20211312103130

2 Likes

Did you find something here?

can be done with some css

1 Like