Skip to main content
Scatter plots display individual data points on x and y axes, revealing correlations, distributions and outliers.

​
When to use

  • Correlation analysis - Identify relationships between two variables
  • Distribution patterns - See how data is spread across ranges
  • Outlier detection - Spot unusual data points
  • Large datasets - Display hundreds or thousands of points

​
Basic example

const config: GraphConfig = {
  type: 'scatter',
  data: {
    columns: [
      { key: 'hours_studied', label: 'Hours studied' },
      { key: 'exam_score', label: 'Exam score' }
    ],
    rows: [
      { hours_studied: 2, exam_score: 55 },
      { hours_studied: 3, exam_score: 62 },
      { hours_studied: 4, exam_score: 68 },
      { hours_studied: 5, exam_score: 74 },
      { hours_studied: 6, exam_score: 80 },
      { hours_studied: 7, exam_score: 85 },
      { hours_studied: 8, exam_score: 90 }
    ]
  }
};

​
Multiple series

Compare correlations across different groups: 
const config: GraphConfig = {
  type: 'scatter',
  data: {
    columns: [
      { key: 'age', label: 'Age' },
      { key: 'income_male', label: 'Male income' },
      { key: 'income_female', label: 'Female income' }
    ],
    rows: [
      { age: 25, income_male: 35000, income_female: 33000 },
      { age: 30, income_male: 45000, income_female: 43000 },
      { age: 35, income_male: 55000, income_female: 54000 }
      // ... more data points
    ]
  }
};

​
Options

​
options.pointSize
number | 'auto'
default:"auto"
Point size in pixels. Set to 'auto' to automatically determine appropriate size.

​
Custom point size

const config: GraphConfig = {
  type: 'scatter',
  options: {
    pointSize: 8  // 8px diameter points
  },
  data: { /* ... */ }
};

​
Trendlines

Add a trendline to show the overall correlation: 
const config: GraphConfig = {
  type: 'scatter',
  referenceLines: {
    trendline: 'linear'
  },
  data: { /* ... */ }
};