📊 Reusable Horizontal Bar Chart for Salesforce LWC
A modern, reusable Lightning Web Component that renders responsive horizontal bar charts with smooth animations, adaptive labels, click-to-filter functionality, and zero third-party JavaScript libraries.
📖 Project Overview
horizontalBarChart is a fully reusable Salesforce Lightning Web Component designed for dashboards, Home Pages, App Pages, and Experience Cloud sites.
The component accepts a simple collection of { id, label, value } objects and automatically renders an attractive horizontal bar chart using native HTML, CSS and Lightning Web Components.
Built without Chart.js, D3.js, or any external dependency, the component offers excellent performance, smooth animations, accessibility, responsive layouts, configurable colors, interactive filtering, and App Builder support.
✨ Features
| Feature | Description |
|---|---|
| Animated Entry | Bars animate smoothly from 0% to their calculated width whenever data changes. |
| Adaptive Labels | Automatically positions values inside or outside the bar based on available space. |
| Click-to-Filter | Clicking a bar selects it and fires a custom barclick event. |
| Toggle Selection | Click again to remove the active filter. |
| Clear Filter Button | Displays automatically whenever a filter is active. |
| External Selection | Parent components can control selection using the selectedId property. |
| Automatic Scaling | Calculates maximum value automatically or accepts a custom maxValue. |
| Large Number Formatting | Formats values such as 45K, 1.2M, etc. |
| Custom Colors | Supports reusable color palettes that cycle automatically. |
| Legend Support | Optional color legend for dashboard visualization. |
| Responsive Layout | Optimized for desktop, tablet and mobile devices. |
| Accessibility | Keyboard navigation, ARIA labels and screen-reader support. |
🏗 Component Architecture
📁 Project Structure
horizontalBarChart/ │ ├── horizontalBarChart.html ├── horizontalBarChart.js ├── horizontalBarChart.css ├── horizontalBarChart.js-meta.xml └── README.md
⚙️ Public API
| Property | Purpose |
|---|---|
| data | Array of { id, label, value } objects. |
| selectedId | Externally control selected bar. |
| maxValue | Override automatic scaling. |
| showLegend | Show or hide legend. |
| colors | Custom color palette. |
📦 Expected Data Structure
[
{
id: "A",
label: "Prospecting",
value: 120
},
{
id: "B",
label: "Qualification",
value: 85
},
{
id: "C",
label: "Closed Won",
value: 42
}
]
🔄 Event Flow
Load Data
│
▼
Calculate Maximum
│
▼
Render Horizontal Bars
│
▼
Animate Width
│
▼
User Clicks Bar
│
▼
Dispatch "barclick"
│
▼
Parent Dashboard Filters
🎨 Styling Features
- Salesforce Lightning Design System (SLDS) styling.
- Uses Lightning Design Tokens.
- Responsive layout.
- Animated transitions.
- Adaptive value labels.
- Optional legend.
- Empty state illustration.
- Theme-friendly custom CSS variables.
♿ Accessibility
- Keyboard accessible.
- ARIA-compliant buttons.
- Screen reader labels.
- role="button" support.
- aria-pressed state management.
- Focus indicators.
🚀 Deployment
sf org login web --alias myOrg sf project deploy start \ --source-dir force-app \ --target-org myOrg
🎯 Ideal Business Use Cases
- Opportunity Stage Dashboard
- Lead Source Analytics
- Case Status Distribution
- Revenue Comparison
- Sales Team Performance
- Service Metrics
- Executive KPI Dashboards
- Experience Cloud Analytics
- Marketing Campaign Performance
- Custom Salesforce Reports
📌 Conclusion
The Horizontal Bar Chart component provides an elegant, lightweight, and highly reusable solution for visualizing Salesforce data. Built entirely with Lightning Web Components and native web technologies, it offers smooth animations, adaptive labels, interactive filtering, responsive layouts, accessibility support, and App Builder compatibility—making it an excellent choice for modern Salesforce dashboards and analytics applications.
