# How do I export chart code for React, Vue, Svelte or Angular?

> Choose Code in the Export tab and pick a framework. You get a working component that renders the chart you designed, using the same chart library, so your engineers build from your file rather than from a screenshot.

## Before you start

- A chart open in the editor, styled the way you want it shipped.

> **Note:** Not every framework covers every chart library, and the picker only offers the ones that work. Highcharts, ApexCharts and ECharts export to all five. Google Charts covers four — React, Vanilla, Angular and Svelte, but not Vue 3. Nivo charts export to React only, because Nivo is a React library and there is no Vue, Angular or Svelte equivalent to generate.

> **Tip:** The exported code depends on the chart library, not on FigmaCharts — there is no runtime to install and nothing to keep in sync with the plugin. This is the point of the whole handoff: design and build run the same renderer, so they cannot drift apart.

> **Pro feature:** Code export needs a paid plan.

## Steps

1. Open the Export tab and choose Code.
2. Pick a framework: React, Vue 3, Vanilla, Angular or Svelte.
3. The generated source appears below, including the chart options exactly as you configured them — colours, fonts, axes, labels and all.
4. It also lists the packages to install, which are the chart library's own — `highcharts`, `apexcharts`, `echarts`, `@nivo/*` — at the same major version the plugin renders with. Install those and the component draws the chart you approved, because it is the same library reading the same options.
5. Press Copy to take it to your clipboard, or Download to save the file.

_Topics: code, handoff, react, developer_

---

Install Figma Charts: https://www.figma.com/community/plugin/1345221583582136577/figma-charts

More Figma Charts help: https://systergon.com/figma-charts/help