What input formats are supported?

You can provide data as a JSON array (e.g., [{"label": "A", "value": 75}]), simple label:value text, or a list of raw numbers.

Can I customize the colors of the rings?

Yes, you can select from predefined color schemes like success, warning, or danger, or provide custom hex codes.

Is the chart animated?

Yes, the tool supports animated loading sequences, and you can adjust the animation duration in milliseconds.

Can I hide the percentage text?

Yes, you can toggle the 'Show Percentage' checkbox to display or hide the numerical value inside the ring.

What is the maximum ring size?

The ring size can be adjusted between 100 and 400 pixels to fit your specific layout requirements.

Elysia Tools

Navigation

Data Visualization

Progress Ring Chart

Create beautiful circular progress indicators with animations, perfect for displaying percentages, completion rates, and progress metrics

Execution

Run this tool

Fill in the form, run the tool, and review the result in one place.

Inputs

Options are grouped so long tools stay easier to scan.

12 options

ContentPaste or type the main input values.3

Progress DatatextareaRequiredProgress values (0-100). Supports JSON array with labels, simple label:value pairs, or just valuesChart TitletextOptionalTitle that will be displayed above the chartCustom ColorstextOptionalCustom colors for progress rings (comma-separated hex colors)

SettingsAdjust formats, ranges, numbers, and modes.6

Ring SizenumberOptionalSize of each progress ring in pixelsRing ThicknessnumberOptionalThickness of the progress ring strokeStart AnglenumberOptionalStarting angle in degrees (-90 = top, 0 = right, 90 = bottom, 180 = left)Color SchemeselectOptionalAnimation DurationnumberOptionalDuration of the progress animation in millisecondsBackground ColorcolorOptionalBackground color for the chart container

TogglesEnable or disable optional behavior.3

Show PercentagecheckboxOptionalEnabled when checkedDisplay percentage value in the center of each ringShow LabelcheckboxOptionalEnabled when checkedDisplay label below each progress ringAnimatedcheckboxOptionalEnabled when checkedAnimate the progress rings when they load

Result

Ready for a run

Run the tool to preview files, text, structured data, or streamed output here.

Samples

Progress Ring Chart

Run this tool

Inputs

Result

Examples that match this tool

Continue with connected tools and hubs

Inputs

Result

Learn when to use this tool, what it supports, and how real users apply it.

Key facts

Overview

When to use

How it works

Use cases

Examples

1. Project Milestone Tracker

2. Sales Goal Dashboard

FAQ

Grafana Advanced Application Samples

QR Code Samples

D3.js Data Visualization Samples

Rome JavaScript Toolchain Samples

Rating Star Chart

Rose Chart Generator

Stream Graph Generator

Timeline Generator

Chart and Diagram Generators

JSON Schema, Mock Data, and API Fixture Generators

JSON to Typed Code Generators (TypeScript, Go, Rust, Kotlin, Java, C#)

JSON Interchange and Format Translation Tools