ScatterChart

Scatter plot: one dot per observation on two numeric axes, several series, an optional least-squares trend line per series and quadrant annotations.

Import

import { ScatterChart } from "@jcsoftdev/ui/charts";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/charts/scatter-chart.

Usage

<ScatterChart
  title="Duración del servicio vs. ticket"
  series={[
      { id: "corte", name: "Corte", points: visits(401, 60, 10, 0.75) },
      { id: "combo", name: "Corte + barba", points: visits(402, 45, 22, 0.9) },
    ]}
  xFormat={minutes}
  yFormat="currency"
  xAxis={{ title: "Duración (min)" }}
  yAxis={{ title: "Ticket (S/)" }}
  trendLine={false}
  radius={5}
  height={340}
  grid
  tooltip
  loading={false}
  animate
  labels={spanishLabels}
/>

Props

Prop	Type	Default	Description
legend	boolean | "top" | "bottom"
title *	string
animate	boolean
className	string
grid	boolean
tooltip	boolean
series *	readonly XYSeries[]
height	number | "fill"
aspectRatio	number		Width / height ratio; sizes the drawing from the container width when height is not “fill”.
xFormat	ValueFormat
yAxis	DistributionAxisOptions
brush	XYBrush		Rectangular brush over the plot (pointer drag plus keyboard).
loading	boolean
labels	Partial<DistributionLabels>
radius	number		Point radius when there are no sizes (pixels).
yFormat	ValueFormat
xAxis	DistributionAxisOptions
trendLine	boolean		Least-squares line per series, drawn over its x range.
quadrants	QuadrantOptions
xType	"time" | "linear"		“time”: x is epoch milliseconds and the axis shows calendar ticks.
jitter	number | { x?: number; y?: number; }		Deterministic displacement in pixels that separates overlapping points (a number applies to both axes). Tooltips still show the true values.
seed	number		Seed of the jitter, so points are stable between renders.
renderer	"canvas" | "svg"		“canvas” paints the marks on a canvas for tens of thousands of points; axes, tooltip and keyboard stay SVG/HTML. Falls back to SVG when points carry images or shading is “shaded”.
showLabels	boolean		Text labels next to (or inside) the points that have a label.

* marks a required prop.

Storybook stories

• Default
• With Trend Lines
• Quadrants
• Datetime
• Jitter
• With Images
• Canvas 50 K
• Narrow
• Loading
• Empty

Source

packages/ui/src/charts/scatter-chart/scatter-chart.tsx