CleenUI · Charts · ScatterChart

ScatterChart

XY plot with configurable point sizing, grouping by series, and optional regression line.

storybook.cleenui.com · charts-scatterchart--default
Open in new window

About ScatterChart

ScatterChart plots two-variable correlations. Each point has an X and Y coordinate; optional Z dimension drives point size for three-variable visualizations. Multiple series can be overlaid with different colors.

A regression line (linear, polynomial, or logarithmic) can be drawn through the data to make trends visible. Hover tooltips show the underlying values for any point.

When to use it

  • Performance correlations (e.g. time-on-page vs. conversion).
  • Customer segmentation visualizations.
  • A/B test outcome scatter plots.
  • Quality vs. cost tradeoff analysis.

Common props

Prop
Type
Description
data
Point[]
Points with {x, y, z?, series?}.
regression
"linear" | "polynomial" | "logarithmic" | null
Regression line type.
sizeBy
string
Field to drive point size.
colorBy
string
Field to drive point color (for grouped series).
showAxes
boolean
Display axis labels and ticks.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

1
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.