Django Scatter Chart Component

Use a scatter chart when the shape of the cloud is the point: correlation, clustering, outliers. The dataset array holds one {x, y} object per point rather than a flat list of numbers.

Basic Scatter Chart

Preview

Code

<c-lb.chart.scatter data='{
    "datasets": [
        {
            "label": "Group A",
            "data": [
                {"x": 10, "y": 20}, {"x": 15, "y": 35}, {"x": 22, "y": 28},
                {"x": 30, "y": 45}, {"x": 38, "y": 30}, {"x": 45, "y": 52}
            ]
        },
        {
            "label": "Group B",
            "data": [
                {"x": 12, "y": 55}, {"x": 18, "y": 42}, {"x": 25, "y": 60},
                {"x": 33, "y": 38}, {"x": 40, "y": 65}, {"x": 48, "y": 48}
            ]
        }
    ]
}' />

Combo: Scatter + Trend Line

Add a type: "line" dataset with two endpoint {x, y} objects to overlay a trend line. Set pointRadius: 0 and borderDash to style it as a reference rather than a data series.

Preview

Code

<c-lb.chart.scatter data='{
    "datasets": [
        {
            "type": "scatter",
            "label": "Observations",
            "data": [
                {"x": 1,  "y": 2.1}, {"x": 2,  "y": 3.8}, {"x": 3,  "y": 5.2},
                {"x": 4,  "y": 4.9}, {"x": 5,  "y": 7.1}, {"x": 6,  "y": 6.8},
                {"x": 7,  "y": 8.4}, {"x": 8,  "y": 9.0}, {"x": 9,  "y": 10.3},
                {"x": 10, "y": 11.1}
            ]
        },
        {
            "type": "line",
            "label": "Trend",
            "data": [{"x": 1, "y": 1.9}, {"x": 10, "y": 11.2}],
            "borderColor": "secondary",
            "backgroundColor": "transparent",
            "borderDash": [6, 4],
            "pointRadius": 0,
            "borderWidth": 2
        }
    ]
}' />

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} 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