Django Bubble Chart Component

A bubble chart adds a third variable to a scatter plot by sizing each point. Every entry is a {x, y, r} object, where r stands in for volume, count, or weight.

Basic Bubble Chart

Preview

Code

<c-lb.chart.bubble data='{
    "datasets": [
        {
            "label": "Product A",
            "data": [
                {"x": 10, "y": 25, "r": 12},
                {"x": 25, "y": 40, "r": 18},
                {"x": 40, "y": 15, "r": 8},
                {"x": 55, "y": 50, "r": 20}
            ]
        },
        {
            "label": "Product B",
            "data": [
                {"x": 15, "y": 55, "r": 10},
                {"x": 30, "y": 20, "r": 15},
                {"x": 45, "y": 35, "r": 22},
                {"x": 60, "y": 45, "r": 9}
            ]
        }
    ]
}' />

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 datasets containing {x, y, r} point objects. No labels array needed.
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