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

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");
});

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

See the Pen Focusable pie slices with perfect outline by amCharts team (@amcharts) on CodePen.