Donut Chart Generator

Paste your data, choose a color scheme and mode, set the ring thickness and toggle the legend — then export a clean SVG. Everything runs in your browser.

What is the Donut Chart Generator?

The gui.farm Donut Chart Generator is a free, browser-based tool for turning a small set of numbers into a clean donut chart — each segment sized to its share of the whole, with the total in the center of the ring. Paste your labels and values, pick a color scheme and a light or dark mode, and export a crisp SVG.

There's no account, no API key and no billing. The chart is drawn as a self-contained SVG in your browser, so it stays sharp at any size and drops straight into a .gui interface file.

Browse all free tools →

How to make a donut chart

  1. Paste your data. One label value pair per line, like Chrome 63. Each slice is a share of the total.
  2. Style it. Choose a categorical palette or monochrome tints of one color, and a light or dark mode.
  3. Tune it. Set the ring thickness, add a small gap, choose what shows on each slice, and toggle the legend.
  4. Export SVG. Download the chart or copy its SVG markup to paste anywhere.

Frequently asked

Is the Donut Chart Generator really free?
Yes. It's free to use with no account, no API key and no watermark.
What format does it export?
A clean, self-contained SVG — sharp at any size and easy to drop into slides, docs, websites or .gui interface files.
How are the slice colors chosen?
Pick Palette for a set of distinct hues, or Mono for tints of a single base color. Each slice is a share of the total.
How do I enter my data?
Type one "label value" pair per line, e.g. "Chrome 63". The chart redraws live as you edit.

Good for

  • Dashboard and analytics UI mockups
  • Shares of a whole — market, budget, traffic sources
  • Slides, reports and case studies
  • Website and app interface designs
  • .gui interface files for humans and AI agents
For AI agents

Generate a donut chart from a single URL

Describe the chart with readable params — data, scheme, thickness, legend — and the endpoint returns an SVG from that intent. No key, no SDK, no client library: it is one GET. The browser editor and agent-authored URLs share the same renderer, so what you see below is exactly what ships. The total prints in the ring’s center.

GET https://gui.farm/tools/charts/donut-chart.svg?data=Chrome:63,Safari:20,Edge:5,Other:12

Data is label:value pairs (label optional — data=63,20,5 works, with an optional labels= list). Each slice is a share of the total; only positive values are drawn. thickness sets the hole size. Colors come from a categorical scheme, monochrome tints of a base color, or an explicit colors list. Open the same URL without .svg to edit the chart in the browser.

Live examples

Each preview is rendered by the endpoint from the URL beneath it.

  • Browser share
    Browser share https://gui.farm/tools/charts/donut-chart.svg?data=Chrome:63,Safari:20,Edge:5,Other:12
  • Thin ring, mono teal on dark
    Thin ring, mono teal on dark https://gui.farm/tools/charts/donut-chart.svg?data=A:40,B:25,C:20,D:15&scheme=mono&color=teal&thickness=74&surface=dark
  • Names on slices, small gap
    Names on slices, small gap https://gui.farm/tools/charts/donut-chart.svg?data=Design:30,Eng:45,Sales:25&slicelabels=name&gap=2
  • No legend, thick ring
    No legend, thick ring https://gui.farm/tools/charts/donut-chart.svg?data=8,5,3,2&legend=hide&thickness=40

Drop it into a .gui file

Because the endpoint is a stable image URL, a .gui screen embeds a chart as a plain <img> — nothing to download or unzip. The chart stays live text an agent can read and edit.

<gui version="0.2" name="Browser share">
  <col w="360" p="20" gap="14" fill="#ffffff" radius="24">
    <text value="Browser share" font-size="19" font-weight="700" color="#111827" />
    <img src="https://gui.farm/tools/charts/donut-chart.svg?data=Chrome:63,Safari:20,Edge:5,Other:12&width=640&height=360" w="320" h="180" radius="16" />
    <text value="Chrome leads at 63%" font-size="14" color="#6b7280" />
  </col>
</gui>

Monthly revenue

Donut Chart Generator embedded in a .gui screen

Up 18% since January

Rendered .gui screen

Data

ParamAcceptsDefaultNotes
dataLabel:value pairs, comma-separated (label optional)—One slice per item, label:value. Values are magnitudes; only positive values are drawn and slices are shares of the total.
labelscomma-separated text—Optional slice names for value-only data.

Appearance

ParamAcceptsDefaultNotes
schemepalette, monopaletteSlice colors: a categorical palette, or monochrome tints of the base color.
colora color name (blue, coral, …) or hexblueBase color for the mono scheme. `slice` is an alias.
colorscomma-separated colors—Explicit per-slice colors, overriding the scheme. Cycles if shorter than the data.
surfacelight, darklightTone the chart will sit on — sets label and legend contrast only. The background is never painted; the SVG is transparent.
thicknesspercent (20–85)58Hole size as a share of the radius — the ring gets thinner as this grows.

Elements

ParamAcceptsDefaultNotes
slicelabelspercent, name, value, nonepercentText drawn on each slice big enough to fit.
legendshow, hideshowA legend column listing each slice’s swatch, label and share.
gapdegrees (0–20)0Separation between slices.
startdegrees-90Start angle. -90 begins at the top.

Size

ParamAcceptsDefaultNotes
widthpixels (50–2000)720Output width, and the drawing box.
heightpixels (50–2000)440Output height, and the drawing box.