Chart
ChartBubble
Bubble chart with x/y/size accessors and domain-line control.
ChartBubble
Bubble (scatter) chart where circle size encodes a third variable. X, Y, and size values are resolved via accessor functions rather than derived from category keys. Forwards unknown attributes to the underlying primitive via v-bind="$attrs".
Components
<XAChartBubble />
Bubble (scatter) chart where circle size encodes a third variable. X, Y, and size are resolved via accessor functions.
<XAChartBubble
:data="campaignData"
:categories="{ campaign: { name: 'Campaign', color: '#6366f1' } }"
category-key="type"
:x-accessor="(d) => d.reach"
:y-accessor="(d) => d.conversions"
:size-accessor="(d) => d.budget"
x-label="Reach"
y-label="Conversions"
:size-range="[5, 30]"
/>
Props
| Prop | Type | Default | Description |
|---|---|---|---|
data | any[] | — | Required. Chart data array. |
categories | Record<string, { name: string; color: string }> | — | Required. Series definitions. |
categoryKey | string | — | Required. Data field used to map points to a category. |
height | number | 300 | Chart height in px. |
xAccessor | (d: any) => number | — | Extracts the X value from a data point. |
yAccessor | (d: any) => number | — | Extracts the Y value from a data point. |
sizeAccessor | (d: any) => number | — | Extracts the bubble size value from a data point. |
xLabel | string | — | X-axis label. |
yLabel | string | — | Y-axis label. |
xFormatter | (tick: number, i?: number) => string | — | Custom X-axis tick formatter. |
yFormatter | (tick: number, i?: number) => string | — | Custom Y-axis tick formatter. |
legendPosition | LegendPosition | LegendPosition.BottomRight | Legend placement. |
hideLegend | boolean | false | Hide the legend. |
hideTooltip | boolean | false | Hide the hover tooltip. |
sizeRange | [number, number] | [5, 25] | Min and max bubble radius in px. |
opacity | number | — | Bubble fill opacity. |
xNumTicks | number | — | X-axis tick count. |
yNumTicks | number | — | Y-axis tick count. |
xGridLine | boolean | false | Show vertical grid lines. |
yGridLine | boolean | true | Show horizontal grid lines. |
hideXAxis | boolean | false | Hide the X axis. |
hideYAxis | boolean | false | Hide the Y axis. |
xDomainLine | boolean | false | Show the X domain line. |
yDomainLine | boolean | false | Show the Y domain line. |
AI Context
component: XAChartBubble
package: "@xenterprises/nuxt-x-app"
auto-import: true
prefix: XA
use-when: Visualizing three-variable relationships (x position, y position, and bubble size) — e.g., campaign reach vs conversions vs budget
patterns:
- categoryKey maps each data point to a category color via the categories record.
- xAccessor, yAccessor, and sizeAccessor are functions that extract numeric values from each data point.