Theme for charts

[Eralmidia]

Question

I know there is a repository for the charts, but I believe the theming support were created by you guys, and since you are generally quick to respond, I'm hoping you can give me some pointers on themes for charts.

To put it simply, I don't understand how I'm supposted to style my charts at all. Since we upgraded from igx 10 to 12, I can't seem to get my charts to apply the correct brushes. Formerly, we generally fed the brushes to the brushes inputs of either the charts or series, but this no longer seems to work, because something in our theme.scss is overriding it.

My next attemt was setting up a theme, but this doesnt seem to work either, because the color palette supplied to the igx-theme seems to be overriding any colors set. So, for instance, I have the following set up for my applications dark theme:

As far as I understand, this should now give the first three series blue, pink and red colors. Looking at a data chart however, I get this:

The yellow color is actually provided by the palette. If I remove @include igx-theme($color-palette); from the theme

the colors of the theme will suddenly start working:

This will however mess with how other components look, like for instance the time picker, so I'm assuming this is not how I'm suppose to solve this:

It does seem like the theme is actually applied, because if I add forinstance a color the the title, like so:

this is actually displayed as expected:

Also, in the docs, I can see text color for title and sub title. How exactly do I set the label color?

I'm attaching the full theme.scss as well.
theme.zip

• igniteui-angular version: 12

[Eralmidia]

Anyone?

[simeonoff]

Hi @Eralmidia we will look into this issue next week.

[Eralmidia]

@simeonoff Which next week? 😛

[simeonoff]

@simeonoff Which next week? 😛

Hi, just added it to this sprint.

[simeonoff]

@gmurray81 can you chime in? I'm testing the charts in Ignite UI for Angular v12.2.0 and some styling properties no longer work. I tried setting the range brushes for the linear gauge via both property binding and custom CSS properties, alas none of these methods work anymore. Obviously this affects the theming system.

[gmurray81]

I'll take a loot at this on Monday. I fixed some stuff recently in this area, but that actually had to do with the other way around where we had a regression specific to ES2015+ where the css properties would always take precedence. But that doesn't seem like what is being described here, so will look into this.

[gmurray81]

@Eralmidia
you can use this css custom prop for the axis labels:
--axis-label-text-color: orange;

https://stackblitz.com/edit/github-dmjefr?file=src%2Fapp%2Fscatter-point-chart%2Fdata-chart-scatter-point-chart.component.scss

That all still works if I upgrade the packages to latest, so I'll have to see what you were having issues with specifically @simeonoff

[gmurray81]

Or are you talking about an internal package version?

[gmurray81]

If you are talking about the latest internal versions, maybe that explains what you are seeing, depending on the sample. I fixed an issue where in some cases the css would always take precedence, even over a local value set by the user. That's been resolved. So maybe the sample you were using has some local values?

Another possibility though, is perhaps some specific scenarios are getting confused and thinking that an internal default constitutes a user provided local value. In which case that will just need to be resolved.