Highcharts word cloud - Make a link to each word

user_16762020 0
Viewed 270

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.

reactjs highcharts javascript
2 Answers

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

user_105228420

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 */
        }
      }
    }
  ]
};
user_120575120
Related