||

Scatter Chart

Documentation Index

Fetch the complete documentation index at: /llms.txt. Use this file to discover all available pages before exploring further.

Beautiful scatter charts for exploring correlations between two variables

apidocgithub
Basic Chart

Installation
npx shadcn@latest add @evilcharts/scatter-chart

Usage

The scatter chart is composible. <EvilScatterChart> is the container, and you compose only the parts you need — <Grid>, <XAxis>, <YAxis>, <Legend>, <Tooltip>, and one or more <Scatter> — as its children. Each <Scatter> carries its own data array of { x, y } points and can be styled independently with isGlowing and isClickable.

import {
  EvilScatterChart,
  Scatter,
  XAxis,
  YAxis,
  Grid,
  Tooltip,
  Legend,
  Dot,
  ActiveDot,
} from "@/components/evilcharts/charts/scatter-chart";
<EvilScatterChart config={chartConfig}>
  <Grid />
  <XAxis dataKey="x" />
  <YAxis dataKey="y" />
  <Legend isClickable />
  <Tooltip />
  <Scatter dataKey="desktop" data={desktopData} isClickable>
    <Dot variant="border" />
    <ActiveDot variant="colored-border" />
  </Scatter>
  <Scatter dataKey="mobile" data={mobileData} isClickable>
    <Dot variant="border" />
    <ActiveDot variant="colored-border" />
  </Scatter>
</EvilScatterChart>

Interactive Selection

Add isClickable to any <Scatter> (and to <Legend>) to make those series selectable. Use the onSelectionChange callback on <EvilScatterChart> to handle selection events:

<EvilScatterChart
  config={chartConfig}
  onSelectionChange={(selectedDataKey) => {
    if (selectedDataKey) {
      console.log("Selected:", selectedDataKey);
    } else {
      console.log("Deselected");
    }
  }}
>
  <XAxis dataKey="x" />
  <YAxis dataKey="y" />
  <Legend isClickable />
  <Tooltip />
  <Scatter dataKey="desktop" data={desktopData} isClickable />
  <Scatter dataKey="mobile" data={mobileData} isClickable />
</EvilScatterChart>

Loading State

isLoading='true'

Examples

Gradient Colors

gradient colors

Glowing Points

glowing

API Reference

The chart is composed of several parts. The props below are grouped by the component they belong to.

EvilScatterChart

The root container. It owns the shared selection state and the loading skeleton. Everything visual is composed as its children.

PropTypeDefaultDescription
config*Record<string, ChartConfig[string]>–

Configuration object that defines the chart's series. Each key should match a <Scatter dataKey="…" />, with a corresponding color or color array.

children*ReactNode–

The composed chart parts — <Grid />, <XAxis />, <YAxis />, <Legend />, <Tooltip />, and one or more <Scatter />.

classNamestring–

Additional CSS classes to apply to the chart container.

defaultSelectedDataKeystring | nullnull

The data key that should be selected by default.

onSelectionChange(selectedDataKey: string | null) => void–

Callback fired when a series is selected or deselected — by clicking a clickable <Scatter /> or <Legend /> entry.

isLoadingbooleanfalse

Shows a loading skeleton animation when data is being fetched.

loadingPointsnumber12

Number of points to display in the loading skeleton.

backgroundVariantBackgroundVariant–

Optional background pattern drawn behind the chart.

chartPropsComponentProps<typeof ScatterChart>–

Additional props forwarded to the underlying Recharts ScatterChart component. Read the Recharts ScatterChart documentation for available props.

Scatter

A single scatter series. Each <Scatter /> is self-contained with its own point data and style definitions.

PropTypeDefaultDescription
dataKey*string–

The series key. Must exist in the chart config.

data*TPoint[]–

Array of point objects. Each point should include the keys referenced by <XAxis dataKey="…" /> and <YAxis dataKey="…" /> — typically { x, y }.

isClickablebooleanfalse

Lets this series be selected by clicking it. When any series is selected, unselected series become semi-transparent.

isGlowingbooleanfalse

Applies a soft outer glow to this series' points.

childrenReactNode–

Optional <Dot /> and <ActiveDot /> composition that styles point markers.

scatterPropsComponentProps<typeof Scatter>–

Escape hatch for raw props forwarded to the underlying Recharts Scatter component.

Dot and ActiveDot

Point markers composed inside a <Scatter />. <Dot /> is the resting marker; <ActiveDot /> is the hovered marker.

PropTypeDefaultDescription
variantdefault|border|colored-border–

The visual style of the point marker.

XAxis and YAxis

The value axes. Both default to type="number" and forward every Recharts axis prop. They are hidden automatically while the chart is loading.

PropTypeDefaultDescription
dataKeystring–

The data key for the axis values — typically "x" or "y".

…axisProps––

Every other Recharts XAxis / YAxis prop is forwarded as-is. Read the Recharts XAxis and Recharts YAxis documentation for available props.

Grid

The background grid lines. Defaults to horizontal-only dashed lines and forwards every Recharts CartesianGrid prop.

PropTypeDefaultDescription
…gridProps––

Every Recharts CartesianGrid prop is forwarded as-is. Read the Recharts CartesianGrid documentation for available props.

Tooltip

The hover tooltip. It reads the chart's selection state so its content dims unselected series.

PropTypeDefaultDescription
variantdefault|frosted-glass"default"

The visual style of the tooltip surface.

roundnesssm|md|lg|xl"lg"

Controls the border-radius of the tooltip.

defaultIndexnumber–

When set, the tooltip is visible by default at the specified data point index.

cursorbooleantrue

Whether the crosshair cursor follows the pointer on hover.

Legend

The series legend. When the chart is clickable, each entry toggles selection of its series.

PropTypeDefaultDescription
variantsquare|circle|circle-outline|rounded-square|rounded-square-outline|vertical-bar|horizontal-bar–

The visual style of the legend indicators.

alignleft|center|right"right"

Horizontal placement of the legend.

verticalAligntop|middle|bottom"top"

Vertical placement of the legend.

isClickablebooleanfalse

Lets each legend entry toggle selection of its series.

Did you like the content?