Search code examples
javascripthighchartsgetorgchart

How to add Modal pop up on nodes of org chart Highcharts

I have working on a highchart Page where I need show my data when i clicked on a nodes of an org chart. I'm able to show the data onclick of nodes but that is a tooltip. My requirement is need to show the data onclick of nodes but that should ne modal popup. Here's my code

[https://jsfiddle.net/BlackLabel/2e83ngw1/]

Solution

  • Instead of using tooltip, you can create your own popup element, update it with a point info and show/hide it in the point's events.

    point: {
  events: {
    click: function() {
      const popup = document.getElementById('popup');

      popup.innerHTML = this.info;
      popup.style.display = 'block';

    },
    mouseOut: function() {
      const popup = document.getElementById('popup');
      popup.style.display = 'none';
    }
  }
}

    Live demo: https://jsfiddle.net/BlackLabel/dhaysfqz/

    API Reference: https://api.highcharts.com/highcharts/series.organization.point.events