Search DevFox

Search tools and pages.

Doughnut Chart Maker

Build a doughnut chart from label/value pairs with adjustable thickness, legend, colors, and PNG/SVG export

Loading tool...

What is Doughnut Chart Maker

Written by Giorgos Kostas. Last reviewed:

A doughnut chart is a pie chart with a hollow center. The hollow region makes labels easier to read and leaves room for a summary total or KPI in the middle.

Doughnut Chart Maker renders label/value data as a doughnut in your browser with configurable inner radius, palette, legend, and PNG or SVG export.

Why use it

  • Prefer the look of a doughnut over a pie without writing any code.
  • Adjust the inner radius to fit a KPI in the middle or make labels easier to scan.
  • Paste straight from a query result and export without uploads.
  • Match brand colors with one of five curated palettes.

Features

  • CSV and JSON input
  • Adjustable inner radius (10%–80%)
  • 5 color palettes
  • Legend toggle
  • PNG export
  • SVG export
  • Client-side rendering

How to use Doughnut Chart Maker

  1. Paste data. Paste label/value rows as CSV or JSON.
  2. Adjust ring. Slide the inner-radius control to taste.
  3. Export. Download PNG for docs or SVG for vector reuse.

Example (before/after)

CSV input

label,value
Photos,46
Documents,22
Backups,18
Apps,9
Free,5

Rendered doughnut chart

Doughnut chart with a 35% inner radius, five labeled arcs sized 46/22/18/9/5, rendered as SVG ready for PNG export.

Common errors

Inner radius too wide

Setting the inner radius above 75% leaves almost no area for slices.

Fix: Keep the inner radius around 30%–55% unless you are layering a KPI in the center.

Empty series

If every value is zero, no arcs are drawn.

Fix: Provide at least one positive value so the chart has something to render.

FAQ

What is a good inner-radius value?

Around 35% is a safe default. Go up to 55% if you need more label room, or down to 20% to keep slices readable.

Can I put a number in the middle?

This tool exports the doughnut itself; layer a text element over the exported SVG in your design tool to add a KPI in the hollow center.

Is it any different from a pie chart?

Visually yes; mathematically no. Doughnut and pie charts share the same underlying proportional arcs.

Related tools

Related chart builders: You can also browse the full Chart Makers category for more options.

Pie Chart Maker

Turn label/value pairs into a labeled pie chart with custom colors, legend, and PNG/SVG export

Bar Chart Maker

Paste CSV or JSON and generate a customizable bar chart with axis labels, colors, legend, and PNG/SVG export

Line Chart Maker

Plot one or more series from CSV or JSON data with smoothing, grid, markers, and PNG/SVG export

Scatter Plot Maker

Plot x/y points from CSV or JSON with axis labels, grid, and PNG/SVG export

CSV to JSON

Convert CSV to JSON format

JSON to CSV

Convert JSON to CSV format

.env to JSON Converter

Convert a .env (dotenv) file into structured JSON with quote, comment, and escape handling

Angular Beautifier

Format Angular templates online with cleaner indentation and spacing for HTML, bindings, and interpolation blocks.

Babel Beautifier

Transform and reformat JavaScript code using Babel parsers. Supports modern JS features, JSX, and experimental syntax. Get cross-compatible formatted output.

C Beautifier

Format and beautify C code online with proper indentation and brace placement. Paste C code and get clean, readable output following standard C conventions.

C# Beautifier

Format and beautify C# code online with proper indentation and .NET coding style. Paste C# and get clean, readable output following best practices.

C++ Beautifier

Format and beautify C++ code online with proper indentation and brace placement. Paste C++ and get clean, readable output with organized namespaces and classes.