Slides Chart

Create, inspect, and update chart elements on a Univer Slides slide with Web SDK.

Import @univerjs-pro/slides-chart/facade before using these APIs. Import @univerjs-pro/chart-ui/facade to add exportImage().

FSlide

newChart<T extends ChartTypeString>(type: T): FSlideChartBuilderOf<T>insertChart(info: ISlideChartInfo): Promise<FSlideChart>getChart(chartIdOrElementId: string): FSlideChart | nullgetCharts(): FSlideChart[]

The builder accepts inline values or a Sheet resource reference through setSource(). Slide-specific insertion methods are setPlaceholder(), setStroke(), and setZOrder().

Create a chart from inline data

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. toBuilder(type) creates a detached copy for a complete update or type change. exportImage() returns undefined when no slide renderer can provide an image.

Use slide.getChart(id) and slide.getCharts() to resolve live charts. FSlideChart inherits the shared chart configuration, data-source, placement, z-order, and removal APIs and adds getElementId(), getPlaceholder(), setPlaceholder(), getStroke(), setStroke(), and getChartData().

See Chart for the shared builder and live APIs.