Documentation keyboard_arrow_right Examples keyboard_arrow_right Chart

Bar Chart

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

<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 - Embed interactive charts directly in spreadsheet cells with formula-based integration
• Highcharts Integration - Build enterprise dashboards with synchronized spreadsheet data

Specialized Visualization Components

• Activity 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