# Slides Chart

- Human documentation: [https://docs.univer.ai/reference/facade/slides-chart](https://docs.univer.ai/reference/facade/slides-chart)

- Agent Markdown: [https://docs.univer.ai/reference/facade/slides-chart.md](https://docs.univer.ai/reference/facade/slides-chart.md)

- Requested language: `en-US`

- Content language: `en-US`

- Documentation version: `1.0.0-rc.0`

- Source: [facade/slides-chart.mdx](https://github.com/dream-num/documentation/blob/dev/content/reference/facade/slides-chart.mdx)

---

| Packages | `@univerjs-pro/slides-chart`, `@univerjs-pro/engine-chart`, `@univerjs-pro/chart-ui` |
| -------- | ------------------------------------------------------------------------------------ |

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

```typescript
newChart<T extends ChartTypeString>(type: T): FSlideChartBuilderOf<T>
insertChart(info: ISlideChartInfo): Promise<FSlideChart>
getChart(chartIdOrElementId: string): FSlideChart | null
getCharts(): 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

```ts
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](https://docs.univer.ai/reference/facade/chart.md) for the shared builder and live APIs.

Source: `@univerjs-pro/engine-chart`, `@univerjs-pro/slides-chart`, `@univerjs-pro/chart-ui`