Chart types

TypeScript types specific to chart components and graphical elements.

Axis types

AxisDomainTypeInput

The type of axis, provided by users in props.

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:

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.

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:

import { XAxis } from 'recharts';

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

TickItem

Represents a single tick on an axis.

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:

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.

type ScaleType = 'auto' | RechartsScaleType;

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

Example:

import { YAxis } from 'recharts';

<YAxis scale="log" />

Dot and shape types

ActiveDotType

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

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:

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.

type DotType =
  | boolean
  | ((props: DotItemDotProps) => ReactNode)
  | Partial<DotProps>
  | ReactElement<SVGProps<SVGElement>>;

Example:

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.

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

Example:

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.

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:

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.

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

interface CartesianViewBox {
  x?: number;
  y?: number;
  width?: number;
  height?: number;
}

PolarViewBox

interface PolarViewBox {
  cx?: number;
  cy?: number;
  innerRadius?: number;
  outerRadius?: number;
  startAngle?: number;
  endAngle?: number;
  clockWise?: boolean;
}

ViewBox

type ViewBox = CartesianViewBoxRequired | PolarViewBoxRequired;

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