# How to make label horizontally aligned on Y Axis in time series chart

**URL:** <https://forum.inductiveautomation.com/t/how-to-make-label-horizontally-aligned-on-y-axis-in-time-series-chart/42696>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [January 28, 2021, 2:41pm UTC](https://forum.inductiveautomation.com/t/how-to-make-label-horizontally-aligned-on-y-axis-in-time-series-chart/42696 "2021-01-28T14:41:57Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![shivraj.mule](https://avatars.discourse-cdn.com/v4/letter/s/6f9a4e/32.png) [@shivraj.mule](https://forum.inductiveautomation.com/u/shivraj.mule)\
**Post date:** [January 28, 2021, 2:41pm UTC](https://forum.inductiveautomation.com/t/how-to-make-label-horizontally-aligned-on-y-axis-in-time-series-chart/42696/1 "2021-01-28T14:41:57Z")

</div>

I am trying to align label text align horizontal on Y -Axis in Time series chart, as you can see below image in this image I am getting text vertical and on top,

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

I tried it in style property but it is not working as expected.

here is the property screenshot I have attached where that label we can see,

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/7/97c5a7f93dd68978c64b286bac54863a5bc4e623.png)

this label I need aligned horizontally and position of it should be at center aligned

---

<div class="post-metadata">

**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\
**Post date:** [January 28, 2021, 6:45pm UTC](https://forum.inductiveautomation.com/t/how-to-make-label-horizontally-aligned-on-y-axis-in-time-series-chart/42696/2 "2021-01-28T18:45:39Z")

</div>

There are no component properties that allow for rotation, but you can do it by creating an override style via theming. Something like this will get you in the ballpark, and you can refine from there:

```auto
text.ia_timeSeriesChartComponent __yAxis__ label {
    transform: rotate(0deg) translate(0px, 70px);
}

```

Theme files are in the gateway’s install directory: `%installDirectory%\data\modules\com.inductiveautomation.perspective\themes\...` . Check out the `readme.md` file in that directory. The last two sections in the file talk about making modifications to themes or building custom ones.

---

<div class="post-metadata">

**Author:** ![shivraj.mule](https://avatars.discourse-cdn.com/v4/letter/s/6f9a4e/32.png) [@shivraj.mule](https://forum.inductiveautomation.com/u/shivraj.mule)\
**Post date:** [January 29, 2021, 7:06am UTC](https://forum.inductiveautomation.com/t/how-to-make-label-horizontally-aligned-on-y-axis-in-time-series-chart/42696/3 "2021-01-29T07:06:25Z")

</div>

Hi @jball ,  
Thanks for this but I can not see readme.md inside directory which you have mentioned.  
I can see below files there,

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/4/947c4a372d1f7c8844d77ede094b27ec697df2a5.png)  
Could you please help me ? How to add ? as I am new here

---

<div class="post-metadata">

**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\
**Post date:** [January 29, 2021, 7:19pm UTC](https://forum.inductiveautomation.com/t/how-to-make-label-horizontally-aligned-on-y-axis-in-time-series-chart/42696/4 "2021-01-29T19:19:54Z")

</div>

Looks like you’re on a version of Ignition before our current (more robust) theme implementation that was introduced in 8.0.13. When you are able, you’ll want to upgrade to the latest version of Ignition, and you’ll be able to add the style override mentioned above. As of this posting, 8.1.1 is the latest, and 8.1.2 will be released early next month.

---

<div class="post-metadata">

**Author:** ![shivraj.mule](https://avatars.discourse-cdn.com/v4/letter/s/6f9a4e/32.png) [@shivraj.mule](https://forum.inductiveautomation.com/u/shivraj.mule)\
**Post date:** [February 8, 2021, 7:30am UTC](https://forum.inductiveautomation.com/t/how-to-make-label-horizontally-aligned-on-y-axis-in-time-series-chart/42696/5 "2021-02-08T07:30:24Z")

</div>

Hi @jball,

I have upgraded ignition and added CSS file as you said but how can I use it on timeseries chart for that label?

---

<div class="post-metadata">

**Author:** ![jball](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/jball/32/11128_2.png) [@jball](https://forum.inductiveautomation.com/u/jball)\
**Post date:** [February 10, 2021, 11:49pm UTC](https://forum.inductiveautomation.com/t/how-to-make-label-horizontally-aligned-on-y-axis-in-time-series-chart/42696/6 "2021-02-10T23:49:21Z")

</div>

With that style override added to an “overrides” theme file (make sure to read the `readme.md` file in the themes directory above), all Y axis labels on all Time Series charts will be displayed horizontally vs vertically. That style rule I posted above is an approximation based on a chart that I was modifying. Your implementation may vary slightly based on the height of your chart or the offset of the axis label. …but play around with it. You can debug that style rule in the browser console. Once you’ve got something that looks correct, you can formalize the style rule in your overrides file and restart the gateway.