# Make a Pie or Donut Chart

Turn labeled values into a clean pie or donut chart as a scalable SVG — in your browser, nothing uploaded. Auto percentages, custom colors, legend, and title.

## Run it

- **CLI:** `gizza tool pie-donut-chart-svg "Chrome, 63
Safari, 20
Edge, 5
Firefox, 3
Other, 9"`
- **Web:** https://gizza.ai/tools/pie-donut-chart-svg/
- **Agents:** machine-readable descriptor (parameters JSON Schema) at https://gizza.ai/tools/pie-donut-chart-svg/tool.json

## Inputs

- `data` — Data (one `label, value` per line) _(field)_
- `chart_type` — Chart type _(field)_
- `width` — Width (px) _(field)_
- `height` — Height (px) _(field)_
- `donut_hole` — Donut hole size (0.0–0.9) _(field)_
- `start_angle` — Start angle (degrees, clockwise from top) _(field)_
- `colors` — Colors (comma-separated CSS colors) _(field)_
- `show_labels` — Show labels on slices _(field)_
- `show_percentages` — Show percentages _(field)_
- `show_values` — Show raw values in legend _(field)_
- `legend` — Legend _(field)_
- `sort` — Slice order _(field)_
- `title` — Chart title (optional) _(field)_
- `background` — Background color _(field)_

## Output

- Chart SVG (text)

## Query parameters

Open the tool pre-filled and auto-run via URL:

- `data` — Data (one `label, value` per line)
- `chart_type` — Chart type
- `width` — Width (px)
- `height` — Height (px)
- `donut_hole` — Donut hole size (0.0–0.9)
- `start_angle` — Start angle (degrees, clockwise from top)
- `colors` — Colors (comma-separated CSS colors)
- `show_labels` — Show labels on slices
- `show_percentages` — Show percentages
- `show_values` — Show raw values in legend
- `legend` — Legend
- `sort` — Slice order
- `title` — Chart title (optional)
- `background` — Background color

Example: `https://gizza.ai/tools/pie-donut-chart-svg/?data=Chrome%2C%2063%0ASafari%2C%2020%0AEdge%2C%205%0AFirefox%2C%203%0AOther%2C%209&chart_type=pie&width=640&height=400&donut_hole=0.55&start_angle=0&colors=%234e79a7%2C%20%23f28e2b%2C%20%23e15759&show_labels=true&show_percentages=true&show_values=true&legend=right&sort=input&title=Browser%20market%20share&background=%23ffffff`

---

## Turn labeled values into a pie or donut chart

Enter a short list of `label, value` pairs and generate a standalone SVG pie or donut chart you can copy, save, or drop into a slide, doc, or README. Percentages are computed automatically from the sum of the values, so you only supply the raw numbers. The chart is drawn with a legend, an optional title, and your choice of colors — as clean, scalable vector graphics with no external dependencies.

Values can be separated by `,`, `:`, or `=`, one entry per line (or `;`-separated), and a JSON array such as `[["Chrome",63],["Safari",20]]` is accepted too. Only zero-or-positive numbers make sense on a pie, so negative or non-numeric values are rejected with a clear error.

### Worked example

Input:

```
Chrome, 63
Safari, 20
Edge, 5
Firefox, 3
Other, 9
```

Use **Chart type** = `pie`, **Legend** = `right`, **Slice order** = `Largest first`, and **Chart title** = `Browser market share`. The output SVG draws one wedge per browser sized by its share of the total, the percentage on each slice, and a legend down the right. Switch **Chart type** to `donut` and raise **Donut hole size** to `0.6` for a ring, or move the **Legend** to `bottom` for a wide layout.

## FAQ

<details>
<summary>What's the difference between the pie and donut modes?</summary>

Both size each slice by its share of the total. A **pie** draws solid wedges from the center; a **donut** is the same chart with a round hole cut out of the middle, controlled by the **Donut hole size** (a fraction of the radius from `0.0` to `0.9`). The hole size only affects the donut mode.

</details>

<details>
<summary>Do I need to enter percentages myself?</summary>

No. Enter the raw values — counts, dollars, votes, anything — and the tool computes each slice's percentage from the sum automatically. Turn **Show percentages** on to print `%` on each slice and in the legend, and **Show raw values** to add the original numbers to the legend rows.

</details>

<details>
<summary>Can I control the colors and the slice order?</summary>

Yes. Leave **Colors** blank to use a built-in 10-color palette, or pass a comma-separated list of CSS colors (`#4e79a7, tomato, rgb(20,120,200)`) that cycles across the slices. **Slice order** keeps your input order or sorts the slices largest- or smallest-first, and **Start angle** rotates where the first slice begins (clockwise from the top).

</details>

<details>
<summary>Is my data uploaded anywhere?</summary>

No. Parsing and SVG generation run entirely in your browser through WebAssembly. Nothing is sent to a server, so the tool works offline and your numbers never leave your machine.

</details>

## Related tools

- [Before / after image slider generator](https://gizza.ai/tools/before-after-slider/): Turn two images into an interactive before/after comparison slider: one self-contained HTML file with inline CSS + JS, no libraries.
- [Color Contrast Checker](https://gizza.ai/tools/color-contrast-checker/): WCAG colour contrast checker — get the contrast ratio and AA / AAA pass-fail for any text and background colour, plus an accessible suggestion. Free, in-browser.
- [Color converter](https://gizza.ai/tools/color-format-convert/): Convert a color between HEX, RGB(A), HSL, HSV and CMYK, in your browser. Paste any notation and get them all. Nothing is uploaded.
- [Color palette generator](https://gizza.ai/tools/color-palette-generator/): Generate a color palette from any base color — complementary, analogous, triadic, tetradic, monochromatic, shades and tints. Free, runs in your browser.
- [Color shades generator](https://gizza.ai/tools/color-shades-generator/): Generate a ramp of tints, shades and tones from any base color, including a Tailwind-style 50-900 scale, in HEX, RGB and HSL. Runs in your browser, nothing is uploaded.