Zentauri UI
Charts

Scatter charts for correlation analysis

Plot one or more numeric Y series against a shared X field. ScatterChart fills the gap between simple trends and bubble charts when point size is not needed.

Appearance: glass | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Stroke: #ff0000 | Fill: #000000 | Label Color: white

Examples

Compare framing, density, legend, and stacking with the code tab.

Appearance: outline | Density: compact | Show Grid: true | Show Legend: true | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: muted | Density: spacious | Show Grid: false | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: muted | Density: spacious | Show Grid: false | Show Legend: false | Show Tooltip: true | Stacked: false | Stroke Dasharray: 5,5 | Outer Radius: 100% | Label Color: white

Chart frame variants

Each row pairs live output with JSX; the Variant line states the appearance token on the frame.

Appearance: default | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: muted | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: outline | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: glass | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: sky | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: emerald | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: violet | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: amber | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: rose | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: slate | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gray | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: indigo | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-cyan-violet | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-emerald-violet | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-amber-rose | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-slate-gray | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-indigo-purple | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-cyan-blue | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-emerald-blue | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: gradient-amber-blue | Density: comfortable | Show Grid: true | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

Appearance: default | Density: comfortable | Show Grid: false | Show Legend: false | Show Tooltip: true | Stacked: false | Outer Radius: 100% | Label Color: white

What it does

Renders points for each series with shared axes, grid, tooltip, and legend controls.

Use appearance and density variants to match surrounding dashboards.

Data shape

`xKey` names the horizontal field; each `series.dataKey` names a numeric vertical measure.

Common use cases

  • Traffic versus conversion rate.
  • Latency versus request volume.
  • Quality score versus adoption rate.

Accessibility

Use clear series names and avoid relying on dense point clusters alone.

Consider a table or summary for outliers and exact values.

Next.js integration notes

Import from `@zentauri-ui/zentauri-components/charts/scatter` inside client components when interaction is required.

FAQ

How is ScatterChart different from BubbleChart?

ScatterChart plots X and Y values only. BubbleChart adds an optional `zKey` channel for point size.

Can the X axis be categorical?

Yes. If the first `xKey` value is not numeric, the chart renders a category X axis.