Charts
Register chart support
Slides chart support consists of a model package and a UI package. @univerjs-pro/chart-ui provides the shared editor controls, locale entries, and styles.
import ChartUIEnUS from '@univerjs-pro/chart-ui/locale/en-US'import { UniverSlidesChartPlugin } from '@univerjs-pro/slides-chart'import { UniverSlidesChartUIPlugin } from '@univerjs-pro/slides-chart-ui'import SlidesChartUIEnUS from '@univerjs-pro/slides-chart-ui/locale/en-US'import { LocaleType, mergeLocales } from '@univerjs/core'import '@univerjs-pro/chart-ui/facade'import '@univerjs-pro/chart-ui/lib/index.css'import '@univerjs-pro/slides-chart-ui/lib/index.css'import '@univerjs-pro/slides-chart/facade'univerAPI.loadLocales(LocaleType.EN_US, mergeLocales(ChartUIEnUS, SlidesChartUIEnUS))univer.registerPlugin(UniverSlidesChartPlugin)univer.registerPlugin(UniverSlidesChartUIPlugin)Register chart support before opening or importing a presentation that might contain chart elements.
Create and update charts
slide.newChart(type) creates a detached builder. Nothing is added to the slide until you build the chart information and pass it to slide.insertChart(info).
const presentation = univerAPI.getActivePresentation()if (!presentation) throw new Error('No active presentation')const slide = presentation.getActiveSlide()const info = slide .newChart(univerAPI.Enum.ChartTypeString.Column) .setSource([ ['Month', 'Revenue', 'Cost'], ['Jan', 120, 80], ['Feb', 180, 96], ['Mar', 240, 132], ]) .setTitle('Quarterly revenue') .setAbsolutePosition(80, 120) .setSize(520, 320) .setZOrder(1) .build()const chart = await slide.insertChart(info)chart.setLegend({ visible: true }).bringToFront()const updatedInfo = chart.toBuilder(univerAPI.Enum.ChartTypeString.Line).setSubtitle('FY 2026').build()await chart.update(updatedInfo)const svg = await chart.exportImage({ format: 'svg' })Setters on the inserted chart update it immediately. Use toBuilder(type) with update(info) for a complete detached copy or a type change. exportImage() returns undefined when no UI renderer can provide an image.
Use slide.getCharts() and slide.getChart(id) to resolve live charts. Call await chart.remove() when you want to delete one. Slide builders also provide setPlaceholder(), setStroke(), and setZOrder().
Multi-level category axes
For inline hierarchical data, select category fields in root-to-leaf order and enable multi-level rendering:
const info = slide .newChart(univerAPI.Enum.ChartTypeString.Column) .setSource([ ['Region', 'Quarter', 'Revenue'], ['North', 'Q1', 120], ['North', 'Q2', 148], ['South', 'Q1', 98], ['South', 'Q2', 132], ]) .setCategoryFields([0, 1]) .setMultiLevelCategoryAxis(true) .setValueFields([2]) .setAbsolutePosition(80, 120) .setSize(520, 320) .build()await slide.insertChart(info)Bind a chart to Sheet data
Pass a resource reference to setSource() when the chart should follow a Sheet range instead of storing copied values:
const info = slide .newChart(univerAPI.Enum.ChartTypeString.Column) .setSource({ unit: { selector: 'sales-workbook', type: 'sheet' }, part: { kind: 'range', sheetName: 'Data', range: 'A1:B20', ref: 'Data!A1:B20', }, }) .setAbsolutePosition(120, 80) .setSize(640, 360) .build()const chart = await slide.insertChart(info)See the Chart Facade reference for shared chart configuration.
How is this guide?