const newData = [{name: 'Austria', code : 'AT', color : '#c4c4c4']]
this.chart.series[0].points.forEach(
(point: any, index: any) => {
setTimeout(() => {
const newDataPoint: any = newData.find(
(dataPoint: any) => dataPoint.code === point['iso-a2']
);
if (newDataPoint) {
let countryColor = newDataPoint?.[this.mapColorKey] || '#c4c4c4';
const currentColor = point.color || '#ffffff';
let start = {
r: parseInt(currentColor.substr(1, 2), 16),
g: parseInt(currentColor.substr(3, 2), 16),
b: parseInt(currentColor.substr(5, 2), 16),
};
let end = {
r: parseInt(countryColor.substr(1, 2), 16),
g: parseInt(countryColor.substr(3, 2), 16),
b: parseInt(countryColor.substr(5, 2), 16),
};
let current = { r: start.r, g: start.g, b: start.b };
let startTime: any = null;
const animateColor = (timestamp: number) => {
if (!startTime) startTime = timestamp;
const progress = timestamp - startTime;
const ratio = Math.min(progress / animationDuration, 1);
current.r = Math.round(start.r + (end.r - start.r) * ratio);
current.g = Math.round(start.g + (end.g - start.g) * ratio);
current.b = Math.round(start.b + (end.b - start.b) * ratio);
const rgbColor = `rgb(${current.r}, ${current.g}, ${current.b})`;
point.update({ color: rgbColor }, true, false);
if (progress < animationDuration) {
requestAnimationFrame(animateColor);
}
};
requestAnimationFrame(animateColor);
}
}, index * (animationDuration / totalPoints));
}
);
Please refer above code and what is the issue and suggest solution.
Thank you