FChordChartBuilder

Fluent semantic builder for an undirected Source/Target/optional-Value edge list.

Final display labels own node identity. Duplicate and reverse rows aggregate, omitted Value means unit-weight counts, and blank endpoints, self-links, and non-positive/non-finite mapped weights are skipped without coercion. Aggregate values are formatted after summing. Defaults are renderer-owned and require the native ECharts 6.1 Chord series; no renderer nodes, links, or layout are persisted.

Inheritance

Extends FChartBuilderBase. Its inherited members are available on this object.

Example

Sheet

TypeScript

const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getSheetByName('Sheet1')const chartInfo = fWorksheet  .newChart(univerAPI.Enum.ChartTypeString.Chord)  .setSource('A1:C8')  .setChordMapping({ sourceIndex: 0, targetIndex: 1, valueIndex: 2 })  .setChordLayout({ startAngle: 90, clockwise: true, innerRadiusRatio: 0.4, outerRadiusRatio: 0.8 })  .setChordNode({ color: '#2563eb', opacity: 0.8 })  .setChordLabel({    visible: true,    position: univerAPI.Enum.ChartChordLabelPosition.Outside,    color: '#334155',  })  .setChordRibbon({ color: univerAPI.Enum.ChartChordRibbonColorMode.Gradient, opacity: 0.6 })  .setChordEmphasis({ focus: univerAPI.Enum.ChartChordFocusMode.Adjacency })  .build()await fWorksheet.insertChart(chartInfo)

Doc

TypeScript

const fDocument = univerAPI.getActiveDocument()const chartInfo = fDocument  .newChart(univerAPI.Enum.ChartTypeString.Chord)  .setSource([    ['Source', 'Target', 'Value'],    ['A', 'B', 5],    ['A', 'C', 3],    ['B', 'C', 2],  ])  .setChordMapping({ sourceIndex: 0, targetIndex: 1, valueIndex: 2 })  .setChordLayout({ startAngle: 90, clockwise: true, innerRadiusRatio: 0.4, outerRadiusRatio: 0.8 })  .setChordNode({ color: '#2563eb', opacity: 0.8 })  .setChordLabel({    visible: true,    position: univerAPI.Enum.ChartChordLabelPosition.Outside,    color: '#334155',  })  .setChordRibbon({ color: univerAPI.Enum.ChartChordRibbonColorMode.Gradient, opacity: 0.6 })  .setChordEmphasis({ focus: univerAPI.Enum.ChartChordFocusMode.Adjacency })  .build()await fDocument.insertChart(chartInfo)

Slide

TypeScript

const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const chartInfo = fSlide  .newChart(univerAPI.Enum.ChartTypeString.Chord)  .setSource([    ['Source', 'Target', 'Value'],    ['A', 'B', 5],    ['A', 'C', 3],    ['B', 'C', 2],  ])  .setChordMapping({ sourceIndex: 0, targetIndex: 1, valueIndex: 2 })  .setChordLayout({ startAngle: 90, clockwise: true, innerRadiusRatio: 0.4, outerRadiusRatio: 0.8 })  .setChordNode({ color: '#2563eb', opacity: 0.8 })  .setChordLabel({    visible: true,    position: univerAPI.Enum.ChartChordLabelPosition.Outside,    color: '#334155',  })  .setChordRibbon({ color: univerAPI.Enum.ChartChordRibbonColorMode.Gradient, opacity: 0.6 })  .setChordEmphasis({ focus: univerAPI.Enum.ChartChordFocusMode.Adjacency })  .build()await fSlide.insertChart(chartInfo)

Board

TypeScript

const fBoard = univerAPI.getActiveBoard()const chartInfo = fBoard  .newChart(univerAPI.Enum.ChartTypeString.Chord)  .setSource([    ['Source', 'Target', 'Value'],    ['A', 'B', 5],    ['A', 'C', 3],    ['B', 'C', 2],  ])  .setChordMapping({ sourceIndex: 0, targetIndex: 1, valueIndex: 2 })  .setChordLayout({ startAngle: 90, clockwise: true, innerRadiusRatio: 0.4, outerRadiusRatio: 0.8 })  .setChordNode({ color: '#2563eb', opacity: 0.8 })  .setChordLabel({    visible: true,    position: univerAPI.Enum.ChartChordLabelPosition.Outside,    color: '#334155',  })  .setChordRibbon({ color: univerAPI.Enum.ChartChordRibbonColorMode.Gradient, opacity: 0.6 })  .setChordEmphasis({ focus: univerAPI.Enum.ChartChordFocusMode.Adjacency })  .build()await fBoard.insertChart(chartInfo)

Setup

Register @univerjs-pro/engine-chart or a preset that includes it. In plugin mode, import @univerjs-pro/engine-chart/facade. Additional methods below require their listed plugin packages. See Facade setup.

`@univerjs-pro/engine-chart`

`FChordChartBuilder.resetChordEmphasis`

Resets Chord emphasis behavior to renderer defaults.

TypeScript

resetChordEmphasis(): this

Returns

This builder for chaining.

Examples

TypeScript

builder.resetChordEmphasis()

Package: @univerjs-pro/engine-chart · Type definitions

`FChordChartBuilder.resetChordLabel`

Resets Chord labels to renderer defaults.

TypeScript

resetChordLabel(): this

Returns

This builder for chaining.

Examples

TypeScript

builder.resetChordLabel()

Package: @univerjs-pro/engine-chart · Type definitions

`FChordChartBuilder.resetChordLayout`

Resets the Chord layout to renderer defaults.

TypeScript

resetChordLayout(): this

Returns

This builder for chaining.

Examples

TypeScript

builder.resetChordLayout()

Package: @univerjs-pro/engine-chart · Type definitions

`FChordChartBuilder.resetChordNode`

Resets Chord node styling to renderer defaults.

TypeScript

resetChordNode(): this

Returns

This builder for chaining.

Examples

TypeScript

builder.resetChordNode()

Package: @univerjs-pro/engine-chart · Type definitions

`FChordChartBuilder.resetChordRibbon`

Resets Chord ribbon styling to renderer defaults.

TypeScript

resetChordRibbon(): this

Returns

This builder for chaining.

Examples

TypeScript

builder.resetChordRibbon()

Package: @univerjs-pro/engine-chart · Type definitions

`FChordChartBuilder.setChordEmphasis`

Sets hover emphasis and focus behavior.

TypeScript

setChordEmphasis(value: IChartChordEmphasisSpec): this

Parameters

value — Required. Chord emphasis settings.

Returns

This builder for chaining.

Examples

TypeScript

builder.setChordEmphasis({ focus: univerAPI.Enum.ChartChordFocusMode.Adjacency })

Types: IChartChordEmphasisSpec

Package: @univerjs-pro/engine-chart · Type definitions

`FChordChartBuilder.setChordLabel`

Sets Chord node-label visibility, position, and styling.

TypeScript

setChordLabel(value: IChartChordLabelSpec): this

Parameters

value — Required. Chord label settings.

Returns

This builder for chaining.

Examples

TypeScript

builder.setChordLabel({  visible: true,  position: univerAPI.Enum.ChartChordLabelPosition.Outside,  color: '#334155',})

Types: IChartChordLabelSpec

Package: @univerjs-pro/engine-chart · Type definitions

`FChordChartBuilder.setChordLayout`

Sets the Chord radius, rotation, and spacing layout.

TypeScript

setChordLayout(value: IChartChordLayoutSpec): this

Parameters

value — Required. Chord layout settings.

Returns

This builder for chaining.

Examples

TypeScript

builder.setChordLayout({ startAngle: 90, clockwise: true })

Types: IChartChordLayoutSpec

Package: @univerjs-pro/engine-chart · Type definitions

`FChordChartBuilder.setChordMapping`

Sets the Source, Target, and optional Value field indexes for Chord edges.

TypeScript

setChordMapping(value: IChartChordMappingSpec): this

Parameters

value — Required. Zero-based field indexes for each edge component.

Returns

This builder for chaining.

Examples

TypeScript

builder.setChordMapping({ sourceIndex: 0, targetIndex: 1, valueIndex: 2 })

Types: IChartChordMappingSpec

Package: @univerjs-pro/engine-chart · Type definitions

`FChordChartBuilder.setChordNode`

Sets Chart-wide Chord node styling.

TypeScript

setChordNode(value: IChartChordNodeStyleSpec): this

Parameters

value — Required. Chord node appearance settings.

Returns

This builder for chaining.

Examples

TypeScript

builder.setChordNode({ color: '#2563eb', opacity: 0.8 })

Types: IChartChordNodeStyleSpec

Package: @univerjs-pro/engine-chart · Type definitions

`FChordChartBuilder.setChordRibbon`

Sets Chord ribbon color, opacity, and border styling.

TypeScript

setChordRibbon(value: IChartChordRibbonStyleSpec): this

Parameters

value — Required. Chord ribbon appearance settings.

Returns

This builder for chaining.

Examples

TypeScript

builder.setChordRibbon({  color: univerAPI.Enum.ChartChordRibbonColorMode.Gradient,  opacity: 0.6,})

Types: IChartChordRibbonStyleSpec

Package: @univerjs-pro/engine-chart · Type definitions

How is this guide?