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

🔗 View Source Code ⬇ Download ZIP

✨ 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