Skip to content

Chord

The Chord Chart is a specialized diagram used to display the inter-relationships between data categories.
Categories are arranged around a circle, with curved lines or ribbons connecting them to visualize the strength and flow of relationships between paired dimensions.

Use cases:

  • Visualizing relationships or flows between categories.
  • Showing network structures or cross-dimensional connections.
  • Comparing interdependent quantities across multiple categories.

⚙️ Setup

  1. Drag the Chord Chart widget from the chart library onto your designer workspace.
  2. Select the chart.
  3. Go to the Widget Configuration tab in the Configuration panel.
  4. Under the Configuration panel tab, select the Basic Configuration option to access essential settings for the Chord Chart.
  5. Select the Source from which the chart will fetch its data.
  6. Map:
    • Measure — Numeric value representing the relationship magnitude.
    • Dimension — Multiple categorical values (minimum 2) representing the categories around the circle.
  7. Optionally add a Date field for time-based filtering.

📊 Basic Configuration

Configuration ItemDescription
SourceThe data source to query for chart values.
MeasureNumeric value representing the size of connections between categories.
DimensionAt least two categorical dimensions used to create the relationships and groupings around the circle.
Date Field (optional)Enables date-based filtering and drilldown capability.

🎨 Chart Customizations

CategoryOptions & Description
GeneralTheme, background, border, and interactivity options.
TitleChart title, font, alignment, and visibility settings.
SortingDefine custom sorting for dimensions and connection order.
PositionAdjust horizontal and vertical positioning of the chord within the chart.
LegendShow/hide, position, and format for category legends.
SeriesCustomize node sizes, connection curviness, colors, labels, and positioning of the connections.
TooltipTooltip content, format, and triggers for node and connection hover details.
OthersConfigure symbol sizes, line curviness, connection colors (by Source or Target), and layout orientation.

📊 Example Visualization

Chord chart