Overview
ScatterPlot displays data points on X/Y axes to show relationships and correlations. Supports optional trend lines, correlation coefficients, and grouped data. Built on Recharts.
Features
- X/Y data point visualization
- Optional trend line with linear regression
- Correlation coefficient display
- Grouped/colored data series
- Point labels and tooltips
- Click handler for interactive analysis
Examples
Effort vs Impact
Feature prioritization matrix
With Trend Line and Correlation
Study hours vs test scores
Correlation coefficient: r = 0.995
Grouped Data
Multiple teams or categories
With ChartCard
Wrapped in ChartCard
Feature Analysis
Effort vs Impact assessment
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
data | ScatterDataPoint[] | required | Array with x, y, optional label/size/color/group |
xAxisLabel | string | - | X-axis label |
yAxisLabel | string | - | Y-axis label |
showTrendLine | boolean | false | Show linear regression trend line |
showCorrelation | boolean | false | Show correlation coefficient (r) |
onPointClick | (point) => void | - | Click handler for data points |
Usage
import { ScatterPlot, ChartCard } from '@/ui/components/charts';
// Basic scatter plot
<ChartCard title="Effort vs Impact">
<ScatterPlot
data={[
{ x: 10, y: 25, label: 'Feature A' },
{ x: 25, y: 50, label: 'Feature B' },
{ x: 40, y: 35, label: 'Feature C' },
]}
xAxisLabel="Effort"
yAxisLabel="Impact"
/>
</ChartCard>
// With trend line and correlation
<ScatterPlot
data={[...]}
xAxisLabel="Hours Studied"
yAxisLabel="Test Score"
showTrendLine
showCorrelation
/>
// Grouped data
<ScatterPlot
data={[
{ x: 10, y: 25, group: 'Team A' },
{ x: 15, y: 30, group: 'Team A' },
{ x: 20, y: 45, group: 'Team B' },
{ x: 25, y: 50, group: 'Team B' },
]}
/>