Styling a graph visualization

Node, link and chart style options

When choosing a graph visualization solution, you need one that you can customize for your users, your data and the questions you need to answer. A custom-designed interface feels familiar and intuitive, and helps your users start uncovering insight sooner.

Here are just some of the visual styling options available in our products.

Visually customize your visualization

Nodes – These usually represent the main entities in your data. With our toolkits, you can adjust almost every attribute of a node.

Links – These are the connections between your data entities. Use attributes like weight, color and style to communicate different kinds and strengths of connection.

Halos – These are ‘halo-effect’ rings that draw attention to nodes. They’re a great way to highlight key events, alerts or warnings. A node can have up to ten halos, each with a customized radius, width, and color. They’re also very simple to animate.

Glyphs – These small icons communicate interesting characteristics of a node or link. You can add as many glyphs as you like, define their position, alignment, color or icon, and animate them for greater impact.

Labels – Node and link labels and are the most obvious way to identify different elements in your chart. Customize them with different font sizes and colors, control their position and truncate them.

Charts – Customize the entire chart to meet the requirements of your application – the background color, watermark text or image, chart logo and navigation controls can all be modified.

Donuts – These are a great way to convey numeric proportions of data quickly. Select how many segments you want, their size and color, then get creative with animation.

Self-links – If you’re analyzing an IT network or cyber threat, it’s not unusual to find nodes that send network traffic to themselves. Self-links reflect this neatly.

Fine-grain control – Take control over a huge range of other visual attributes, from arrow-head size, to label height, to link behavior when it approaches a node.

Selection – Adjust the effect used to highlight selected entities, and define the behavior around selected nodes and links.

Ready to learn more?

Our blog contains loads of resources about graph visualization design and best practice. Or if you’re ready to get started, request a trial of one of our products.

Request a trial

From the blog

Adaptive graphs and flow visualization - June updates

Our toolkit updates for June include adaptive graph styling, showing flow on links, and the organic layout moving to its beta development phase.

How WebGL powers the best user experience

Let's focus on WebGL - what it is, how it works, and why performance is a key contributor to one of the most important goals of your application design: good user experience.

KeyLines 5.3: Faster performance & simplified code

Version 5.3 delivers the fastest KeyLines yet, thanks to major improvements to our WebGL rendering performance. We’ve also revised our Vue framework offerings, and created a new anti-fraud demo.

Visit the blog