# 588 Charts, Five Libraries — and How to Choose One _August 17, 2026 · 13 min read · by Systergon_ > Every comparison of JavaScript charting libraries was written for engineers — bundle size, tree-shaking, render performance on ten thousand points. None of it is your problem. Figma Charts ships five real libraries: Google Charts, Highcharts, D3-based Nivo, ApexCharts and Apache ECharts, 588 ready-made examples across 45 chart types. What each is genuinely best at, the twenty-one chart types you can only get from one of them, which licence will stop you shipping, why Nivo exports to React and nothing else — and the one question that settles the choice faster than any feature list. Tags: Figma, Charts, Data Visualization, Handoff, Plugin URL: https://systergon.com/blog/figma-charts-choosing-the-right-chart-library --- [Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [Browse all 45 chart types →](https://systergon.com/figma-charts/chart-types) Every comparison of JavaScript charting libraries you have ever read was written for engineers. It weighs bundle size, tree-shaking, TypeScript definitions and render performance on ten thousand points — all real concerns, none of them yours. You want to know which one draws the chart you have in your head, whether it will still look like your product, and whether picking it will make somebody’s life difficult in three months. Figma Charts ships five of them: **Google Charts**, **Highcharts**, **D3-based Nivo**, **ApexCharts** and **Apache ECharts**. Between them the gallery holds **588 ready-made examples across 45 chart types**. This is how to pick one, on the grounds that actually matter to a designer — and the one question that settles it faster than any feature list. ![The Figma Charts library tabs along the top of the home screen: Google, HighCharts, D3 - Nivo with a PRO badge, ApexCharts with a PRO badge, ECharts with PRO and Beta badges, and dimmed Recharts and Plotly tabs](https://systergon.com/figma-charts-help/library-tabs-light.webp) ## First — get the plugin Everything below happens inside **Figma Charts**, a Figma plugin. It does not draw charts of its own. It runs the five real charting libraries — the same npm packages your engineers install — inside the plugin window, and puts their output on your canvas. [Install Figma Charts from the Figma Community →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) Once it is installed there are two ways to open it, and the first is faster: - **Quick actions** — press **⌘/** (**Ctrl /** on Windows), type _Figma Charts_, hit Enter. - **Right-click the canvas** → **Plugins** → **Figma Charts**. The five library tabs run along the top of the home screen. Pick a tab, pick a category chip underneath it, and the gallery fills with live charts. There is nothing to configure before you can start looking. ## Why this is a build decision, not a style one Most chart plugins draw an approximation. They have their own renderer, tuned to look good in a Figma frame, and it has no relationship to whatever your engineers use in production. That is fine right up until the moment the built chart appears in review and disagrees with the mockup — different tick intervals, a legend that wrapped, three axis labels that got dropped because they collided. Figma Charts has no renderer of its own. The chart on your canvas is the library’s own output, so the layout is not a drawing of a decision, it _is_ the decision: the axis range, the tick spacing, which labels survive, how the legend wraps, what a log scale does to your smallest value. All of it settled by the library’s layout engine, at design time, in front of you. Which is why the library is not a skin. When you hand over, the **Export** tab writes the chart out as that library’s own configuration plus a component for React, Vue 3, Angular, Svelte or plain JavaScript — listing the library’s real npm packages at the same major version the plugin rendered with. Your developer installs the library and pastes the config. There is no Figma Charts SDK in the output and no runtime to keep in sync. So the library you choose in the gallery is the library your product ships. Choose accordingly. ## The question that settles it **Ask your engineers what they already use.** If the answer is one of these five, that is your library, and you can stop reading the comparison. It beats every other criterion, and it is not close. Matching an existing stack means the handoff costs a copy and a paste; there is no new dependency to justify, no second charting library in the bundle, no licence to buy, and nobody has to learn a second configuration vocabulary. A chart type you like slightly better is not worth any of that. If nobody has an answer — a new product, a prototype, a team that has never drawn a chart in anger — then the rest of this post is for you. ## What is actually in the box Here is the shape of the gallery, counted from the running plugin rather than estimated: - **ECharts — 273 examples across 21 chart types.** Far and away the largest set. - **Highcharts — 113 examples across 26 chart types.** The widest spread, tied with Nivo. - **Google Charts — 82 examples across 15 chart types.** - **D3 · Nivo — 72 examples across 26 chart types.** Broad but shallow — usually one example per type. - **ApexCharts — 48 examples across 13 chart types.** The smallest, and the most conventional. Two numbers there are worth separating. **Examples** are how many ready-made starting points you can open and edit. **Chart types** are how many distinct shapes the library can draw at all. ECharts wins the first by a mile — it has 65 line examples on its own — but Highcharts and Nivo tie for the second, which is the number that decides whether the chart you need exists. ![The Figma Charts gallery grid showing live chart previews in a four-column layout, each tile rendered with the current colour palette](https://systergon.com/figma-charts-help/chart-grid-light.webp) Every tile in that grid is a live chart drawn with your current colour palette, not a screenshot of one. Two consequences: a large category takes a moment to fill in, and the tiles look barer than the real thing, because the gallery renders everything in **Essential** mode — marks only, no title, legend, axes or gridlines. Open one and it arrives with the usual furniture. The palette you set in the home toolbar follows you across all five tabs, which makes flicking between them an honest comparison rather than a comparison of five default themes. If you want that palette to be your own brand colours before you start comparing, [Your chart, your design system](https://systergon.com/blog/figma-charts-design-system-colors-typography-tokens) covers getting them out of Figma variables. ## ECharts — when you need range **273 examples, 21 chart types. Apache-2.0. Version 6.** Apache ECharts is the biggest set in the plugin by a distance: 273 of the 588 examples are ECharts, more than twice the next largest. If a chart type exists nowhere else, this is where to look. It is the only library here offering **Graph**, **Theme River**, **Pictorial Bar**, **Effect Scatter** and **Custom**. It also has the deepest benches on the ordinary types — 65 line examples, 46 bar, 34 scatter — so “a stacked area chart with a threshold band and a brush selector” is likely to exist already rather than needing to be built. Its tab carries a **Beta** chip. That is a maturity note about data editing, not a warning about rendering: ECharts charts render, configure, insert and export like any other. What is rougher is getting your own numbers in. Many ECharts types open a specialist editor instead of the plain table — nesting for tree, treemap and sunburst; separate node and link tables for Sankey, chord and graph; a grid for heatmap; raw JSON for box plot, parallel, theme river and custom. ECharts scatter charts are edited as JSON too, because each point is an x/y pair a two-column table cannot hold correctly. There is a second limit worth knowing before you commit: **a live data source cannot be bound to every ECharts type**. Sankey, chord, tree, treemap, sunburst, graph, box plot, calendar, parallel, theme river and custom charts have to be edited inside the plugin rather than fed from a connected sheet or API. If your chart needs to refresh from a Google Sheet, check that its type is bindable before you build around it — [which types each library refuses](https://systergon.com/blog/figma-charts-live-data-from-google-sheets-and-apis#when-it-breaks) is set out in the live-data post. ECharts is Apache-2.0 licensed, which is about as unencumbered as an open-source licence gets. It is also the only one of the five with no commercial tier to think about at all. ## Highcharts — when the audience is the business **113 examples, 26 chart types. Commercial licence required. Version 12.** Highcharts is the reporting library. It has the widest spread of types in the plugin (tied with Nivo at 26) and it is the only place you will find **Waterfall**, **Pareto**, **Org Chart**, **Venn** and **Word Cloud** — which is to say, the charts that turn up in board packs, quarterly reviews and process documentation. It is also the most finished-looking of the five out of the box. Where ECharts gives you range and Nivo gives you shapes, Highcharts gives you a chart that already looks like it belongs in a report: sensible defaults for spacing, credible axis formatting, a legend that behaves. Two practical advantages inside the plugin. First, Highcharts is one of only two libraries the [Inspector](#inspector) works with, so you can click a part of the chart and get just its options. Second, along with Google Charts it has a free tier in the plugin — the first chart in every category is unlocked — so you can evaluate it properly before paying for anything. The catch is the licence, and it is a real one. See [Licensing, said plainly](#licensing) below. ## D3 · Nivo — when you want the D3 shapes **72 examples, 26 chart types. MIT. Version 0.99.** Nivo is a React charting library built on D3. In the plugin its tab reads **D3 - Nivo**, and its value is the shapes: it is the only library offering **Waffle**, **Bump**, **Swarm Plot**, **Voronoi**, **Marimekko**, **Icicle** and **Circle Packing**. That is the D3 vocabulary — the charts people mean when they say a chart looks like it came from the _New York Times_ rather than from a dashboard. It ties Highcharts for breadth at 26 chart types but has only 72 examples to cover them, which usually means one example per type. You get the shape, not a shelf of variants; expect to do more configuring. Nivo has a hard constraint at handoff that none of the others do: **it exports to React only**. That is not a gap in the plugin, it is what Nivo is — a React component library, with no Vue, Angular or Svelte equivalent to generate. If your front end is React, this costs you nothing. If it is not, Nivo is a beautiful choice you cannot ship, and you should pick the shape from another library instead. It is MIT licensed, and there is nothing to buy. ## Google Charts — when plain and familiar is the point **82 examples, 15 chart types. Free, loaded from Google. Version 5 wrapper.** Google Charts is the plainest of the five, and that is a legitimate reason to choose it. It looks like every chart anyone has ever seen in a spreadsheet, which means nobody in the room has to learn how to read it. For internal tooling, admin screens and documentation, plain and instantly legible often beats distinctive. It has the narrowest range here — 15 chart types — but it owns three outright: **Combo**, **Word Tree** and **Geo** are Google-only in the plugin. If you need a bar-and-line combo chart or a geographic map, this is the tab. Like Highcharts, Google gives you the first chart in each category free, so its 15 categories are 15 free starting points. The thing to know before committing: Google Charts is not a package you vendor. The library is loaded at runtime from Google’s own servers — the exported vanilla code points at `https://www.gstatic.com/charts/loader.js` — so shipping it means your product makes a request to Google on every page that draws a chart. For a lot of teams that is a non-issue. For anything air-gapped, privacy-sensitive, or bound by a policy about third-party requests, it is a blocker, and it is much cheaper to discover now than at security review. ## ApexCharts — the everyday set **48 examples, 13 chart types. MIT. Version 3.** ApexCharts is the smallest library in the plugin and the least exotic: bar, line, area, pie, donut, scatter, radar, radial, heatmap, treemap, candlestick, timeline, box plot. No word trees, no Voronoi diagrams, nothing you would have to explain. What it does have is a clean, modern default look and the second slot on the [Inspector](#inspector), which is a bigger deal day to day than another twenty chart types you will never draw. It is the only library that gives **Donut** its own category rather than folding it into Pie — a small thing that tells you roughly where its priorities are: the charts people actually build, done properly. It is MIT licensed, and it is a genuinely good default for a product dashboard when nobody has a strong opinion and nothing exotic is required. ## The charts you can only get from one library Most types exist in several libraries. Twenty-one do not, and if your chart is on this list, the choice has been made for you: - **Google Charts only** — [Combo](https://systergon.com/figma-charts/chart-types/combo), [Geo](https://systergon.com/figma-charts/chart-types/geo), [Word Tree](https://systergon.com/figma-charts/chart-types/wordtree). - **Highcharts only** — [Waterfall](https://systergon.com/figma-charts/chart-types/waterfall), [Pareto](https://systergon.com/figma-charts/chart-types/pareto), [Org Chart](https://systergon.com/figma-charts/chart-types/organization), [Venn](https://systergon.com/figma-charts/chart-types/venn), [Word Cloud](https://systergon.com/figma-charts/chart-types/wordcloud). - **Nivo only** — [Waffle](https://systergon.com/figma-charts/chart-types/waffle), [Bump](https://systergon.com/figma-charts/chart-types/bump), [Swarm Plot](https://systergon.com/figma-charts/chart-types/swarmplot), [Voronoi](https://systergon.com/figma-charts/chart-types/voronoi), [Marimekko](https://systergon.com/figma-charts/chart-types/marimekko), [Icicle](https://systergon.com/figma-charts/chart-types/icicle), [Circle Packing](https://systergon.com/figma-charts/chart-types/circlepacking). - **ApexCharts only** — [Donut](https://systergon.com/figma-charts/chart-types/donut) as a category in its own right. - **ECharts only** — [Graph](https://systergon.com/figma-charts/chart-types/graph), [Theme River](https://systergon.com/figma-charts/chart-types/themeriver), [Pictorial Bar](https://systergon.com/figma-charts/chart-types/pictorialbar), [Effect Scatter](https://systergon.com/figma-charts/chart-types/effectscatter), [Custom](https://systergon.com/figma-charts/chart-types/custom). A missing category chip means that library has nothing in that family — not that the plugin cannot draw it. If the chip you want is not under the tab you are on, try another tab before concluding it does not exist. ![The category filter chips below the library tabs — Bar, Line, Area, Pie, Donut, Scatter and more — with the current one selected](https://systergon.com/figma-charts-help/category-filters-light.webp) The chips that do not fit collapse into a **More** menu at the right-hand end, which is where the long tail lives. Widening or maximising the plugin window pushes more of them back onto the row. Note that switching library resets the filter to **Bar**, deliberately — the category you were on may not exist in the tab you just moved to. ## Licensing, said plainly Four of the five are free for commercial use. One is not, and it is the one designers reach for most. - **Apache ECharts — Apache-2.0.** Free for commercial use. - **ApexCharts — MIT.** Free for commercial use. - **Nivo — MIT.** Free for commercial use. - **Google Charts — free of charge**, but loaded from Google’s servers at runtime rather than installed. The React wrapper is MIT; the library itself comes with Google’s terms attached. - **Highcharts — a commercial product.** Free for personal and non-commercial projects; a paid licence is required to ship it in a commercial product. None of that makes Highcharts the wrong choice — plenty of teams pay for it happily, and its reporting charts earn it. It makes it the wrong choice to discover _after_ the design is approved. If you are designing something commercial and nobody has bought a Highcharts licence, raise it before you build twelve screens around Waterfall charts. Check the current terms with whoever owns your dependencies; the licences named above are the ones attached to the versions Figma Charts renders with, not legal advice. ## Clicking the thing you want to change Chart configuration is a deep, badly-named tree. Every library has one, and finding the option that controls the gap between grouped bars means already knowing what that library calls it. The **Inspector** inverts that. Turn it on in the editor header, click a part of the chart in the preview — a bar, the legend, an axis, the title — and the Configuration tab filters down to just the options affecting what you clicked, with a breadcrumb telling you what is selected. Hold **⌘** (**Ctrl**) while clicking to select several elements and edit them together. ![The Figma Charts editor with the Inspector active: an element selected in the chart preview and the Configuration tab filtered to only the options for that element, with a breadcrumb above them](https://systergon.com/figma-charts-help/inspector-light.webp) **The Inspector works with Highcharts and ApexCharts only.** On Google Charts, Nivo and ECharts you use the search box in the Configuration tab instead, which is fine but assumes you know the word to search for. If clicking beats searching for you — and for most designers it does — that is a genuine reason to start with one of those two. ## What each choice costs at handoff The Export tab writes component code for **React**, **Vue 3**, **Angular**, **Svelte** and **vanilla JavaScript**. Coverage is not uniform, and this is the one place a library choice can genuinely block a team: - **Highcharts, ApexCharts and ECharts** export to all five. - **Google Charts covers four** — React, Vanilla, Angular and Svelte, but not Vue 3. - **Nivo exports to React only**, because Nivo is a React library. The picker only shows the frameworks that actually work for the library you are in, so this is not something you can get wrong by accident — but it is something you can find out too late, after a fortnight of designing in Nivo for a Vue codebase. The generated code lists the library’s own packages to install — `highcharts`, `apexcharts`, `echarts`, `@nivo/*`, `react-google-charts` — plus the appropriate framework wrapper, at the same major version the plugin rendered with. That version match is the whole point and it is deliberately load-bearing: a chart rendered by ECharts 6 and rebuilt against ECharts 5 is not the same chart. ![The Figma Charts Export tab with Code selected among the eight export formats. Below it a Framework row offering React, Vanilla, Angular and Svelte — four options, because this is a Google Charts chart — then a Dependencies line reading react-google-charts ^5.2.1, and a preview of the generated component](https://systergon.com/blog/figma-charts-choosing-the-right-chart-library/images/export-code-crop.webp) That screenshot is a Google Charts chart, which is why its Framework row has four buttons rather than five: the picker offers only what the library supports. For vanilla JavaScript the export points at a CDN build instead — `highcharts@12`, `apexcharts@3`, `echarts@6`, and Google’s loader. There is no vanilla path for Nivo, for the same reason there is no Angular one. Nothing in the output depends on Figma Charts. There is no SDK, no runtime, and nothing that has to be upgraded in step with the plugin — which also means the code keeps working after your subscription lapses. [From Figma to code](https://systergon.com/blog/figma-charts-export-react-vue-svelte-angular-design-tokens) goes through all eight export formats and which one your engineers actually want. ## If you change your mind later There is no one-click library switcher, and it is worth knowing that before you invest a day in a chart. Moving a chart between libraries is a manual carry: 1. Open the chart, go to the **Data** tab, and press **Export CSV** — or select the cells and press **⌘C**. 2. Go **Back**, switch to the library tab you want, and open the closest equivalent chart. 3. Click the first cell and press **⌘V**, or bring the CSV in through the **Import** tab. 4. Work through the **Configuration** tab again. Your colour palette and chart style come across, because those are set for the whole plugin rather than per chart. Per-library options — axis settings, series settings, anything named after that library’s own configuration — do not. Pasting also fills cells that already exist rather than creating new ones, so add rows first if the destination chart starts smaller. This only works cleanly _within_ a data shape. A Sankey, a treemap and a heatmap each want a different structure, so moving between those means re-entering the data rather than pasting it. Inserting the new chart does not replace the old frame on your canvas either — you get a second one, and delete the first yourself. ## What you can try without paying The free tier is positional and it is not the same across the five: - **Google Charts and Highcharts** — the first chart in every category is free. Switch category and you get another one. That is 15 free charts under Google and 26 under Highcharts, and a free chart is a complete chart: you can edit its data, change every option, restyle it and insert it exactly like a paid one. - **Nivo, ApexCharts and ECharts** — PRO throughout. Their tabs carry the badge so you can see it before clicking in. ![A locked gallery tile with a PRO badge in its corner under a faint overlay](https://systergon.com/figma-charts-help/locked-chart-light.webp) Figma Charts Pro is **$38 a year**. The practical consequence for evaluation: you can test the two libraries with a free tier properly and at length, and you have to take the other three partly on trust — though you can still see every one of their charts rendered live in the gallery before you decide. Two tabs, **Recharts** and **Plotly**, appear dimmed. They are not built yet; selecting one shows a Coming Soon panel rather than charts. ## A short procedure In the order the questions actually resolve things: 1. **Ask your engineers.** If they already use one of the five, use that one. Stop here. 2. **Check whether your chart type is exclusive.** If you need a Waterfall, a Waffle, a Geo map or a Theme River, the [exclusives list](#exclusives) has already decided for you. 3. **Check the licence and the framework.** Commercial product with no Highcharts licence: not Highcharts. Not a React front end: not Nivo. Policy against third-party runtime requests: not Google. 4. **Then pick on character.** ECharts for range, Highcharts for reporting polish, Nivo for D3 shapes, Google for plain and familiar, ApexCharts for a clean everyday dashboard. 5. **If you want to click rather than search**, prefer Highcharts or ApexCharts, because the Inspector only works there. And if you are still undecided, build the same chart twice. Set your palette once in the home toolbar, build it under one tab, then switch tabs and build it again — the palette follows you, so you are comparing the libraries rather than their default themes. It takes ten minutes and it settles the argument better than any comparison table, including this one. ## Every chart type, by name All 45 types in the gallery, with which libraries offer each, live examples and how to build one: - **Comparison** — [Bar](https://systergon.com/figma-charts/chart-types/bar), [Histogram](https://systergon.com/figma-charts/chart-types/histogram), [Bullet](https://systergon.com/figma-charts/chart-types/bullet), [Pareto](https://systergon.com/figma-charts/chart-types/pareto), [Waterfall](https://systergon.com/figma-charts/chart-types/waterfall), [Marimekko](https://systergon.com/figma-charts/chart-types/marimekko), [Pictorial Bar](https://systergon.com/figma-charts/chart-types/pictorialbar). - **Trend** — [Line](https://systergon.com/figma-charts/chart-types/line), [Area](https://systergon.com/figma-charts/chart-types/area), [Stream](https://systergon.com/figma-charts/chart-types/stream), [Bump](https://systergon.com/figma-charts/chart-types/bump), [Theme River](https://systergon.com/figma-charts/chart-types/themeriver), [Combo](https://systergon.com/figma-charts/chart-types/combo), [Timeline](https://systergon.com/figma-charts/chart-types/timeline). - **Composition** — [Pie](https://systergon.com/figma-charts/chart-types/pie), [Donut](https://systergon.com/figma-charts/chart-types/donut), [Treemap](https://systergon.com/figma-charts/chart-types/treemap), [Sunburst](https://systergon.com/figma-charts/chart-types/sunburst), [Icicle](https://systergon.com/figma-charts/chart-types/icicle), [Waffle](https://systergon.com/figma-charts/chart-types/waffle), [Funnel](https://systergon.com/figma-charts/chart-types/funnel), [Circle Packing](https://systergon.com/figma-charts/chart-types/circlepacking). - **Distribution** — [Scatter](https://systergon.com/figma-charts/chart-types/scatter), [Box Plot](https://systergon.com/figma-charts/chart-types/boxplot), [Heatmap](https://systergon.com/figma-charts/chart-types/heatmap), [Swarm Plot](https://systergon.com/figma-charts/chart-types/swarmplot), [Effect Scatter](https://systergon.com/figma-charts/chart-types/effectscatter), [Parallel](https://systergon.com/figma-charts/chart-types/parallel), [Voronoi](https://systergon.com/figma-charts/chart-types/voronoi). - **Relationship** — [Sankey](https://systergon.com/figma-charts/chart-types/sankey), [Chord](https://systergon.com/figma-charts/chart-types/chord), [Network](https://systergon.com/figma-charts/chart-types/network), [Graph](https://systergon.com/figma-charts/chart-types/graph), [Tree](https://systergon.com/figma-charts/chart-types/tree), [Org Chart](https://systergon.com/figma-charts/chart-types/organization), [Word Tree](https://systergon.com/figma-charts/chart-types/wordtree), [Venn](https://systergon.com/figma-charts/chart-types/venn). - **Spatial** — [Geo](https://systergon.com/figma-charts/chart-types/geo), [Calendar](https://systergon.com/figma-charts/chart-types/calendar). - **KPI** — [Gauge](https://systergon.com/figma-charts/chart-types/gauge), [Radial](https://systergon.com/figma-charts/chart-types/radial), [Radar](https://systergon.com/figma-charts/chart-types/radar). - **Specialist** — [Candlestick](https://systergon.com/figma-charts/chart-types/candlestick), [Word Cloud](https://systergon.com/figma-charts/chart-types/wordcloud), [Custom](https://systergon.com/figma-charts/chart-types/custom). If you are not sure which of those you want, work from the shape of your own data instead of the name of the chart — [Which chart type fits my data?](https://systergon.com/figma-charts/help/chart-type-guide) walks through the handful of shapes that exist and what each one is for. ## Where to start Install the plugin, open it with **⌘/**, and click through the five tabs with the same category chip selected. Ten minutes of that tells you more about which library suits your product than any amount of reading — because every tile is the real library drawing a real chart, with your palette on it. Then pick the one your engineers already use. [Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [Read the help centre →](https://systergon.com/figma-charts/help)