# Perspective Power Chart Pen Table Height

**URL:** <https://forum.inductiveautomation.com/t/perspective-power-chart-pen-table-height/50647>\
**Category:** Ignition\
**Created:** [September 6, 2021, 9:17pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-pen-table-height/50647 "2021-09-06T21:17:20Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![nicholas.robinson](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/nicholas.robinson/32/22188_2.png) [@nicholas.robinson](https://forum.inductiveautomation.com/u/nicholas.robinson)\
**Post date:** [September 6, 2021, 9:17pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-pen-table-height/50647/1 "2021-09-06T21:17:20Z")

</div>

When using the perspective power chart, is there any way to give the the pen table more room so that scroll bars don’t appear?

There are 4 pens but no matter how tall I make the view, it always makes me scroll down to see the 4th pen row in the table. I want to be able to see all of them and have no scroll bars.

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/4/d4d5e9c94ed894d1a3bc47ba2e103054795218ff.png)

Thanks,

Nick

---

<div class="post-metadata">

**Author:** ![paul-griffith](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/paul-griffith/32/37249_2.png) [@paul-griffith](https://forum.inductiveautomation.com/u/paul-griffith)\
**Post date:** [September 7, 2021, 3:39pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-pen-table-height/50647/2 "2021-09-07T15:39:24Z")

</div>

You’ll be able to resize the pen control area in 8.1.10.

---

<div class="post-metadata">

**Author:** ![Toobor](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@Toobor](https://forum.inductiveautomation.com/u/Toobor)\
**Post date:** [November 10, 2021, 10:55am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-pen-table-height/50647/3 "2021-11-10T10:55:32Z")

</div>

Hi,  
I am using Ignition 8.1.11 but I still can’t find the size property of the pen control area. I am able to change the size manually when I am in preview mode but it resets when I go back to design mode. Is it possible to change the standard size of the pen control area?

---

<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:** [November 10, 2021, 11:44am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-pen-table-height/50647/4 "2021-11-10T11:44:10Z")

</div>

with theme.css or injection

add this line will increase the max default height (default now is 150)

`.ia_powerChartComponent__penDataDisplay{max-height:200px}`

(injection example, no need to add any styleclasses)  
 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/6/8692674a1e15a012c3a26aa902a81485a817991e.png)

---

<div class="post-metadata">

**Author:** ![Toobor](https://avatars.discourse-cdn.com/v4/letter/t/e95f7d/32.png) [@Toobor](https://forum.inductiveautomation.com/u/Toobor)\
**Post date:** [November 10, 2021, 2:45pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-pen-table-height/50647/5 "2021-11-10T14:45:55Z")

</div>

Thank you, that seems promising!  
However, i can’t get the change in the theme.css to work. I have previously only change the colors in theme but I guess you do the same thing when you change an object attribute.  
I have created a .css-file (“power-chart.css”) in my theme folder and added this code:

```auto
@import "../light/palette/index.css";
.ia_powerChartComponent__penDataDisplay{max-height:500px}

```

and I imports this file in my index file:

```auto
@import "./power-chart.css";

@import "./variables.css";
@import "../light/fonts.css";
@import "../light/globals.css";
@import "../light/app/index.css";
@import "../light/common/index.css";
@import "../light/designer/index.css";

```

Is this correct?

---

<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:** [November 15, 2021, 8:09am UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-pen-table-height/50647/6 "2021-11-15T08:09:44Z")

</div>

You should not edit the theme.css files directly but create a new theme that imports the light theme.  
And use the new theme.

Changes in the css files might also require a restart of the server to reload them

---

<div class="post-metadata">

**Author:** ![jean.arnosti](https://avatars.discourse-cdn.com/v4/letter/j/90db22/32.png) [@jean.arnosti](https://forum.inductiveautomation.com/u/jean.arnosti)\
**Post date:** [March 3, 2023, 6:22pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-pen-table-height/50647/7 "2023-03-03T18:22:56Z")

</div>

Help please,

I was not able to make the solutions work.

What am I doing wrong?

Thank you

I tried to make my own .css theme as follow:  
TrdTheme  
/\* Imports \*/  
@import "./light/index.css";

.ia\_powerChartComponent\_\_penDataDisplay{  
max-height:500px;  
}

Selected TrdTheme in  
 ![Mytheme](https://us1.discourse-cdn.com/inductiveautomation/original/3X/d/c/dcb6189fd7086f87dadb93bdf6a353186847e135.png)

Also tries css injection in style.

 ![injectionCSS](https://us1.discourse-cdn.com/inductiveautomation/original/3X/8/c/8c6de97ce234005fd40cb3725c15bb5f651e78a3.png)

---

<div class="post-metadata">

**Author:** ![88andand](https://avatars.discourse-cdn.com/v4/letter/8/ecc23a/32.png) [@88andand](https://forum.inductiveautomation.com/u/88andand)\
**Post date:** [March 11, 2025, 12:09pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-pen-table-height/50647/9 "2025-03-11T12:09:31Z")

</div>

Did anyone find a solution for this?

---

<div class="post-metadata">

**Author:** ![byrcharl](https://avatars.discourse-cdn.com/v4/letter/b/e79b87/32.png) [@byrcharl](https://forum.inductiveautomation.com/u/byrcharl)\
**Post date:** [April 2, 2025, 2:16pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-pen-table-height/50647/10 "2025-04-02T14:16:20Z")

</div>

What i found works if if you enable advance style in styles then put this in the stylesheet.css

```python
/* Direct stylesheet authoring is an advanced feature. Knowledge of CSS required.*/

@import "./power-chart.css";
.ia_powerChartComponent__penDataDisplay {
    max-height: 394px;
}

```

---

<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:** [April 2, 2025, 2:26pm UTC](https://forum.inductiveautomation.com/t/perspective-power-chart-pen-table-height/50647/11 "2025-04-02T14:26:14Z")

</div>

When using the advanced stylesheet you do not need to import.
