I’m getting crazy proficient in changing my colors of stuff, but there’s one thing that I’m still missing. If I’m not specific in my annotations, WebUI will default to the factory color palette. How can I change my default color palette to be my client’s branding color palette?
Here are the WebUI standard colors. Granted, they’re pretty, but I need to be able to have properly branded colors.
Best answer by Gertjan
View original
+3
Hi Bon, I think I can provide you with a starting point.
By default, chart elements use a numbered/rotating annotation scheme that loops over a set of 19 colors. They’re the ones you show above.
Apart from adding your own annotations to chart elements (and I need someone else to explain that, if needed), you can of course override/redefine the default set by adding them to your own css resources too.
.Ord1, .Mod19Ord1, .annotation-Ord1, .annotation-Mod19Ord1 {
background: #726fb0;
fill: #726fb0;
stroke: #726fb0
}
/* .. Ord 2-18 .. */
.Ord19, .Mod19Ord19, .annotation-Ord19, .annotation-Mod19Ord19 {
background: #a06ca5;
fill: #a06ca5;
stroke: #a06ca5
}If you make the list above ‘complete’, so defining everything from 1 to 19, you can specify your own scheme.
If you don’t want to have 19 unique colors, then either do your own annotations, or go for the repeating pattern that is either 7 or 11 long. You’ll find those classes in chart elements too:
.annotation-Mod11Ord1 .. .annotation-Mod11Ord11 and
.annotation-Mod7Ord1 to .annotation-Mod7Ord7
These are normally enabled in some other way, but you can do without that by making your own definitions for background/fill/stroke !important. You are surely already familiar with that way of forcing style upon something. In this case we need it to overrule the Mod19 set, which appears as the last class name in the list and takes precedence.
If all of this feels like a hack, I suggest we ask someone else to step in and explain custom annotations or really switching the set of 19 to 11 or 7.
An finally, about colors for datasets:
https://design-system.aimms.com/style/color
Hope that helps!
+6
Hi
First of all, in 2020 we want to bring more rational to this coloring. Of course, this does not help you now, but so you (and all who read this) know.
In the past, we have published some custom code that allows you to select a pallet of colors. I made a super simple and small example that shows this and generalizes the idea of Edo above (attached zip).
Idea is that you extend your resources folder with the pallet selector (javascript) and a set of color pallets (css). As a developer you can then flip between one of the other.
There is no documentation on this piece of code (it is not part of our supported product), but it is quite easy to understand.
The names are now in line with the mod7, 11, 19, but you can also call them differently of course and have more than 3.
Be sure to hide the palette when publishing the App towards end users by adding display: none; (see ‘x.DONTSHOW._css’).
Hope this helps,
Hi
Was Gertjan or Edo’s solution sufficient in solving your issue?
Best
Already have an account? Login
Please use your business or academic e-mail address to register
No account yet? Create an account
Enter your username or e-mail address. We'll send you an e-mail with instructions to reset your password.
Didn't find what you were looking for? Try searching on our documentation pages: