🍩 Reusable Donut / Pie Chart Component for Salesforce LWC
A fully reusable SVG-based Lightning Web Component that renders beautiful, interactive Donut and Pie Charts using pure SVG with zero external JavaScript libraries.
📖 Project Overview
The Donut / Pie Chart Component is a reusable Lightning Web Component built entirely with native Salesforce technologies. It renders interactive charts using pure SVG, supports Apex-powered dynamic data as well as static datasets, and provides configurable legends, animated slices, hover tooltips, accessibility support, and responsive layouts.
Unlike third-party charting libraries, this solution requires zero external dependencies, making deployment simple while maintaining excellent performance and Lightning compatibility.
✨ Key Features
| Feature | Description |
|---|---|
| Pure SVG Rendering | No Canvas or third-party chart libraries required. |
| Donut & Pie Modes | Switch between Donut and Pie using a single property. |
| Animated Slices | Hovered slices expand while remaining slices fade. |
| Interactive Tooltips | Displays label, value, and percentage on hover. |
| Configurable Legend | Supports stacked and side-by-side layouts. |
| Dynamic Apex Data | Automatically loads data using Apex Wire. |
| Static Data Support | Accepts custom chart data from parent components. |
| Responsive Layout | Automatically adapts to desktop and mobile screens. |
| Accessibility | Keyboard navigation, ARIA labels and focus support. |
| Loading & Error States | Built-in loading, empty data and error handling. |
🏗 Component Architecture
📁 Project Structure
force-app
└── main
└── default
├── classes
│ └── DonutChartController.cls
│
└── lwc
└── donutChart
├── donutChart.html
├── donutChart.js
├── donutChart.css
└── donutChart.js-meta.xml
⚙️ Public API Properties
| Property | Purpose |
|---|---|
| title | Chart title displayed above the component. |
| chartType | Choose between donut or pie. |
| chartData | Static chart data supplied by parent LWC. |
| recordId | Automatically loads Apex data. |
| colorPalette | Custom array of chart colors. |
| showLegend | Display chart legend. |
| legendPosition | Stacked or Side-by-Side layout. |
| showCenterText | Display total value inside the donut. |
| valuePrefix / valueSuffix | Format displayed values. |
💻 Usage Example
<c-donut-chart
title="Revenue by Stage"
chart-type="donut"
show-legend
legend-position="side-by-side"
show-center-text
center-label="Total"
value-prefix="$"
chart-data={opportunityData}>
</c-donut-chart>
📊 Supported Features
- Donut Charts
- Pie Charts
- Static Data
- Apex Wire Data
- Hover Animation
- Keyboard Navigation
- ARIA Accessibility
- Responsive Layout
- Custom Color Palette
- Legend Totals
- Loading State
- Error State
- Empty Data State
🎨 Customisation Options
✔ Custom Color Palette ✔ Legend Title ✔ Legend Position ✔ Center Label ✔ Value Prefix ✔ Value Suffix ✔ Label Field Mapping ✔ Value Field Mapping ✔ Donut / Pie Mode
♿ Accessibility
- Keyboard accessible slices.
- Tab navigation support.
- Meaningful ARIA labels.
- Screen reader friendly.
- High contrast compatible.
- Mobile responsive layout.
🚀 Deployment
sf org login web --alias myOrg sf project deploy start \ --source-dir force-app \ --target-org myOrg
🎯 Business Use Cases
- Sales Pipeline Distribution
- Opportunity Stage Analysis
- Case Status Dashboard
- Lead Source Analytics
- Revenue Breakdown
- Account Segmentation
- Executive Dashboards
- Service Performance Reports
- Custom CRM Analytics
📌 Conclusion
The Reusable Donut / Pie Chart Component provides a lightweight, modern, and highly configurable visualization solution for Salesforce Lightning applications. Built entirely with native SVG, Lightning Web Components, and Apex, it delivers interactive charts without relying on external JavaScript libraries, making it ideal for enterprise Salesforce projects that require performance, accessibility, and easy customization.
