No node selected

The right node design can help you visualise any type or amount of data in an intuitive way, provide the best user interface and experience for chart users and integrate your charts seamlessly into any application.

For more details about the advanced styling features in KeyLines, see also our Node and Combo Styling docs.

Custom shaped nodes

Set the width (w) and height (h) of nodes to create rectangular nodes. You can also add one or multiple rounded corners by setting the borderRadius property.

Alternatively, you can get any node shape by overlapping nodes with font icons that are added as labels in the t property array of objects.

Multiple styled labels

The t array of objects can be used to add multiple image, text and font icon labels. Each label can have its own styling and positioning and serve different purposes such as a source of information or an additional node styling feature.

Custom label interactions

Labels can serve as UI elements such as buttons, icons or toggles. Use pointer events and hover events to add custom interactions and interaction styling.

You can also design labels with dynamically changing styling and create your own graphical elements such as progress bars or stack bars.

Images inside labels

To create images on nodes with multiple styled labels, simply set the label's u property.

Key functions used:

• chart.foreground
• chart.getItem
• chart.on
• chart.setProperties