# XY Chart CSS Question **URL:** \ **Category:** Ignition\ **Tags:** ignition81, perspective\ **Created:** [September 8, 2021, 6:06pm UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730 "2021-09-08T18:06:19Z")\ **Posts on this page:** 15\ **Page:** 1
**Author:** ![iceberg](https://avatars.discourse-cdn.com/v4/letter/i/e99b99/32.png) [@iceberg](https://forum.inductiveautomation.com/u/iceberg)\ **Post date:** [September 8, 2021, 6:06pm UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/1 "2021-09-08T18:06:19Z")
I am working on a custom theme, and I wanted to update coloring for the XY Chart component. I don’t see a CSS file for this. Does anyone know if these are contained in another CSS file, or if I need to setup a new file, does anyone know the correct syntax to reference this component? ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 9, 2021, 6:48am UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/2 "2021-09-09T06:48:50Z")
your best bet to find the right ccs selectors is make a simple view of a chart and check it out in the dev tools. There you will see that the chart is an svg, with quite a few layers that would be quite hard to make a consistent styleing with. (tho not impossible) Its possible to change a whole bunch of colors in the designer tho. What do you want to change? ---
**Author:** ![iceberg](https://avatars.discourse-cdn.com/v4/letter/i/e99b99/32.png) [@iceberg](https://forum.inductiveautomation.com/u/iceberg)\ **Post date:** [September 9, 2021, 12:26pm UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/3 "2021-09-09T12:26:29Z")
@victordcq I am just trying to update the default color of the chart items first (we are using mostly columns). I have specifically been struggling with what the selector is: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/c/3c3904621fca6201e99912e6fd10366236781b92.png) I am not super familiar with css, and I am not sure if the selector name would be based on the data-component, or the id, or something else. I also don’t fully know how to identify the specific sub portion of the selector that I want to modify. It is this item, but I again don’t understand exactly what the selector should be: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/f/d/fd6b9d3a54303a3f782c2dcbb7a98be2c00358b3.png) Once I can get the correct selector, I believe the syntax would just be: .ia\_[selector] { fill: color; stroke: color; } ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 9, 2021, 12:30pm UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/4 "2021-09-09T12:30:23Z")
> [@iceberg](#): > > .ia\_[selector] its not gonna be that simple xd what default color do you want to change? could you point to it on a chart? ---
**Author:** ![iceberg](https://avatars.discourse-cdn.com/v4/letter/i/e99b99/32.png) [@iceberg](https://forum.inductiveautomation.com/u/iceberg)\ **Post date:** [September 9, 2021, 12:42pm UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/5 "2021-09-09T12:42:46Z")
@victordcq The blue bars below: ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/1/e/1e0cd4bd770e535e6c5667370754fa568c5562f3.png) ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [September 9, 2021, 12:45pm UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/6 "2021-09-09T12:45:35Z")
you can do that in the designer too, you sure you want to do it in css? xd `series[0].columns.appearance.fill` ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/7/0/7004efde98e699bb7811b83a3e858a43a8ab0f58.png) the problem if you gonna do it in css is that it will work on all columns and not on the legend, it will also always overwrite the style chosen in the designer… g[role=“menuitem”]{fill:red} ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/4/7/47c42c1b62c6b7c31de1655646128eb0bfee690f.png) you can work around it but that is going to be a lot lot more work xd ---
**Author:** ![iceberg](https://avatars.discourse-cdn.com/v4/letter/i/e99b99/32.png) [@iceberg](https://forum.inductiveautomation.com/u/iceberg)\ **Post date:** [September 9, 2021, 2:57pm UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/7 "2021-09-09T14:57:21Z")
@victordcq Thanks for the feedback. Our thought was to be able to use a theme as a starting point for our projects (similar to how themes are used in Microsoft PowerPoint), and then if we wanted to change a specific component on a specific view, we could do that at the component level. We have created a custom theme that most of the component colors are updated in, but the default colors on the xy chart did not update. We were hoping to add something more into our theme to get these defaults updated as well. ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [September 9, 2021, 3:43pm UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/8 "2021-09-09T15:43:50Z")
You can use a theme. Create a css variable to hold the color you want to use, and then use that in the designer to set the color, using the `var(--VARNAME)` notation. For instance you can define a variable in a css file: ```auto --barchart-series-default: #FA0808 ``` Then in the designer set the color as @victordcq showed: `series[0].columns.appearance.fill.color: var(--barchart-series-default)` ---
**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:** [October 28, 2021, 7:28pm UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/9 "2021-10-28T19:28:03Z")
I would expect that to work with the built-in themes but it doesn’t seem to. Setting series | 0 | coumn | appearance | fill | color to `var(--info)` should give us blue bars but gives us black (presumably because it returns a zero). Am I missing something? ---
**Author:** ![lrose](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/lrose/32/62724_2.png) [@lrose](https://forum.inductiveautomation.com/u/lrose)\ **Post date:** [October 29, 2021, 11:33am UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/10 "2021-10-29T11:33:25Z")
More likely it doesn’t recognize the variable reference. Make sure that you have used the same caseing. I also find that in the designer I have to go change the theme away from what I am using and then back in order to get it to pull in any changes I have made. Otherwise I would expect it to work. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [October 29, 2021, 11:45am UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/11 "2021-10-29T11:45:08Z")
apperently you dont need to put var() around it in the desinger so `color: --info` should be enough. Tho it works both so idk why your info isnt working. Css does get cached tho so maybe it didnt refresh yet. try ctrl + f5 in chrome ---
**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:** [November 1, 2021, 4:09pm UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/12 "2021-11-01T16:09:48Z")
I can’t get the XY Chart bars to pick up the theme variables. It doesn’t work in designer or in browsers. ![XY Charts fill color from theme](https://us1.discourse-cdn.com/inductiveautomation/original/3X/2/d/2d90e7f32d58cf656b8157ba6dd49f24af21870b.png) _Chart bar fill properties._ ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [November 2, 2021, 8:12am UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/13 "2021-11-02T08:12:28Z")
Hm it seems these props in the xychart dont use css but are getting converted to css, causing it to not recognize the string since in html the style should be fill:#color and fill-opacity:#value ---
**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:** [November 3, 2021, 8:43am UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/14 "2021-11-03T08:43:34Z")
Thanks, Victor. I think you’re right and we can’t use Styles or themes in XY Charts. ---
**Author:** ![victordcq](https://avatars.discourse-cdn.com/v4/letter/v/f6c823/32.png) [@victordcq](https://forum.inductiveautomation.com/u/victordcq)\ **Post date:** [November 3, 2021, 8:50am UTC](https://forum.inductiveautomation.com/t/xy-chart-css-question/50730/15 "2021-11-03T08:50:09Z")
You could define some default values in a script/tag/session prop and use a binding to fetch them. That way you can restyle your charts easier i guess. Tobad css doesnt seem to work