Categories

Progress Ring Chart

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

Progress values (0-100). Supports JSON array with labels, simple label:value pairs, or just values

Title that will be displayed above the chart

Size of each progress ring in pixels

Thickness of the progress ring stroke

Starting angle in degrees (-90 = top, 0 = right, 90 = bottom, 180 = left)

Custom colors for progress rings (comma-separated hex colors)

Duration of the progress animation in milliseconds

Background color for the chart container

Display percentage value in the center of each ring

Display label below each progress ring

Animate the progress rings when they load

API Documentation

Request Endpoint

POST /en/api/tools/progress-ring-chart

Request Parameters

Parameter Name Type Required Description
progressData textarea Yes Progress values (0-100). Supports JSON array with labels, simple label:value pairs, or just values
chartTitle text No Title that will be displayed above the chart
ringSize number No Size of each progress ring in pixels
ringThickness number No Thickness of the progress ring stroke
startAngle number No Starting angle in degrees (-90 = top, 0 = right, 90 = bottom, 180 = left)
colorScheme select No -
customColors text No Custom colors for progress rings (comma-separated hex colors)
animationDuration number No Duration of the progress animation in milliseconds
backgroundColor color No Background color for the chart container
showPercentage checkbox No Display percentage value in the center of each ring
showLabel checkbox No Display label below each progress ring
animated checkbox No Animate the progress rings when they load

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-progress-ring-chart": {
      "name": "progress-ring-chart",
      "description": "Create beautiful circular progress indicators with animations, perfect for displaying percentages, completion rates, and progress metrics",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=progress-ring-chart",
      "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]