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.