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.

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:

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

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:

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.

interface Coordinate {
  x: number;
  y: number;
}

Example:

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

type RectanglePosition = {
  x: number;
  y: number;
  width: number;
  height: number;
};

Margin

interface Margin {
  top: number;
  right: number;
  bottom: number;
  left: number;
}

Layout types

CartesianLayout

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:

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

type PolarLayout = 'centric' | 'radial';

Defines the orientation of polar charts.

Domain types

NumberDomain

Evaluated numerical domain with min and max values.

type NumberDomain = readonly [min: number, max: number];

Example:

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.

type CategoricalDomain = ReadonlyArray<number | string | Date>;

Example:

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.

type AnimationTiming = 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';

Example:

import { Line } from 'recharts';

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

AnimationDuration

Specifies the duration of animation in milliseconds.

type AnimationDuration = number;

Legend and symbol types

LegendType

type LegendType =
  | 'circle'
  | 'cross'
  | 'diamond'
  | 'line'
  | 'plainline'
  | 'rect'
  | 'square'
  | 'star'
  | 'triangle'
  | 'wye'
  | 'none';

Example:

import { Line } from 'recharts';

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

SymbolType

type SymbolType = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';

Stack types

StackOffsetType

Determines how values are stacked.

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:

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>