Case comparison - coloring barcharts

Question

Hello All!

I’ve created some pages to help analizing different cases. To support this I made charts too. When I load in the cases, the colors are always similar(light purpule and purple, light green and green). My first idea was that I use “KPI” annotation for the parmeters in the active case, then I realized that we are working with runtime parameters which has other indexes. Do you have any idea?

While I was trying to color charts, I set up a default color for the widget, it works well:

.aimms-widget[data-widget\.uri="GlobalKPICompariosn_barchart1"] .bar{
	fill: rgb(192, 90, 90);
}

Then I wanted to use the same with annotation: No reaction.

.aimms-widget[data-widget\.uri="GlobalKPICompariosn_barchart1"] .bar .annotation-KPI{
	fill: rgb(84, 183, 203);
}

I tried some css from the ‘How to’ too with my annotation.

Thanks for your help!

Bogi

laithshadeed · Accepted Answer

Thank you for sharing screenshots.The colours of bar charts follow modular arithmetic to rotate. For example in the attached model, I have 50 bar, each bar will get a mix for there CSS classes annotation-Ord1 annotation-Mod7Ord1 annotation-Mod11Ord1 annotation-Mod19Ord1Those CSS classes will rotate using modular arithmetic like this:annotation-Ord1, annotation-Ord2, ..., annotation-Ord50, ... annotation-Mod7Ord1, annotation-Mod7Ord2, ..., annotation-Mod7Ord7, annotation-Mod7Ord1, ... annotation-Mod11Ord1, annotation-Mod11Ord2, ..., annotation-Mod11Ord11, annotation-Mod11Ord1, ... annotation-Mod19Ord1, annotation-Mod19Ord2, ...., annotation-Mod19Ord19, annotation-Mod19Ord1, ...For example, bar with id=bar-1300 (14th bar) will get the follow CSS classes:annotation-Ord14 annotation-Mod7Ord7 (14 mod 7) annotation-Mod11Ord3 (14 mod 11) annotation-Mod19Ord14 (14 mod 19)Here screenshot of Chrome DevTools:Using such classes, you can generate your CSS overrides to change the colours in any way you like.However, I found it strange why different days showed you different colours, could you attach a small model with a reproducible case to help me debug it? Maybe you found a bug :)

laithshadeed · Answer

Hi @Boglarka Balogh . Thank you for using WebUI. Getting CSS right can be tricky. Can you share a simple example model with screenshots to help me understand better what you are trying to achieve? Maybe I can help.

Sign up

Login to the community

Scanning file for viruses.

This file cannot be downloaded