Django Radar Chart Component

Player stats, survey results, feature comparisons: a radar chart plots several variables on radial axes so you can read a whole profile as one shape. Each dataset overlays as its own polygon, which makes two profiles easy to compare and five of them hard.

Basic Radar Chart

Preview

Code

<c-lb.chart.radar data='{
    "labels": ["Speed", "Reliability", "Comfort", "Safety", "Efficiency"],
    "datasets": [
        { "label": "Model A", "data": [85, 72, 90, 88, 76] },
        { "label": "Model B", "data": [70, 88, 65, 92, 84] }
    ]
}' />

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': ['Speed', 'Reliability', 'Comfort', 'Safety', 'Efficiency'],
        'datasets': [
            {'label': 'Model A', 'data': [85, 72, 90, 88, 76]},
            {'label': 'Model B', 'data': [70, 88, 65, 92, 84]},
        ],
    }
}" />

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

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