I am using Tree map chart from High-chart library, but I am facing an issue with the changing the color of the active tile or the tile which was clicked, I tried from my end by updating the color of the current which was clicked, but it didn't work as it was updating the tile which was clicked and I don't want that I want the colors to change only when i click on a sports tile and after clicking on other sport it(the previous sport) should go back to its actual color
<iframe src="https://codesandbox.io/embed/busy-thompson-7fsijn?fontsize=14&hidenavigation=1&theme=dark"
style="width:100%; height:500px; border:0; border-radius: 4px; overflow:hidden;"
title="busy-thompson-7fsijn"
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"
></iframe>Below is the link to my code, I hope you guys could help me with this thanks in advance
https://codesandbox.io/embed/busy-thompson-7fsijn?fontsize=14&hidenavigation=1&theme=dark
https://codesandbox.io/s/busy-thompson-7fsijn?file=/src/App.js
set a class name in title and give a style to change the colour
First of all, to avoid unnecessary chart redraw memoize your options or keep them in a state. To change color of the clicked point and restore the original one, you can save the current color on a series and use point.update method to change/restore. For example:
click: function(event) {
const point = event.point;
const prevClickedPoint = point.series.clickedPoint;
if (prevClickedPoint) {
prevClickedPoint.update({ color: prevClickedPoint.orgColor }, false);
}
point.orgColor = point.color;
point.series.clickedPoint = point;
point.update({ color: "red" }, false);
point.series.chart.redraw();
if (point.node.childrenTotal === 0) {
var category = point.node.name;
setSports(category);
}
}
Live demo: https://codesandbox.io/s/stupefied-wave-ibtc2-ibtc2r?file=/src/App.js
API Reference: https://api.highcharts.com/class-reference/Highcharts.Point#update