Simple code that’ll revolutionize your graph design

Our KeyLines and ReGraph SDKs are game changers for graph visualization design. UX designers can achieve designs that they’d only dreamed of previously – and developers can bring the most wild and wonderful graph design to life, without compromise.

Product developers are under pressure to stand out in today’s crowded and competitive markets, where big players like Apple and Google have raised the bar for product design. In an attempt to keep up with them, organizations bring UI and UX professionals into the development process early, but then struggle to replicate their graph design. Add to this the fact that some designers and developers are unfamiliar with graph visualization concepts, and you can run into major problems.

That’s where KeyLines and ReGraph can help. They allow you to create a visualization component that’s specifically tailored to integrate with the rest of your application. And for teams that are new to graph visualization, we have inspirational demos, a live-coding playground where you can experiment and collaborate, and responsive tech support from the same experts who built the toolkits.

But with infinite customizability and styling options available, where do you begin? Let’s look at four key features that will give you a strong head start.

1. Give users the full picture with multiple labels

KeyLines and ReGraph allow multiple labels for nodes, with complete control over the styling and position of each label.

We challenged our development teams to push the boundaries of this functionality, using labels in complex designs that convey detailed information in a clean, intuitive and stylish way.

They also took advantage of other advanced node customization features, including font icons and rectangular node shapes:

Multi-labelled nodes representing a train schedule, a payment card and a name tag
Three instantly recognizable everyday designs which use multiple labels

The advanced customization options mean you can add as many labels as you want, and edit each one as a separate field. Use padding and relative positions to arrange labels anywhere on the node, and accommodate text of any length. In this way, you can develop a set of elegant, flexible and responsive designs that are easy for users to understand and engage with.

How’s it done?

To enable multiple labels in your design, simply turn your t property or label property into an array like this:

t: [{ ...labelStyling, ...labelContent, }, { ...labelStyling, ...labelContent, }], //etc.

label: [{ ...labelStyling, ...labelContent, }, { ...labelStyling, ...labelContent, }], //etc.

2. Detail on demand with adaptive styling

Using our built in adaptive styling feature, it’s easy to create nodes that reveal different levels of detail in response to the user’s zoom level. It’s a great way to keep the chart relevant to the user’s investigation at each stage:

Different levels of info about individuals are revealed as they become relevant

When zoomed out, the font icons make it clear that the nodes represent people in an organizational chart. We can infer the reporting structure based on the graph layout. Zooming further in, we can see their names – and on closer inspection, the labeling reveals detailed information on each individual.

How’s it done?

You can design the elements of a custom node with the same level of control you’d expect when coding an HTML element, from font style to the position and padding of each label. The following code adds a set of five labels to a node, which fade in depending on font size as the user zooms in:

label: [
     fontIcon: { text: 'fa-user', },
     fontSize: 40,
     padding: { left: 10, },
     position: { horizontal: 0, vertical: 'middle', },
     bold: true,
     fontSize: 5,
     text: 'ID: GB90828',
     position: { horizontal: 45, vertical: 10, },
     bold: true,
     fontSize: 14,
     text: 'Dwayne Baumbach',
     padding: { right: 10, },
     position: { horizontal: 45, vertical: 18, },
     fontSize: 5,
     position: { horizontal: 45, vertical: 35, },
     bold: true,
     fontSize: 5,
     text: 'Joined 30 September 2018',
     padding: { bottom: 10, },
     position: { horizontal: 45, vertical: 42, },

3. Get pixel perfect with margin and padding controls

Most design software has controls for margins (the space between the edges of labels) and padding (the space between the text and the edge of the label). Now developers have the same level of control in KeyLines and ReGraph.

You can position different node elements with pixel-perfect accuracy. Need a bit more breathing space between your label and the right-hand edge of your node? Add some extra padding using the code below – it’ll adjust automatically if you change the width of your label.

padding: { right: 10, },

Let’s look at a classic node design and see if there’s room for improvement.

The first node in the image below is popular with our customers. It’s a great option for your graph design, and we’ll keep using it in many of our demos. But you can have even more control over how it looks. The second two nodes show how, with simple tweaks to the padding and label position, you can try out more elegant alternatives:

A classic node and label presented in different styles
Which do you prefer – #noGap or #gap?

How’s it done?

A margin setting of -2 gives a snug fit – pushing it up to 2 separates the label from the node. A little padding gives the label room to breathe, and looks more professional. Here’s the code:

// #noGap
padding: ‘4 4 2 4’,
margin: -2,
// #gap
padding: ‘4 4 2 4’,
margin: 2,

Another look that our customers often ask for brings the label and font icon into the same node. That’s no problem with fine-grained styling options:

Nodes which feature font icon and label together in one element
Bringing the label and icon together

Experiment with position, padding, borderRadius, and border on both your node and label to get the exact style you want.

4. Let auto-sizing do the hard work

Want to fit text onto your node regardless of length? Need a way to intelligently wrap text? Keen to keep the text size the same, but allow for nodes of different sizes? We’ve got you covered!

Real data comes in a wide variety of inputs, and creating a design that accommodates all of them is difficult but often necessary. ReGraph and KeyLines take the stress out of these graph design struggles. You keep control of the contents of your node by adjusting the font size automatically, wrapping the text, or creating a node or label container that adapts to fit its contents:

A mock-up of a node containing images and data from a social media post
A complex variety of input types are presented neatly in a rectangular node
How’s it done?

The key properties you need to wrap, auto-size and align your text are textWrap, maxWidth, and textAlignment. For example:

   "t": labelContents,
   "fs": 8,
   "position": {
       "horizontal": "left"
   "padding": "10 8 10 8",
   "maxWidth": 200,
   "textWrap": "normal",
   "textAlignment": { "horizontal": 'left' } 
    // ^or 'right' for RTL text

If you want to keep the node size fixed and change the text size instead, you can also use “fontSize”: “auto”. This is particularly useful when you want the text to fill a circular node, so you can pack nodes really tightly and make efficient use of screen space:

A large circular node filled neatly with text
Wrapped text over a font icon quickly conveys the source of these data breaches

Perhaps you’re monitoring an IT network and have to keep track of a lot of different IP addresses. You can easily accommodate IPv4 and IPv6 addresses with node auto-sizing. Simply set height and width to “auto” and your nodes will be exactly the right size for the labels every time:

shape: { height: 'auto', width: 'auto' }
Nodes that auto-fit to different lengths of IP address
The same node will automatically adjust to fit any size of IP address

Explore infinite graph design and styling capabilities

Hopefully these four tricks have sparked some ideas, and you’re inspired to try out advanced node customization for yourself. Let us know what you come up with, in your experiments with the graph design functions we’ve unlocked.

Not already using KeyLines and ReGraph? Sign up for a free trial today.

A screen showing a hybrid graph and timeline visualization created using ReGraph and KronoGraph
FREE: Start your trial today

Visualize your data! Request full access to our SDKs, demos and live-coding playgrounds.


How can we help you?

Request trial

Ready to start?

Request a free trial

Learn more

Want to learn more?

Read our white papers


Looking for success stories?

Browse our case studies

Registered in England and Wales with Company Number 07625370 | VAT Number 113 1740 61
6-8 Hills Road, Cambridge, CB2 1JP. All material © Cambridge Intelligence 2023.
Read our Privacy Policy.