# Connected scatter

A connected scatterplot of monthly CAC against LTV where the path draws itself in, a scrubber moves a head along the curve, and a channel switch morphs the path against a shaded 3x target line.

- ID: `connected-scatter`
- Import: `animui/connected-scatter`
- Category: block
- Runtime exports: `ConnectedScatter`
- Declaration: `types/pro/connected-scatter.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: metric-explorer, segmented-control, line-chart

```tsx
import { ConnectedScatter } from 'animui/connected-scatter';
```

This import example is not a complete render recipe: read the declaration below and its local references for required props, data, callbacks and provider context. Use `animui info connected-scatter` to resolve the local declaration graph. Global setup is in `llms.txt`.

```ts
/** Reconstructed from saved Arc documentation and runtime binding evidence; original TypeScript source was unavailable. */
import type { ComponentType, ReactNode, CSSProperties, Ref, ButtonHTMLAttributes, HTMLAttributes, ReactElement } from 'react';

export interface ConnectedScatterProps {
  series?: string | number | boolean | ReactNode;
  defaultSeries?: string | number | boolean | ReactNode;
  xAxis?: string | number | boolean | ReactNode;
  yAxis?: string | number | boolean | ReactNode;
  targetRatio?: string | number | boolean | ReactNode;
  formatValue?: string | number | boolean | ReactNode;
  title?: string;
  description?: string;
  onMonthChange?: () => void;
  className?: string;
}

export declare const ConnectedScatter: ComponentType<ConnectedScatterProps>;

export default ConnectedScatter;
```