Change Hover and Select Effects for WebUI Charts

This article explains how to use CSS to customize the states of a chart or map widget on hover and on select.

Default chart behavior

These effects are the same for all the charts types.

Each chart has 3 states:

  • Default state – all bars have the same opacity
  • Hover state – hovered bar remains solid, opacity slightly reduced for the other bars
  • Select state – selected bar remains solid, opacity is further reduced for the other bars

Nodes in the Map widget have a slightly different behavior:

  • Default - all nodes have same opacity and no border
  • Hover - hovered node has a 1px border
  • Selected - selected node has a 2px border, opacity reduced for the other nodes

Changing the style for selection states

To customize the styles for these states, you’ll need to add a CSS file in the folder MainProject\WebUI\resources\css.

Example CSS

You can download the file AnnotationsCSS.css below with examples of how to change styles for the 3 states for the supported chart types.

In the images below, the first bar on the left has custom styles applied.

Default

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
/* Default state */
.annotation-bar_blue{
   /* fill changes */
   fill: blue;
   fill-opacity: .5 !important;
   /* stroke changes */
   stroke: aqua !important;
   stroke-width: 4 !important;
   stroke-dasharray: 5;
}
../../_images/image01.jpg

Hover

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* Hover State */
.annotation-bar_blue.chart-item:hover,
.annotation-bar_blue.chart-item.is-hover {
   /* fill changes  */
   fill: orange;
   fill-opacity: .5 !important;
   /* stroke changes  */
   stroke: aqua !important;
   stroke-width: 4 !important;
   stroke-dasharray: 5;
}
../../_images/image02.jpg

Selected

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
/* Selected state */
.annotation-bar_blue.chart-item:active,
.annotation-bar_blue.chart-item.is-active {
   /* fill changes  */
   fill: yellow;
   fill-opacity: .5 !important;
   /* stroke changes  */
   stroke: aqua !important;
   stroke-width: 4 !important;
   stroke-dasharray: 5;
}
../../_images/image03.jpg

Last Updated: October, 2019