Networkgraph Custom Tooltip

[spradeesh]

Dear Team :

Am trying to set the tooltip from the series data with one more parameter. Am not sure, how to retrieve the same when setting tooltip. Can someone please help on this.

Highcharts.chart('container', {
series: [{
accessibility: {
enabled: false
},
dataLabels: {
enabled: true,
linkFormat: ''
},
id: 'lang-tree',
data: [
['Moon', 'TV','It is a TV' ],
['Moon', 'Radio','IT is a Radio'],
['Moon', 'Grinder','It is a grinder' ]
]
}],
tooltip :
{
enabled : true,
formatter : function() {
return this.point.options; // Need to know how to retrieve the 3rd parameter from the DATA.
}

[kamil.k]

Hello spradeesh,

Welcome to our forum and thanks for contacting us with your question.

According to the code you sent, the data structure is wrong, so the chart won't be displayed. As you are not using any chart/series type property, the chart is line type by default. Here you can read about all possible data structures:
https://api.highcharts.com/highcharts/series.line.data

Assuming your data structure is correct, you can easily access the data referring to the this.series.points inside the formatter function which gives you all the points (data) referred to the particular series.

Let me know if that is what you were looking for,
Best Regards!

[spradeesh]

Thanks for your response Kamil. Can you please help me on setting up the Tooltip as am very new here.
data: [
['Sun', 'Music'],
['Sun', 'TV'],
['Sun', 'News' ]
],

On considering the above data, am getting the network graph. But please help me how to set the value for tooltip, so that i can access in the formatter. ?

[kamil.k]

What you did in the code provided above works fine, note that the this keyword inside the formatter function is all you need to access the chart's/hovered point's data. I have updated the demo, using the networkgraph type as you mentioned, see:
https://jsfiddle.net/BlackLabel/0rqo9w4e/

Can you be more precise about what exactly you need to display in a tooltip?

Looking forward to your response,
Regards!

[spradeesh]

Thank you Kamil. Your demo works well for the prescribed attributes. But am looking kind of below tooltips, whenever i hover to the specific nodes.

Music --> "This is for music lovers, where we have customers from ASIA"
TV --> "This accommodates all the TV lovers across EUROPE region"
News --> "Telecasting news based on IRELAND region"

[kamil.k]

I suggest defining the tooltip values as data.name property so you can access it inside the formatter function. I have updated the demo to your needs, see: https://jsfiddle.net/BlackLabel/8fgpbno2/

Let me know if that works for you,
Regards!

[spradeesh]

Thanks alot Kamil. You made my day. This perfectly meets my requirement.

[kamil.k]

That's great to hear!

Feel free to contact us again,
Regards!

[spradeesh]

Hi Kamil :

Reaching again for a minor change. With the code whatever we have currently, all the nodes are coming in same color. Can that be dynamic like the "The Indo-European Language Tree". I compared the code snippets, both looks same, except the data array. But getting all in same blue color .
Thanks in advance.

[kamil.k]

I'm not entirely sure what you need to achieve. I have updated the example showing how the color of markers (including the lines) can be changed, see: https://jsfiddle.net/BlackLabel/2L73opbw/

Let me know if the solution meets your needs,
Regards!

[spradeesh]

Thanks Kamil for your input. As you see in the below example, they dont input related to color codes,
https://jsfiddle.net/gh/get/library/pur ... work-graph

But in your example, it has color codes, Cant we have the color without any input thru the code as like the above example ?

[spradeesh]

Also when you see the example, the same colors are applicable for the whole child. Addition to that, see the size of the node ( circle ), parent one is BIG and the subsequent node ( circle ) size is getting smaller.

[spradeesh]

Hi Kamil :

I got something on the sample code for those color code / Node circle size. From the below code snippet, am getting link[0] as 'undefined' for our data. If you can correct me , it will be a huge relief for me.

e.options.data.forEach(function (link) {

if (link[0] === 'Proto Indo-European') {
nodes['Proto Indo-European'] = {
id: 'Proto Indo-European',
marker: {
radius: 20
}
};
nodes[link[1]] = {
id: link[1],
marker: {
radius: 10
},
color: colors[i++]
};
} else if (nodes[link[0]] && nodes[link[0]].color) {
nodes[link[1]] = {
id: link[1],
color: nodes[link[0]].color
};
}
});

[spradeesh]

I found the issue Kamil. Instead of Link[0], Link[1], i should refer as Link.from and Link.to.
This works.

Thanks you.

[kamil.k]

That's great to hear you found the proper solution.

If there is anything else you need help with, please contact us again,
Regards!