XYChart backgroundColor not changing with Theme

Ignition
,
1

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

2

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:

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.

3

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?

4

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

5

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.

6

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

image

1 Like