LWC: Reusable Donut / Pie Chart Component

🍩 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.

🔗 View Source Code ⬇ Download ZIP

✨ 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

🔗 View Source Code ⬇ Download ZIP

📌 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.