# Change PowerChart background colour depending on session theme

**URL:** <https://forum.inductiveautomation.com/t/change-powerchart-background-colour-depending-on-session-theme/77186>\
**Category:** Ignition\
**Tags:** perspective\
**Created:** [August 1, 2023, 3:58am UTC](https://forum.inductiveautomation.com/t/change-powerchart-background-colour-depending-on-session-theme/77186 "2023-08-01T03:58:15Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Mario\_Olivares](https://avatars.discourse-cdn.com/v4/letter/m/e47c2d/32.png) [@Mario\_Olivares](https://forum.inductiveautomation.com/u/Mario_Olivares)\
**Post date:** [August 1, 2023, 3:58am UTC](https://forum.inductiveautomation.com/t/change-powerchart-background-colour-depending-on-session-theme/77186/1 "2023-08-01T03:58:15Z")

</div>

Hello there everyone.

I am trying to change the background of a PowerChart component depending if the session theme is "light" or "black". The idea is that when the theme is light the color would be #C0C0C0 and #555555 otherwise. I tried to do a Change Script using session.props.theme on the color property inside the "plot" option of the chart, but that didn't seem to work.

Is there any way to do that?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [August 1, 2023, 7:30am UTC](https://forum.inductiveautomation.com/t/change-powerchart-background-colour-depending-on-session-theme/77186/2 "2023-08-01T07:30:10Z")

</div>

The background color is set by `plots.0.color`, etc.

Unfortunately the Perspective chart components are all third-party (mostly AM Charts) and don't know about the Perspective themes so we can't use theme variables such as `--neutral-20`, etc. My workaround has been to create a session custom variables for any colors I want and then create an expression binding on those. For example,

```auto
if(left({this.props.theme}, 4) = 'dark',
	'#333333',
	'#dddddd'
)

```

Then bind `plots.0.color` to that session prop.

As you can see, the only restriction is that all my dark themes have to start with 'dark'. If you want to get fancy, create a `colorConfig` object in the session variables and create objects within that such as an array of colors for the pens. Here's a sample.

![Session chart colors](https://us1.discourse-cdn.com/inductiveautomation/original/3X/c/a/ca91dad84a7a135e18953ab2bb3752fb68d9dae7.png)

---

<div class="post-metadata">

**Author:** ![Mario\_Olivares](https://avatars.discourse-cdn.com/v4/letter/m/e47c2d/32.png) [@Mario\_Olivares](https://forum.inductiveautomation.com/u/Mario_Olivares)\
**Post date:** [August 1, 2023, 8:45am UTC](https://forum.inductiveautomation.com/t/change-powerchart-background-colour-depending-on-session-theme/77186/3 "2023-08-01T08:45:39Z")

</div>

Okay I'll try it, thanks a lot!

I was also thinking, could it be possible to set the plot background transparent so the color would match the container background color?

---

<div class="post-metadata">

**Author:** ![Transistor](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/transistor/32/3380_2.png) [@Transistor](https://forum.inductiveautomation.com/u/Transistor)\
**Post date:** [August 1, 2023, 8:51am UTC](https://forum.inductiveautomation.com/t/change-powerchart-background-colour-depending-on-session-theme/77186/4 "2023-08-01T08:51:08Z")

</div>

Yes. Set the alpha (opacity) value of the color to minimum. e.g.,

```auto
#ff0000 // red
#ff0000ff // red opaque
#ff000000 // red transparent

```

Just add 00 to whatever color you've got and the background will be transparent.

> **[CSS RGB and RGBA Colors](https://www.w3schools.com/css/css_colors_rgb.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

---

<div class="post-metadata">

**Author:** ![Mario\_Olivares](https://avatars.discourse-cdn.com/v4/letter/m/e47c2d/32.png) [@Mario\_Olivares](https://forum.inductiveautomation.com/u/Mario_Olivares)\
**Post date:** [August 1, 2023, 1:44pm UTC](https://forum.inductiveautomation.com/t/change-powerchart-background-colour-depending-on-session-theme/77186/5 "2023-08-01T13:44:58Z")

</div>

That seemed to work! Thanks a lot