# 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; } 

### 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; } 

### 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; } 

Last Updated: October, 2019