Chart.js Donut Share

Published at 15 Jun 2026

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

Donut and pie charts are perfect for showing how a whole is divided into parts — market share, budget allocation, or survey results.

In this challenge, you will build a Chart.js Donut Share chart showing device market share percentages (Mobile, Desktop, Tablet). Use Chart.js to create a doughnut chart with custom segment colors, a legend, and hover tooltips that display the exact percentage.

Load Chart.js from CDN, create a canvas element with the right ID, and configure the chart with labels, data values, and color settings.

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

Canvas chart container element must have ID #chartjs-pie-donut-canvas.
Initialize Chart.js with type 'doughnut' or 'pie' in the script setup.
Pass the correct dataset variables, labels (Mobile, Desktop, Tablet), and custom segment colors.

Example Demo

User Flow

Step-by-step Flow Explanation:

Chart Render: The donut chart visualizes three distinct colored segments representing data shares.
Interactive Hover: Hovering cursor over chart segments triggers tooltips showing precise category values.

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 (#chartjs-pie-donut-canvas)	Pending	Pending execution
Component layout compiles and renders successfully with custom CSS styles	Pending	Pending execution
Interactive JavaScript logic and event listeners are implemented	Pending	Pending execution