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
../../_images/default-state.png
  • Hover state – hovered bar remains solid, opacity slightly reduced for the other bars
../../_images/hover-state.png
  • Selected state – selected bar remains solid, opacity is further reduced for the other bars
../../_images/selected-state.png

Note

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

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

You can use the chart in WebUI Annotations - Widget and CSS support for a reference of elements and their corresponding CSS properties.

Example CSS

You can download the file below which contains the code snippets to change styles for the 3 states in charts.

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

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: March, 2020