XYChart backgroundColor not changing with Theme

Ignition
,
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.