Focusable pie slices with perfect outline

This demo shows how we can hide default rectangular bracket for focused pie slice as well as apply custom state to highlight focused one.

Code

TypeScript

series.slices.template.states.create("focused", {
  stroke: am5.color(0x000000),
  strokeWidth: 3
});

series.slices.template.setAll({
  focusable: true
});

series.slices.template.events.on("focus", function(ev) {
  ev.target.states.apply("focused");
});

series.slices.template.events.on("blur", function(ev) {
  ev.target.states.apply("default");
});

JavaScript

series.slices.template.states.create("focused", {
  stroke: am5.color(0x000000),
  strokeWidth: 3
});

series.slices.template.setAll({
  focusable: true
});

series.slices.template.events.on("focus", function(ev) {
  ev.target.states.apply("focused");
});

series.slices.template.events.on("blur", function(ev) {
  ev.target.states.apply("default");
});

CSS

The following CSS will hide the built-in rectangular focus highlighter.

.am5-focus-container div[role=figure] {
  opacity: 0;
}

Example

Open in CodePen