Creating a Pure CSS Bar Chart in Salesforce LWC

When building Salesforce Lightning Web Components (LWC), you often need to visualize data without relying on heavy charting libraries. In this post, I'll show you how to create a responsive, CSS-only bar chart that works seamlessly in LWC perfect for dashboards, analytics, or performance tracking.

---

Why a CSS-Only Bar Chart?

Many developers reach for charting libraries like Chart.js or D3.js, but these can be overkill for simple visualizations. A pure CSS solution offers:

✅ No external dependencies
✅ Faster load times
✅ Better compatibility with Salesforce Locker Service
✅ Easier customization

The Solution: A Flexible LWC Bar Chart

Here’s how we’ll build it:

1. HTML Structure (barChart.html)

We use semantic <div> elements for the chart container, bars, and labels.

<template>
    <div class="bar-chart-container">
        <h2 class="chart-title">{chartTitle}</h2>
        <div class="chart">
            <div class="bars">
                <template for:each={chartData} for:item="item">
                    <div key={item.label} class="bar-container">
                        <div class="bar" style={getBarStyle(item.value)}></div>
                        <div class="bar-label">{item.label}</div>
                        <div class="bar-value">{item.value}</div>
                    </div>
                </template>
            </div>
        </div>
    </div>
</template>

2. JavaScript Logic (barChart.js)

The component calculates bar heights dynamically based on the maximum value.

import { LightningElement, api } from 'lwc';

export default class BarChart extends LightningElement {
    @api chartTitle = 'Sales Performance';
    @api chartData = [
        { label: 'Jan', value: 65 },
        { label: 'Feb', value: 59 },
        { label: 'Mar', value: 80 },
        { label: 'Apr', value: 81 },
        { label: 'May', value: 56 },
        { label: 'Jun', value: 55 }
    ];
    @api maxHeight = 200; // Default height in pixels

    getBarStyle(value) {
        const maxValue = Math.max(...this.chartData.map(item => item.value));
        const heightPercentage = (value / maxValue) * 100;
        return `height: ${heightPercentage}%;`;
    }
}

3. CSS Styling (barChart.css)

The most important part is CSS, we use Flexbox for responsive layout and CSS variables for easy theming.

.bar-chart-container {
    font-family: 'Salesforce Sans', Arial, sans-serif;
    padding: 1rem;
    border-radius: 0.25rem;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.chart-title {
    color: #032d60;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    text-align: center;
}

.chart {
    display: flex;
    flex-direction: column;
    height: var(--max-height, 200px);
}

.bars {
    display: flex;
    height: 100%;
    align-items: flex-end;
    gap: 1rem;
    padding: 0 1rem;
}

.bar-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    height: 100%;
}

.bar {
    width: 100%;
    background-color: #0176d3;
    border-radius: 0.25rem 0.25rem 0 0;
    transition: height 0.5s ease;
    min-height: 1px; /* Ensures visibility for small values */
}

.bar:hover {
    opacity: 0.8;
}

.bar-label, .bar-value {
    font-size: 0.75rem;
    margin-top: 0.25rem;
}

.bar-label {
    color: #3e3e3c;
}

.bar-value {
    color: #0176d3;
    font-weight: bold;
}

Key Features

1. Dynamic Bar Scaling

• Bars auto-adjust based on the highest value in the dataset.
• Uses getBarStyle() to compute heights in JavaScript.

2. Responsive Layout

• Flexbox ensures the chart adapts to different container sizes.
• Gap property spaces bars evenly.

3. Salesforce-Themed Design

• Uses Salesforce Sans font and SLDS colors.
• Hover effects for better interactivity.

4. Easy Customization

• Change colors via CSS variables.
• Adjust maxHeight to control chart size.

---

How to Use This Component

1. Deploy to Your Org

• Save the files as barChart in your LWC folder.

2. Embed in a Lightning Page

<c-bar-chart
    chart-title="Quarterly Revenue"
    chart-data={[
        { label: 'Q1', value: 250 },
        { label: 'Q2', value: 320 },
        { label: 'Q3', value: 410 },
        { label: 'Q4', value: 380 }
    ]}
    max-height="300">
</c-bar-chart>Run HTML

3. Customize Further

• Change colors: Modify background-color in .bar.
• Adjust spacing: Tweak the gap in .bars.
• Add animations: Use CSS transitions for smooth effects.

---

Performance Benefits

No external libraries → Faster load times
Works with Locker Service → No security issues
Easy to theme → Matches your org’s branding

---

Final Thoughts

This pure CSS bar chart is perfect for lightweight visualizations in Salesforce LWCs. It’s simple, fast, and customizable—ideal for dashboards, reports, or any place you need quick data visualization.

Need more complex charts? Check out Chart.js integration in LWC for advanced use cases.