ChordChart

Live preview

Loading example…

Chord diagram: groups share a circle, ribbons between them are the flows (who switches to whom, which service goes with which). Hover a group to light its ribbons, a ribbon to isolate it; arrows walk the groups.

Import

import { ChordChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/chord-chart.

Usage

<ChordChart
  title="Clientes que cambian de barbero"
  description="Octubre frente a septiembre"
  groups={barberos}
  matrix={cambios}
  padAngle={3}
  startAngle={0}
  ringWidth={0.09}
  sortGroups="input"
  sortSubgroups="descending"
  showLabels
  valueFormat="integer"
  height={440}
  legend
  tooltip
  animate
  loading={false}
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
`title` *	`string`		Accessible name of the drawing and caption of the data table.
`description`	`string`
`groups` *	`readonly ChordGroupInput[]`
`matrix` *	`readonly (readonly number[])[]`		`matrix[i][j]`: flow from group `i` to group `j`. A group’s arc spans its row sum.
`padAngle`	`number`	`3`	Gap between groups, in degrees.
`startAngle`	`number`	`0`	Where the first group starts, degrees from twelve o’clock.
`ringWidth`	`number`	`0.09`	Thickness of the group ring as a fraction of the radius.
`sortGroups`	`"input" \| "ascending" \| "descending"`	`"input"`
`sortSubgroups`	`"input" \| "ascending" \| "descending"`	`"descending"`	Order of the ribbon ends inside a group.
`showLabels`	`boolean`	`true`	Group names around the ring (hidden automatically in narrow containers).
`valueFormat`	`ValueFormat`
`height`	`number \| "fill"`	`420`
`aspectRatio`	`number`		Width / height ratio of the drawing; ignored with `"fill"`.
`legend`	`boolean`	`true`
`tooltip`	`boolean`	`true`
`exportable`	`boolean`	`false`	SVG and PNG export buttons.
`animate`	`boolean`	`true`
`loading`	`boolean`
`labels`	`Partial<ChordLabels>`
`onGroupClick`	`((group: ChordGroupInput, index: number) => void)`
`className`	`string`

* marks a required prop.

Storybook stories

Source

packages/ui/src/charts/chord-chart/chord-chart.tsx