Highcharts - Getting a 3d effect with selected pie chart slices
To achieve extra border when you hovering you can trigger to the point.events and add SVG attributes.
plotOptions: {
pie: {
type: 'pie',
innerSize: '80%',
allowPointSelect: true,
slicedOffset: 0,
states: {
hover: {
halo: null,
brightness: 0,
},
},
point: {
events: {
mouseOver: (obj) => {
obj.target.graphic.attr({
'stroke-width': 50,
stroke: obj.target.color,
zIndex: 3,
filter: 'drop-shadow(0 0 10px black)'
}).css({
borderRadius: 20
})
.add();
},
mouseOut: (obj) => {
obj.target.graphic.attr({
'stroke-width': 1,
stroke: obj.target.color,
filter: 'transparent'
}).css({
borderRadius: 0
})
.add();
},
}
}
}
},
Live demo:
https://jsfiddle.net/BlackLabel/u4ypbsrk/
API References:
https://api.highcharts.com/class-reference/Highcharts.SVGElement#attr,
https://api.highcharts.com/class-reference/Highcharts.CSSObject,
https://api.highcharts.com/highcharts/plotOptions.pie.point.events