I am trying to add same animation which work on pie chart on legends but not able to find any answer
below are the images which i want to achieve
You need to add mouseover
and mouseout
events to legend items and use aniamte
method on the legend symbol element in the events callback function:
var H = Highcharts,
chart = Highcharts.chart('container', {
series: [{
type: 'pie',
showInLegend: true,
data: [12, 15, 25]
}]
}),
legendItems = chart.legend.allItems;
legendItems.forEach(function(item) {
H.addEvent(item.legendGroup.element, 'mouseover', function() {
item.legendSymbol.animate({
width: 24,
height: 24,
translateX: -6,
translateY: -6
});
});
H.addEvent(item.legendGroup.element, 'mouseout', function() {
item.legendSymbol.animate({
width: 12,
height: 12,
translateX: 0,
translateY: 0
});
});
});
Live demo: http://jsfiddle.net/BlackLabel/a0s9yhtd/
API Reference:
https://api.highcharts.com/class-reference/Highcharts#.animate
https://api.highcharts.com/class-reference/Highcharts#.addEvent
You can also wrap drawLegendSymbol method in pie prototype and render whatever you want without any limitations. You will need similar events and methods as @ppotaczek suggested.
(function(H) {
H.wrap(H.seriesTypes.pie.prototype, 'drawLegendSymbol', function(proceed, legend, item) {
var options = legend.options,
symbolHeight = legend.symbolHeight,
square = options.squareSymbol,
symbolWidth = square ? symbolHeight : legend.symbolWidth;
var series = this;
var halo;
item.legendSymbol = series.chart.renderer.rect(
square ? (legend.symbolWidth - symbolHeight) / 2 : 0,
legend.baseline - symbolHeight + 1, // #3988
symbolWidth,
symbolHeight,
H.pick(legend.options.symbolRadius, symbolHeight / 2)
)
.addClass('highcharts-point')
.attr({
zIndex: 4
}).add(item.legendGroup);
H.addEvent(item.legendItem.element, 'mouseover', function() {
halo = series.chart.renderer.rect(
square ? (legend.symbolWidth - symbolHeight) / 2 : 0,
legend.baseline - symbolHeight + 1, // #3988
symbolWidth,
symbolHeight,
H.pick(legend.options.symbolRadius, symbolHeight / 2)
)
.addClass('highcharts-point')
.attr({
fill: item.color,
'fill-opacity': 0.25,
zIndex: 1
})
.add(item.legendGroup);
halo.animate({
width: symbolWidth * 1.8,
height: symbolHeight * 1.8,
translateX: -symbolWidth * 0.4,
translateY: -symbolHeight * 0.4,
r: H.pick(legend.options.symbolRadius, symbolHeight / 2 + symbolHeight * 0.4)
}, 0);
});
H.addEvent(item.legendItem.element, 'mouseout', function() {
halo.animate({
width: symbolWidth,
height: symbolHeight,
translateX: 0,
translateY: 0,
r: 0
});
});
})
})(Highcharts)
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.