# Perspective power chart x-axis vertical alignment wrong **URL:** \ **Category:** Ignition\ **Created:** [July 23, 2021, 7:16am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-x-axis-vertical-alignment-wrong/49126 "2021-07-23T07:16:13Z")\ **Posts on this page:** 9\ **Page:** 1
**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\ **Post date:** [July 23, 2021, 7:16am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-x-axis-vertical-alignment-wrong/49126/1 "2021-07-23T07:16:13Z")
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? ![chart](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/8/e8119fd8d70279060aaf17d6dc5f19f56075b9a2.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [July 23, 2021, 8:27am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-x-axis-vertical-alignment-wrong/49126/2 "2021-07-23T08:27:31Z")
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 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/3/63645220b62d77f8b6ad99c3d2ff7074568f825b.png) ---
**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\ **Post date:** [July 23, 2021, 9:29am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-x-axis-vertical-alignment-wrong/49126/3 "2021-07-23T09:29:35Z")
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? ![xychart](https://us1.discourse-cdn.com/inductiveautomation/original/3X/6/4/64170b8c9deab47035d93353b686f0791696bd68.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [July 23, 2021, 9:38am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-x-axis-vertical-alignment-wrong/49126/4 "2021-07-23T09:38:01Z")
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) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/c/7c766bd5bf98f3ba9717901fadae0fdb4cfdad30.png) ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/e/8e54c1a17968051a71de388afb07e4bcc9239540.png) ---
**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\ **Post date:** [July 23, 2021, 12:48pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-x-axis-vertical-alignment-wrong/49126/5 "2021-07-23T12:48:47Z")
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)}{ ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [July 23, 2021, 12:49pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-x-axis-vertical-alignment-wrong/49126/6 "2021-07-23T12:49:48Z")
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](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 ---
**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\ **Post date:** [July 23, 2021, 1:01pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-x-axis-vertical-alignment-wrong/49126/7 "2021-07-23T13:01:27Z")
> [@victordcq](#): > > e ‘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) 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." ![category](https://us1.discourse-cdn.com/inductiveautomation/original/3X/5/b/5b2a40d73d3fed2c921c67df53b9de31ab3b292e.png) however when many bars have to be shown one label every two is hidden (see screenshot above labels B, D, F etc) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [July 26, 2021, 6:34am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-x-axis-vertical-alignment-wrong/49126/8 "2021-07-26T06:34:32Z")
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 ---
**Author:** ![r.p](https://avatars.discourse-cdn.com/v4/letter/r/71e660/32.png) [@r.p](https://forum.inductiveautomation.com/u/r.p)\ **Post date:** [July 26, 2021, 6:53am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-x-axis-vertical-alignment-wrong/49126/9 "2021-07-26T06:53:47Z")
> [@r.p](#): > > w 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.” ![solved](https://us1.discourse-cdn.com/inductiveautomation/original/3X/b/9/b9afd88c5f12164d9365916284a973a2452a5707.png) Solved, it was sufficient to set grid.minDistance to 0. Thank you