FGaugeChartBuilder

Fluent semantic builder for Google-style label/value Gauge data.

The category field is the label and exactly one value field is selected. Each finite numeric observation renders as an independently wrapped gauge; invalid values are skipped without coercion. Scale defaults to 0–100. Out-of-range raw values retain their source formatting for detail and tooltip text while only the rendered indicator is clamped. Angles use degrees, length/offset ratios use 0–1 units, and range bounds use scale-domain values. All style is chart-wide. Layout is derived at render time and is never part of this builder's state.

Inheritance

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

Example

Sheet

const fWorkbook = univerAPI.getActiveWorkbook()const fWorksheet = fWorkbook.getSheetByName('Sheet1')const chartInfo = fWorksheet  .newChart(univerAPI.Enum.ChartTypeString.Gauge)  .setSource('A1:B4')  .setCategoryField(0)  .setGaugeValueField(1)  .setGaugeMode(univerAPI.Enum.ChartGaugeMode.Modern)  .setGaugeScale({ min: 0, max: 100 })  .setGaugeTicks({ majorDivisions: 10, minorDivisionsPerMajor: 5 })  .setGaugeAngles({ startAngle: 225, endAngle: -45 })  .setGaugeRanges([{ from: 0, to: 60, color: '#dc2626' }])  .setGaugeAxisLine({ visible: true, width: 12 })  .setGaugeAxisTick({ visible: true, length: 6 })  .setGaugeSplitLine({ visible: true, length: 12 })  .setGaugeAxisLabel({ visible: true, color: '#334155' })  .setGaugePointer({    visible: true,    shape: univerAPI.Enum.ChartGaugePointerShape.Needle,    color: '#2563eb',  })  .setGaugeAnchor({ visible: true, size: 8 })  .setGaugeProgress({ visible: true, width: 12 })  .setGaugeTitle({ visible: true, color: '#334155' })  .setGaugeDetail({ visible: true, color: '#0f172a' })  .build()await fWorksheet.insertChart(chartInfo)

Doc

const fDocument = univerAPI.getActiveDocument()const chartInfo = fDocument  .newChart(univerAPI.Enum.ChartTypeString.Gauge)  .setSource([    ['Metric', 'Value'],    ['Completion', 72],  ])  .setCategoryField(0)  .setGaugeValueField(1)  .setGaugeMode(univerAPI.Enum.ChartGaugeMode.Modern)  .setGaugeScale({ min: 0, max: 100 })  .setGaugeTicks({ majorDivisions: 10, minorDivisionsPerMajor: 5 })  .setGaugeAngles({ startAngle: 225, endAngle: -45 })  .setGaugeRanges([{ from: 0, to: 60, color: '#dc2626' }])  .setGaugeAxisLine({ visible: true, width: 12 })  .setGaugeAxisTick({ visible: true, length: 6 })  .setGaugeSplitLine({ visible: true, length: 12 })  .setGaugeAxisLabel({ visible: true, color: '#334155' })  .setGaugePointer({    visible: true,    shape: univerAPI.Enum.ChartGaugePointerShape.Needle,    color: '#2563eb',  })  .setGaugeAnchor({ visible: true, size: 8 })  .setGaugeProgress({ visible: true, width: 12 })  .setGaugeTitle({ visible: true, color: '#334155' })  .setGaugeDetail({ visible: true, color: '#0f172a' })  .build()await fDocument.insertChart(chartInfo)

Slide

const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const chartInfo = fSlide  .newChart(univerAPI.Enum.ChartTypeString.Gauge)  .setSource([    ['Metric', 'Value'],    ['Completion', 72],  ])  .setCategoryField(0)  .setGaugeValueField(1)  .setGaugeMode(univerAPI.Enum.ChartGaugeMode.Modern)  .setGaugeScale({ min: 0, max: 100 })  .setGaugeTicks({ majorDivisions: 10, minorDivisionsPerMajor: 5 })  .setGaugeAngles({ startAngle: 225, endAngle: -45 })  .setGaugeRanges([{ from: 0, to: 60, color: '#dc2626' }])  .setGaugeAxisLine({ visible: true, width: 12 })  .setGaugeAxisTick({ visible: true, length: 6 })  .setGaugeSplitLine({ visible: true, length: 12 })  .setGaugeAxisLabel({ visible: true, color: '#334155' })  .setGaugePointer({    visible: true,    shape: univerAPI.Enum.ChartGaugePointerShape.Needle,    color: '#2563eb',  })  .setGaugeAnchor({ visible: true, size: 8 })  .setGaugeProgress({ visible: true, width: 12 })  .setGaugeTitle({ visible: true, color: '#334155' })  .setGaugeDetail({ visible: true, color: '#0f172a' })  .build()await fSlide.insertChart(chartInfo)

Board

const fBoard = univerAPI.getActiveBoard()const chartInfo = fBoard  .newChart(univerAPI.Enum.ChartTypeString.Gauge)  .setSource([    ['Metric', 'Value'],    ['Completion', 72],  ])  .setCategoryField(0)  .setGaugeValueField(1)  .setGaugeMode(univerAPI.Enum.ChartGaugeMode.Modern)  .setGaugeScale({ min: 0, max: 100 })  .setGaugeTicks({ majorDivisions: 10, minorDivisionsPerMajor: 5 })  .setGaugeAngles({ startAngle: 225, endAngle: -45 })  .setGaugeRanges([{ from: 0, to: 60, color: '#dc2626' }])  .setGaugeAxisLine({ visible: true, width: 12 })  .setGaugeAxisTick({ visible: true, length: 6 })  .setGaugeSplitLine({ visible: true, length: 12 })  .setGaugeAxisLabel({ visible: true, color: '#334155' })  .setGaugePointer({    visible: true,    shape: univerAPI.Enum.ChartGaugePointerShape.Needle,    color: '#2563eb',  })  .setGaugeAnchor({ visible: true, size: 8 })  .setGaugeProgress({ visible: true, width: 12 })  .setGaugeTitle({ visible: true, color: '#334155' })  .setGaugeDetail({ visible: true, color: '#0f172a' })  .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

FGaugeChartBuilder.resetGaugeAnchor

Resets the Gauge center anchor to renderer defaults.

resetGaugeAnchor(): this

Returns

This builder for chaining.

Examples

builder.resetGaugeAnchor()

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

FGaugeChartBuilder.resetGaugeAngles

Resets Gauge angles to renderer defaults.

resetGaugeAngles(): this

Returns

This builder for chaining.

Examples

builder.resetGaugeAngles()

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

FGaugeChartBuilder.resetGaugeAxisLabel

Resets Gauge scale labels to renderer defaults.

resetGaugeAxisLabel(): this

Returns

This builder for chaining.

Examples

builder.resetGaugeAxisLabel()

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

FGaugeChartBuilder.resetGaugeAxisLine

Resets Gauge axis-line styling to renderer defaults.

resetGaugeAxisLine(): this

Returns

This builder for chaining.

Examples

builder.resetGaugeAxisLine()

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

FGaugeChartBuilder.resetGaugeAxisTick

Resets Gauge minor ticks to renderer defaults.

resetGaugeAxisTick(): this

Returns

This builder for chaining.

Examples

builder.resetGaugeAxisTick()

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

FGaugeChartBuilder.resetGaugeDetail

Resets the Gauge value detail to renderer defaults.

resetGaugeDetail(): this

Returns

This builder for chaining.

Examples

builder.resetGaugeDetail()

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

FGaugeChartBuilder.resetGaugeMode

Resets the Gauge display mode to its default.

resetGaugeMode(): this

Returns

This builder for chaining.

Examples

builder.resetGaugeMode()

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

FGaugeChartBuilder.resetGaugePointer

Resets the Gauge pointer to renderer defaults.

resetGaugePointer(): this

Returns

This builder for chaining.

Examples

builder.resetGaugePointer()

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

FGaugeChartBuilder.resetGaugeProgress

Resets Gauge progress-arc settings to renderer defaults.

resetGaugeProgress(): this

Returns

This builder for chaining.

Examples

builder.resetGaugeProgress()

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

FGaugeChartBuilder.resetGaugeRanges

Clears authored Gauge scale ranges.

resetGaugeRanges(): this

Returns

This builder for chaining.

Examples

builder.resetGaugeRanges()

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

FGaugeChartBuilder.resetGaugeScale

Resets the Gauge scale to 0 through 100.

resetGaugeScale(): this

Returns

This builder for chaining.

Examples

builder.resetGaugeScale()

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

FGaugeChartBuilder.resetGaugeSplitLine

Resets Gauge major division lines to renderer defaults.

resetGaugeSplitLine(): this

Returns

This builder for chaining.

Examples

builder.resetGaugeSplitLine()

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

FGaugeChartBuilder.resetGaugeTitle

Resets the Gauge title to renderer defaults.

resetGaugeTitle(): this

Returns

This builder for chaining.

Examples

builder.resetGaugeTitle()

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

FGaugeChartBuilder.setGaugeAnchor

Sets the center anchor rendered beneath the Gauge pointer.

setGaugeAnchor(value: IChartGaugeAnchorSpec): this

Parameters

• value — Required. Gauge anchor settings.

Returns

This builder for chaining.

Examples

builder.setGaugeAnchor({ visible: true, size: 8 })

Types: IChartGaugeAnchorSpec

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

FGaugeChartBuilder.setGaugeAngles

Sets the Gauge start and end angles.

setGaugeAngles(value: IChartGaugeAnglesSpec): this

Parameters

• value — Required. Gauge angle settings in degrees.

Returns

This builder for chaining.

Examples

builder.setGaugeAngles({ startAngle: 225, endAngle: -45 })

Types: IChartGaugeAnglesSpec

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

FGaugeChartBuilder.setGaugeAxisLabel

Sets Gauge scale-label visibility, formatting, and styling.

setGaugeAxisLabel(value: DeepNullish<IChartGaugeAxisLabelSpec>): this

Parameters

• value — Required. Gauge scale-label settings.

Returns

This builder for chaining.

Examples

builder.setGaugeAxisLabel({ visible: true, color: '#334155' })

Types: DeepNullish · IChartGaugeAxisLabelSpec

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

FGaugeChartBuilder.setGaugeAxisLine

Sets Gauge axis-line visibility and styling.

setGaugeAxisLine(value: IChartGaugeAxisLineSpec): this

Parameters

• value — Required. Gauge axis-line settings.

Returns

This builder for chaining.

Examples

builder.setGaugeAxisLine({ visible: true, width: 12 })

Types: IChartGaugeAxisLineSpec

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

FGaugeChartBuilder.setGaugeAxisTick

Sets Gauge minor tick visibility and styling.

setGaugeAxisTick(value: IChartGaugeAxisTickSpec): this

Parameters

• value — Required. Gauge minor-tick settings.

Returns

This builder for chaining.

Examples

builder.setGaugeAxisTick({ visible: true, length: 6 })

Types: IChartGaugeAxisTickSpec

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

FGaugeChartBuilder.setGaugeDetail

Sets the Gauge value-detail formatter, styling, and offset.

setGaugeDetail(value: DeepNullish<IChartGaugeDetailSpec>): this

Parameters

• value — Required. Gauge detail settings.

Returns

This builder for chaining.

Examples

builder.setGaugeDetail({ visible: true, color: '#0f172a' })

Types: DeepNullish · IChartGaugeDetailSpec

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

FGaugeChartBuilder.setGaugeMode

Sets the Gauge display mode.

setGaugeMode(value: ChartGaugeMode): this

Parameters

• value — Required. Gauge display mode.

Returns

This builder for chaining.

Examples

builder.setGaugeMode(univerAPI.Enum.ChartGaugeMode.Modern)

Types: ChartGaugeMode

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

FGaugeChartBuilder.setGaugePointer

Sets the pointer visibility, dimensions, color, and semantic shape preset.

setGaugePointer(value: IChartGaugePointerSpec): this

Parameters

• value — Required. Gauge pointer settings.

Returns

This builder for chaining.

Examples

builder.setGaugePointer({  visible: true,  shape: univerAPI.Enum.ChartGaugePointerShape.Needle,  color: '#2563eb',})

Types: IChartGaugePointerSpec

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

FGaugeChartBuilder.setGaugeProgress

Sets Gauge progress-arc visibility and styling.

setGaugeProgress(value: IChartGaugeProgressSpec): this

Parameters

• value — Required. Gauge progress-arc settings.

Returns

This builder for chaining.

Examples

builder.setGaugeProgress({ visible: true, width: 12 })

Types: IChartGaugeProgressSpec

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

FGaugeChartBuilder.setGaugeRanges

Sets colored Gauge scale ranges in scale-domain units.

setGaugeRanges(value: readonly IChartGaugeRangeSpec[]): this

Parameters

• value — Required. Gauge scale ranges.

Returns

This builder for chaining.

Examples

builder.setGaugeRanges([{ from: 0, to: 60, color: '#dc2626' }])

Types: IChartGaugeRangeSpec

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

FGaugeChartBuilder.setGaugeScale

Sets the Gauge minimum, maximum, and optional major-division count.

setGaugeScale(value: IChartGaugeScaleSpec): this

Parameters

• value — Required. Gauge scale settings.

Returns

This builder for chaining.

Examples

builder.setGaugeScale({ min: 0, max: 100, splitNumber: 10 })

Types: IChartGaugeScaleSpec

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

FGaugeChartBuilder.setGaugeSplitLine

Sets Gauge major division-line visibility and styling.

setGaugeSplitLine(value: IChartGaugeSplitLineSpec): this

Parameters

• value — Required. Gauge division-line settings.

Returns

This builder for chaining.

Examples

builder.setGaugeSplitLine({ visible: true, length: 12 })

Types: IChartGaugeSplitLineSpec

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

FGaugeChartBuilder.setGaugeTicks

Sets regular major scale divisions and minor divisions per major interval.

setGaugeTicks(value: IChartGaugeTicksPatch): this

Parameters

• value — Required. Gauge tick settings.

Returns

This builder for chaining.

Examples

builder.setGaugeTicks({ majorDivisions: 10, minorDivisionsPerMajor: 5 })

Types: IChartGaugeTicksPatch

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

FGaugeChartBuilder.setGaugeTitle

Sets the per-observation Gauge title styling and offset.

setGaugeTitle(value: IChartGaugeTitleSpec): this

Parameters

• value — Required. Gauge title settings.

Returns

This builder for chaining.

Examples

builder.setGaugeTitle({ visible: true, color: '#334155' })

Types: IChartGaugeTitleSpec

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

FGaugeChartBuilder.setGaugeValueField

Selects the only value field; labels use setCategoryField().

setGaugeValueField(index: number): this

Parameters

• index — Required. Zero-based value field index.

Returns

This builder for chaining.

Examples

builder.setGaugeValueField(1)

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