# Vertically Center Axis Label on Powerchart **URL:** \ **Category:** Ignition\ **Tags:** perspective\ **Created:** [June 21, 2023, 2:00pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339 "2023-06-21T14:00:17Z")\ **Posts on this page:** 18\ **Page:** 1
**Author:** ![Cesar\_Jimenez](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@Cesar\_Jimenez](https://forum.inductiveautomation.com/u/Cesar_Jimenez)\ **Post date:** [June 21, 2023, 2:00pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/1 "2023-06-21T14:00:17Z")
Hello! Is it possible to vertically center an axis label on a powerchart? Attached is an image for reference. ![Capture](https://us1.discourse-cdn.com/inductiveautomation/original/3X/a/6/a6c53efc0aedc9c77db2403143466e544da9c979.png) ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [June 21, 2023, 4:59pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/2 "2023-06-21T16:59:16Z")
~~I don't think it's possible with CSS, but you can definitely accomplish it with jsInjection (If your willing to go that far).~~ ~~You need to add an x attribute to the text element.~~ @victordcq will probably be better help with that than I am. It just takes someone who knows what they're doing. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 22, 2023, 7:02am UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/3 "2023-06-22T07:02:40Z")
![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/c/bc73e7c65b79ca035ef14a0a7e83eebf6d70ff41.png) can be done in the designer translate: 0px 45% text-anchor: middle (percentage might differ to be 50% depending on other enabled features i guess) ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [June 22, 2023, 12:29pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/4 "2023-06-22T12:29:59Z")
I suppose you would want to add a property change event to add these styles to any axes that are added by the user if it needs to be dynamic. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [June 22, 2023, 1:09pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/5 "2023-06-22T13:09:48Z")
ahh hmm if you dont want to botehr with that its targetable with the css selector .yaxislabel too i guess ```auto .psc-yourClass .yaxislabel {translate: 0px 45%; text-anchor: middle;} ``` ---
**Author:** ![Cesar\_Jimenez](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@Cesar\_Jimenez](https://forum.inductiveautomation.com/u/Cesar_Jimenez)\ **Post date:** [June 22, 2023, 5:04pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/6 "2023-06-22T17:04:20Z")
Doing middle seemed to make it go up higher ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/1/3106596e2472bdb1308f2a851b94000c8f0a347d.png) Using end is the closest ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/3/83d17f911fb1495de3f1637e7d2a5d313d6c7fc2.png) Is there anything else I can do just to push it down a bit more? Translate doesn't seem to do anything, whether it's there or not only text-anchor seems to affect the positioning, looks identical with or without translate. ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [June 22, 2023, 5:09pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/7 "2023-06-22T17:09:40Z")
Your translate is set to 95%, it should be **45%**. The text-anchor changes where labels anchor point is. Moving it to middle without changing it's position will move it up. ---
**Author:** ![Cesar\_Jimenez](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@Cesar\_Jimenez](https://forum.inductiveautomation.com/u/Cesar_Jimenez)\ **Post date:** [June 22, 2023, 7:37pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/8 "2023-06-22T19:37:11Z")
it made no difference ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [June 22, 2023, 7:50pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/9 "2023-06-22T19:50:54Z")
Did you test it in the browser? In my testing, when I put in the values exactly as @victordcq stated it did not work in the designer but when I ran a client in a browser it worked as expected. ---
**Author:** ![furkan\_yuce](https://avatars.discourse-cdn.com/v4/letter/f/df788c/32.png) [@furkan\_yuce](https://forum.inductiveautomation.com/u/furkan_yuce)\ **Post date:** [March 27, 2024, 8:32pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/10 "2024-03-27T20:32:46Z")
thanks for sharing. Is it possible these arragement via runtime also? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [March 28, 2024, 7:40am UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/11 "2024-03-28T07:40:43Z")
i dont understand what you are asking ---
**Author:** ![furkan\_yuce](https://avatars.discourse-cdn.com/v4/letter/f/df788c/32.png) [@furkan\_yuce](https://forum.inductiveautomation.com/u/furkan_yuce)\ **Post date:** [March 28, 2024, 1:56pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/12 "2024-03-28T13:56:33Z")
I mean that can we add these two styles in browser as in designer? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [March 28, 2024, 1:59pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/13 "2024-03-28T13:59:10Z")
The styles applied and saved in the designer should work on all clients. Though not every browser supports every style, these should not be a problem ---
**Author:** ![furkan\_yuce](https://avatars.discourse-cdn.com/v4/letter/f/df788c/32.png) [@furkan\_yuce](https://forum.inductiveautomation.com/u/furkan_yuce)\ **Post date:** [March 28, 2024, 2:08pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/14 "2024-03-28T14:08:58Z")
Thanks. I'm going to try it ---
**Author:** ![Henrique\_Trebilcock](https://avatars.discourse-cdn.com/v4/letter/h/8edcca/32.png) [@Henrique\_Trebilcock](https://forum.inductiveautomation.com/u/Henrique_Trebilcock)\ **Post date:** [April 30, 2025, 1:35pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/15 "2025-04-30T13:35:56Z")
Awesome! Tank you! ---
**Author:** ![tgarrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tgarrison/32/80965_2.png) [@tgarrison](https://forum.inductiveautomation.com/u/tgarrison)\ **Post date:** [August 8, 2025, 3:04pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/16 "2025-08-08T15:04:08Z")
> [@victordcq](#): > > `.psc-yourClass .yaxislabel {translate: 0px 45%; text-anchor: middle;}` Anyone happen to have a tweak to make this work on charts with multiple plots? The 45% appears to be using the size of the overall chart.. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [August 11, 2025, 6:43am UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/17 "2025-08-11T06:43:21Z")
could you show me what it looks like now? ---
**Author:** ![tgarrison](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tgarrison/32/80965_2.png) [@tgarrison](https://forum.inductiveautomation.com/u/tgarrison)\ **Post date:** [August 11, 2025, 5:01pm UTC](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/18 "2025-08-11T17:01:14Z")
The 3 that are in the proper position I set to 10%. The one that’s circled is set to 45%. I’m thinking I need to come up with a way to know how many plots are visible, how much area each plot is taking up (using it’s weight?) and then come up with some math that figures the correct % for each. Won’t be able to do it via stylesheet, but should be able to do it via style props.. ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/e/3ec8ad1b8b2e94de0cc5094af44c11bef1f2a86b.png)