Django Bar Chart Component

Reach for a bar chart when you are comparing values across categories: revenue by month, signups by source, requests by endpoint. Pass labels and datasets as JSON and each series picks up a daisyUI palette colour unless you name one yourself. Datasets can also override the chart type individually, which is how the combo examples below plot a target line over the bars.

Basic Bar Chart

Preview

Code

<c-lb.chart.bar data='{
    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    "datasets": [
        { "label": "Revenue", "data": [4200, 3800, 5100, 4700, 6200, 5800] }
    ]
}' />

Multiple Datasets Bar Chart

Preview

Code

<c-lb.chart.bar legend="bottom" data='{
    "labels": ["Q1", "Q2", "Q3", "Q4"],
    "datasets": [
        { "label": "2023", "data": [18500, 22100, 19800, 24600] },
        { "label": "2024", "data": [21000, 25400, 23100, 28900] }
    ]
}' />

Semantic Colour Variants Bar Chart

Preview

Code

<c-lb.chart.bar legend="none" data='{
    "labels": ["Revenue", "Expenses", "Profit", "Tax", "Net"],
    "datasets": [
        {
            "label": "Amount",
            "data": [92000, 58000, 34000, 8500, 25500],
            "backgroundColor": ["success", "error", "primary", "warning", "info"]
        }
    ]
}' />

Reactive Bar Chart

Preview

Code

<script>
    function randomizeChart(chart, min, max) {
        const rand = () => Math.floor(Math.random() * (max - min)) + min;
        return {
            data: {
                labels: chart.data.labels,
                datasets: chart.data.datasets.map(ds => ({ ...ds, data: ds.data.map(rand) })),
            },
        };
    }
</script>

<c-lbr.signals :$chartData="{
    'data': {
        'labels': ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'],
        'datasets': [
            {'label': 'Revenue', 'data': [4200, 3800, 5100, 4700, 6200, 5800]},
            {'label': 'Expenses', 'data': [2100, 2400, 2800, 2200, 3100, 2700]},
        ],
    }
}" />

<div class="flex flex-col gap-3">
    <div class="flex justify-end">
        <c-lb.button
            size="sm"
            variant="primary"
            icon="rmx.shuffle"
            data-on:click="$chartData = randomizeChart($chartData, 500, 8500)"
        >
            Randomize data
        </c-lb.button>
    </div>

    <c-lb.chart.bar data="$chartData" />
</div>

Combo: Bar Chart + Target Line

Mix chart types per-dataset using the type key. Any dataset can override the base chart type.

Preview

Code

<c-lb.chart.bar data='{
    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    "datasets": [
        {
            "type": "bar",
            "label": "Revenue",
            "data": [42000, 38000, 51000, 47000, 62000, 58000]
        },
        {
            "type": "line",
            "label": "Target",
            "data": [40000, 43000, 46000, 50000, 56000, 60000],
            "borderColor": "error",
            "backgroundColor": "transparent",
            "borderDash": [6, 4],
            "pointRadius": 0,
            "borderWidth": 2
        }
    ]
}' />

Combo: Dual Y-Axis Bar Chart

Use yAxisID on each dataset and configure two scales in options to plot datasets with different units side-by-side.

Preview

Code

<c-lb.chart.bar data='{
    "labels": ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
    "datasets": [
        {
            "type": "bar",
            "label": "Units sold",
            "data": [1200, 950, 1400, 1100, 1650, 1500],
            "yAxisID": "y"
        },
        {
            "type": "line",
            "label": "Conversion rate (%)",
            "data": [3.2, 2.8, 3.9, 3.4, 4.1, 3.8],
            "yAxisID": "y2",
            "borderColor": "secondary",
            "backgroundColor": "transparent",
            "pointRadius": 4,
            "borderWidth": 2
        }
    ]
}' options='{
    "scales": {
        "y":  { "position": "left",  "title": { "display": true, "text": "Units" } },
        "y2": { "position": "right", "grid": { "display": false }, "title": { "display": true, "text": "Rate (%)" } }
    }
}' />

API Reference

Property	Type	Default	Required	Description
class	string	-	No	Additional CSS classes applied to the chart wrapper div
height	string	`300`	No	Canvas height in pixels
legend	top bottom left right none	`top`	No	Legend position; use 'none' to hide the legend
data	string	`{}`	No	JSON string — Chart.js data object with labels and datasets
options	string	`{}`	No	JSON string — Chart.js options object merged on top of labb defaults

Slot Name	Description
default	Not used — chart is rendered via the data prop