# XYChart backgroundColor not changing with Theme

**URL:** <https://forum.inductiveautomation.com/t/xychart-backgroundcolor-not-changing-with-theme/56412>\
**Category:** Ignition\
**Tags:** ignition81, perspective\
**Created:** [February 22, 2022, 3:18pm UTC](https://forum.inductiveautomation.com/t/xychart-backgroundcolor-not-changing-with-theme/56412 "2022-02-22T15:18:29Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![sydney.bergeron](https://avatars.discourse-cdn.com/v4/letter/s/779978/32.png) [@sydney.bergeron](https://forum.inductiveautomation.com/u/sydney.bergeron)\
**Post date:** [February 22, 2022, 3:18pm UTC](https://forum.inductiveautomation.com/t/xychart-backgroundcolor-not-changing-with-theme/56412/1 "2022-02-22T15:18:29Z")

</div>

I just updated Ignition from v8.0 to 8.1

All of our XY charts now do not change the backgroundColor when the theme is changed in Perspective.  
It just stays white.

I’ve tried changing the property from a theme variable to a hex code, and it still remains white.

I’ve also tried to change the background \> color property. That did not do anything either.

Any hints on how to get the background color working again?

![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/b/1b1946d4da82ecd60ff45e6b7354beb61640c486.png)

---

<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:** [February 22, 2022, 3:40pm UTC](https://forum.inductiveautomation.com/t/xychart-backgroundcolor-not-changing-with-theme/56412/2 "2022-02-22T15:40:47Z")

</div>

You’re setting the wrong property. You should be setting  
`props.background.color`  
and you’ll need to set  
`props.background.render : color`.

The chart components don’t understand Ignition’s CSS themes so you can’t use the `var(--neutral-00)` syntax. As a workaround I’ve created an expression binding on the background color as follows:

```auto
if(
	left({session.props.theme}, 4) = 'dark',
	'#aaaaaa',
	'#222222'
)

```

Note that this relies on all your dark themes starting with the letters `dark`.

A better way would be:

1. Create a session custom variable `chartBackgroundColor`.
2. Bind that to `session.props.theme` using the code above.
3. Bind your charts `props.background.color` to `session.custom.chartBackgroundColor’.

Now you’ll be able to update all the charts’ backgrounds in one place. (To make it more obvious to the next guy you could create two session variables, `chartBackgroundColorDark : #aaaaaa`, etc. and reference those in the binding.

---

<div class="post-metadata">

**Author:** ![sydney.bergeron](https://avatars.discourse-cdn.com/v4/letter/s/779978/32.png) [@sydney.bergeron](https://forum.inductiveautomation.com/u/sydney.bergeron)\
**Post date:** [February 22, 2022, 3:47pm UTC](https://forum.inductiveautomation.com/t/xychart-backgroundcolor-not-changing-with-theme/56412/3 "2022-02-22T15:47:15Z")

</div>

> [@Transistor](#):
>
> components don’t understand Ignition’s CSS themes so you can’t use the `var(--neutral-00)` syntax. As a workaround I’ve created an expression binding on the background color as follows:
> 
> ```auto
> if(
> 
> ```

Thanks. I did say that I tried to use that props.background.color property as well. I was missing the 'render' property.

I am aware that XY chart components don't use the css variable colors. I've had to do a bunch of bindings on the text colors dependent on themes.

In 8.0, however, I was able to use the the style.backgroundColor with a CSS variable to change the background color of an XY chart. And it worked as intended.

Do you know why this has changed in 8.1?

---

<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:** [February 22, 2022, 5:46pm UTC](https://forum.inductiveautomation.com/t/xychart-backgroundcolor-not-changing-with-theme/56412/4 "2022-02-22T17:46:01Z")

</div>

Sorry for missing that point in the question. I don’t know enough to know what changed between 8.0 and 8.1 either.

---

<div class="post-metadata">

**Author:** ![sydney.bergeron](https://avatars.discourse-cdn.com/v4/letter/s/779978/32.png) [@sydney.bergeron](https://forum.inductiveautomation.com/u/sydney.bergeron)\
**Post date:** [February 22, 2022, 5:57pm UTC](https://forum.inductiveautomation.com/t/xychart-backgroundcolor-not-changing-with-theme/56412/5 "2022-02-22T17:57:56Z")

</div>

No no problem!

You still helped me out with the props.background.render property! That was the missing piece I needed.

Thanks for the help.

---

<div class="post-metadata">

**Author:** ![jparish](https://avatars.discourse-cdn.com/v4/letter/j/43a26b/32.png) [@jparish](https://forum.inductiveautomation.com/u/jparish)\
**Post date:** [July 5, 2023, 9:16pm UTC](https://forum.inductiveautomation.com/t/xychart-backgroundcolor-not-changing-with-theme/56412/6 "2023-07-05T21:16:30Z")

</div>

8.1.28, seems to work the way you would expect it to work now.

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