# What is FigmaCharts and what can it do?

> FigmaCharts runs the same JavaScript charting libraries your engineers use — Google Charts, HighCharts, ApexCharts, D3 - Nivo and ECharts — and puts their real output on your canvas as native Figma layers. There are 588 charts to start from, you replace the sample numbers with your own, and the code you export renders that same chart from that same library.

> **Tip:** The point of running the real libraries is that design and build stop diverging. What the library decides on your canvas — axis range, dropped labels, legend wrapping — is what it will decide in the browser. See *Why does FigmaCharts use real chart libraries?*

> **Note:** The charts are drawn inside the plugin, so it works with no connection. Only the AI features and the live data connectors need to reach the internet.

> **Note:** Recharts and Plotly appear as library tabs but are not ready yet — those tabs say Coming Soon. The five libraries above are the ones that ship.

> **Pro feature:** Google and HighCharts give you the first chart in every category free. Everything else — the other three libraries, the connectors, AI, animation and export — is part of the paid plan at $38 a year.

## Steps

1. Start from the gallery. It holds 588 charts sorted into 45 categories — bar, line, pie, area, treemap, Sankey, gauge, radar and the rest — drawn by five real charting libraries: Google, HighCharts, D3 - Nivo, ApexCharts and ECharts. These are the production libraries themselves, not redrawn lookalikes.
2. Put your own numbers in from the Data tab. Type them into the table, paste a block straight out of a spreadsheet, import a CSV or Excel file, or connect a live Google Sheet, Airtable base, Supabase table or REST API.
3. Change how it looks from the Configuration tab — colours, fonts, legend, axes, gridlines, size. Palettes and text can be pulled from your own Figma variables and styles, so a chart matches the file it lives in.
4. Place it with + SVG for a frame of vector and text layers you can select and restyle in Figma, or + PNG for a flat image.
5. Hand it to engineering from the Export tab: SVG, PNG, PDF, code, data, config, embed and design tokens. Code comes out as React, Vue 3, Angular, Svelte or plain JavaScript — using the same library you designed in, so your developer builds the chart you approved instead of re-interpreting a picture of it.
6. Or describe the chart you want and let AI build it. Bring your own API key from Claude, OpenAI or Gemini — the plugin never provides one.

_Topics: overview, basics, libraries_

---

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

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