Skip to main content
WireKit
Copy for LLM

Scatter + Bubble

Scatter charts plot pairs of numeric values to expose correlation. Bubble charts add a third axis (radius) for "X vs Y vs Magnitude" visualizations.

Basic Example — LTV vs CAC scatter

Customer LTV vs CAC by cohort (€) 
<x-wirekit-chart
    library="apexcharts"
    type="scatter"
    :labels="[]"
    :datasets="[[
        'label' => 'Cohort sample',
        'data' => [
            ['x' => 80,  'y' => 240],
            ['x' => 120, 'y' => 480],
            ['x' => 95,  'y' => 360],
            ['x' => 140, 'y' => 510],
            ['x' => 200, 'y' => 720],
            ['x' => 165, 'y' => 580],
            ['x' => 230, 'y' => 880],
        ],
    ]]"
    :options="['yaxis' => ['max' => 1100]]"
    aria-label="Customer LTV vs CAC scatter"
/>

Bubble — query-plan analysis

The highest data point sits at roughly 60% of the y-axis on purpose so the tooltip — which ApexCharts anchors above the bubble center — has room to render fully inside the preview frame instead of clipping at the top edge. Real apps that span a full viewport height don't need this margin.

Query plan: duration × rows × index hit % 
<x-wirekit-chart
    library="apexcharts"
    type="bubble"
    :labels="[]"
    :datasets="[[
        'label' => 'Sampled queries',
        'data' => [
            ['x' => 12,  'y' => 1450,  'z' => 8],
            ['x' => 8,   'y' => 320,   'z' => 4],
            ['x' => 240, 'y' => 58000, 'z' => 22],
            ['x' => 56,  'y' => 12000, 'z' => 12],
            ['x' => 98,  'y' => 24000, 'z' => 14],
        ],
    ]]"
    :options="['yaxis' => ['max' => 100000]]"
    aria-label="Query duration vs rows examined vs index hit rate"
/>

In ApexCharts, bubble data uses a z field for the third dimension (radius). Chart.js uses r instead. The adapter passes through whichever shape the developer provides.

Datetime scatter

<x-wirekit-chart
    type="scatter"
    :labels="[]"
    :datasets="[[
        'label' => 'Anomaly events',
        'data' => [
            ['x' => '2024-04-01 09:15', 'y' => 1.4],
            ['x' => '2024-04-01 11:42', 'y' => 2.8],
            ['x' => '2024-04-02 03:01', 'y' => 4.1],
            ['x' => '2024-04-02 17:23', 'y' => 1.8],
        ],
    ]]"
    :options="['xaxis' => ['type' => 'datetime'], 'tooltip' => ['x' => ['format' => 'MMM dd, yyyy HH:mm']]]"
    height="280px"
/>

xaxis.type: 'datetime' parses ISO date strings on the x-axis — useful for irregular event-stream visualizations where data points don't fall on a regular grid.

License note

ApexCharts is non-MIT — see the License section on the Chart overview page and apexcharts.com/license for the full terms.

See Also

Design Tokens

See ApexCharts adapter — Design Tokens for the color, typography, and grid tokens shared across every ApexCharts demo.

Was this page helpful?

Thank you for your feedback!

Voting requires cookies or local storage. What we store