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:
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:
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?
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}
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
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?
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.
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
I can’t get the XY Chart bars to pick up the theme variables. It doesn’t work in designer or in browsers.
Chart bar fill properties.
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
Thanks, Victor. I think you’re right and we can’t use Styles or themes in XY Charts.
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