SVG Donut Proportion Chart

Published at 15 Jun 2026

Description
Explains what the challenge is about and what you need to build.

Donut charts show proportions in a circular format. In this challenge, you will build an SVG Donut Proportion Chart using circle elements with stroke-dasharray to create segments.

Each segment represents a portion of a whole. Use SVG circles with calculated stroke-dashoffset values to display accurate proportions.

Requirements
Lists the specific elements, IDs, and behaviors your solution must include to pass the tests.

Vector circle parent canvas ID #svg-donut-chart.
Percentage segment tags containing class .donut-sector.

Example Demo

User Flow

Step-by-step Flow Explanation:

Verify segment values match array ratios.:

Related UI Challenges

Data Visualization

Discussion (0)

Join the Discussion

index.html

style.css

script.js

Loading Monaco Workspace...

Live Preview Browser

Tests & Console Output

Click to expand

Test Assertion	Status	Details/Errors
Required DOM Elements exist (#svg-donut-chart, .donut-sector)	Pending	Pending execution
Component layout compiles and renders successfully with custom CSS styles	Pending	Pending execution