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!

Hi @MathFour 

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.

• jquery.aimms.palette-switch-addon.js contains the pallet names 
• jquery.aimms.palette-switch-addon.css contains the position of the selector  
• colors.css contains the actual colors in the pallets; those colors can of course be changed to your liking

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

Was Gertjan or Edo’s solution sufficient in solving your issue?

Best