ScatterPlot

Every example on this page is live, drawn by the library's Storybook, where you can also change its props and see the result.

A scatter plot with optional X/Y axes and labels. Points are rendered as filled circles, each axis spanning its points from the lowest value to the highest. A visible axis is ticked at round values that fit its length, so every label sits at the value it names. The plot stretches to fill its box while the dots and labels keep their size.

Import

import { ScatterPlot } from "~lib/charts/scatter-plot";

Props

Name	Type	Required	Default	Description
`data`	`{ x: number; y: number }[]`	Yes	N/A	Data points
`axis`	`{ x?: { name?: string; visible?: boolean }; y?: { name?: string; visible?: boolean } }`	No	N/A	Axis configuration (labels and visibility)
`width`	`number \| string`	No	`300`	Chart width
`height`	`number \| string`	No	`300`	Chart height

Examples

Import​

Props​

Examples​

Simple​

With Axes​

Negative Coordinates​

Large Dataset​

See Also​

Import

Props

Examples

Simple

With Axes

Negative Coordinates

Large Dataset

See Also