Highchart network graph with tooltip when hover on every node

Question

I am creating network graphs using highcharts for one of my Angular project. I want to create tooltip when mouse moves on to a point/node. I tried to create using below chart options. But, I am getting error. How can I create tooltip for networkgraph points?

 chartOptions = {
  chart: {
    type: "networkgraph",
    height: "100%"      
  },
  title: {
    text: "Network graph demo"
  },
  subtitle: {
    text: "A Force-Directed Network Graph in Highcharts"
  },
  plotOptions: {
    networkgraph: {
      keys: ["from", "to"],
      layoutAlgorithm: {
        enableSimulation:true
      }
    }

  },
  series: [
    {
      dataLabels: {
        enabled: true,            
        linkFormat: ''          
      },
      data: [{from : 'a', to: 'b'},
              {from: 'a', to: 'c'},
               {from: 'a', to: 'd'} ],
      marker : {radius : 18}
    }

  ],
  tooltip :
   {
    enabled : true, 
    formatter : { function() {
      return "<div> <span> My tooltip information </span> </div>"
    }}
  }
}

Error:

 ERROR TypeError: w.call is not a function
at a.Tooltip.refresh (highcharts.js:205)
at a.Pointer.runPointActions (highcharts.js:220)
at q.onMouseOver (highcharts.js:446)
at SVGGElement.d [as __zone_symbol__ON_PROPERTYmouseover] (highcharts.js:435)
at SVGGElement.wrapFn (zone.js:1332)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
at Object.onInvokeTask (core.js:17290)
at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:498)

score 2 · Accepted Answer · answered May 05 '19 at 19:05

2

tooltip seems wrong. (extra curly braces)

try this code:

 tooltip :
   {
    enabled : true, 
    formatter : function() {
      return "<div> <span> My tooltip information </span> </div>"
    }
  }

answered May 05 '19 at 19:05

ofriman

198
1
1
9

Yes, thats my bad. Removing extra curly braces solved my issue. – Sreehari May 06 '19 at 02:24

score 1 · Answer 2 · answered May 05 '19 at 19:16

I think the issue could be the chartOptions.

First, I implemented quotes for keys and values and replace single quote into double quote.

Second, I think its expecting a function, not an object for formatter; therefore, from this:

"formatter" : {function() {
      return "<div> <span> My tooltip information </span> </div>"
    }}

I changed to:

"formatter" : function() {
      return "<div> <span> My tooltip information </span> </div>"
    }

Here is the whole thing clean up:

chartOptions = {
  "chart": {
    "type": "networkgraph",
    "height": "100%"      
  },
  "title": {
    "text": "Network graph demo"
  },
  "subtitle": {
    "text": "A Force-Directed Network Graph in Highcharts"
  },
  "plotOptions": {
    "networkgraph": {
      "keys": ["from", "to"],
      "layoutAlgorithm": {
        "enableSimulation":true
      }
    }

  },
  "series": [
    {
      "dataLabels": {
        "enabled": true,            
        "linkFormat": ""          
      },
      "data": [{"from" : "a", "to": "b"},
              {"from": "a", "to": "c"},
               {"from": "a", "to": "d"} ],
      "marker" : {"radius" : 18}
    }

  ],
  "tooltip" :
   {
    "enabled" : true, 
    "formatter" : function() {
      return "<div> <span> My tooltip information </span> </div>"
    }
  }
}

Try it out and let me know if keeps doing the same.

If you could put this into the Snipped provided by Stack overflow, it would be easier to try and help. The Snipped is the icon is

Its not issue with quotes. And yes, it is with a formatter function. Thanks that solved it. — Sreehari, May 06 '19 at 02:23

Highchart network graph with tooltip when hover on every node

2 Answers2