Scatter Chart

A scatter chart for exploring correlation between two numeric variables.

Hours vs. Productivity

Self-reported productivity score by hours worked

Usage in Gaia

Used to show relationships between two metrics — where a trend line would lie, or whether two variables move together — in AI-generated exploratory analyses.

Features

Two Numeric Axes - X and Y both driven by data keys
Single-Series Layout - Optimized for one cluster of points
Theme-Aware - Built on the shadcn chart primitive
Tooltip - Hover tooltip with both axis values per point
Auto-Width - Card width scales to point count
Optional Label Key - Reserved for callout labels on points

Installation

npx shadcn@latest add https://ui.heygaia.io/r/scatter-chart.json

Usage

import { ScatterChart } from "@/components/ui/scatter-chart";
 
const data = [
  { hours: 1, productivity: 22 },
  { hours: 2, productivity: 35 },
  { hours: 3, productivity: 48 },
];
 
export default function Example() {
  return (
    <ScatterChart
      data={data}
      xKey="hours"
      yKey="productivity"
      title="Hours vs. Productivity"
    />
  );
}

Props

ScatterChart

Prop	Type	Default	Description
data	Array<Record<string, string \| number>>	-	Chart data rows
xKey	string	-	Key for the X axis
yKey	string	-	Key for the Y axis
title	string	-	Card title
description	string	-	Card description
footer	string	-	Optional footer text
labelKey	string	-	Optional key used for point labels

Raised Button Search Results Tabs

On This Page

Meet GAIA

Your open-source, proactive personal AI assistant with 200+ integrations. GAIA combines todos, goals, calendar, and email into one system, turns tasks into automated workflows, and completes work instead of just tracking it. Open-source and self-hostable with support for custom automations and multi-step workflows.