# How to Make a Radial Bar Chart in Figma (a Bar Chart, Bent)
_August 27, 2026 · 11 min read · by Systergon_
> A radial bar chart is a bar chart bent into a circle, and bending it breaks the property that made bars accurate: an arc on an outer ring is longer than the same percentage on an inner one. That does not make it useless — it makes it a progress chart rather than a comparison chart. The activity-ring pattern that gets it right, designing the KPI tile, and four substitutions by question.
Tags: Figma, Charts, Radial Bar, Dashboards, Plugin
URL: https://systergon.com/blog/figma-charts-radial-bar-chart
---
[Install Figma Charts — it’s free to try →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts) [See the radial gallery →](https://systergon.com/figma-charts/chart-types/radial)

A radial bar chart is a bar chart bent into a circle. Each bar becomes an arc, each category gets its own ring, and the value is read as how far round the arc travels. It is one of the most requested chart shapes in product design and one of the least accurate, for a reason that is easy to state and impossible to fix: **an arc on an outer ring is physically longer than the same percentage on an inner one**.

![A radial bar chart drawn by ApexCharts inside the Figma Charts plugin](https://systergon.com/blog/figma-charts-radial-bar-chart/images/radial-basic.svg)

_Real plugin output: an ApexCharts radial bar captured from the editor. Every chart on this page is the library’s own drawing._

Which does not make it useless — it makes it a _progress_ chart rather than a comparison chart. This page is about that distinction, the one arrangement where radial bars genuinely beat straight ones, and how to design the KPI ring everyone actually wants when they ask for this.

## First — get the plugin

Everything below happens inside **Figma Charts**, a Figma plugin. It runs the real JavaScript charting libraries — Google Charts, Highcharts, D3-based Nivo, ApexCharts and Apache ECharts — inside the plugin window, so the arcs on your canvas are the library’s own geometry.

[Install Figma Charts from the Figma Community →](https://www.figma.com/community/plugin/1345221583582136577/figma-charts)

Press **⌘/** (**Ctrl /** on Windows), type _Figma Charts_, hit Enter, and pick **Radial** from the category filter. Five examples — ApexCharts 4, Nivo 1.

## The unequal-arc problem

In a bar chart every bar starts on the same baseline and runs along the same axis, so two bars of equal length represent equal values. Bend that into rings and the property breaks: an arc sweeping 60% of a large outer circle covers considerably more distance and more ink than an arc sweeping 60% of a small inner one.

Three consequences follow, and they decide every appropriate use of the chart:

- **Rings are not comparable to each other.** Whatever the values, the outer ring looks larger. Readers rank by ink and will get it wrong.
- **The encoding is angle, not length.** What actually varies consistently between rings is the angle swept — and angle is a weaker channel than length, which is why the same data as a bar chart is read more accurately.
- **Order becomes an argument.** Whichever series you place outermost gets the most visual weight, so ring order is a design decision that changes the apparent ranking.

There is a fourth, quieter consequence: **the inner ring has the least room and usually the smallest type**, so whichever metric ends up innermost is the hardest to label. In a three-ring design that is a layout constraint before it is a data decision.

The escape from all three is to stop asking for comparison. When each ring is _its own metric measured against its own maximum_ — a progress ring — nothing is being compared across rings and the distortion never arises.

## Five radial charts, and which are comparisons

![Multiple radial bars drawn by ApexCharts](https://systergon.com/blog/figma-charts-radial-bar-chart/images/radial-multiple.svg)

_**Multiple rings** — the arrangement people picture when they ask for this chart, and the one to be careful with. Three metrics each against their own target is legitimate; three categories being compared with each other is the unequal-arc problem in its purest form._

![A circular gauge drawn by ApexCharts](https://systergon.com/blog/figma-charts-radial-bar-chart/images/radial-circular-gauge.svg)

_**The single progress ring** — one value against 100%, with the number in the middle. This is what a radial bar chart is genuinely good at, and it is the form most product dashboards actually need._

![A semi circle gauge drawn by ApexCharts](https://systergon.com/blog/figma-charts-radial-bar-chart/images/radial-semi-gauge.svg)

_**Semi-circle** — half the sweep, which fits a wide shallow card and reads left to right like a scale. Same chart, better shape for a tile._

Nivo has a fifth, not pictured here: a radial bar with grouped arcs, so a single ring can carry several series at once. It is the most structurally ambitious of the set and, as with everything in Nivo, it exports to React only.

## When to use it, and when to straighten it out

**Use it when** each ring is a separate metric against its own scale (progress towards a goal, capacity used, completion), when the value is a percentage of something bounded, and when the chart is decorative-but-informative furniture in a product — a KPI tile, an onboarding indicator, an activity ring.

Three cases where a straight [bar chart](https://systergon.com/blog/figma-charts-bar-chart) is simply better:

**1. Ranking categories.** “Which region sold most?” needs a common baseline. Radial bars answer it inaccurately and prettily.

**2. More than about four rings.** Past that the inner rings become short arcs with nowhere to put a label, and the centre fills with text.

**3. Values that exceed the maximum.** An arc that wraps past 360° either overlaps itself or gets clipped, and both readings are wrong. If 120% of target is possible, use a bar or a [bullet chart](https://systergon.com/blog/figma-charts-bullet-chart), which handles overshoot naturally.

And the honest fourth: **when the request is really about aesthetics.** That is a legitimate reason — product surfaces have to look like something — but it should be a decision rather than an accident, and it means keeping the number visible so nothing depends on reading the arc.

## The activity-ring pattern, and why it works

The most successful multi-ring design in the world is the Apple Watch activity ring, and it is worth understanding because it sidesteps every objection on this page.

**Each ring has its own goal.** Move, exercise and stand are three different measures against three different targets, so nothing is being compared between rings. The unequal-arc problem simply does not arise, because no comparison is invited.

**Full is the only value that matters.** The design is binary at heart — closed or not closed — and precise reading is never required. That is exactly the level of precision an arc can support.

**Colour identifies, it does not rank.** Three fixed hues, learned once, meaning ring identity rather than magnitude.

**Overshoot is handled deliberately.** Going past the goal wraps into a second lap with a visible overlap, which is a design decision rather than an accident of the renderer.

Copy that structure and radial bars are a good chart. Depart from it — three rings that are three regions’ sales, say — and every distortion returns at once. Highcharts’ _Activity Rings_ example, filed under Gauge, is the ready-made version.

## What to reach for instead, by question

Four substitutions cover most of the cases where someone asks for a radial bar and needs something else.

**“Compare these categories.”** A sorted [bar chart](https://systergon.com/blog/figma-charts-bar-chart). Common baseline, accurate lengths, room for labels — and it handles twenty categories where a radial handles four.

**“Show progress against targets for several metrics.”** A stack of [bullet charts](https://systergon.com/blog/figma-charts-bullet-chart). Same information, a fraction of the space, and they can be scanned in one pass.

**“Show one number prominently.”** A large number with a small progress ring or sparkline beside it. The number carries the fact; the graphic carries the context.

**“Show composition.”** A [donut](https://systergon.com/blog/figma-charts-donut-chart), not a radial bar. The two look similar and mean different things: a donut divides one whole into parts, a radial bar shows separate values each against their own scale. Mixing them up is the most common conceptual error with this chart.

## Building one, step by step

Six screens, start to finish, captured from the plugin.

![The Figma Charts gallery filtered to the Radial category](https://systergon.com/blog/figma-charts-radial-bar-chart/images/step-gallery.webp)

_**1. Filter to Radial.** ApexCharts has four examples and Nivo one. Note that gauges live under their own chip — the two families overlap, and Apex files its circular gauges here._

![The Figma Charts editor with a radial bar chart in the preview](https://systergon.com/blog/figma-charts-radial-bar-chart/images/step-editor.webp)

_**2. The editor.** Live preview above, tabs below. Radial charts are square: set width and height together, because the ring diameter is the whole design._

![The Data tab showing the values behind a radial bar chart](https://systergon.com/blog/figma-charts-radial-bar-chart/images/step-data.webp)

_**3. One row per ring.** A label and a value — usually a percentage. The maximum is configuration rather than data, which is the setting that decides how full every ring looks._

![The Configuration tab showing radial bar option groups](https://systergon.com/blog/figma-charts-radial-bar-chart/images/step-config.webp)

_**4. Configure.** Start angle, ring thickness, track colour and the centre label. The track — the faint full circle behind each arc — is what tells the reader where 100% is, and it should never be switched off._

![The Export tab showing code export formats](https://systergon.com/blog/figma-charts-radial-bar-chart/images/step-export.webp)

_**5. Export.** A working component for React, Vue 3, Angular, Svelte or vanilla JavaScript, at the version the plugin rendered with._

![The + SVG and + PNG insert buttons](https://systergon.com/blog/figma-charts-radial-bar-chart/images/step-insert.webp)

_**6. Insert.** SVG gives you each arc and the centre label as separate layers, which is exactly what a KPI tile component needs._

## The data shape it needs

A label and a value per ring — the ordinary table, no special editor, and it accepts a linked data source like any cartesian chart. What is _not_ in the data is the maximum: the scale each arc is drawn against lives in the configuration, which means a linked value will keep being drawn against whatever ceiling you set.

Two things to decide before building. **What 100% means** — a target, a capacity, a theoretical maximum — because a full ring reads as complete regardless of what you anchored it to. And **what happens above it**: values over the maximum are the most common way this chart breaks, and the fix is either clamping with an explicit marker or choosing a different chart.

The usual coercion caution applies with a specific symptom: an unparseable cell becomes **0**, and a zero-value ring is drawn as an empty track — indistinguishable from a metric that genuinely has not started.

## Library by library

The **Radial** category holds **five examples**: ApexCharts 4, Nivo 1.

- **ApexCharts — 4 examples**, and the most complete set for product work: a basic radial bar, multiple rings, a circular gauge and a semi-circle gauge. Its radialBar type is the standard progress ring in a lot of dashboards, and it is the second library the Inspector works with.
- **Nivo — 1**, with grouped arcs per ring so one ring can carry several series. React-only export.
- **Highcharts — no Radial category**, and no gap: its [solid gauge](https://systergon.com/blog/figma-charts-gauge-chart) covers the single-ring progress case and its _Activity Rings_ example does the concentric-ring one. Both are filed under Gauge.
- **ECharts** — the same story: gauges with `progress` arcs do this job under the Gauge chip.
- **Google Charts — nothing comparable.**

Which makes the practical summary short: **this is a two-library category with a third and fourth option hiding under Gauge**. If you want a progress ring and your team is on Highcharts or ECharts, look there rather than concluding it cannot be done.

As always: **design in whichever library your engineers already use**, because the export then matches production exactly. [Choosing the right chart library](https://systergon.com/blog/figma-charts-choosing-the-right-chart-library) covers the trade-offs.

## Styling it well

**Always draw the track.** The faint complete circle behind each arc is what makes the value readable — it shows where the maximum is. Without it, a 70% arc and a 90% arc look like two arcs of unknown scale.

**Put the number in the middle.** The centre is free space and the reader’s first fixation. A radial chart whose value is only in the arc has thrown away its best asset — and this is the same argument as the hole in a [donut](https://systergon.com/blog/figma-charts-donut-chart).

**Rounded caps for progress, flat caps for measurement.** A rounded end reads as “in progress”; a flat end reads as a precise stop. Pick to match the meaning, because readers do notice.

**Start at twelve o’clock, run clockwise.** It is the convention every progress indicator uses and the one readers expect. Deviating costs comprehension for no gain.

**Thickness over count.** Two thick rings read better than five thin ones. If you have five metrics, that is a stack of [bullet charts](https://systergon.com/blog/figma-charts-bullet-chart), not a five-ring radial.

For type and colour, bind them to your design system rather than picking by hand — covered in [Your chart, your design system](https://systergon.com/blog/figma-charts-design-system-colors-typography-tokens).

## Reading it well — and the ways it misleads

**Outer rings dominate.** The core distortion, and worth repeating because no styling removes it: identical values on different rings are drawn at different lengths. Place the metric you want read first on the outside deliberately, and never present rings as a ranking.

**The maximum is doing the talking.** As with a gauge, where the scale ends decides how full everything looks. A ring drawn against “best month ever” and the same value drawn against “plan” are different charts of the same number.

**A full ring reads as done.** If your maximum is a stretch target rather than completion, a full circle still says finished. Label the maximum explicitly, or clamp and mark overshoot.

**Angle judgements are worse than they feel.** Readers reliably distinguish a quarter, a half and three quarters, and very little in between. Anything requiring more precision than that needs the number, which is why the centre label is not optional.

**Colour per ring implies category.** If the rings are one metric over three periods, three hues suggest three different things. Use one hue at different lightnesses when the rings are the same measure.

## Designing the KPI tile around it

Radial bars almost always end up inside a card, and the card is the real design problem. Four decisions settle it.

**Decide the hierarchy first.** Number, label, ring — in that order of prominence for a metric people read; ring, number, label if the card is a status indicator people glance at. Both are valid; picking neither produces a tile where the ring and the number compete.

**Size the ring to the card, not the data.** A ring that fills its tile leaves nowhere for the label and crops on small screens. Roughly two thirds of the card’s shortest dimension is a safe starting point.

**Keep the stroke weight constant across tiles.** A dashboard of radial tiles with different ring thicknesses reads as different kinds of thing. Fix the weight in the component and let only the value change.

**Design the empty and error states.** Zero, no data and “still loading” all render as an empty track by default and mean three different things. A dashed track for no data and a skeleton for loading costs little and prevents the worst misreading this chart produces.

## Accessibility

**The centre number is the accessible version.** Insert as SVG and it comes through as real text, so the value is available without reading an arc at all.

**Track and arc need real contrast.** A pale track against a pale arc is the commonest failure in this chart, and it removes the only reference point the reader has.

**Do not rely on ring position to identify the metric.** Label each ring directly, or provide a key in reading order — outermost first, which is not the order a legend defaults to.

**Give it a text equivalent.** The Export tab’s **Copy Alt Text**, **Copy Data Table** and **Set Node Desc** produce a description, a table of the numbers and a description written onto the Figma node. Include the maximum each ring is drawn against — without it, a percentage is not interpretable.

## Common questions

### Is a radial bar chart just a bent bar chart?

Yes, and that is the problem: bending it breaks the equal-baseline property. An arc on an outer ring is longer than the same percentage on an inner one, so rings cannot be compared with each other. It works when each ring is its own metric against its own maximum.

### Radial bar or gauge?

They overlap heavily — ApexCharts files its circular and semi-circle gauges under Radial. The distinction worth keeping: a gauge is about a threshold (are we in the green?), a radial bar is about progress towards a maximum (how far along are we?).

### How many rings can one chart carry?

Three or four. Beyond that the inner rings are short arcs with no room for labels, and the centre fills with text. Five metrics belong in a stack of bullet charts, which compare accurately and take less space.

### Which libraries can draw one?

ApexCharts (4 examples) and Nivo (1) have the Radial category. Highcharts and ECharts do the same job under **Gauge** — Highcharts’ solid gauge and Activity Rings, ECharts’ gauges with progress arcs — so “no radial chip” does not mean no progress ring.

### What happens if a value exceeds 100%?

Nothing good: the arc either wraps and overlaps itself or is clipped, and both misread. Clamp at the maximum with an explicit overshoot marker, or use a bar or bullet chart, which handle values past the target naturally.

### Should the ring have rounded ends?

Rounded reads as “in progress”, flat reads as a precise measurement. It is a small signal and readers pick it up, so match it to whether the value is a snapshot of an ongoing thing or a final figure.

### Can it use live data?

Yes — it takes an ordinary table of labels and values and accepts a linked source. Remember that the maximum lives in the configuration, so a live value keeps being drawn against whatever ceiling you set at design time.

### Radial bar or donut chart?

They look similar and mean different things. A [donut](https://systergon.com/blog/figma-charts-donut-chart) divides one whole into parts that sum to it; a radial bar shows separate values, each measured against its own maximum. Using a donut for progress means labelling the remainder as a category, and using a radial bar for composition means the arcs no longer add up to anything.

### Does the chart stay editable in Figma?

Insert as **SVG** and each arc, track and label is a separate layer — ideal for building a KPI tile component where the ring is one part of a card. Insert as **PNG** for a flat image at twice the pixel density.

## Where to start

Open the plugin, filter to Radial, and build the single-ring version first with the number in the middle. If the design still works when you cover the arc with your thumb, the chart is honest — the ring is carrying the impression and the number is carrying the fact. If covering the arc loses the meaning, you are asking readers to measure an angle, and a bar chart will do it better.

[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)