# Why does FigmaCharts use real chart libraries?

> Because it closes the gap between what you design and what gets built. The plugin runs the same JavaScript charting libraries your engineers already use, so the chart on your canvas is the library's own output — and the code you hand over renders that same chart, from the same library, at the same version.

> **Tip:** If your engineers have already standardised on one of the five, design in that one. The handoff then costs a copy and a paste, and there is nothing to translate.

> **Note:** The exported code depends on the chart library and nothing else. There is no FigmaCharts SDK, no runtime to install, and nothing that has to be kept in step with the plugin.

> **Note:** Insert as SVG and the chart also arrives on the canvas as real vector and text layers, so it stays editable in Figma. The canvas artwork and the exported code come from the same render, so they agree with each other.

## Steps

1. Most chart plugins draw their own approximation of a chart. FigmaCharts does not draw charts at all — it runs the actual libraries and puts their output on your canvas: Google Charts, HighCharts, ApexCharts, D3 - Nivo and ECharts. They are real dependencies of the plugin, the same packages an engineer installs from npm.
2. That means the layout is not a drawing. The axis range, the tick intervals, where labels collide and get dropped, how a legend wraps, what a log scale does to your smallest value — all of it is decided by the library's own layout engine, at design time, in front of you.
3. So the chart you approve is the chart that is buildable. A hand-drawn placeholder can show eight evenly spaced labels on an axis that would only ever fit five; the real library shows you the five.
4. When you hand over, the Export tab writes the chart back out as that library's own configuration, plus component code for React, Vue 3, Angular, Svelte or plain JavaScript. It lists the real packages and versions to install — `highcharts`, `apexcharts`, `echarts`, `@nivo/*` — with no FigmaCharts runtime anywhere in it.
5. Your developer installs that library and pastes that config. The result is not a close match to your design — it is the same library drawing the same options, so it is the same chart.
6. Everything you changed travels in that config: the palette, the fonts, the axis titles, the legend position, the number formats. The things a screenshot cannot carry are exactly the things that used to get lost in the handoff.

_Topics: libraries, handoff, developers_

---

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

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