Django Doughnut Chart Component

The hollow centre is the reason to pick a doughnut over a pie: it gives you somewhere to put the total or a label while the ring carries the part-to-whole split. Segment colours default to the daisyUI palette, and you can override them per dataset with any CSS colour or a semantic daisyUI name.

Basic Doughnut Chart

Preview

Code

<c-lb.chart.doughnut legend="right" data='{
    "labels": ["Completed", "In Progress", "Pending", "Cancelled"],
    "datasets": [
        { "data": [62, 18, 14, 6] }
    ]
}' />

Reactive

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': ['Completed', 'In Progress', 'Pending', 'Cancelled'],
        'datasets': [{'data': [62, 18, 14, 6]}],
    }
}" />

<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, 5, 65)"
        >
            Randomize
        </c-lb.button>
    </div>

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

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