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)
tooltip seems wrong. (extra curly braces)
try this code:
tooltip :
{
enabled : true,
formatter : function() {
return "<div> <span> My tooltip information </span> </div>"
}
}