Django Polar Area Chart Component

A polar area chart gives every segment the same angle and varies the radius instead, so magnitude reads as distance from the centre. That suits cyclic data such as monthly distributions, or category scores you want to compare at a glance.

Basic Polar Area Chart

Preview

Code

<c-lb.chart.polar-area data='{
    "labels": ["Design", "Development", "Testing", "Deployment", "Support"],
    "datasets": [
        { "data": [40, 75, 60, 25, 55] }
    ]
}' />

Solid Slices, No Border

Preview

Code

<c-lb.chart.polar-area data='{
    "labels": ["Design", "Development", "Testing", "Deployment", "Support"],
    "datasets": [
        {
            "data": [40, 75, 60, 25, 55],
            "backgroundColor": ["primary", "secondary", "accent", "info", "success"],
            "borderWidth": 0
        }
    ]
}' />

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': ['Design', 'Development', 'Testing', 'Deployment', 'Support'],
        'datasets': [{'data': [40, 75, 60, 25, 55]}],
    }
}" />

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

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