Witam chciałbym się dowiedzieć czy jest możliwość dodania animacji do mapBubble aby owa "bańka" rosła a później malała ? ponieważ teraz jedynie rośnie a później odrazu znika.
const WorldmapChart = React.memo(({ mapType, data }) => {
//Map bubble animation
useEffect(() => {
if (chartComponentRef.current && chartComponentRef.current.chart) {
const chart = chartComponentRef.current.chart;
const mapBubbleSeries = chart.series.find(series => series.type === 'mapbubble');
if (mapBubbleSeries) {
mapBubbleSeries.update({
type: 'mapbubble',
data: data.map(item => ({ ...item, z: item.z })),
animation: {
duration: 1500,
easing: 'easeOutInBack'
}
}, true);
setTimeout(() => {
mapBubbleSeries.setData([], true);
}, 2500);
}
}
}, [data]);
const mapData = useMemo(() => mapType === 'Europe' ? europeMapData : worldMapData, [mapType]);
const mapOptions = useMemo(() => ({
chart: {
map: mapData,
height: chartHeight,
animation: false,
backgroundColor: {
radialGradient: {
cx: 0.5,
cy: 0.5,
r: 0.5
},
stops: [
[0, '#4b2c32'],
[0.5, '#31283e'],
[1, '#13151a']
]
}
},
title: {
text: null
},
credits: {
enabled: false
},
mapNavigation: {
enableMouseWheelZoom: true,
enableDoubleClickZoom: true,
enableDoubleClickZoomTo: true,
enableTouchZoom: true,
},
series: [{
color: '#49364b',
data: mapData.features.map(feature => ({
'iso-a2': feature.properties['iso-a2']
})),
mapData: mapData,
joinBy: 'iso-a2',
name: '',
dataLabels: {
enabled: false,
},
showInLegend: false,
}, {
type: 'mapbubble',
data: data.map(item => ({ ...item, z: item.z })),
joinBy: ['iso-a2', 'iso-a2'],
minSize: '12rem',
maxSize: '12rem',
color: '#0DFF08',
showInLegend: false,
tooltip: {
pointFormat: '{point.name}'
},
dataLabels: {
enabled: true,
format: '{point.name}',
style: {
color: 'white',
textOutline: 'none'
},
y: -14
}
}]
}), [mapData, chartHeight, data]);
});
export default WorldmapChart;