CODEWITHSUNDEEP
javascripthighcharts
hcharge
hcharge

Reputation: 1246

Highcharts: Attach a click event to dataLabel when useHTML set to true

I have a networkGraph in Highcharts and there's a click event attached to the "points", however I'd like to fire that event when an item within the dataLabel is clicked.

This fiddle is similar to what I have https://jsfiddle.net/BlackLabel/xsLnmd0u/, which Wojciech has been very helpful with. Notice that if you click the dataLabel nothing happens. But if you set useHTML to false then clicking the dataLabel does the same as clicking the marker.

In my version I have some spans inside the dataLabel that I want to fire the click event with, but it doesn't work at the moment.

Upvotes: 0

Views: 632

Answers (1)

Wojciech Chmiel
Wojciech Chmiel

Reputation: 7372

You can add events to nodes dataLabels using js addEventListener like that:

  chart: {
    type: 'networkgraph',
    marginTop: 50,
    events: {
      load: function() {
        var nodes = this.series[0].nodes;

        nodes.forEach(function(node) {
          node.dataLabel.div.addEventListener('click', function(e) {
            console.log('click')
          });
        });
      }
    }
  }

Demo:

Upvotes: 1

Related Questions