Django Pie Chart Component

A pie chart splits a total into segments of a circle, and it reads best with a handful of categories rather than a dozen. Segment colours come from the daisyUI palette by default and can be overridden per dataset. For the hollow-centre version, see c-lb.chart.doughnut.

Basic Pie Chart

Preview

Code

<c-lb.chart.pie data='{
    "labels": ["Direct", "Organic", "Referral", "Social", "Email"],
    "datasets": [
        { "data": [35, 28, 18, 12, 7] }
    ]
}' />

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': ['Direct', 'Organic', 'Referral', 'Social', 'Email'],
        'datasets': [{'data': [35, 28, 18, 12, 7]}],
    }
}" />

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

    <c-lb.chart.pie 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