As you already know, you can customize the appearance of widgets in AIMMS WebUI using CSS and annotations . Let us look at how these annotations are generated for a widget and the modifiers available for you to control your customizations.
Annotations
The annotations applied to a WebUI object primarily depends on the pivot settings of that widget. If you inspect any widget in your browser (Right click -> Inspect), you will notice something like below
chart-item bar annotation-sSetI annotation-Ord2 annotation-Mod7Ord2 annotation-Mod11Ord2
annotation-Mod19Ord2 annotation-Element-2 leaf-index1 grouped-bar-index0 stacked-bar-index0
annotation-sSetI
and annotation-Element-2
are of interest to us because sSetI
is the set to which index i
belongs to and Element-2
is the current element that we are inspecting.

The pivot settings in the above image shows that index i
is the last index in the X-Axis option. So, different colors are applied to different elements/values of index i
and its root set sSetI
appears as an annotation. If you switch this order like in the below image, the annotation will include the identifier name annotation-pData
(and annotation-Identifier
) instead of the root set sSetI
. As there is only one identifier in this widget, all the bars get the same color.

chart-item bar annotation-Identifier annotation-Ord2054 annotation-Mod7Ord3 annotation-Mod11Ord8
annotation-Mod19Ord2 annotation-pData leaf-index1 grouped-bar-index0 stacked-bar-index0
So, the index appearing last in the pivot settings controls the coloring of the elements and the annotations applied. In general, below rules apply:
If Pivot Grouped: is empty, then the last index in Pivot X-Axis or Pivot Stacked: controls the coloring and annotations. The last index in Pivot Stacked: takes precedence over any index in Pivot X-Axis.
Otherwise, the last index in Pivot Grouped: controls the colors and annotations.
By declaring webui::AnnotationsIdentifier
, you can create additional annotations which you can use to control the styling.