# In Power Chart how to bring axis label to centre?

**URL:** <https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [February 13, 2024, 7:58am UTC](https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615 "2024-02-13T07:58:09Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [February 13, 2024, 7:58am UTC](https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615/1 "2024-02-13T07:58:09Z")

</div>

Hi,  
I don't know how to bring the axis label to the centre of the axis

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/6/e6370a46cd9a3ee9f6b11b7eadd641909e8eb3b7.png)

Is there any property available?

@cmallonee@paul-griffith

Any possibility to make label centre?

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [February 14, 2024, 2:55pm UTC](https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615/2 "2024-02-14T14:55:26Z")

</div>

here is the solution

> [@Vertically Center Axis Label on Powerchart](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/3):
>
> 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)

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [February 20, 2024, 9:22am UTC](https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615/3 "2024-02-20T09:22:32Z")

</div>

@victordcq

i am trying to add "text-anchor": "middle",  
"translate": "0px 45%" through scripting but its not adding

my code

```auto
item_dict = self.props.axes[len(self.props.axes)-1]
if 'label' in item_dict:
    system.perspective.print('ssss..')
    # Check if 'style' is present in the 'label' dictionary
    label = item_dict['label']
    if 'style' in label:
        # If 'style' is present, update it directly
        label['style']['text-anchor'] = "middle"
        label['style']['translate'] = "0px 45%"
    else:
        # If 'style' is not present, create it and add the desired attributes
        label['style'] = {
            "text-anchor": "middle",
            "translate": "0px 45%"
        }

```

my axes json  
`<ObjectWrapper>: {u'color': u'#757A7F', u'dataFormat': u'0,0.##', u'grid': {u'visible': False, u'color': u'#757A7F', u'style': {u'classes': u''}, u'opacity': 0.9, u'dashArray': 0L}, u'name': u'Axis 6', u'width': 60L, u'range': {u'auto': True, u'min': u'', u'max': u''}, u'style': {u'classes': u''}, u'label': {u'offset': 0L, u'style': {u'classes': u''}, u'text': u'rammmm', u'font': {u'color': u'#757A7F', u'size': 10L}}, u'tick': {u'color': u'#757A7F', u'count': u'Auto', u'style': {u'classes': u''}, u'label': {u'format': u'Auto', u'style': {u'classes': u''}, u'font': {u'color': u'#757A7F', u'size': 10L}}}, u'position': u'left'}`

can you please correct what i am doing wrong here please

---

<div class="post-metadata">

**Author:** ![vnayal](https://avatars.discourse-cdn.com/v4/letter/v/858c86/32.png) [@vnayal](https://forum.inductiveautomation.com/u/vnayal)\
**Post date:** [February 20, 2024, 9:34am UTC](https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615/4 "2024-02-20T09:34:14Z")

</div>

component is XY chart- text-anchor property is not available for this component

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 20, 2024, 9:37am UTC](https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615/5 "2024-02-20T09:37:07Z")

</div>

you made the dict but did not assign it to the property  
you will have to do something _like_ this somewhere on the bottom of your if  
(this not tested code)  
`self.props.axes[len(self.props.axes)-1]['label'] = label`

not sure why you use scripting though, if you want to do this on all the axes, you should propably use the css class way, mentioned a bit lower in the post

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [February 20, 2024, 9:49am UTC](https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615/6 "2024-02-20T09:49:59Z")

</div>

yes they add new axis to the chart. i need this text anchor properties also to be added that why i used script.

ok i will check the post

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [February 20, 2024, 9:58am UTC](https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615/7 "2024-02-20T09:58:54Z")

</div>

> [@prasath.t](#):
>
> ```auto
> label['style']['text-anchor'] = "middle"
> label['style']['translate'] = "0px 45%"
> 
> ```

can you guide me how to update the css class, i am new to this topic

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 20, 2024, 11:06am UTC](https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615/8 "2024-02-20T11:06:13Z")

</div>

> [@Vertically Center Axis Label on Powerchart](https://forum.inductiveautomation.com/t/vertically-center-axis-label-on-powerchart/75339/5):
>
> `.psc-yourClass .yaxislabel {translate: 0px 45%; text-anchor: middle;}`

copy this in the advanded stylesheet.css

and give your chart the `yourClass` style class

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/e/0/e0027057ebdeffda96a345975ed0b1d21bd1fe28.png)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/4/74055d8cdcf0dde4934a8570b94779b3fb8ca697.png)

(feel free to rename it ofc)

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [February 20, 2024, 11:20am UTC](https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615/9 "2024-02-20T11:20:34Z")

</div>

when user add axis in front end (live project) i need to pass style class to the new axis

this scripting method is not working

```auto
if 'style' in label:
        # If 'style' is present, update it directly
        label['style']['text-anchor'] = "middle"
        label['style']['translate'] = "0px 45%"

```

can you give me any idea

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 20, 2024, 11:32am UTC](https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615/10 "2024-02-20T11:32:01Z")

</div>

is the style not working?

and did you try this?

> [@victordcq](#):
>
> you made the dict but did not assign it to the property  
> you will have to do something _like_ this somewhere on the bottom of your if  
> (this not tested code)  
> `self.props.axes[len(self.props.axes)-1]['label'] = label`

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [February 20, 2024, 11:47am UTC](https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615/11 "2024-02-20T11:47:51Z")

</div>

yes not working

```auto
item_dict = self.getSibling("PowerChart").props.axes[6]
		    
	if 'label' in item_dict:
		system.perspective.print('ssss..')
		# Check if 'style' is present in the 'label' dictionary
		label = item_dict['label']
		if 'style' in label:
		    # If 'style' is present, update it directly
		    label['style']['text-anchor'] = "middle"
		    label['style']['translate'] = "0px 45%"
		else:
		    # If 'style' is not present, create it and add the desired attributes
		    label['style'] = {
		        "text-anchor": "middle",
		        "translate": "0px 45%"
		            }
	system.perspective.print(label)
	
	self.getSibling("PowerChart").props.axes[6]['label'] = label

```

---

<div class="post-metadata">

**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\
**Post date:** [February 20, 2024, 1:20pm UTC](https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615/12 "2024-02-20T13:20:38Z")

</div>

then you might have to asign the whole label or even all the axes

but you should rly do the css

---

<div class="post-metadata">

**Author:** ![prasath.t](https://avatars.discourse-cdn.com/v4/letter/p/898d66/32.png) [@prasath.t](https://forum.inductiveautomation.com/u/prasath.t)\
**Post date:** [February 22, 2024, 6:38am UTC](https://forum.inductiveautomation.com/t/in-power-chart-how-to-bring-axis-label-to-centre/85615/13 "2024-02-22T06:38:31Z")

</div>

Solution

```auto
self.getSibling("PowerChart").props.axes[len(self.props.axes)-1]['label']['style'] = {
			  "classes": "",
			  "text-anchor": "middle",
			  "translate": "0px 45%"
			}

```