Chord Diagram

This article describes the Chord Diagram component and its properties.

The Chord Diagram is a data visualization component that displays weighted relationships between several entities and data points.

Select Chord Diagram from the Data Visualization category of the component library. Move the mouse over the canvas and click to add a chord diagram to your project:

Chord Diagram Properties

The Chord Diagram properties consist of DATA, and DYNAMIC VISIBILITY drawers. This guide will not describe the dynamic visibility properties as these are generic to each visible component; a separate guide and tutorial on dynamic visibility can be found here.

---

DATA

• From - an input field that needs to be bound to the spreadsheet. Contains the start points for the ribbons.

• To - an input field that needs to be bound to the spreadsheet. Contains the endpoints for the ribbons.

• Value - an input field that needs to be bound to the spreadsheet. Contains the values tied to the ribbons.

Both ranges must match in size. In the screenshot below, the ribbons connect as the following:

• A to D = 10

• B to D = 8

• B - E = 4

• and so on...

STYLING

• Allow Hover to change ribbon opacity - an option to allow an opacity property to be applied to the Chord ribbons when hovered over.

  • Hover Opacity - an input that determines the Hover Opacity.

• Ribbon Opacity - an input that determines the default Ribbon Opacity.