# 45 Chart Types for Figma — Real Highcharts, ECharts & Nivo

> Every chart type the Figma Charts plugin can draw, with what it is good at, what it is bad at, the data shape it needs and which of the five real chart libraries offer it — bar, line, pie, treemap, Sankey, heatmap, candlestick, gauge, radar and 36 more. Design with the library your engineers ship, then export the same chart as code.

Every chart type is drawn by the real JavaScript charting libraries running inside the plugin — Highcharts, ECharts, ApexCharts, D3-based Nivo and Google Charts — not by lookalikes. Whichever you design in is the one your engineers install, and the Export tab hands them that library's own config plus React, Vue, Angular or Svelte code.

## Comparison

Which is bigger, and by how much.

- [Bar chart](https://systergon.com/figma-charts/chart-types/bar) — The default for comparing values across categories
- [Histogram chart](https://systergon.com/figma-charts/chart-types/histogram) — How often values fall into each range
- [Bullet chart](https://systergon.com/figma-charts/chart-types/bullet) — One measure against its target, in one line
- [Pareto chart](https://systergon.com/figma-charts/chart-types/pareto) — Sorted bars plus a running cumulative line
- [Waterfall chart](https://systergon.com/figma-charts/chart-types/waterfall) — How a starting number becomes an ending number
- [Marimekko chart](https://systergon.com/figma-charts/chart-types/marimekko) — Two dimensions at once: share within, share across
- [Pictorial Bar chart](https://systergon.com/figma-charts/chart-types/pictorialbar) — Bars drawn as repeated symbols

## Trend over time

What is happening, and in which direction.

- [Line chart](https://systergon.com/figma-charts/chart-types/line) — The default for anything measured over time
- [Area chart](https://systergon.com/figma-charts/chart-types/area) — A line chart that also shows volume
- [Stream chart](https://systergon.com/figma-charts/chart-types/stream) — A stacked area with no fixed baseline
- [Bump chart](https://systergon.com/figma-charts/chart-types/bump) — How rankings change over time
- [Theme River chart](https://systergon.com/figma-charts/chart-types/themeriver) — ECharts’ take on the streamgraph
- [Combo chart](https://systergon.com/figma-charts/chart-types/combo) — Bars and a line on the same axes
- [Timeline chart](https://systergon.com/figma-charts/chart-types/timeline) — Bars that span from a start to an end

## Part of a whole

What something is made of.

- [Pie chart](https://systergon.com/figma-charts/chart-types/pie) — Share of a total, for a handful of slices
- [Donut chart](https://systergon.com/figma-charts/chart-types/donut) — A pie with the middle freed up for a total
- [Treemap chart](https://systergon.com/figma-charts/chart-types/treemap) — Nested rectangles sized by value
- [Sunburst chart](https://systergon.com/figma-charts/chart-types/sunburst) — A hierarchy as concentric rings
- [Icicle chart](https://systergon.com/figma-charts/chart-types/icicle) — A hierarchy as stacked horizontal bands
- [Waffle chart](https://systergon.com/figma-charts/chart-types/waffle) — A grid of squares, one per unit
- [Funnel chart](https://systergon.com/figma-charts/chart-types/funnel) — Drop-off through an ordered sequence of stages
- [Circle Packing chart](https://systergon.com/figma-charts/chart-types/circlepacking) — Nested circles sized by value

## Distribution

How values spread, cluster and correlate.

- [Scatter chart](https://systergon.com/figma-charts/chart-types/scatter) — Two measures plotted against each other
- [Box Plot chart](https://systergon.com/figma-charts/chart-types/boxplot) — Median, spread and outliers, per group
- [Heatmap chart](https://systergon.com/figma-charts/chart-types/heatmap) — A matrix where colour carries the value
- [Swarm Plot chart](https://systergon.com/figma-charts/chart-types/swarmplot) — Every observation as a dot, nudged apart
- [Effect Scatter chart](https://systergon.com/figma-charts/chart-types/effectscatter) — A scatter plot with animated ripples
- [Parallel chart](https://systergon.com/figma-charts/chart-types/parallel) — Many variables at once, one line per record
- [Voronoi chart](https://systergon.com/figma-charts/chart-types/voronoi) — The region closest to each point

## Flow & hierarchy

What connects to what, and what contains what.

- [Sankey chart](https://systergon.com/figma-charts/chart-types/sankey) — Flows between stages, sized by volume
- [Chord chart](https://systergon.com/figma-charts/chart-types/chord) — Flows between every pair, arranged in a circle
- [Network chart](https://systergon.com/figma-charts/chart-types/network) — Nodes and the links between them
- [Graph chart](https://systergon.com/figma-charts/chart-types/graph) — ECharts’ force-directed graph
- [Tree chart](https://systergon.com/figma-charts/chart-types/tree) — A hierarchy drawn as branches
- [Org Chart chart](https://systergon.com/figma-charts/chart-types/organization) — Reporting lines, drawn as a tree of cards
- [Word Tree chart](https://systergon.com/figma-charts/chart-types/wordtree) — How a phrase branches through a body of text
- [Venn chart](https://systergon.com/figma-charts/chart-types/venn) — Overlap between two or three sets

## Place & date

Values pinned to a map or a calendar.

- [Geo chart](https://systergon.com/figma-charts/chart-types/geo) — Values placed on a map
- [Calendar chart](https://systergon.com/figma-charts/chart-types/calendar) — A year of daily values as a grid

## Single measure

One number against a target, or a profile across axes.

- [Gauge chart](https://systergon.com/figma-charts/chart-types/gauge) — One value against a scale, as a dial
- [Radial chart](https://systergon.com/figma-charts/chart-types/radial) — Progress drawn as an arc
- [Radar chart](https://systergon.com/figma-charts/chart-types/radar) — A profile across several axes at once

## Specialist

Types built for one job and very good at it.

- [Candlestick chart](https://systergon.com/figma-charts/chart-types/candlestick) — Open, high, low and close in one mark
- [Word Cloud chart](https://systergon.com/figma-charts/chart-types/wordcloud) — Terms sized by frequency
- [Custom chart](https://systergon.com/figma-charts/chart-types/custom) — ECharts’ escape hatch for shapes nothing else covers

Page: https://systergon.com/figma-charts/chart-types