FHeatmapChartBuilder

Fluent, type-specific Builder for Heatmap Charts.

The data source is a matrix-shaped table expressed as one category field plus one or more numeric value fields. Category values become Y-axis rows, value-field headers become X-axis columns, and each aligned numeric observation becomes one cell.

Inheritance

Extends FAxisChartBuilder. 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.Heatmap)  .setSource({    range: 'A1:D8',    orientation: univerAPI.Enum.ChartSourceOrientation.Columns,  })  .setCategoryField(0)  .setValueFields([1, 2, 3])  .setVisualMapType(univerAPI.Enum.ChartVisualMapType.Continuous)  .setValueRange(0, 100)  .setCellLabel({ visible: true, position: univerAPI.Enum.ChartSeriesLabelPosition.Inside })  .setValueUnit('tickets')  .build()await fWorksheet.insertChart(chartInfo)

Doc

TypeScript

const fDocument = univerAPI.getActiveDocument()const chartInfo = fDocument  .newChart(univerAPI.Enum.ChartTypeString.Heatmap)  .setSource([    ['Day', 'Morning', 'Evening'],    ['Mon', 24, 62],    ['Tue', 38, 81],  ])  .setCategoryField(0)  .setValueFields([1, 2])  .setVisualMapType(univerAPI.Enum.ChartVisualMapType.Continuous)  .setValueRange(0, 100)  .setCellLabel({ visible: true, position: univerAPI.Enum.ChartSeriesLabelPosition.Inside })  .setValueUnit('tickets')  .build()await fDocument.insertChart(chartInfo)

Slide

TypeScript

const fPresentation = univerAPI.getActivePresentation()const fSlide = fPresentation.getSlideByIndex(0)const chartInfo = fSlide  .newChart(univerAPI.Enum.ChartTypeString.Heatmap)  .setSource([    ['Day', 'Morning', 'Evening'],    ['Mon', 24, 62],    ['Tue', 38, 81],  ])  .setCategoryField(0)  .setValueFields([1, 2])  .setVisualMapType(univerAPI.Enum.ChartVisualMapType.Continuous)  .setValueRange(0, 100)  .setCellLabel({ visible: true, position: univerAPI.Enum.ChartSeriesLabelPosition.Inside })  .setValueUnit('tickets')  .build()await fSlide.insertChart(chartInfo)

Board

TypeScript

const fBoard = univerAPI.getActiveBoard()const chartInfo = fBoard  .newChart(univerAPI.Enum.ChartTypeString.Heatmap)  .setSource([    ['Day', 'Morning', 'Evening'],    ['Mon', 24, 62],    ['Tue', 38, 81],  ])  .setCategoryField(0)  .setValueFields([1, 2])  .setVisualMapType(univerAPI.Enum.ChartVisualMapType.Continuous)  .setValueRange(0, 100)  .setCellLabel({ visible: true, position: univerAPI.Enum.ChartSeriesLabelPosition.Inside })  .setValueUnit('tickets')  .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`

`FHeatmapChartBuilder.clearCellLabel`

Clears the explicit Heatmap cell-label style. Heatmap cells render without labels until labels are enabled again with setCellLabel({ visible: true }).

TypeScript

clearCellLabel(): this

Returns

This builder for chaining.

Examples

TypeScript

builder.clearCellLabel()

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

`FHeatmapChartBuilder.clearValueRange`

Clears the value range configuration and returns this builder for chaining.

This method executes synchronously.

TypeScript

clearValueRange(): this

Returns

This builder for chaining.

Examples

TypeScript

builder.clearValueRange()

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

`FHeatmapChartBuilder.clearValueUnit`

Clears the explicit Heatmap value unit.

TypeScript

clearValueUnit(): this

Returns

This builder for chaining.

Examples

TypeScript

builder.clearValueUnit()

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

`FHeatmapChartBuilder.resetVisualMapType`

Restores the visual map type to Continuous and returns this builder for chaining.

This method executes synchronously.

TypeScript

resetVisualMapType(): this

Returns

This builder for chaining.

Examples

TypeScript

builder.resetVisualMapType()

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

`FHeatmapChartBuilder.setCellLabel`

Sets the value label rendered inside each Heatmap cell.

With { visible: true }, omitted style fields default to the cell value, an inside position, 12 px text, the chart font (or Arial), and the active theme's mark-text color.

TypeScript

setCellLabel(value: IChartHeatmapLabelSpec): this

Parameters

value — Required. Cell-label visibility and typography.

Returns

This builder for chaining.

Examples

TypeScript

builder  .setPalette(['#eff6ff', '#1d4ed8'])  .setValueRange(0, 80)  .setValueUnit('tickets')  .setCellLabel({ visible: true, position: univerAPI.Enum.ChartSeriesLabelPosition.Inside })

Types: IChartHeatmapLabelSpec

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

`FHeatmapChartBuilder.setValueRange`

Sets the value range configuration and returns this builder for chaining.

This method executes synchronously.

TypeScript

setValueRange(min: number, max: number): this

Parameters

min — Required. The minimum value.
max — Required. The maximum value.

Returns

This builder for chaining.

Examples

TypeScript

builder.setValueRange(0, 100)

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

`FHeatmapChartBuilder.setValueUnit`

Sets the unit appended to the Heatmap visual-map boundary labels.

TypeScript

setValueUnit(value: string): this

Parameters

value — Required. Unit text such as tickets.

Returns

This builder for chaining.

Examples

TypeScript

builder.setValueUnit('tickets')

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

`FHeatmapChartBuilder.setVisualMapType`

Sets the visual map type configuration and returns this builder for chaining.

This method executes synchronously.

TypeScript

setVisualMapType(value: ChartVisualMapType): this

Parameters

value — Required. The semantic value to record.

Returns

This builder for chaining.

Examples

TypeScript

builder.setVisualMapType(univerAPI.Enum.ChartVisualMapType.Continuous)

Types: ChartVisualMapType

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

How is this guide?