Categories

← View All Tools

Donut Chart Generator

Generate customizable donut charts (ring charts) from data with various styling options, perfect for showing proportions with a central space

Data for the donut chart. Supports JSON array or simple label:value text format

Title that will be displayed above the chart

Text to display in the center of the donut (when showing total)

Size of the square chart in pixels

Inner radius of the donut in pixels (leave empty for auto)

Outer radius of the donut in pixels (leave empty for auto)

Starting angle in degrees (0 = top, 90 = right)

Background color for the chart container

Display percentages on the chart slices

Display a legend below the chart

Display labels or percentages directly on the donut slices

Display the total value in the center of the donut

Separate slices from each other for emphasis

Key Facts

Category
Data Visualization
Input Types
textarea, text, select, number, color, checkbox
Output Type
html
Sample Coverage
4
API Ready
Yes

Overview

The Donut Chart Generator allows you to create professional, customizable ring charts from your data, providing a clear and visually appealing way to represent proportions and percentages with a central space for additional context.

When to Use

  • •When you need to visualize part-to-whole relationships in a clean, modern format.
  • •When you want to display categorical data proportions while keeping the center area open for labels or totals.
  • •When creating presentation slides or reports that require quick, intuitive data comparisons.

How It Works

  • •Input your data using either a JSON array format or a simple label:value text list.
  • •Adjust styling options such as color schemes, chart size, and inner/outer radius to fit your design needs.
  • •Toggle display settings like percentages, legends, and center text to customize the final output.
  • •Generate the chart instantly to view or export your data visualization.

Use Cases

Displaying market share distribution among competitors.
Visualizing budget allocation across different departments.
Showing survey response percentages for various categories.

Examples

1. Quarterly Budget Allocation

Financial Analyst
Background
The analyst needs to present the distribution of the Q3 marketing budget across four main channels to stakeholders.
Problem
A standard pie chart looks too cluttered, and the team needs a modern visual that highlights the total budget in the center.
How to Use
Input the channel names and values, enable 'Show Total in Center', and select the 'Business' color scheme.
Example Config
chartData: [{"label": "Social", "value": 40}, {"label": "Search", "value": 30}, {"label": "Email", "value": 20}, {"label": "Display", "value": 10}], showTotalInCenter: true, colorScheme: "business"
Outcome
A professional donut chart showing the budget breakdown with the total budget amount clearly displayed in the center.

2. Customer Satisfaction Survey

Product Manager
Background
The product team collected feedback on feature satisfaction and wants to highlight the proportion of positive vs. negative responses.
Problem
Need to emphasize specific segments to show that the majority of users are satisfied.
How to Use
Input the satisfaction ratings, enable 'Explode Slices' to highlight the 'Very Satisfied' segment, and show percentages.
Example Config
chartData: [{"label": "Very Satisfied", "value": 60}, {"label": "Satisfied", "value": 25}, {"label": "Neutral", "value": 10}, {"label": "Dissatisfied", "value": 5}], explodeSlices: true, showPercentage: true
Outcome
A visually distinct donut chart where the 'Very Satisfied' slice is separated for emphasis, with percentages clearly labeled on each slice.

Try with Samples

json, text
ELK Stack Log Analysis Samples
Comprehensive ELK Stack (Elasticsearch, Logstash, Kibana) samples for log aggregation, processing, and visualization in distributed systems
preferred input family json
json
PDF Samples
Generated PDF samples from tools dated 2026-02-01 to 2026-02-10
preferred input family json
json
WebRTC Real-Time Communication Samples
Comprehensive WebRTC samples for peer-to-peer audio/video communication, data channels, screen sharing, and signaling server implementation
preferred input family json
json
Distributed Tracing Samples
Comprehensive distributed tracing examples using Jaeger, OpenTelemetry, and other modern observability tools for microservices architecture
preferred input family json
json

Related Hubs

Json Convert Tools
Explore 100 json tools for convert workflows and compare closely related utilities quickly.
Text Convert Tools
Explore 80 text tools for convert workflows and compare closely related utilities quickly.
Json Tools
Explore 43 json tools for utility workflows and compare closely related utilities quickly.
Text Tools
Explore 33 text tools for utility workflows and compare closely related utilities quickly.

FAQ

What data formats are supported?

You can provide data as a JSON array (e.g., [{"label": "A", "value": 10}]) or as a simple text list (e.g., Label:Value).

Can I change the colors of the chart?

Yes, you can select from several predefined color schemes including Warm, Cool, Pastel, Vibrant, and Business.

Is it possible to show the total value in the center?

Yes, by enabling the 'Show Total in Center' option, the sum of your data values will appear in the middle of the donut.

Can I adjust the size of the donut hole?

Yes, you can manually set the 'Inner Radius' in pixels to control the thickness of the ring.

Can I separate the slices for emphasis?

Yes, enable the 'Explode Slices' option to add spacing between each segment of the chart.

API Documentation

Request Endpoint

POST /en/api/tools/donut-chart-generator

Request Parameters

Parameter Name Type Required Description
chartData textarea Yes Data for the donut chart. Supports JSON array or simple label:value text format
chartTitle text No Title that will be displayed above the chart
colorScheme select No -
centerText text No Text to display in the center of the donut (when showing total)
chartSize number No Size of the square chart in pixels
innerRadius number No Inner radius of the donut in pixels (leave empty for auto)
outerRadius number No Outer radius of the donut in pixels (leave empty for auto)
startAngle number No Starting angle in degrees (0 = top, 90 = right)
backgroundColor color No Background color for the chart container
showPercentage checkbox No Display percentages on the chart slices
showLegend checkbox No Display a legend below the chart
showLabels checkbox No Display labels or percentages directly on the donut slices
showTotalInCenter checkbox No Display the total value in the center of the donut
explodeSlices checkbox No Separate slices from each other for emphasis

Response Format

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP Documentation

Add this tool to your MCP server configuration: 

{
  "mcpServers": {
    "elysiatools-donut-chart-generator": {
      "name": "donut-chart-generator",
      "description": "Generate customizable donut charts (ring charts) from data with various styling options, perfect for showing proportions with a central space",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=donut-chart-generator",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

You can chain multiple tools, e.g.: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, max 20 tools.

If you encounter any issues, please contact us at [email protected]