I have made a word cloud referencing this demo. https://codesandbox.io/s/yz3t3
Now my problem is how to make a link to each words made by highcharts word cloud like this page. https://ftmscan.com/topstat#Token
When you toggle any text in word cloud on that site, you will be redirected to the other page. How to make such a link to each text - that's what I am asking.
I was struggling to do this for several days but there seems like no answer anywhere. Any help will be appreciated and thanks in advance.
You can use the series.point.events.click as a callback where the logic will be included. Here is a basic code that you can start from:
point: {
events: {
click() {
const point = this;
console.log(point);
if (point.name === "Aenean") {
window.open("https://www.highcharts.com/");
}
if (point.name === "Lorem") {
window.open("https://www.highcharts.com/");
}
}
}
}
You can easily improve it for your needs - you can use a switch inside this callback or write a function that will be decided which point will be opening the particular link.
Demo: https://codesandbox.io/s/highcharts-react-demo-forked-2idvg?file=/demo.jsx:1187-1564
https://api.highcharts.com/highcharts/series.wordcloud.events.click
Make the series clickable and then check the click-event for details on what exactly was clicked.
event.point seems to hold the most relevant information. It has an ID, a name, a category, etc. You should be able to use some of that information to find which word it is that was clicked.
Working example:
const options = {
series: [
{
type: "wordcloud",
data: data,
events: {
click: e => {
alert(e.point.name);
/* Do stuff here, based on e.point.name */
}
}
}
]
};