# Ignition Perspective 8.3 Power Chart

**URL:** <https://forum.inductiveautomation.com/t/ignition-perspective-8-3-power-chart/115172>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [April 21, 2026, 7:27am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-8-3-power-chart/115172 "2026-04-21T07:27:41Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Arr](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@Arr](https://forum.inductiveautomation.com/u/Arr)\
**Post date:** [April 21, 2026, 7:27am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-8-3-power-chart/115172/1 "2026-04-21T07:27:41Z")

</div>

Hi,

How can I rotate the unit label ("value")?

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

---

<div class="post-metadata">

**Author:** ![Sanganak\_Kasare](https://avatars.discourse-cdn.com/v4/letter/s/8c91f0/32.png) [@Sanganak\_Kasare](https://forum.inductiveautomation.com/u/Sanganak_Kasare)\
**Post date:** [April 22, 2026, 3:40am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-8-3-power-chart/115172/2 "2026-04-22T03:40:24Z")

</div>

You can rotate the axis label using a transform CSS style eg:

`transform: rotate(0deg) translateX(-10px);`  
Here is an example axis definition:

> **Example Axes Definition**
>
> ```python
> axes[0]{
> "name": "Default",
> "position": "left",
> "width": 120, --> Modify this depending on the length of the label
> "color": "#757A7F",
> "dataFormat": "0,0.##",
> "range": {
> "auto": true,
> "min": "",
> "max": ""
> },
> "label": {
> "text": "Something Really Long",
> "offset": 55, --> Modify this to adjust Y position
> "font": {
> "color": "#757A7F",
> "size": 10
> },
> "style": {
> "classes": "",
> "transform": "rotate(0deg) translateX(-10px)" --> Modify the X translate for X Position.
> }
> },
> "tick": {
> "color": "#757A7F",
> "count": "Auto",
> "label": {
> "format": "Auto",
> "font": {
> "color": "#757A7F",
> "size": 10
> },
> "style": {
> "classes": ""
> }
> },
> "style": {
> "classes": ""
> }
> },
> "grid": {
> "visible": false,
> "color": "#757A7F",
> "opacity": 0.9,
> "dashArray": 0,
> "style": {
> "classes": ""
> }
> },
> "style": {
> "classes": ""
> }
> }
> 
> ```

Few things to keep in mind.

1. Given the power chart allows users to define the axes you might want to consider putting these style overrides in the advanced style sheet.

> **Example style sheet override**
>
> **Note: this override is for a time series chart and not power chart your styles will vary**
> 
> ```python
> /* Makes the left axis labels on time series chart appear on top */
> #simpleTrendRealtime text.ia_timeSeriesChartComponent __yAxis__ label[y="-50"],
> #simpleTrendHistorical text.ia_timeSeriesChartComponent __yAxis__ label[y="-50"] {
> transform: rotate(0deg) translateY(35px);
> text-anchor: end;
> }
> /* Makes the right axis labels on time series chart appear on top */
> #simpleTrendRealtime text.ia_timeSeriesChartComponent __yAxis__ label[y="40"],
> #simpleTrendHistorical text.ia_timeSeriesChartComponent __yAxis__ label[y="40"] {
> transform: rotate(0deg) translateY(-55px);
> text-anchor: start;
> }
> 
> ```

2. The above style is for left axis you will have to modify the translates for right axis.

Hopefully, this gives you a starting point to work from.

---

<div class="post-metadata">

**Author:** ![Arr](https://avatars.discourse-cdn.com/v4/letter/a/7ab992/32.png) [@Arr](https://forum.inductiveautomation.com/u/Arr)\
**Post date:** [April 24, 2026, 7:46am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-8-3-power-chart/115172/3 "2026-04-24T07:46:21Z")

</div>

Thank You, but the label is disappearing no matter what value of translateX I use

---

<div class="post-metadata">

**Author:** ![Sanganak\_Kasare](https://avatars.discourse-cdn.com/v4/letter/s/8c91f0/32.png) [@Sanganak\_Kasare](https://forum.inductiveautomation.com/u/Sanganak_Kasare)\
**Post date:** [April 24, 2026, 9:22am UTC](https://forum.inductiveautomation.com/t/ignition-perspective-8-3-power-chart/115172/4 "2026-04-24T09:22:43Z")

</div>

> [@Sanganak\_Kasare](#):
>
> rotate(0deg)

You might not have added offset to shift the label down after rotating it.  
The following is an example of how to apply the mentioned style:

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/9/5/95aee6b3784f22d795eb9f1decb143796dd77f2b.jpeg)