XY Chart CSS Question

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?

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?

@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

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

Once I can get the correct selector, I believe the syntax would just be:

.ia_[selector] {
fill: color;
stroke: color;
}

its not gonna be that simple xd

what default color do you want to change? could you point to it on a chart?

@victordcq The blue bars below:

you can do that in the designer too, you sure you want to do it in css? xd
series[0].columns.appearance.fill

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
you can work around it but that is going to be a lot lot more work xd

@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.

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:

--barchart-series-default: #FA0808

Then in the designer set the color as @victordcq showed:

series[0].columns.appearance.fill.color: var(--barchart-series-default)

1 Like