Hello,
how can I align the labels on the x-axis of a power chart to be at the center of the column or at least at the left of the column and not as in the screenshot at the right?
yes you can add a transform on the labels styles,
transform: translate(-10px,0) will shift it 10px to the left
ofc you can do it also on the ticks if you enabled those
Hi, thank you it works, I see however that you can only shift by a predefined amount and this is not known in advance given the resizing of the browser window, is it possible to set a “center” property which aligns at the center of the column?
I also realized in the XYChart component the structure is different from PowerChart and adding the transform in the appearance/labels raises an exception.
Is there an equivalent for XYChart?
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(50px,0)}{
the ‘Name’ in .psc-Name should be your style path.
If it has ‘/’ in it use \ infront of them: like so .psc-Folder\/Name
ofc change the 50px to what you want
assing the class to the chart(last property)
1 Like
I tried adding the following (light.css is the default stylesheet) but does not work:
} .psc-light > 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(50px,0)}{
where did you add it?
and ‘light’ should be the name of the styleclass not the css sheet
https://docs.inductiveautomation.com/display/DOC81/Style+Classes
example for the default name in the root it would be .psc-NewStyle
And then you need the add that style to the style classes property
Ok now it works, I didn't catch it had to be the name of the styleclass, however I have doubts a static shifting of x pixels will solve the alignment problem when the browser is resized, surely another trick in the sleeve if I have no other choice. I have tried in the meantime with using the render:category in xAxes, according to the documentation "Groups data items into categories and allots equal space for each."
however when many bars have to be shown one label every two is hidden (see screenshot above labels B, D, F etc)
1 Like
Yea static px values would not be that responsive on screen size. But you can use % too.
something like
transform:translate(2%,0) That should be more consistent, but will require some math to get it right in the desinger 
Oh idk how that works, mind sending a copy of all the props? i could take a look, maybe there is a way to turn all of them visible
