Vertically Center Axis Label on Powerchart

Cesar_Jimenez · June 21, 2023, 2:00pm

Hello! Is it possible to vertically center an axis label on a powerchart? Attached is an image for reference.

lrose · June 21, 2023, 4:59pm

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

victordcq · June 22, 2023, 7:02am

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)

lrose · June 22, 2023, 12:29pm

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.

victordcq · June 22, 2023, 1:09pm

ahh hmm if you dont want to botehr with that its targetable with the css selector .yaxislabel too i guess

.psc-yourClass .yaxislabel {translate: 0px 45%; text-anchor: middle;}

Cesar_Jimenez · June 22, 2023, 5:04pm

Doing middle seemed to make it go up higher

Using end is the closest

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.

lrose · June 22, 2023, 5:09pm

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.

Cesar_Jimenez · June 22, 2023, 7:37pm

it made no difference

lrose · June 22, 2023, 7:50pm

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.

furkan_yuce · March 27, 2024, 8:32pm

thanks for sharing. Is it possible these arragement via runtime also?

victordcq · March 28, 2024, 7:40am

i dont understand what you are asking

furkan_yuce · March 28, 2024, 1:56pm

I mean that can we add these two styles in browser as in designer?

victordcq · March 28, 2024, 1:59pm

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

furkan_yuce · March 28, 2024, 2:08pm

Thanks. I'm going to try it

Henrique_Trebilcock · April 30, 2025, 1:35pm

Awesome! Tank you!

tgarrison · August 8, 2025, 3:04pm

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

victordcq · August 11, 2025, 6:43am

could you show me what it looks like now?

tgarrison · August 11, 2025, 5:01pm

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