> ## Documentation Index
> Fetch the complete documentation index at: https://docs.graphy.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Scatter

export const GraphPreview = ({config, aspectRatio = '10 / 6'}) => {
  const getThemeId = () => {
    return document.documentElement.classList.contains('dark') ? 'dark' : 'light';
  };
  const [themeId, setThemeId] = useState(getThemeId);
  const [isLoaded, setIsLoaded] = useState(false);
  config.appearance = {
    ...config.appearance,
    border: {
      style: 'none',
      color: 'transparent',
      width: 0
    },
    hasRoundedBorders: false
  };
  const baseUrl = window.location.hostname === 'localhost' ? 'https://app.graphy.top:8080' : 'https://visualize.graphy.app';
  const url = new URL('view/graph', baseUrl);
  url.searchParams.set('config', JSON.stringify(config));
  url.searchParams.set('themeId', themeId);
  useEffect(() => {
    const observer = new MutationObserver(function (mutations) {
      setThemeId(getThemeId());
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeOldValue: true,
      attributeFilter: ['class']
    });
    return () => observer.disconnect();
  }, []);
  return <div className="graph-preview" style={{
    aspectRatio,
    opacity: isLoaded ? 1 : 0
  }}>
      <iframe src={url.toString()} loading="lazy" onLoad={() => setIsLoaded(true)} allowfullscreen="true" />
    </div>;
};

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

<GraphPreview
  config={{
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 },
  ],
},
}}
/>

```tsx theme={null}
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:

```tsx theme={null}
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

<ParamField path="options.pointSize" type="number | 'auto'" default="auto">
  Point size in pixels. Set to `'auto'` to automatically determine appropriate size.
</ParamField>

### Custom point size

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

## Trendlines

Add a trendline to show the overall correlation:

```tsx theme={null}
const config: GraphConfig = {
  type: 'scatter',
  referenceLines: {
    trendline: 'linear',
  },
  data: {
    /* ... */
  },
};
```

## Related

* [Bubble](/sdk/graph-types/bubble) - Scatter plot with sized points
* [Reference lines](/sdk/config/reference-lines) - Add trendlines
* [Type options](/sdk/config/type-options) - Scatter plot options