Charts

Eight chart types, from a plain bar chart to radar and bubble. Each one takes a JSON string from your view and renders through Chart.js in DaisyUI's colours, so a dashboard chart matches the page around it without a separate frontend build.

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

Overview

labb wraps Chart.js with django-cotton components. Each chart type is a self-contained component that loads Chart.js, applies DaisyUI theming, and redraws automatically when the user switches theme.

Chart types

<c-lb.chart /> is optional. Use it when you want to set global defaults (grid lines, animations, font size, etc.) that apply to every chart on the page. Without it, charts render with labb's own defaults.

Setup

Drop any chart component into your template and pass a JSON data string:

<c-lb.chart.bar data='{
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [{"label": "Revenue", "data": [120, 190, 150]}]
}' />

To share global defaults across all charts on a page, place <c-lb.chart /> once in your base template:

<c-lb.chart grid animation="False" />


<c-lb.chart.bar data="..." />
<c-lb.chart.line data="..." />

Passing data from Django

Serialise your data with json.dumps in the view, then bind it with :data:

# views.py
import json

context["chart_data"] = json.dumps({
    "labels": ["Jan", "Feb", "Mar"],
    "datasets": [{"label": "Revenue", "data": [120, 190, 150]}],
})

<c-lb.chart.bar :data='chart_data' />

Colour system

Datasets without an explicit backgroundColor are automatically coloured from the DaisyUI palette, cycling through: primary, secondary, accent, info, success, warning, error.

You can use semantic DaisyUI colour names directly in your dataset JSON:

{
  "datasets": [
    { "label": "Revenue",  "backgroundColor": "primary" },
    { "label": "Expenses", "backgroundColor": "error", "borderColor": "error" }
  ]
}

Supported names: primary, secondary, accent, neutral, info, success, warning, error, plus -content variants (e.g. primary-content). CSS variable names (e.g. --color-primary) also work.

Charts automatically redraw when the user switches DaisyUI theme.

Dynamic data

For charts that update at runtime (live feeds, interactive dashboards, user-driven filters), bind the chart to a signal: declare the data on <c-lbr.signals> and pass it to the chart as data="$chartData". Mutating the signal redraws the chart in place, with no page reload, and labb's theming still applies automatically.

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

Overriding Chart.defaults

For anything beyond the props on c-lb.chart, set Chart.defaults directly in a <script> tag after <c-lb.chart />. Your overrides layer on top of labb's defaults and persist across theme changes.

<c-lb.chart />
<script>
    document.addEventListener('DOMContentLoaded', function () {
        Chart.defaults.plugins.tooltip.titleFont = { size: 13, weight: 'bold' };
        Chart.defaults.plugins.tooltip.bodyFont  = { size: 12 };
        Chart.defaults.scales.linear.grid.lineWidth = 0.5;
        Chart.defaults.elements.point.radius = 0;
        Chart.defaults.elements.point.hitRadius = 10;
    });
</script>

All available properties are documented in the Chart.js configuration reference.

API Reference

c-lb.chart