Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

180
Views
How do I customize link style for each data link in a Highcharts network graph?

I'm building a Network Graph meant to show interactions between devices and people in an IoT context.

The data for the graph's series is pulled from a database. Aside from the sender and receiver end of the communication, and a label naming each interaction, there are characterizations for each link, such as the "relationship" between the parties (emotional, worklike, etc.) and the type of communication (to get information, to perform an action, etc.). Therefore, the data (with keys ['from', 'to', 'label','communication type','relationship']) could look something like :

[['Jane','Michael','ComHum1','Pragmatic','Emotional'],
    ['Michael','TV','ComObj1','Action','Object-Owner']]

What I want to do is change the link style (dash, dot, and so on) depending on one factor, and the link color depending on another. That way, between two nodes, each identified as a party in communication, a link is visible which style can denote the type of contact, and which color indicates the relation between them.

The issue with this approach is that, even with styled mode, the only way to style the lines that I can spot in documentation is a CSS selector based on separating different series. This solution cannot work as all the data I want to picture is gathered in a single, connected series, and the customization can only be done based on the specific parameters of each element of the data array. If I were to break it into multiple series, the global network would no longer be visible, which would defeat the purpose of individually styling the links altogether.

Is my approach possible at all in HighCharts ? A very cumbersome workaround I thought about at first was to target each path element in the SVG, but even that doesn't seem possible as they do not seem to be given specific identifiers.

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Data links are defined as points in the networkgraph series, you can customize each of them in a few ways.

  1. Add additional key to the keys array, like color and next add prefered color for particular data - demo: https://jsfiddle.net/BlackLabel/p9wy1u02/

  2. You can update each point in the load callback - https://jsfiddle.net/BlackLabel/vj3Ldbu9/

API: https://api.highcharts.com/highcharts/chart.events.load

API: https://api.highcharts.com/class-reference/Highcharts.Point#update

API: https://api.highcharts.com/highcharts/series.networkgraph.data.color

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!