Scatter Plot

A versatile scatter plot and bubble chart component for visualizing relationships between variables. Supports multi-series, trend lines, and dynamic bubble sizing.

Scatter & Bubble

Multi-Series Support

Trend Lines

Dynamic Sizing

Interactive Tooltips

Custom Domains

Responsive

TypeScript

Basic Scatter Plot

A simple scatter plot showing the relationship between years of experience and salary

Selected: Click a point to select

Animations

Trend Line

Grid

Installation

Get started with the ScatterPlot component in just a few steps.

Quick Install

bash

npx mario-charts@latest add scatter-plot

Zero Lock-in Philosophy

The component is fully yours to own, modify, and customize.

Examples

Explore different configurations and use cases for the ScatterPlot component.

Multiple Series by Department

Group data points by category with automatic coloring and legend

Show Legend

Bubble Chart - World Countries

Visualize three dimensions: GDP per capita (X), life expectancy (Y), and population (size)

With Trend Line

Linear regression trend line showing correlation between study hours and test scores

Chart States

Built-in states for loading, error, and empty data scenarios.

Loading State

Error State

Chart Error

Failed to load chart data. Please try again.

Empty State

No Data

There's no data to display

API Reference

Complete list of props available for the ScatterPlot component.

Prop	Type	Default	Description
`data`required	readonly T[]	—	Array of data objects to display as scatter points
`x`required	keyof T	—	Key from data object to use for x-axis values (numeric)
`y`required	keyof T	—	Key from data object to use for y-axis values (numeric)
`series`	keyof T	—	Key to group data into colored series (categorical)
`size`	keyof T \| number	6	Bubble size: data key for dynamic sizing or fixed number for uniform size
`sizeRange`	[number, number]	[4, 40]	Min and max radius for bubble sizing when using data-driven size
`colors`	readonly string[]	DEFAULT_COLORS	Array of colors to use for series (cycles through for multiple series)
`showTrendLine`	boolean	false	Display a linear regression trend line for each series
`trendLineColor`	string	—	Custom color for trend line (defaults to series color)
`showLegend`	boolean	false	Show legend for multi-series charts
`showGrid`	boolean	false	Show background grid lines
`gridStyle`	'solid' \| 'dashed' \| 'dotted'	'dashed'	Style of grid lines
`xDomain`	[number, number]	—	Custom domain for x-axis [min, max]
`yDomain`	[number, number]	—	Custom domain for y-axis [min, max]
`height`	number	300	Height of the chart in pixels
`loading`	boolean	false	Show loading state with animated skeleton
`error`	string \| null	null	Error message to display
`animation`	boolean	true	Enable point entrance animations
`onPointClick`	(data: T, index: number, series?: string) => void	—	Callback fired when a point is clicked
`className`	string	—	Additional CSS classes to apply to the container