# Figma Charts Help & FAQ — Charts and Data Visualization in Figma

> Help, guides and FAQs for the Figma Charts plugin: making your first chart, choosing between Google Charts, Highcharts, D3 Nivo, ApexCharts and ECharts, importing and connecting data, styling with presets and design tokens, inserting and updating charts on the canvas, AI generation, and export to code, tokens or an embed.

## Getting started

What the plugin does, why it runs real chart libraries, and how to make your first chart.

- [What is FigmaCharts and what can it do?](https://systergon.com/figma-charts/help/what-is-figmacharts) — 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.
- [Why does FigmaCharts use real chart libraries?](https://systergon.com/figma-charts/help/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.
- [How do I create my first chart?](https://systergon.com/figma-charts/help/create-first-chart) — Pick a chart from the gallery, put your numbers in the Data tab, then press + SVG to place it on the canvas. Nothing needs setting up first.
- [How do I get around the plugin?](https://systergon.com/figma-charts/help/get-around) — There are really only two screens: the gallery where you choose a chart, and the editor where you change it. The footer sits under both and holds Settings and Help.
- [How do I resize or maximise the plugin window?](https://systergon.com/figma-charts/help/resize-plugin-window) — The plugin opens at 850 by 800. Press the button in the top-right corner to fill the Figma window, or drag the grip in the bottom-right corner to any size in between — whatever you leave it at is what it opens at next time.
- [How do I edit a chart I already inserted?](https://systergon.com/figma-charts/help/edit-existing-chart) — Select the chart on the canvas with the plugin open and it reopens in the editor with your data and settings intact. Press Update SVG when you are done and it replaces the one already on the canvas.
- [What happens to my work if I close the plugin?](https://systergon.com/figma-charts/help/restore-session) — While you are in the editor the plugin keeps saving the chart you are building. If the window closes before you have inserted anything, it offers to bring that chart back the next time you open it.
- [What's free and what needs a paid plan?](https://systergon.com/figma-charts/help/free-vs-pro) — Google and HighCharts give you one free chart in every category — the first tile in the grid. The other three libraries, the data connectors, AI, animation and export all need the paid plan, which is $38 a year.

## Choosing a chart

Five real JavaScript charting libraries, 45 chart types — how to pick.

- [Which chart library should I pick?](https://systergon.com/figma-charts/help/choose-chart-library) — If your engineers already use one of the five, pick that one — you are choosing the library your product will actually ship, not just a look. Otherwise pick on range: ECharts has by far the most charts, HighCharts and Nivo the widest spread of types, and Google is the plainest. All five insert the same kind of Figma layers.
- [How do I find the chart type I need?](https://systergon.com/figma-charts/help/browse-chart-gallery) — The gallery filters in two steps: pick a library tab, then pick a category chip below it. You see one category at a time, and every tile is a live chart rather than a picture.
- [What do the category filters mean?](https://systergon.com/figma-charts/help/chart-categories) — Each chip is a family of related charts, not a single chart. There are 45 families in all, and any given library shows only the ones it actually ships.
- [Which chart type fits my data?](https://systergon.com/figma-charts/help/chart-type-guide) — Work from the shape of your data rather than the name of the chart. The plugin sorts chart types by the shape they need, and only a handful of shapes exist.
- [What are Essential, Common and Advanced?](https://systergon.com/figma-charts/help/complexity-modes) — They are three levels of chart furniture — titles, legends, axes, labels. Essential strips it all away, Common is the standard chart, Advanced turns everything on.
- [Why is a chart type locked?](https://systergon.com/figma-charts/help/locked-charts) — Under Google and HighCharts only the first chart in each category is free — everything after it is PRO. D3 - Nivo, ApexCharts and ECharts are PRO from top to bottom.
- [What does the ECharts "beta" label mean?](https://systergon.com/figma-charts/help/echarts-beta) — ECharts is the newest of the five libraries, and the chip on its tab says so. Everything in it renders, configures and inserts like the other four — it just has more rough edges around data editing.
- [Can I move a chart to a different library?](https://systergon.com/figma-charts/help/switch-library) — Not in one click — there is no library switcher. You carry the data across yourself: export it, open the equivalent chart under the other tab, and paste it back in.

## Getting your data in

Type it, paste it, import it, or connect a live source.

- [How do I type my own data in?](https://systergon.com/figma-charts/help/enter-data-manually) — Open the Data tab and type straight into the table — the first column holds your labels and every other column is a series. The preview redraws as you type.
- [How do I paste from Excel or Google Sheets?](https://systergon.com/figma-charts/help/paste-from-spreadsheet) — Copy the cells in your spreadsheet, then either paste them straight into the data table or drop them into the Import tab and press Parse & Apply Data.
- [How do I import a CSV or Excel file?](https://systergon.com/figma-charts/help/import-csv) — CSV and JSON files go through the Import tab in the editor. Excel workbooks come in a different way — as a connected data source — because the plugin has to unpack the workbook first.
- [How do I use sample data and shuffle it?](https://systergon.com/figma-charts/help/sample-data) — The Sample Data sub-tab holds ready-made datasets for the chart you are on, and the shuffle button in the tab bar re-rolls the numbers without touching your labels.
- [How does the data table work?](https://systergon.com/figma-charts/help/data-table-basics) — It behaves like a small spreadsheet: sort columns, drag rows, select cells, find and replace, undo — with a toolbar above it and a right-click menu on almost everything.
- [Why does my chart show a different data editor?](https://systergon.com/figma-charts/help/special-data-editors) — Because a table cannot describe every chart. Nested, connected and grid-shaped charts get an editor built for that shape, and a few unusual types fall back to raw JSON.
- [How do I enter data for a tree, treemap or sunburst?](https://systergon.com/figma-charts/help/hierarchy-data) — These charts read nested data, so the Data tab shows an indented tree instead of a table. You add children to a node rather than rows to a list.
- [How do I enter data for a Sankey, chord or network chart?](https://systergon.com/figma-charts/help/node-link-data) — These charts need two lists, so the Data tab gives you two tables: the things being connected, and the connections between them.
- [How do I enter data for a heatmap or calendar chart?](https://systergon.com/figma-charts/help/matrix-calendar-data) — A heatmap is edited as a grid with named rows and columns; a calendar is edited as a list of dates and values. Both live in the Data tab and swap in automatically.
- [How do I connect a Google Sheet?](https://systergon.com/figma-charts/help/connect-google-sheets) — Share the sheet so anyone with the link can view it, then paste its URL into the Google Sheets wizard. No API key and no Google sign-in are involved.
- [How do I connect an API, Airtable or Supabase?](https://systergon.com/figma-charts/help/connect-api-airtable-supabase) — All three use the same flow: press Connect Source, pick the type, hand over a key, then point the wizard at the rows you want.
- [How do I keep a chart's data up to date?](https://systergon.com/figma-charts/help/live-data-refresh) — Once a chart is linked to a source, a strip at the top of the Data tab shows where the data came from and when — press Refresh to pull the latest.

## Styling & presets

Colours, type and presets — including your own design system.

- [How do I find a specific chart option?](https://systergon.com/figma-charts/help/configuration-panel) — Use the search box at the top of the Configuration tab. Options are also grouped by what they affect — title, legend, axes, tooltip, colours and so on.
- [How do I change my chart's colours?](https://systergon.com/figma-charts/help/change-colors) — Pick a Colour palette in the Appearance group to recolour the whole chart at once, or open the Colors group to set individual series colours by hand.
- [What are colour palettes and how do I use them?](https://systergon.com/figma-charts/help/color-palettes) — A palette is an ordered set of colours applied to your series in turn. FigmaCharts ships 28 — nine of its own and 19 that match design systems and charting libraries you may already use — and you can build your own.
- [How do I use my Figma variables and styles as chart colours?](https://systergon.com/figma-charts/help/figma-variables-colors) — Mostly you do not have to. The plugin reads the colour variables already in your file and offers a palette built from them, under Figma in the palette list. When you want to choose the collection yourself — or bring a text style across at the same time — use Import from Figma in the Chart Style picker.
- [What are chart style presets?](https://systergon.com/figma-charts/help/chart-style-presets) — A chart style is a saved look — gridlines, labels, spacing, typography and sometimes a palette — applied in one click. A colour palette only changes colours; a chart style can change everything.
- [Why did my colours change when I picked a chart style?](https://systergon.com/figma-charts/help/color-vs-style-precedence) — Because that style carried its own palette. There are two colour controls and a clear order between them: a palette you pick yourself always wins, then the chart style, then the library default.
- [How do I save my own preset?](https://systergon.com/figma-charts/help/save-custom-preset) — Style a chart the way you want it, then save it as a chart style or as a colour palette. Both then appear in the pickers alongside the built-in ones.
- [How do I set the font on a chart?](https://systergon.com/figma-charts/help/typography-fonts) — Use Typography in the Appearance group. Pick a font and the preview loads it, so what you see is what Figma will draw when you insert.
- [How do I bind a chart to my Figma text styles?](https://systergon.com/figma-charts/help/text-styles) — Pick a Figma text style instead of a font. The chart then uses the family, size and weight your design system already defines, so it matches the rest of your work without you retyping anything.
- [How do I set my chart's width and height?](https://systergon.com/figma-charts/help/chart-size) — Use the Dimensions fields in the Appearance group. These set the size the chart is inserted at — they are not the same as zooming the preview.
- [How do I edit just one part of a chart?](https://systergon.com/figma-charts/help/inspector) — Turn on the Inspector, then click that part of the chart in the preview. The Configuration tab filters down to the options that affect what you clicked.

## Putting charts in Figma

Inserting, updating and navigating the preview.

- [How do I put a chart on the canvas?](https://systergon.com/figma-charts/help/insert-chart) — Press + SVG in the editor header. The chart lands in the middle of your viewport as a real Figma layer, already selected, and the plugin stays open so you can keep working on it.
- [Should I insert as SVG or PNG?](https://systergon.com/figma-charts/help/insert-svg-vs-png) — SVG almost always. It gives you a real Figma frame of vector and text layers you can recolour, restyle and put in components. PNG gives you one flat picture — pick it only when you want the chart frozen exactly as it is.
- [How do I update a chart after inserting it?](https://systergon.com/figma-charts/help/update-inserted-chart) — Select the chart on the canvas, change what you need in the editor, then press Update SVG. It replaces the chart in place — same position, size, rotation, name and frame — rather than adding a second one.
- [What does the Auto-update checkbox do?](https://systergon.com/figma-charts/help/auto-update) — It pushes every change you make straight to the chart on the canvas, so you stop pressing Update SVG. It appears only when you are editing a chart that is already in the file.
- [How do I pan and zoom the chart preview?](https://systergon.com/figma-charts/help/preview-navigation) — The preview behaves like the Figma canvas: two-finger scroll to pan, pinch or ⌘-scroll to zoom where your cursor is, and drag to move it around. None of it changes the chart — it is just how you are looking at it.
- [Why does my inserted chart differ from the preview?](https://systergon.com/figma-charts/help/preview-vs-output) — It should not — the plugin copies exactly what the preview has drawn. What differs is everything that only exists while a chart is live: tooltips, hover effects, and the zoom you were viewing it at.
- [How do I add a KPI card?](https://systergon.com/figma-charts/help/kpi-cards) — KPI cards are not built by hand in the plugin — they come with a dashboard. Ask Claude or another agent connected to FigmaCharts for a dashboard, and it draws a row of metric cards above your charts.
- [How do I fill a community template with charts?](https://systergon.com/figma-charts/help/fill-template) — Run Fill Community Template. It finds every frame on the page whose name starts with [INSERT], builds the chart named after it, and drops it into that exact spot at that exact size.

## Export & handoff

Hand engineering the same library you designed in — code, tokens, data, PDF, embeds and GitHub.

- [What can I export?](https://systergon.com/figma-charts/help/export-formats) — Eight formats, from the Export tab: SVG, PNG, PDF, chart code, your data, the chart config, an embeddable snippet, and design tokens. Code and Config are the handoff ones — they carry the real chart library your developer will build with.
- [How do I export chart code for React, Vue, Svelte or Angular?](https://systergon.com/figma-charts/help/export-code) — 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.
- [How do I export design tokens?](https://systergon.com/figma-charts/help/export-tokens) — Choose Tokens in the Export tab. Your chart's colours and typography come out as CSS custom properties, SCSS variables, a Tailwind config, W3C design tokens, or plain JSON.
- [How do I export my data back out?](https://systergon.com/figma-charts/help/export-data) — Choose Data in the Export tab and pick CSV, JSON or Excel. It exports the chart's current numbers, including anything you pasted, imported or pulled from a connected source.
- [How do I export a PDF or an embeddable chart?](https://systergon.com/figma-charts/help/export-pdf-embed) — Choose PDF for a print-ready page, or Embed for a snippet you can paste into a web page — either interactive, or a static SVG with no dependencies.
- [How do I save a chart and open it again later?](https://systergon.com/figma-charts/help/save-load-charts) — Save the chart as a file from the Export tab, then open it again with Import on the home screen. The file holds your data, your styling and your chart settings together.
- [How do I sync charts with GitHub?](https://systergon.com/figma-charts/help/github-sync) — Add a personal access token in Settings, then save charts straight to a repository and browse them back out — so a team shares one set of charts instead of passing files around.

## AI & automation

Generate and edit charts by asking, plus animation and agents.

- [How do I set up AI with my own API key?](https://systergon.com/figma-charts/help/ai-setup) — Open AI settings, pick Claude, OpenAI or Gemini, and paste a key from that provider. The plugin has no AI of its own — it talks to your account, so you keep control of the cost and the data.
- [How do I generate a chart by describing it?](https://systergon.com/figma-charts/help/ai-generate-chart) — Press AI Generate on the home screen and describe the chart you want in plain language. You get a real chart in the editor, with data, which you can then edit like any other.
- [How do I edit a chart by asking for changes?](https://systergon.com/figma-charts/help/ai-edit-chart) — Open the AI tab inside the editor and describe the change — "make the bars thinner", "move the legend to the bottom", "use our brand blue". It rewrites the chart settings for you.
- [How do I get a chart type recommended for my data?](https://systergon.com/figma-charts/help/ai-recommend) — Ask the AI what to use and describe your data. It suggests a chart type and says why, which is useful when you know what you want to show but not how to show it.
- [How do I animate a chart as a Figma prototype?](https://systergon.com/figma-charts/help/animation-basics) — Capture two or more snapshots of your chart on the Animation tab, choose how each one transitions to the next, and insert. You get a Figma component set whose variants are wired together as a prototype — not a video.
- [Can I use FigmaCharts from Claude or another agent?](https://systergon.com/figma-charts/help/mcp-and-skills) — Yes. FigmaCharts ships an MCP server, so an AI assistant that speaks MCP can create charts, connect data, build dashboards and place the result in your Figma file.

## Plan, licence & account

What is free, how to upgrade, and where your data lives.

- [How do I upgrade to Pro?](https://systergon.com/figma-charts/help/upgrade-to-pro) — Press Upgrade in the footer, or Get FigmaCharts Pro in any upgrade dialog. Checkout opens in your browser, and the licence key that arrives by email is what you paste back into the plugin.
- [How do I activate my licence key?](https://systergon.com/figma-charts/help/activate-license) — Open Settings, choose License & Subscription, press Enter License Key and paste the key from your purchase email. It unlocks straight away — there is no account to create and nothing to sign in to.
- [My licence key isn't working](https://systergon.com/figma-charts/help/license-troubleshoot) — The red message under the field says which of five things went wrong — a mistyped key, a key already in use, a key for another product, a lapsed subscription, or no connection. Each one has a different fix.
- [How do the early-bird discounts work?](https://systergon.com/figma-charts/help/discount-codes) — New users get 50% off for their first 48 hours, then 20% for the day after that. The banner at the bottom of the plugin shows the code and the time left, and its button carries the code into checkout for you.
- [What data does the plugin store, and where?](https://systergon.com/figma-charts/help/account-privacy) — Three places: your own machine, the Figma file itself, and — only when a feature needs it — the internet. Nothing is gathered for analytics, and the plugin never phones home with your charts.

## Troubleshooting

When something looks wrong.

- [My chart won't render](https://systergon.com/figma-charts/help/chart-not-rendering) — When something in the chart cannot be drawn, the plugin keeps the last version that worked and tells you what failed. Undo the change you just made and the preview comes back.
- [My data won't load or looks wrong](https://systergon.com/figma-charts/help/data-errors) — Every data failure now says what went wrong, either as a red toast on the Data tab or as a message naming the series it could not use. An edit that fails is never half-applied — the chart keeps the last data that worked.
- [My chart vanished or moved after inserting](https://systergon.com/figma-charts/help/chart-disappeared) — A new chart lands in the middle of your viewport and is left selected, so it is almost always on screen already — press Shift 2 in Figma to zoom straight to it.
- [My chart's fonts look wrong in Figma](https://systergon.com/figma-charts/help/fonts-wrong) — The preview and the inserted chart get their fonts from two different places, so one can be right while the other is not. Insert as SVG and the plugin loads the real Figma font before it places the chart.

Page: https://systergon.com/figma-charts/help