Theme color variables in Piechart are not supported?

Ignition
,
1

I try to use a theme color variable in PieChart component.

--variable-name

in colors array seems no to be supported ?

image
image782Ă—540 42.8 KB

2

Try using var(--byes-alarmeFaible). See here for CSS var() doc.

3

it dosen’t works for me: error does not match the format for color

4

You’re right… I didn’t look into this before answering. In general, to use CSS variables, you do need to use var(--my-var) notation (specifically, the var(...) part).

However, in this case, there is a limitation in the chart implementation Ignition is using (amCharts). As far as I can tell from reading their docs and Stack Overflow, you can’t use variables to specify colors, which is very annoying. Depending on how badly you want to get this to work, you can target each slice of the pie by its DOM ID and then style it, which will be clunky, in my opinion.

Another option would be to use the excellent Kyvis Labs charting module. You can easily specify slice colors with CSS variables using this module.

image
image1084Ă—395 37.1 KB

I apologize for misleading you initially…

3 Likes
5

Thanks @thewebpleb for the workaround !
Do you know if there is a way to bind the theme variable ou read those variable with script or expression ?
(without reading the file on the gateway…)

That could be usefull to obtain the string with the Hex code for the pie chart colors or other use case.

6

@PGriffith, Any idea how to read theme variable from the perspective script to obtain the string with the hex color value .
Not sure it’s possible as the script are gatewau scoped and the variable perhaps only used in the browser scope ?

7

I don’t think it is possible at the moment.

8

Hi @thewebpleb,

Can you develop a bit more your work, around I didn’t get it.
I have the same issue with my gauge and XYchart components.
I want the color to change depending on the component data value but I can’t find how to make it take my css variables.

Keep up the tutorial videos ! :+1:

image

image

9

Hi Ben,

Sorry for the late reply… Is that map transform on the arc.color property? If you’re asking whether you can use variables for your XY Chart and/or Gauge colors, it looks like that isn’t supported by IA (actually, by the charts library they’re using).

1 Like