Scatter / Bubble Chart ^0.1.18

Plot discrete points in a 2D plane. Pass r on each point to turn it into a bubble — useful for showing a third dimension like population or revenue.

Basic scatter

<VxScatterChart :data="[{ x: 12, y: 34 }, { x: 48, y: 21 }, ...]" />

Multiple series

Group A

Group B

Group C

<VxScatterChart :data="[
  { name: 'Group A', data: [...] },
  { name: 'Group B', data: [...] },
  { name: 'Group C', data: [...] },
]" />

Bubble chart

Third dimension via the r property on each point.

<VxScatterChart
  :data="[{ name: 'Countries', data: [
    { x: 70.2, y: 79, r: 332, label: 'USA' },
    { x: 12.5, y: 78, r: 1420, label: 'China' },
    ...
  ]}]"
  xLabel="GDP per capita"
  yLabel="Life expectancy"
/>

With axis titles

Male

Female

<VxScatterChart :data="data" xLabel="Height (cm)" yLabel="Weight (kg)" />

Reference lines

Highlight target zones or thresholds on either axis.

<VxScatterChart
  :data="data"
  :references="[
    { axis: 'y', value: 6, label: 'Target score', color: '#22c55e' },
    { axis: 'x', value: 100, label: 'Budget',     color: '#ef4444' },
  ]"
/>

Solid dots (no stroke)

Group A

Group B

Group C

<VxScatterChart :data="data" :stroke="false" :fillOpacity="0.85" />

Starfield (bubbles)

<VxScatterChart
  :data="stars"
  :minBubbleRadius="1"
  :maxBubbleRadius="10"
  :fillOpacity="0.5"
/>

Custom colors

Group A

Group B

Group C

<VxScatterChart :data="data" :colors="['#ef4444', '#22c55e', '#6366f1']" />

Props

Prop	Type	Default	Description
data	ScatterPoint[] | ScatterChartSeries[]	[]	Points or series
height	number	320	SVG height
xLabel / yLabel	string	''	Axis titles
colors	string[]	[]	Palette override
dotRadius	number	5	Scatter dot radius
minBubbleRadius	number	4	Min bubble radius
maxBubbleRadius	number	28	Max bubble radius
fillOpacity	number	0.65	Dot fill opacity
stroke	boolean	true	Draw outline on dots
grid	boolean	true	Show grid
axis	boolean	true	Show axis values
legend	boolean	true	Show legend
tooltip	boolean	true	Show hover tooltip
animate	boolean	true	Fade / scale in
xTicks / yTicks	number	6/5	Axis tick count
xMin/xMax/yMin/yMax	number	auto	Force axis bounds
references	ScatterChartReference[]	[]	Horizontal / vertical guides

Events

Event	Payload
hover	{ seriesIndex, pointIndex, point }
click	{ seriesIndex, pointIndex, point }