---
title: "Bar Chart Example with LemonadeJS | v5 docs"
description: "LemonadeJS v5 archive. Learn how to create a reactive bar chart using LemonadeJS and SVG."
source: https://lemonadejs.com/docs/v5/examples/chart/
---

# Bar Chart

Create a dynamic bar chart with LemonadeJS using SVG for data visualization.

```html
<script src="https://lemonadejs.com/v5/lemonade.js"></script>
<div id='root'></div>
<script>
function BarChart() {
    // Sample data
    this.data = [
        { label: 'A', value: 45 },
        { label: 'B', value: 70 },
        { label: 'C', value: 30 },
        { label: 'D', value: 85 },
        { label: 'E', value: 55 }
    ];

    // Get the maximum value for scaling
    const maxValue = Math.max(...this.data.map(item => item.value));
    
    // SVG dimensions and settings
    const width = 400;
    const height = 200;
    const padding = 40;
    const barWidth = (width - padding * 2) / this.data.length;

    // Calculate bar height based on value
    const getHeight = (value) => {
        return (value / maxValue) * (height - padding * 2);
    }

    // Calculate bar position
    const getX = (index) => {
        return padding + (index * barWidth);
    }

    return render => render`<svg width="${width}" height="${height}">
        <g :loop="${this.data}">
            <rect x="{{getX(self.index)}}" y="{{height - padding - getHeight(self.value)}}" width="50" height="{{getHeight(self.value)}}" fill="#3498db">
            </rect>
            <text x="{{getX(self.index) + barWidth/2 - 5}}" y="200" fill="black">{{self.label}}</text>
            <text x="{{getX(self.index) + barWidth/2 - 10}}" y="{{height - padding - getHeight(self.value) - 5}}" fill="black">{{self.value}}</text>
        </g>
    </svg>`;
}
lemonade.render(BarChart, document.getElementById('root'));
</script>
</html>
```

## Related Chart Solutions

### Integrated Spreadsheet Charts
- [ChartJS in Jspreadsheet](https://jspreadsheet.com/docs/charts) - Embed interactive charts directly in spreadsheet cells with formula-based integration
- [Highcharts Integration](https://jspreadsheet.com/docs/examples/highcharts) - Build enterprise dashboards with synchronized spreadsheet data

### Specialized Visualization Components
- [Activity Heatmap](https://jsuites.net/docs/heatmap) - GitHub-style activity calendars for tracking patterns and contributions

### When to Use Each Approach
- **LemonadeJS Custom Charts:** Lightweight, reactive, full control over rendering
- **Jspreadsheet Charts:** Data grid integration, Excel-like formulas, business dashboards
- **Jsuites Heatmap:** Activity tracking, contribution calendars, time-series visualization