Hello! Is it possible to vertically center an axis label on a powerchart? Attached is an image for reference.
1 Like
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.
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)
7 Likes
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.
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;}
1 Like
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.
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.
it made no difference
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.
thanks for sharing. Is it possible these arragement via runtime also?
i dont understand what you are asking
I mean that can we add these two styles in browser as in designer?
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
Thanks. I'm going to try it
Awesome! Tank you!