# Figma Charts

> Real charting libraries, native Figma layers

Design with the same JavaScript charting libraries your engineers build with — Highcharts, ECharts, ApexCharts, D3-based Nivo and Google Charts, running inside Figma. 588 examples across 45 chart types. Insert the result as native Figma layers, then hand developers the same chart as working React, Vue, Angular or Svelte code, so design and build stop diverging.

**Open in Figma:** https://www.figma.com/community/plugin/1345221583582136577/figma-charts

## Features

### Five Charting Libraries
Google Charts, Highcharts, ApexCharts, D3-based Nivo and ECharts all ship today — 588 example charts across 45 chart types, each drawn by the real library rather than redrawn by the plugin.

### Specialised Data Editors
A table for ordinary data, and purpose-built editors where a table does not fit — an indented tree for hierarchies, paired node and link tables for Sankey and network charts, and a grid for matrices.

### Live Data Connectors
Connect a Google Sheet, Airtable base, Supabase table or REST API and refresh the chart in place. Your styling survives the refresh; only the numbers change.

### Design System Styling
Build palettes from your own Figma colour variables and styles, bind chart text to your Figma text styles, and save both as presets that every chart in the file can use.

### Element Inspector
Click a bar, an axis or the legend in the preview and the configuration panel filters to the options that affect it — faster than knowing what the library calls that option. Highcharts and ApexCharts.

### Native Figma Layers
Insert as SVG and the chart becomes real vector and text layers with the correct fonts loaded first, or as PNG for a flat image. Select an inserted chart later and it reopens for editing.

### Animation Timeline
Build a sequence of chart states and export it as a GIF or video, driven by the data changing between snapshots rather than by hand-keyframing.

### Code & Token Export
SVG, PNG, PDF, embed, data, config, W3C design tokens, and component code for React, Vue 3, Angular, Svelte or plain JavaScript — so engineering builds what you designed.

### AI Chart Generation
Describe the chart you want, or ask for an edit in plain language, using your own API key — your account, your usage.

### MCP Server & Skills
An AI assistant that speaks MCP can create charts, recommend a type, connect data, build dashboards and place the result on your canvas. Agent-built charts are ordinary charts you can reopen.

### GitHub Sync
Save charts to a repository and browse them back out, so a team shares one set of charts instead of passing files around.

### Accurate By Construction
Because the real library lays the chart out, the axis, scale and label collisions you see at design time are the ones the built product will have.

## Use cases

- **Dashboard design** — Lay out a dashboard against real numbers, so the axis ranges, label collisions and legend widths you solve are the ones the built product will actually have.
- **Reporting decks that stay current** — Connect the chart to the sheet the numbers already live in and refresh before the review, instead of rebuilding it every month.
- **Developer handoff** — Hand over component code, the chart config and W3C design tokens — a specification engineering can build from rather than a picture to reverse-engineer.
- **Choosing the right chart** — Try the same data as a bar, a treemap and a Sankey across five libraries in a few minutes, and see which one the data actually supports.

## How to use

1. **Pick a chart** — Browse 588 examples across 45 chart types and five libraries. Filter by the type you need and compare how each library draws it.
2. **Put your numbers in** — Type into the table, paste from a spreadsheet, import a CSV or Excel file, or connect a live Google Sheet, Airtable base, Supabase table or REST API.
3. **Style it to your file** — Set colours and type from your own Figma variables and styles, then adjust any option the library exposes — or click a part of the chart to filter to just its options.
4. **Place it on the canvas** — Insert as SVG for real vector and text layers, or PNG for a flat image. Select the frame later to reopen and update it.

Page: https://systergon.com/products/figma-plugins/figma-charts