# Small multiples

A trellis of small line charts that reads as one chart, with a synced crosshair, a shared or independent y scale that springs the axes, sorting with a FLIP reorder, a ghost of the overall total behind every panel and dimming for flat trends.

- ID: `small-multiples`
- Import: `animui/small-multiples`
- Category: block
- Runtime exports: `SmallMultiples`
- Declaration: `types/pro/small-multiples.d.ts`
- Type provenance: reconstructed-from-docs-and-runtime
- Related: metric-explorer, kpi-drilldown, revenue-explorer, line-chart, sparkline

```tsx
import { SmallMultiples } from 'animui/small-multiples';
```

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 small-multiples` 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 SmallMultiplesProps {
  series?: string | number | boolean | ReactNode;
  periods?: string | number | boolean | ReactNode;
  title?: string;
  description?: string;
  defaultSort?: string | number | boolean | ReactNode;
  defaultScale?: string | number | boolean | ReactNode;
  defaultDimFlat?: string | number | boolean | ReactNode;
  flatThreshold?: string | number | boolean | ReactNode;
  growthLag?: string | number | boolean | ReactNode;
  formatValue?: string | number | boolean | ReactNode;
  formatTick?: string | number | boolean | ReactNode;
  onSortChange?: () => void;
  onScaleChange?: () => void;
  onIndexChange?: () => void;
  className?: string;
}

export declare const SmallMultiples: ComponentType<SmallMultiplesProps>;

export default SmallMultiples;
```