skills.rest
sfdc-brendan
sfdc-brendanCOMMUNITY
Explore all skills by this author →
GitHub

sf-lwc-dataviz

Visualize data in Lightning Web Components using SLDS-based patterns.

15|Updated Jan 27, 2026
Search Tags:#accessibility#charts#dashboard#data-visualization#slds#lwc#sparklines
One-click install
npx skills add https://github.com/sfdc-brendan/Demo-Lab --skill sf-lwc-dataviz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: sf-lwc-dataviz
Source: https://github.com/sfdc-brendan/Demo-Lab/tree/main/skills/sf-lwc-dataviz
Command: npx skills add https://github.com/sfdc-brendan/Demo-Lab --skill sf-lwc-dataviz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Data visualization patterns for Lightning Web Components help teams present numeric information clearly, accessibly, and responsively within Salesforce apps.

Core Features & Use Cases

  • SLDS-based metric cards, gauges, sparklines, and trend indicators for LWCs.
  • Accessible visuals with text alternatives and data tables for screen readers.
  • Use Case: Create a KPI dashboard on a Case or Opportunity page showing revenue trends and health scores.

Quick Start

Create a simple LWC that renders a KPI card with a data-driven value and a trend indicator using the provided dataviz patterns.

Frequently Asked Questions about sf-lwc-dataviz

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a KPI dashboard in Lightning Web Components without external chart libraries?▼

You can build a KPI dashboard in LWC using SLDS-based patterns like metric cards, gauges, and sparklines without external chart libraries. The Skill provides data-first design hooks that render charts natively within Salesforce apps.

What is the best way to create responsive charts in Salesforce apps?▼

The best way to create responsive charts in Salesforce apps is using SLDS-based LWC patterns. This approach ensures visuals adapt to different layouts while maintaining accessibility through text alternatives and data tables for screen readers.

Can I display sparklines and trend indicators on a Case or Opportunity page?▼

Yes, you can display sparklines and trend indicators on Case or Opportunity pages. The Skill provides SLDS-based LWC patterns targeted for dashboards showing revenue trends and health scores directly within record pages.

Do I need external dependencies to visualize data within Lightning Web Components?▼

No, you do not need external dependencies to visualize data within LWC. The Skill functions without external chart libraries by relying on SLDS hooks, accessible text alternatives, and a data-first design approach.

How do accessible data visualizations work with screen readers in LWC?▼

Accessible data visualizations in LWC work with screen readers by providing text alternatives and data tables alongside SLDS-based visual elements. This ensures numeric information remains accessible while preserving the visual dashboard experience.

Related Skills

Explore More Software Engineering Skills→
sfdc-brendansfdc-brendan
15

sf-lwc-design

Create SLDS 2 compliant LWC components using --slds-g-* hooks.

Community
Advanced
huiferhuifer
919

mental-health-analyzer

Analyze PHQ-9 and GAD-7 scores to generate mental health trend reports.

Community
Advanced
angryracoonangryracoon

design-systems-slds-apply

Apply SLDS v2-compliant styling to Salesforce user interfaces.

Community
Advanced
AvinavaAvinava
1

sf-knowledge-bi-dev-guide-lwc-in-db

Apply curated Salesforce knowledge to implement Lightning Web Components in CRM Analytics Dashboards.

Community
Intermediate