Donut Chart JavaScript: A Practical Guide for Builders
Learn how to create and customize donut charts in JavaScript using Chart.js and D3. This comprehensive guide covers data modeling, accessibility, responsiveness, and practical patterns for interactive dashboards in 2026.
Donut charts are circular visualizations that show parts of a whole with a hollow center. In JavaScript, you can implement them with libraries like Chart.js or D3 by providing data arrays, labels, and arc options. This guide covers practical patterns, accessibility considerations, and responsive rendering for dashboards.
What is a donut chart and when to use it
According to JavaScripting, a donut chart is a specialized pie chart with a hollow center that emphasizes proportional shares while allowing a centered label such as a total. Donut charts are ideal for showing how a whole is divided into parts when you want to display a single metric (e.g., market share, budget allocation) and still convey the context around the aggregate total. They pair well with labels around the circumference or inside the hole for a clean, scannable dashboard look. When used well, donuts can communicate relative importance at a glance, but they can mislead if there are many slices or overlapping labels. Always consider alternatives like horizontal bar charts for large category sets.
// Minimal Chart.js donut example
const ctx = document.getElementById('myDonut').getContext('2d');
const data = {
labels: ['Red', 'Blue', 'Yellow'],
datasets: [{
data: [12, 19, 7],
backgroundColor: ['#F44336', '#42A5F5', '#FFCA28']
}]
};
const config = {
type: 'doughnut',
data,
options: {
responsive: true,
plugins: { legend: { position: 'right' } }
}
};
new Chart(ctx, config);Implementation notes: Ensure the container has a defined size; donuts scale with the canvas size. If you need a center label, you can overlay HTML or draw text with Chart.js plugins. For accessibility, pair legends with descriptive text and provide an ARIA live region for updates.
wordCountInBlockApproximationWithCodeAndTipsAndNotes
Steps
Estimated time: 60-90 minutes
- 1
Choose library and basics
Pick a library (Chart.js for quick results or D3 for customization) and review donut chart fundamentals (hole, slices, and legend).
Tip: Start with Chart.js to validate the concept quickly. - 2
Model your data
Represent slices as label/value pairs and map them to the library's data structure.
Tip: Keep a single source of truth for data to ease library swaps. - 3
Render a basic donut
Create a simple donut with a few categories and confirm the visual proportions.
Tip: Ensure the container has explicit size to avoid layout jitter. - 4
Add accessibility
Provide ARIA labels and a hidden summary for screen readers.
Tip: Always include text alternatives for screen readers. - 5
Make it responsive
Enable responsive sizing and test on different viewports.
Tip: Test on both wide dashboards and narrow sidebars. - 6
Polish and test
Add hover tooltips, colors with contrast, and small multiples if needed.
Tip: Avoid too many slices; consider grouping minor categories.
Prerequisites
Required
- A modern browser with Canvas and SVG supportRequired
- Basic JavaScript ES6+ knowledgeRequired
- Required
Optional
- Optional
- Optional
Keyboard Shortcuts
| Action | Shortcut |
|---|---|
| CopyCopy code snippets or text | Ctrl+C |
| PasteInsert copied content into editor | Ctrl+V |
| Format codeAuto-format your code in editor | Ctrl+⇧+F |
| Toggle commentComment or uncomment selection | Ctrl+/ |
Questions & Answers
What’s the difference between a donut chart and a pie chart?
A donut chart resembles a pie chart but has a hollow center, which can be used for a central label or total. Donuts are better for emphasizing distribution around a central value, while pies emphasize the whole. When many categories exist, consider alternatives like bar charts for readability.
A donut is like a pie with a hole in the middle, which helps highlight the total. Use it for clear distribution, but avoid too many slices that clutter the view.
Which library should I start with for donuts?
For quick results, Chart.js is often the best starting point due to its simple API and good defaults. If you need custom shapes and animations, D3 provides deeper control but comes with a steeper learning curve.
Chart.js is great for fast donut charts; go D3 if you want more customization.
How can I ensure accessibility for donut charts?
Provide ARIA labels on the chart canvas, offer a textual summary of each slice, and include a table equivalent for screen readers. Avoid relying on color alone to convey information.
Make charts accessible by adding ARIA labels and a text summary for screen readers.
How do I make a donut chart responsive?
Most libraries support responsive rendering. Use a container with a defined size, enable responsive options, and optionally recompute dimensions on window resize.
Make the chart resize with the container and rebuild on resize if needed.
Can I animate donut charts?
Yes. Chart.js provides built-in animation options; D3 offers fine-grained transitions. Ensure animations don’t hinder accessibility or performance on large datasets.
Donuts can animate with library options, but keep performance in mind.
What to Remember
- Choose the right library based on requirements (Chart.js for speed, D3 for customization).
- Model data as labeled values and map to library-specific structures.
- Ensure accessibility with ARIA labels and alternative text.
- Make charts responsive to fit dashboards across devices.
- Limit slices to preserve readability; group or sort as needed.