Chart Basics

Contents

• Introduction
• Creating charts
• Styling charts
• Loading data into charts

Introduction

The KeyLines chart is the container for items that are used to build a graph and visualise your data. The main items in graph visualisations are nodes, links and annotations.

All items can have sub-items with additional information. For example, all items can have labels and glyphs, nodes can have halos and donuts, and links can have arrows.

The chart itself can also contain different styling or navigation elements such as logos, watermarks, navigation controls or overview window.

Creating charts

To create a chart, call the KeyLines.create() function:

KeyLines.create({ container: 'div1' })
  .then((result) => {
    chart = result;
  });

Make sure that you wait for KeyLines.create() to finish before calling other chart functions such as chart.load(). See Asynchronous JavaScript for more details.

You can display multiple charts on one page, as illustrated in the Path Analysis in Trees demo.

For detailed guides on creating an app with KeyLines, take a look at our JavaScript, React, Angular, Vue, Webpack or Rollup tutorials.

Styling charts

Nodes, links and annotations can all be styled in many ways to achieve virtually any design.

For various examples, see:

• Nodes: Node Styles demo, Advanced Node Styles demo and Node and Combo Styling documentation
• Links: Style Links demo
• Annotations: Annotations Basics demo, Advanced Annotation Styles demo and Annotations documentation

The chart itself has a range of customisable options available in the chart options API Reference, for example:

• Background: background colour or background gradient
• Branding: logo or watermark
• Navigation: navigation controls, overview window or dark theme for navigation and overview

Loading data into charts

There are a few different options how to load data into your chart. See Loading Data for details on how to do this.