amCharts

Chart Maker for Figma

Chart Maker by amCharts is a Figma plugin for making real charts: pick a template, type in your data, style it, and insert it as editable vector layers. Developers get the same chart as working amCharts 5 code in Dev Mode.

Install and run

Open Chart Maker by amCharts in Figma Community and click Open in… to use it in a file. Later, in any file, open the Actions menu (⌘K on a Mac, Ctrl+K on Windows), search for Chart Maker, and run it.

Where the chart goes when you insert it:

  • Nothing selected: in the middle of what you're looking at.
  • A frame selected: it fills that frame, at the frame's size.
  • In Slides: centred on the current slide.

Insert a chart

  1. Pick a template: columns, lines, pies, maps, flows and more.
  2. Enter your data on the Data tab: type into the table, or import a CSV file.
  3. Style it in Settings: the theme, colours, labels, legend, axes and everything else.
  4. Click Insert.

The chart comes in as vector layers. Text stays text, and each series is its own named group, so you can still adjust the artwork by hand. For a photo behind the chart, pick one from Unsplash under Global › Theme & Image Background; the photographer's credit comes in as a layer of its own.

Edit a chart

Select the chart and click Edit chart in the right panel, or run the plugin with the chart selected. Your changes redraw it in place: it keeps its position, and its layer name if you renamed it. The chart's data and settings are saved with it in the file, so anyone who can edit the file can edit the chart too.

Your file's colours and fonts

A new chart takes its look from the file: its colour variables (local ones, and library ones used on the page) and its text styles. The colours come in the mode of where the chart goes, the selected frame's or else the page's, and the chart turns dark when that mode is a dark one or its background is dark.

The Figma file section at the top of Global shows which colour went where; change any of them and the plugin remembers your choice for that file. A chart you edit later keeps its own colours until you click Use this file's colours.

Code in Dev Mode

In Dev Mode, select the chart, open Code, and choose Chart Maker by amCharts. Then pick React, Vue, Angular, Svelte, React Native, HTML, the JSON config, or All platforms. The code draws the same chart, live and interactive, with your data in it.

Where it works, and what it costs

Chart Maker works in Figma Design, FigJam, Slides and Dev Mode. It is free and needs no account.

The code uses amCharts 5, which is free to use with a small amCharts logo on the chart. A commercial licence removes the logo.

Privacy

The plugin has no accounts and sets no cookies. It counts how often charts are opened and inserted, anonymously. If you sign up for news, we keep your email address once you confirm it. The details are in our Privacy Policy.

Help

Questions, bugs or ideas: email editor@amcharts.com. Chart Maker also runs in your browser at live.amcharts.com, with the same templates.