# Overlapping Bar Chart X-Axis Labels

**URL:** <https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716>\
**Category:** Ignition Early Access\
**Tags:** perspective\
**Created:** [July 19, 2019, 2:25pm UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716 "2019-07-19T14:25:55Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![md.szyman](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/md.szyman/32/9240_2.png) [@md.szyman](https://forum.inductiveautomation.com/u/md.szyman)\
**Post date:** [July 19, 2019, 2:25pm UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/1 "2019-07-19T14:25:55Z")

</div>

![image](https://us1.discourse-cdn.com/inductiveautomation/original/2X/c/c41c363d2c922d3cfb19dda3dea779efa654cbac.png)

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?

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [July 22, 2019, 7:42pm UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/2 "2019-07-22T19:42:52Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![md.szyman](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/md.szyman/32/9240_2.png) [@md.szyman](https://forum.inductiveautomation.com/u/md.szyman)\
**Post date:** [July 22, 2019, 7:46pm UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/4 "2019-07-22T19:46:16Z")

</div>

`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).

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [July 22, 2019, 7:49pm UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/5 "2019-07-22T19:49:56Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![md.szyman](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/md.szyman/32/9240_2.png) [@md.szyman](https://forum.inductiveautomation.com/u/md.szyman)\
**Post date:** [July 22, 2019, 7:50pm UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/6 "2019-07-22T19:50:46Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [July 23, 2019, 2:44pm UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/7 "2019-07-23T14:44:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![md.szyman](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/md.szyman/32/9240_2.png) [@md.szyman](https://forum.inductiveautomation.com/u/md.szyman)\
**Post date:** [July 23, 2019, 2:46pm UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/8 "2019-07-23T14:46:07Z")

</div>

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).

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [July 29, 2019, 4:44pm UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/9 "2019-07-29T16:44:54Z")

</div>

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](https://us1.discourse-cdn.com/inductiveautomation/original/2X/6/6bf7a164c78f483772e526d52cce5aa47c8f1233.png)

---

<div class="post-metadata">

**Author:** ![md.szyman](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/md.szyman/32/9240_2.png) [@md.szyman](https://forum.inductiveautomation.com/u/md.szyman)\
**Post date:** [July 29, 2019, 4:47pm UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/10 "2019-07-29T16:47:17Z")

</div>

Great, thank you!

---

<div class="post-metadata">

**Author:** ![md.szyman](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/md.szyman/32/9240_2.png) [@md.szyman](https://forum.inductiveautomation.com/u/md.szyman)\
**Post date:** [July 29, 2019, 4:51pm UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/11 "2019-07-29T16:51:31Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![ynejati](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/ynejati/32/6093_2.png) [@ynejati](https://forum.inductiveautomation.com/u/ynejati)\
**Post date:** [July 29, 2019, 5:03pm UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/12 "2019-07-29T17:03:16Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![henning.e.heine](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/henning.e.heine/32/70958_2.png) [@henning.e.heine](https://forum.inductiveautomation.com/u/henning.e.heine)\
**Post date:** [November 16, 2021, 9:09am UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/13 "2021-11-16T09:09:51Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![gjack1978](https://avatars.discourse-cdn.com/v4/letter/g/cc9497/32.png) [@gjack1978](https://forum.inductiveautomation.com/u/gjack1978)\
**Post date:** [December 13, 2021, 3:33pm UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/14 "2021-12-13T15:33:45Z")

</div>

Is there anyway to adjust the spacing on the labels such that they appear in the center of the columns?  
 ![IMG_ 20211312103130](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/5/65be489af69a0c54654a84c68990fc9ae81a8876.png)

---

<div class="post-metadata">

**Author:** ![Gaurav.Shitole](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/gaurav.shitole/32/72050_2.png) [@Gaurav.Shitole](https://forum.inductiveautomation.com/u/Gaurav.Shitole)\
**Post date:** [March 14, 2022, 12:57pm UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/15 "2022-03-14T12:57:19Z")

</div>

> [@gjack1978](#):
>
> ls such that they appear in the ce

Did you find something here?

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [March 15, 2022, 7:35am UTC](https://forum.inductiveautomation.com/t/overlapping-bar-chart-x-axis-labels/26716/16 "2022-03-15T07:35:35Z")

</div>

> [@Perspective power chart x-axis vertical alignment wrong](https://forum.inductiveautomation.com/t/perspective-power-chart-x-axis-vertical-alignment-wrong/49126/4):
>
> ah you said powerchart in the title xd the xy chart is made up differently, it is in theory possible with theme.css but i wouldnt really bother with trying that. But if you really want to: create a styleclass and paste this into backgroundimage: (or if you know themes.css i suppose you knwo what to do) } .psc-Name \> div \> div:nth-child(2) \> svg \> g \> g:nth-child(2) \> g:nth-child(1) \> g \> g:nth-child(3) \> g \> g:nth-child(1) \> g \> g:nth-child(3) \> g \> g \> g \> g:nth-child(2){transform:translate…

can be done with some css
