---
title: Scatter + Bubble
description: Two-axis correlation, three-axis bubble, and datetime-axis variants.
visibility: guest
draft: false
related:
  - /components/charts-apex
  - /components/charts-chartjs/scatter-bubble
---

# 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

:::preview{title="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.

:::preview{title="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

```blade
<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](/components/chart#license-apexcharts-only) and [apexcharts.com/license](https://apexcharts.com/license/) for the full terms.

## See Also

- [Bubble visualization in Chart.js](../charts-chartjs/scatter-bubble.md)
- [Heatmap](./heatmap.md) for grid-based correlation views

## Design Tokens

See [ApexCharts adapter — Design Tokens](/components/charts-apex#design-tokens) for the color, typography, and grid tokens shared across every ApexCharts demo.