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

# Common types

Common TypeScript types used throughout Recharts.

## Chart layout types

### ChartOffset

Defines the blank space between the chart and the plot area. This space is occupied by supporting elements like axes, legends, and brushes.

```typescript theme={null}
type ChartOffset = {
  readonly top: number;
  readonly bottom: number;
  readonly left: number;
  readonly right: number;
};
```

**Properties:**

* `top` - Distance from the top edge of the chart to the top edge of the plot area
* `bottom` - Distance from the bottom edge of the chart to the bottom edge of the plot area (distance, not a coordinate)
* `left` - Distance from the left edge of the chart to the left edge of the plot area
* `right` - Distance from the right edge of the chart to the right edge of the plot area (distance, not a coordinate)

**Example:**

```tsx theme={null}
import { useOffset } from 'recharts';

function CustomComponent() {
  const offset = useOffset();
  
  if (!offset) return null;
  
  console.log('Top offset:', offset.top);
  console.log('Left offset:', offset.left);
  
  return null;
}
```

### PlotArea

The area where the actual chart data is rendered (bars, lines, scatter points, etc.).

```typescript theme={null}
type PlotArea = {
  readonly width: number;
  readonly height: number;
  readonly x: number;
  readonly y: number;
};
```

**Properties:**

* `width` - The width of the plot area (same as `chartWidth - offset.left - offset.right`)
* `height` - The height of the plot area (same as `chartHeight - offset.top - offset.bottom`)
* `x` - The x coordinate of the top-left corner of the plot area (same as `offset.left`)
* `y` - The y coordinate of the top-left corner of the plot area (same as `offset.top`)

**Example:**

```tsx theme={null}
import { usePlotArea } from 'recharts';

function CustomBackground() {
  const plotArea = usePlotArea();
  
  if (!plotArea) return null;
  
  return (
    <rect
      x={plotArea.x}
      y={plotArea.y}
      width={plotArea.width}
      height={plotArea.height}
      fill="#f5f5f5"
    />
  );
}
```

## Coordinate types

### Coordinate

Represents a point in 2D space with x and y coordinates.

```typescript theme={null}
interface Coordinate {
  x: number;
  y: number;
}
```

**Example:**

```tsx theme={null}
import { useCartesianScale } from 'recharts';

function CustomMarker() {
  const coords = useCartesianScale({ x: 'Page A', y: 100 });
  
  if (!coords) return null;
  
  return <circle cx={coords.x} cy={coords.y} r={5} fill="red" />;
}
```

### RectanglePosition

```typescript theme={null}
type RectanglePosition = {
  x: number;
  y: number;
  width: number;
  height: number;
};
```

### Margin

```typescript theme={null}
interface Margin {
  top: number;
  right: number;
  bottom: number;
  left: number;
}
```

## Layout types

### CartesianLayout

```typescript theme={null}
type CartesianLayout = 'horizontal' | 'vertical';
```

Defines the orientation of Cartesian charts.

* `horizontal` - X-axis is horizontal, Y-axis is vertical (default for most charts)
* `vertical` - X-axis is vertical, Y-axis is horizontal

**Example:**

```tsx theme={null}
import { BarChart, Bar, XAxis, YAxis } from 'recharts';

function VerticalBarChart() {
  return (
    <BarChart width={600} height={300} data={data} layout="vertical">
      <XAxis type="number" />
      <YAxis type="category" dataKey="name" />
      <Bar dataKey="value" />
    </BarChart>
  );
}
```

### PolarLayout

```typescript theme={null}
type PolarLayout = 'centric' | 'radial';
```

Defines the orientation of polar charts.

## Domain types

### NumberDomain

Evaluated numerical domain with min and max values.

```typescript theme={null}
type NumberDomain = readonly [min: number, max: number];
```

**Example:**

```tsx theme={null}
import { useYAxisDomain } from 'recharts';

function CustomComponent() {
  const domain = useYAxisDomain();
  
  if (!domain) return null;
  
  if (typeof domain[0] === 'number' && typeof domain[1] === 'number') {
    const [min, max] = domain as NumberDomain;
    console.log('Range:', min, 'to', max);
  }
  
  return null;
}
```

### CategoricalDomain

Array of all possible categorical values.

```typescript theme={null}
type CategoricalDomain = ReadonlyArray<number | string | Date>;
```

**Example:**

```tsx theme={null}
import { useXAxisDomain } from 'recharts';

function CustomComponent() {
  const domain = useXAxisDomain();
  
  if (!domain) return null;
  
  if (typeof domain[0] === 'string') {
    const categories = domain as CategoricalDomain;
    console.log('Categories:', categories);
  }
  
  return null;
}
```

## Animation types

### AnimationTiming

The type of easing function to use for animations.

```typescript theme={null}
type AnimationTiming = 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
```

**Example:**

```tsx theme={null}
import { Line } from 'recharts';

<Line 
  dataKey="value" 
  animationEasing="ease-in-out" 
  animationDuration={1000}
/>
```

### AnimationDuration

Specifies the duration of animation in milliseconds.

```typescript theme={null}
type AnimationDuration = number;
```

## Legend and symbol types

### LegendType

```typescript theme={null}
type LegendType =
  | 'circle'
  | 'cross'
  | 'diamond'
  | 'line'
  | 'plainline'
  | 'rect'
  | 'square'
  | 'star'
  | 'triangle'
  | 'wye'
  | 'none';
```

**Example:**

```tsx theme={null}
import { Line } from 'recharts';

<Line dataKey="value" legendType="star" />
```

### SymbolType

```typescript theme={null}
type SymbolType = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';
```

## Stack types

### StackOffsetType

Determines how values are stacked.

```typescript theme={null}
type StackOffsetType = 'sign' | 'expand' | 'none' | 'wiggle' | 'silhouette' | 'positive';
```

**Options:**

* `none` - Default, adds values on top of each other. Negative values will overlap.
* `expand` - Values always add up to 1, chart looks like a rectangle
* `wiggle` - Tries to keep the chart centered
* `silhouette` - Tries to keep the chart centered
* `sign` - Stacks positive values above zero and negative values below zero
* `positive` - Ignores all negative values, then behaves like `none`

**Example:**

```tsx theme={null}
import { AreaChart, Area } from 'recharts';

<AreaChart width={600} height={300} data={data} stackOffset="expand">
  <Area dataKey="value1" stackId="1" />
  <Area dataKey="value2" stackId="1" />
</AreaChart>
```