# Perspective PowerChart Pen Show/Hide Edit/Delete button

**URL:** <https://forum.inductiveautomation.com/t/perspective-powerchart-pen-show-hide-edit-delete-button/107394>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [June 15, 2025, 11:07pm UTC](https://forum.inductiveautomation.com/t/perspective-powerchart-pen-show-hide-edit-delete-button/107394 "2025-06-15T23:07:59Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![tecnoeletronic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tecnoeletronic/32/50975_2.png) [@tecnoeletronic](https://forum.inductiveautomation.com/u/tecnoeletronic)\
**Post date:** [June 15, 2025, 11:08pm UTC](https://forum.inductiveautomation.com/t/perspective-powerchart-pen-show-hide-edit-delete-button/107394/1 "2025-06-15T23:08:00Z")

</div>

Hi,

how can I dynamically show or hide the **Edit/Delete** buttons for pens?  
I tried using a **Style Class** , but I wasn't able to change the `display` property at runtime.

---

<div class="post-metadata">

**Author:** ![David\_Stone](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/david_stone/32/79749_2.png) [@David\_Stone](https://forum.inductiveautomation.com/u/David_Stone)\
**Post date:** [June 15, 2025, 11:12pm UTC](https://forum.inductiveautomation.com/t/perspective-powerchart-pen-show-hide-edit-delete-button/107394/2 "2025-06-15T23:12:38Z")

</div>

You use a binding on the display property.

---

<div class="post-metadata">

**Author:** ![tecnoeletronic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tecnoeletronic/32/50975_2.png) [@tecnoeletronic](https://forum.inductiveautomation.com/u/tecnoeletronic)\
**Post date:** [June 15, 2025, 11:21pm UTC](https://forum.inductiveautomation.com/t/perspective-powerchart-pen-show-hide-edit-delete-button/107394/3 "2025-06-15T23:21:18Z")

</div>

Hi,  
I’m talking about these specific buttons:

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/0/c0f07ce6a04a4bf8f18e96ed6a77e61866667642.png)

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [June 16, 2025, 12:18pm UTC](https://forum.inductiveautomation.com/t/perspective-powerchart-pen-show-hide-edit-delete-button/107394/4 "2025-06-16T12:18:03Z")

</div>

You would need to use a binding on the style class for the chart. That binding would toggle between two different style classes, one that would hide the buttons, and one that would show them.

You will need to define the classes in the advanced style sheet, or use other means of specifying the exact selectors you need.

---

<div class="post-metadata">

**Author:** ![tecnoeletronic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tecnoeletronic/32/50975_2.png) [@tecnoeletronic](https://forum.inductiveautomation.com/u/tecnoeletronic)\
**Post date:** [June 16, 2025, 2:05pm UTC](https://forum.inductiveautomation.com/t/perspective-powerchart-pen-show-hide-edit-delete-button/107394/5 "2025-06-16T14:05:42Z")

</div>

Hi,

I probably didn't explain myself clearly: I actually need help with the style definition itself. Using these styles, I’m not able to achieve the desired result. Where am I going wrong?

For example:

This works (it hides the buttons), but it's always applied (obviously, since the class is not defined), so it can't be used in the PowerChart to dynamically hide/show the buttons:

```python
.ia_powerChartComponent __penDataDisplay__ table__icon.edit-pen-icon {display:none!important;}
.ia_powerChartComponent __penDataDisplay__ table__icon.delete-pen-icon {display:none!important;}

```

This one, instead, is not interpreted correctly even though the style class is applied to the PowerChart component.

```python
.show-pen-controls .ia_powerChartComponent __penDataDisplay__ table__icon.edit-pen-icon {display:block!important;}
.show-pen-controls .ia_powerChartComponent __penDataDisplay__ table__icon.delete-pen-icon {display:block!important;}

```

---

<div class="post-metadata">

**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\
**Post date:** [June 16, 2025, 9:24pm UTC](https://forum.inductiveautomation.com/t/perspective-powerchart-pen-show-hide-edit-delete-button/107394/6 "2025-06-16T21:24:52Z")

</div>

I assume that in the second example you are defining a style class in the properties named `show-pen-controls`. And the. Are using that exact same name in the stylesheet to define the class. However, when you use a style class in the designer properties, it is actually prepended with `psc-` if it is in the root styles folder. You need to use the modified name in the stylesheet so that you are selecting the correct class.

---

<div class="post-metadata">

**Author:** ![tecnoeletronic](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/tecnoeletronic/32/50975_2.png) [@tecnoeletronic](https://forum.inductiveautomation.com/u/tecnoeletronic)\
**Post date:** [June 17, 2025, 9:30am UTC](https://forum.inductiveautomation.com/t/perspective-powerchart-pen-show-hide-edit-delete-button/107394/7 "2025-06-17T09:30:53Z")

</div>

Yes… I had forgotten the "psc-" prefix before the class name… now it works! Thanks!