Ripl

Appearance

Chord Chart ​

The Chord Chart visualizes relationships between groups using arcs and ribbons arranged in a circle. Each group is represented by an arc segment, and ribbons connect groups to show the magnitude of flow between them. The chart features a sequential entry animation (arcs first, then ribbons), an optional legend, and configurable colors and pad angles.

NOTE

For the full API, see the Charts API Reference.

Example ​

Usage ​

ts
import {
    createChordChart,
} from '@ripl/charts';

const chart = createChordChart('#container', {
    labels: ['A', 'B', 'C'],
    matrix: [
        [0, 10, 20],
        [10, 0, 15],
        [20, 15, 0],
    ],
});

Options ​

  • labels — Array of group labels
  • matrix — Square matrix of flow values between groups
  • colors — Optional array of colors for each group
  • padAngle — Gap angle between arcs in radians (default 0.04)
  • legend — boolean | ChartLegendOptions — Show/configure legend