CODEWITHSUNDEEP
highcharts
sfjeld
sfjeld

Reputation: 39

HighMaps - need to make datalabels clickable

I'm using the small U.S. map in HighMaps and I want each state and it's datalabel to open up a new URL when clicked. I have the state working, but the label does not work.

this is what I tried:

plotOptions: {
                series: {
                    allowPointSelect: true,
                    point: {
                        events: {
                            click: function(e) {
                                const url = e.target.point.value;
                                window.open(url);
                            }
                        }
                    },
          datalabels: {
                        events: {
                            click: function(e) {
                                const url = e.target.point.value;
                                window.open(url);
                            }
                        }
                    }
                }
            },

Please see https://jsfiddle.net/sfjeld/zcsxobfa/12/ for the code.

Upvotes: 0

Views: 139

Answers (2)

magdalena
magdalena

Reputation: 3703

Use the this.value instead of e.target.point.value:

plotOptions: {
  series: {
    point: {
      events: {
        click: function() {
          const url = this.value;
          window.open(url);
        }
      }
    }
  }
}

Demo: https://jsfiddle.net/BlackLabel/6gpL57nf/

Upvotes: 2

Marco Aurelio Fernandez Reyes
Marco Aurelio Fernandez Reyes

Reputation: 2431

In your example, you could use:

e.point.properties.hasc

For get the value from the clicked point.

Code:

plotOptions: {
  series: {
    allowPointSelect: true,
    point: {
      events: {
        click: function(e) {
          const url = "https://www.google.com/search?q=" + e.point.properties.hasc;
          window.open(url);
        }
      }
    },
  }
},

You can check other values using this path:

console.log(e.point.properties);

The full code is in this forked jsfiddle

Upvotes: 1

Related Questions