CODEWITHSUNDEEP
javascriptjqueryhighcharts
user21056151
user21056151

Reputation:

Highcharts, turn click point into link

I am working with Highcharts (https://www.highcharts.com/) to build a clickable map as it was the only option suiting what I needed. The map I am using is found on this codepen (https://codepen.io/mushigh/pen/xxRmpWy) . I have only one problem I can not possibly make it able to turn this markers as links

Image of keypoints in the map

I changed these paramerters a little bit so they would return a link but nothing worked.

tooltip: {
  formatter: function () {
    return this.point.id + (
      this.point.lat ?
        '<br>Lat: ' + this.point.lat + ' Lon: ' + this.point.lon : ''
    );
  }
},

plotOptions: {
  series: {
    marker: {
      fillColor: '#FFFFFF',
      lineWidth: 2,
      lineColor: Highcharts.getOptions().colors[1],
//'<button onclick="href=\'www.facebook.com\'">Kliko</button>'

    }
  }
},

Upvotes: 1

Views: 139

Answers (1)

magdalena
magdalena

Reputation: 3695

You need to use the point's click event to achieve that. Add the following code to the series:

cursor: 'pointer',
  point: {
    events: {
      click() {
        let point = this;
        location.href = `https://en.wikipedia.org/wiki/${point.name}`
      }
    }
  }

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

API Reference: https://api.highcharts.com/highmaps/series.mappoint.point.events.click

Upvotes: 1

Related Questions