1. Components
  2. scatter

Scatter

Scatter plots to show how two measures relate.

Simple

When the index column is numeric, it becomes a value axis: each row is a point, index on x, the series on y.

Ad spend against sign-ups
Spend Sign-ups
250 88
500 56
750 47
1000 122
1250 152
1500 110
1750 131
2000 208
2250 208
2500 172
2750 222
3000 286
3250 260
3500 243
3750 314
4000 353
4250 313
4500 325
4750 403
5000 411
5250 372
5500 414
5750 483
6000 464 
@php
    // A numeric index gives the chart a real value axis.
    $campaigns = collect(range(1, 24))->map(fn (int $i) => [
        'spend' => $i * 250,
        'signups' => (int) round($i * 18 + 40 * sin($i * 1.7) + 30),
    ])->all();
@endphp

<x-ui.echart type="scatter" :data="$campaigns" index="spend" label="Ad spend against sign-ups" class="h-72 w-full"
    :config="['signups' => ['label' => 'Sign-ups']]" />

Several groups

Each series is a group of points with its own color.

Components installed by sessions, per plan
Sessions Free accounts Pro accounts
3 6 17
6 8 9
9 4 13
12 0 27
15 0 34
18 6 28
21 12 22
24 16 28
27 13 41
30 9 46
33 7 39
36 11 34
39 18 42
42 23 56
45 22 58
48 17 50
51 15 47
54 17 57
57 24 70
60 29 70
63 30 62
66 26 61
69 23 72
72 23 83
75 29 81
78 36 73
81 38 74
84 35 87
87 31 96
90 30 92 
@php
    $users = collect(range(1, 30))->map(fn (int $i) => [
        'sessions' => $i * 3,
        'free' => (int) round($i * 1.2 + 6 * sin($i)),
        'pro' => (int) round($i * 2.6 + 9 * cos($i * 1.3) + 12),
    ])->all();
@endphp

<x-ui.echart type="scatter" :data="$users" index="sessions" label="Components installed by sessions, per plan" class="h-80 w-full" :config="[
    'free' => ['label' => 'Free accounts'],
    'pro' => ['label' => 'Pro accounts'],
]" />

See Chart for installation and every prop.

Prev
Radar

Radar charts to comp...

Next
On this page