ChordDiagram

live example

Explore the API in the live example.

api reference

ChordDiagram.thickness([value])

Sets the thickness of the outer arcs.

Parameters

Name	Type	Description
value	number	optionalThickness of the arcs in pixel. Default value is `10`.

Returns

ChordChart

Reference to the ChordDiagram API.

Examples

// Set thickness to 20px.
const chord = dalian.ChordDiagram('my-chart')
  .thickness(20)
  .render()

// Reset thickness.
chord.thickness()
  .render()

ChordDiagram.ChordChart(name[, parent])

The chord chart widget. As a chart, it extends the [Chart] ../components/chart.html component, with all of its available APIs. Furthermore, it extends the following components:

Highlight Groups along with their adjacent ribbons can be highlighted by passing their category names as specified in the data array.
Label Labels are shown inside the slice if they fit in, otherwise they are shown outside.

Parameters

Name	Type	Description
name	string	Name of the chart. Should be a unique identifier.
parent	string	optionalSee [Widget] ../components/widget.html for description. Default value is `body`.

ChordDiagram.data(plots)

Set/updates the data that is shown in the chord chart. In the chord chart, each arc along with its ribbons is a plot group in itself, so all methods that operate on plot groups are applied on the arc level.

Parameters

Name	Type	Description
plots	Object[]	Array of objects representing the flows from one group to another. Each flow has three properties: source `string` Name of the source group. target `string` Name of the target group. value `number` Flow strength. Unspecified elements of the flow matrix are set to 0.

Returns

ChordChart

Reference to the ChordDiagram API.

Examples

const chord = dalian.ChordDiagram('my-chart')
  .data([
    {source: 'group 1', target: 'group 2', value: 21},
    {source: 'group 1', target: 'group 3', value: 34},
    {source: 'group 2', target: 'group 3', value: 12},
    ...
  ])
  .render()

ChordDiagram.radius([value])

Sets the radius of the chord chart.

Parameters

Name	Type	Description
value	number	optionalChart radius in pixels. Default value is `100`.

Returns

ChordChart

Reference to the ChordDiagram API.

Examples

// Set radius to 150px.
const chord = dalian.ChordDiagram('my-chart')
  .radius(150)
  .render()

// Reset radius.
chord.radius()
  .render()