> ## 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.

# Chart types

TypeScript types specific to chart components and graphical elements.

## Axis types

### AxisDomainTypeInput

The type of axis, provided by users in props.

```typescript theme={null}
type AxisDomainTypeInput = 'number' | 'category' | 'auto';
```

**Options:**

* `category` - Treats data as distinct values. Each value is in the same distance from its neighbors, regardless of their actual numeric difference.
* `number` - Treats data as continuous range. Values that are numerically closer are placed closer together on the axis.
* `auto` - The type is inferred based on the chart layout.

**Example:**

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

<XAxis dataKey="name" type="category" />
<YAxis type="number" />
```

### AxisInterval

Defines how ticks are placed and whether/how tick collisions are handled.

```typescript theme={null}
type AxisInterval =
  | number
  | 'preserveStart'
  | 'preserveEnd'
  | 'preserveStartEnd'
  | 'equidistantPreserveStart'
  | 'equidistantPreserveEnd';
```

**Options:**

* `number` - Show every nth tick
* `preserveStart` - Keeps the left tick on collision, ensures first tick is always shown
* `preserveEnd` - Keeps the right tick on collision, ensures last tick is always shown
* `preserveStartEnd` - Keeps the left tick on collision, ensures first and last ticks always show
* `equidistantPreserveStart` - Selects a number N such that every nth tick will be shown without collision
* `equidistantPreserveEnd` - Selects a number N such that every nth tick will be shown, ensuring the last tick is always visible

**Example:**

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

<XAxis dataKey="name" interval="preserveStartEnd" />
```

### TickItem

Represents a single tick on an axis.

```typescript theme={null}
interface TickItem {
  value: any;
  coordinate: number;
  index: number;
  offset?: number;
}
```

**Properties:**

* `value` - The data value of this tick
* `coordinate` - The pixel coordinate where this tick is rendered
* `index` - The index of this tick in the ticks array
* `offset` - How far this tick is offset from the start of a category band (always zero for non-band axes)

**Example:**

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

function CustomTicks() {
  const ticks = useXAxisTicks();
  
  if (!ticks) return null;
  
  return (
    <g>
      {ticks.map((tick) => (
        <text key={tick.index} x={tick.coordinate} y={20}>
          {tick.value}
        </text>
      ))}
    </g>
  );
}
```

## Scale types

### ScaleType

String shortcuts for scale types.

```typescript theme={null}
type ScaleType = 'auto' | RechartsScaleType;

type RechartsScaleType =
  | 'linear'
  | 'pow'
  | 'sqrt'
  | 'log'
  | 'symlog'
  | 'identity'
  | 'time'
  | 'band'
  | 'point'
  | 'ordinal'
  | 'quantile'
  | 'quantize'
  | 'utc'
  | 'sequential'
  | 'threshold';
```

**Example:**

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

<YAxis scale="log" />
```

## Dot and shape types

### ActiveDotType

The type of `activeDot` prop on Area, Line, and Radar components.

```typescript theme={null}
type ActiveDotType =
  | boolean
  | ((props: ActiveDotProps) => ReactNode)
  | Partial<ActiveDotProps>
  | ReactElement<SVGProps<SVGElement>>;
```

**Options:**

* `boolean` - `true` or `false` turns the default active dot on or off
* `function` - Custom React component (should return an SVG element)
* `object` - Props appended to the default active dot
* `ReactElement` - Element that will be cloned with new props

**Example:**

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

function CustomActiveDot(props) {
  return (
    <circle 
      cx={props.cx} 
      cy={props.cy} 
      r={8} 
      fill="red" 
      stroke="white" 
      strokeWidth={2}
    />
  );
}

<Line dataKey="value" activeDot={CustomActiveDot} />
<Line dataKey="value2" activeDot={{ r: 10, fill: 'blue' }} />
<Line dataKey="value3" activeDot={false} />
```

### DotType

The type of `dot` prop on Area, Line, and Radar components.

```typescript theme={null}
type DotType =
  | boolean
  | ((props: DotItemDotProps) => ReactNode)
  | Partial<DotProps>
  | ReactElement<SVGProps<SVGElement>>;
```

**Example:**

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

function CustomDot(props) {
  if (props.value > 5000) {
    return <circle cx={props.cx} cy={props.cy} r={6} fill="red" />;
  }
  return <circle cx={props.cx} cy={props.cy} r={3} fill="blue" />;
}

<Line dataKey="value" dot={CustomDot} />
<Line dataKey="value2" dot={{ fill: 'green', r: 5 }} />
<Line dataKey="value3" dot={false} />
```

### ActiveShape

Type for active shapes in Pie, RadialBar, and other components.

```typescript theme={null}
type ActiveShape<PropsType = Record<string, any>, ElementType = SVGElement> =
  | ReactElement<SVGProps<ElementType>>
  | ((props: PropsType) => ReactElement | null | undefined)
  | SVGProps<ElementType>
  | boolean;
```

**Example:**

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

function CustomActiveShape(props) {
  return (
    <g>
      <circle cx={props.cx} cy={props.cy} r={props.outerRadius + 10} fill={props.fill} />
      <text x={props.cx} y={props.cy} textAnchor="middle">
        {props.value}
      </text>
    </g>
  );
}

<Pie data={data} dataKey="value" activeShape={CustomActiveShape} />
```

## Data types

### DataKey

Extracts values from data objects.

```typescript theme={null}
type DataKey<DataPointType, DataValueType = any> = TypedDataKey<DataPointType, DataValueType>;
```

**Can be:**

* `string` - The name of the field in the data object
* `number` - The index of the field in the data
* `function` - A function that receives the data object and returns the value

**Example:**

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

type DataPoint = { name: string; value: number; nested: { count: number } };

const data: DataPoint[] = [
  { name: 'A', value: 100, nested: { count: 5 } },
  { name: 'B', value: 200, nested: { count: 10 } },
];

// Using string dataKey
<Line dataKey="value" />

// Using function dataKey
<Line dataKey={(item) => item.nested.count} />
```

### TooltipEventType

Determines how tooltip interacts with the chart.

```typescript theme={null}
type TooltipEventType = 'axis' | 'item';
```

**Options:**

* `axis` - All graphical items belonging to this axis tick will be highlighted, and all will be present in the tooltip. Tooltip displays when hovering on the chart background.
* `item` - Only the one graphical item being hovered will show in the tooltip. Tooltip displays when hovering over individual graphical items.

## ViewBox types

### CartesianViewBox

```typescript theme={null}
interface CartesianViewBox {
  x?: number;
  y?: number;
  width?: number;
  height?: number;
}
```

### PolarViewBox

```typescript theme={null}
interface PolarViewBox {
  cx?: number;
  cy?: number;
  innerRadius?: number;
  outerRadius?: number;
  startAngle?: number;
  endAngle?: number;
  clockWise?: boolean;
}
```

### ViewBox

```typescript theme={null}
type ViewBox = CartesianViewBoxRequired | PolarViewBoxRequired;
```

Union of Cartesian and Polar view boxes with all properties required.