Highcharts, set halo on select in pie chart - highcharts

Question

I try to create a pie chart with the halo effect. This works on hover but not on select. Is this possible?
Because we want to keep our selected item visible without slicing it out... So we want to show our selected slice with the halo effect but can't find if this is possible

Answer 1

Highcharts doesn't provide such a functionality out of the box. However, you can achieve it by adding your custom code in point click event callback. There you can render a halo effect using Highcharts renderer.path() method. Check the demo and code posted below and do not hesitate to ask me any question if something is unclear for you.
Code:
chart: {
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
type: 'pie',
events: {
load: function() {
var chart = this;
chart.customHalo = {
graphic: null,
index: null
}
}
}
}
...
series: [{
...
point: {
events: {
click: function() {
var point = this,
chart = point.series.chart,
shapeArgs = point.shapeArgs,
size = 10,
opacity = 0.5,
path = chart.renderer
.symbols
.arc(
shapeArgs.x + chart.plotLeft,
shapeArgs.y + chart.plotTop,
shapeArgs.r + size,
shapeArgs.r + size, {
innerR: shapeArgs.r - 1,
start: shapeArgs.start,
end: shapeArgs.end
}
),
drawNewGraphic = false,
arc;
drawNewGraphic = (chart.customHalo.index !== point.index) ? true : false;
if (!drawNewGraphic && chart.customHalo.graphic) {
chart.customHalo.graphic.destroy();
chart.customHalo.index = null;
chart.customHalo.graphic = null;
} else if (chart.customHalo.graphic) {
chart.customHalo.graphic.destroy();
}
if (drawNewGraphic) {
arc = chart.renderer
.path(path)
.attr({
fill: point.color,
opacity: opacity
}).add();
chart.customHalo = {
index: point.index,
graphic: arc
}
chart.customHalo.index = point.index;
}
}
}
},
...
}]
Demo:
https://jsfiddle.net/BlackLabel/59hyq14v/
API reference:
https://api.highcharts.com/highcharts/chart.events.load
https://api.highcharts.com/highcharts/series.pie.point.events.click