Disabling default hover and click effects on Pie Chart

When you hover over a slice on a Pie Chart it slightly grows. When you click it, it pulls out a bit out of place. This tutorial will show how you can disable this default behavior.

How it works?

It is controlled by states. When you hover something, a “hover” state is applied to the element. When you click a togglable element, “active” state is applied to it.

More info

In case you don’t know what states are, check out our “States” article to find out what you’re missing out on ;)

When PieSeries is creating its slices, it automatically creates both “hover” and “active” states, that are responsible for the two default effects.

The “hover” state modifies slice’s scale property, which makes it grow when hovered.

The “active” state modifies slice’s shiftRadius property, that makes the slice pull out when clicked.

Disabling

To disable this behavior, all we need to do is to modify the properties of the respective states.

We do that by modifying states on the series’ slice template:

TypeScript

let slice = pieSeries.slices.template;slice.states.getKey("hover").properties.scale = 1;slice.states.getKey("active").properties.shiftRadius = 0;

JavaScript

var slice = pieSeries.slices.template;slice.states.getKey("hover").properties.scale = 1;slice.states.getKey("active").properties.shiftRadius = 0;

JSON

{  // ...  "series": [{    // ...    "slices": [{      "states": {        "hover": {          "properties": {            "scale": 1          }        },        "active": {          "properties": {            "shiftRadius": 0          }        }      }    }]  }]}

Example

The following live chart has both hover and pullout effects disabled.

Open in CodePen