Estoy usando el gráfico de mapa de árbol de la biblioteca High-chart, pero tengo un problema con el cambio de color del mosaico activo o el mosaico en el que se hizo clic, lo intenté desde mi extremo actualizando el color del actual en el que se hizo clic, pero no funcionó porque estaba actualizando el mosaico en el que se hizo clic y no quiero que los colores cambien solo cuando hago clic en un mosaico deportivo y después de hacer clic en otro deporte (el deporte anterior) debería desaparecer volver a su color real
<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>A continuación se muestra el enlace a mi código, espero que me puedan ayudar con esto gracias de antemano
https://codesandbox.io/embed/busy-thompson-7fsijn?fontsize=14&hidenavigation=1&theme=dark
https://codesandbox.io/s/busy-thompson-7fsijn?file=/src/App.js
establezca un nombre de clase en el título y dé un estilo para cambiar el color
En primer lugar, para evitar redibujar gráficos innecesarios, memorice sus opciones o manténgalas en un estado. Para cambiar el color del punto en el que se hizo clic y restaurar el original, puede guardar el color actual en una serie y usar el método point.update para cambiar/restaurar. Por ejemplo:
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); } }Demostración en vivo: https://codesandbox.io/s/stupefied-wave-ibtc2-ibtc2r?file=/src/App.js
Referencia de la API: https://api.highcharts.com/class-reference/Highcharts.Point#update