recharts

recharts

Version 3.8.0
Published 12 days ago
6.7 MB
11 dependencies
MIT license

Install

npm i recharts

yarn add recharts

pnpm add recharts

Overview

React charts

Index

Variables

variable BarStack

const BarStack: ComponentType<BarStackProps>;

BarStackContext 3.6

variable CartesianAxis

const CartesianAxis: React.ForwardRefExoticComponent<any>;

Deprecated
This component is not meant to be used directly in app code. Use XAxis or YAxis instead.
Starting from Recharts v4.0 we will make this component internal only.

variable Cell

const Cell: FunctionComponent<Props>;

Cell component used to define colors and styles of chart elements.
This component is now deprecated and will be removed in Recharts 4.0.
Please use the shape prop or content prop on the respective chart components to customize the rendering of chart elements instead of using Cell.
See Also
Deprecated
CellReader

variable Cross

const Cross: React.FC<any>;

variable Curve

const Curve: React.FC<Props>;

variable DefaultZIndexes

const DefaultZIndexes: {
    readonly grid: -100;
    readonly barBackground: -50;
    readonly area: 100;
    readonly cursorRectangle: 200;
    readonly bar: 300;
    readonly line: 400;
    readonly axis: 500;
    readonly scatter: 600;
    readonly activeBar: 1000;
    readonly cursorLine: 1100;
    readonly activeDot: 1200;
    readonly label: 2000;
};

A collection of all default zIndex values used by Recharts.
You can reuse these, or you can define your own.

variable Dot

const Dot: React.FC<any>;

Renders a dot in the chart.
This component accepts X and Y coordinates in pixels. If you need to position the rectangle based on your chart's data, consider using the ReferenceDot component instead.
Parameter props

variable Funnel

const Funnel: {
    <DataPointType = any, DataValueType = any>(
        outsideProps: Props<DataPointType, DataValueType>
    ): ReactElement;
    (outsideProps: Props<any, any>): ReactElement;
};

variable Global

const Global: { devToolsEnabled: boolean; isSsr: boolean };

variable Layer

const Layer: React.ForwardRefExoticComponent<any>;

Creates an SVG group element to group other SVG elements.
Useful if you want to apply transformations or styles to a set of elements without affecting other elements in the SVG.
https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/g

variable Legend

const Legend: React.MemoExoticComponent<(outsideProps: Props) => any>;

variable Line

const Line: {
    <DataPointType = any, ValueAxisType = any>(
        props: Props<DataPointType, ValueAxisType>
    ): ReactElement;
    (props: Props<any, any>): ReactElement;
};

LabelListContext ErrorBarContext CartesianChartContext

variable Pie

const Pie: {
    <DataPointType = any, DataValueType = any>(
        outsideProps: Props<DataPointType, DataValueType>
    ): ReactElement;
    (outsideProps: Props<any, any>): ReactElement;
};

variable Polygon

const Polygon: React.FC<Props>;

variable Rectangle

const Rectangle: React.FC<Props>;

Renders a rectangle element. Unlike the , this component supports rounded corners and animation.
This component accepts X and Y coordinates in pixels. If you need to position the rectangle based on your chart's data, consider using the ReferenceArea component instead.
Parameter rectangleProps

variable ResponsiveContainer

const ResponsiveContainer: React.ForwardRefExoticComponent<any>;

The ResponsiveContainer component is a container that adjusts its width and height based on the size of its parent element. It is used to create responsive charts that adapt to different screen sizes.
This component uses the API to monitor changes to the size of its parent element. If you need to support older browsers that do not support this API, you may need to include a polyfill.
See Also
- ResponsiveContainerContext

variable Scatter

const Scatter: {
    <DataPointType = any, ValueAxisType = any>(
        props: Props<DataPointType, ValueAxisType>
    ): ReactElement;
    (props: Props<any, any>): ReactElement;
};

LabelListContext ErrorBarContext CellReader CartesianChartContext

variable Sector

const Sector: React.FC<Props>;

variable Surface

const Surface: React.ForwardRefExoticComponent<any>;

Renders an SVG element.
All charts already include a Surface component, so you would not normally use this directly.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg

variable Symbols

const Symbols: {
    ({ type, size, sizeType, ...rest }: SymbolsProps): React.JSX.Element | null;
    registerSymbol: (key: string, factory: D3SymbolType) => void;
};

Renders a symbol from a set of predefined shapes.

variable Text

const Text: React.ForwardRefExoticComponent<any>;

variable Trapezoid

const Trapezoid: React.FC<any>;

Functions

function Area

Area: <DataPointType = any, ValueAxisType = any>(
    props: Props<DataPointType, ValueAxisType>
) => ReactElement;

LabelListContext CartesianChartContext

function AreaChart

AreaChart: <DataPointType = any>(
    props: CartesianChartProps<DataPointType> & { ref?: React.Ref<SVGSVGElement> }
) => React.ReactElement;

ResponsiveContainerContext CartesianViewBoxContext CartesianChartContext

function Bar

Bar: <DataPointType = any, ValueAxisType = any>(
    props: Props<DataPointType, ValueAxisType>
) => ReactElement;

ErrorBarContext LabelListContext CellReader CartesianChartContext BarStackContext

function BarChart

BarChart: <DataPointType = any>(
    props: CartesianChartProps<DataPointType> & { ref?: React.Ref<SVGSVGElement> }
) => React.ReactElement;

ResponsiveContainerContext CartesianViewBoxContext CartesianChartContext

function Brush

Brush: typeof Brush;

Renders a scrollbar that allows the user to zoom and pan in the chart along its XAxis. It also allows you to render a small overview of the chart inside the brush that is always visible and shows the full data set so that the user can see where they are zoomed in.
If a chart is synchronized with other charts using the syncId prop on the chart, the brush will also synchronize the zooming and panning between all synchronized charts.
See Also
- CartesianChartContext

function CartesianGrid

CartesianGrid: typeof CartesianGrid;

Renders background grid with lines and fill colors in a Cartesian chart.
CartesianChartContext

function ComposedChart

ComposedChart: <DataPointType = any>(
    props: CartesianChartProps<DataPointType> & { ref?: React.Ref<SVGSVGElement> }
) => React.ReactElement;

ResponsiveContainerContext CartesianViewBoxContext CartesianChartContext

function createCentricChart

createCentricChart: <TData, TCategorical = string, TNumerical = number>() => <
    TComponents extends Record<string, any>
>(
    components: NoRadial<TComponents>
) => TypedCentricChartContext<TData, TCategorical, TNumerical, TComponents>;

Creates a typed context for centric Polar charts.
**Motivation:** Recharts components fall back to any by default. While explicit typing using Generics works per-component, it becomes tedious and error-prone across an entire chart.
This Chart Helper allows you to perfectly align your data properties and ensure all your charts and axes work in harmony. Once you define the helper with your generic requirements, all returned components strictly enforce your data structure, catching dataKey typos and shape errors early.
**Layout Binding:** Curries chart definitions to strictly bind layout="centric" prop behavior statically onto components. By wrapping the chart implementations, it completely masks the layout prop on initialization to prevent regressions. Evaluates TComponents generics at compile-time to reject radial-only elements natively (RadialBar, Pie, etc.)
Example 1
// 1. Lock in the Generics: Data = MyData const TypedCentric = createCentricChart<MyData, string, number>()({ RadarChart, Radar, }); // 2. `layout` is permanently bound to "centric". // 3. Passing `Pie` or `RadialBar` into the components map will explicitly trigger a TS error.
3.8
See Also

function createHorizontalChart

createHorizontalChart: <TData, TCategorical = string, TNumerical = number>() => <
    TComponents extends Record<string, any>
>(
    components: NoFunnel<TComponents>
) => TypedHorizontalChartContext<TData, TCategorical, TNumerical, TComponents>;

Creates a typed context for horizontal Cartesian charts.
**Motivation:** Recharts components fall back to any by default. While explicit typing using Generics (e.g. <Area<MyDataType, number>>) works per-component, it becomes tedious and error-prone across an entire chart.
This Chart Helper allows you to perfectly align your data properties and ensure all your charts, axes, and lines work in harmony. Once you define the helper with your generic requirements, all returned components strictly enforce your data structure, catching dataKey typos and shape errors early.
**Layout Binding:** Curries the chart definition to statically bind the layout="horizontal" property at the component level. By stripping layout from the configuration options of generated wrapper components, developers avoid accidentally overriding chart alignments. Evaluates TComponents generics at compile-time to reject strictly vertical components natively (Funnel, FunnelChart) from being passed.
Example 1
// 1. Lock in the Generics: Data = MyData, X-Axis = string, Y-Axis = number const TypedCharts = createHorizontalChart<MyData, string, number>()({ AreaChart, Area, XAxis, YAxis, }); // 2. TypedCharts.AreaChart is now strictly horizontal. // 3. TypedCharts.Area strictly expects string/number keys matching MyData.
3.8
See Also

function createRadialChart

createRadialChart: <TData, TCategorical = string, TNumerical = number>() => <
    TComponents extends Record<string, any>
>(
    components: NoCentric<TComponents>
) => TypedRadialChartContext<TData, TCategorical, TNumerical, TComponents>;

Creates a typed context for radial Polar charts.
**Motivation:** Recharts components fall back to any by default. While explicit typing using Generics works per-component, it becomes tedious and error-prone across an entire chart.
This Chart Helper allows you to perfectly align your data properties and ensure all your charts and layers work in harmony. Once you define the helper with your generic requirements, all returned components strictly enforce your data structure, catching dataKey typos and shape errors early.
**Layout Binding:** Curries chart definitions to strictly bind layout="radial" prop behavior statically onto components. By wrapping the chart implementations, it completely masks the layout prop on initialization to prevent runtime faults. Evaluates TComponents generics at compile-time to reject centric-only elements natively (Radar, RadarChart, etc.)
Example 1
// 1. Lock in the Generics: Data = MyData const TypedRadial = createRadialChart<MyData, string, number>()({ RadialBarChart, RadialBar, }); // 2. `layout` is permanently bound to "radial". // 3. Passing `Radar` or `RadarChart` into the components map will explicitly trigger a TS error.
3.8
See Also

function createVerticalChart

createVerticalChart: <TData, TCategorical = string, TNumerical = number>() => <
    TComponents extends Record<string, any>
>(
    components: TComponents
) => TypedVerticalChartContext<TData, TCategorical, TNumerical, TComponents>;

Creates a typed context for vertical Cartesian charts.
**Motivation:** Recharts components fall back to any by default. While explicit typing using Generics (e.g. <Area<MyDataType, number>>) works per-component, it becomes tedious and error-prone across an entire chart.
This Chart Helper allows you to perfectly align your data properties and ensure all your charts, axes, and lines work in harmony. Once you define the helper with your generic requirements, all returned components strictly enforce your data structure, catching dataKey typos and shape errors early.
**Layout Binding:** Curries the chart definition to statically bind the layout="vertical" property at the component level. By stripping layout from the configuration options of generated wrapper components, developers avoid accidentally overriding chart alignments. Natively supports strictly vertical components like Funnel and FunnelChart.
Example 1
// 1. Lock in the Generics: Data = MyData, X-Axis = number, Y-Axis = string const TypedCharts = createVerticalChart<MyData, number, string>()({ BarChart, Bar, Funnel, XAxis, YAxis, }); // 2. TypedCharts.BarChart is now strictly vertical. // 3. `Funnel` evaluates safely inside vertical contexts exclusively and enforces MyData limits.
3.8
See Also

function Customized

Customized: typeof Customized;

Customized component used to be necessary to render custom elements in Recharts 2.x. Starting from Recharts 3.x, all charts are able to render arbitrary elements anywhere, and Customized is no longer needed.
Example 1
Before: <Customized component={<MyCustomComponent />} />
Example 2
After: <MyCustomComponent />
Deprecated
Just render your components directly. Will be removed in 4.0

function DefaultLegendContent

DefaultLegendContent: (outsideProps: Props) => React.JSX.Element | null;

This component is by default rendered inside the Legend component. You would not use it directly.
You can use this component to customize the content of the legend, or you can provide your own completely independent content.

function DefaultTooltipContent

DefaultTooltipContent: (props: Props) => React.JSX.Element;

This component is by default rendered inside the Tooltip component. You would not use it directly.
You can use this component to customize the content of the tooltip, or you can provide your own completely independent content.

function ErrorBar

ErrorBar: typeof ErrorBar;

ErrorBar renders whiskers to represent error margins on a chart.
It must be a child of a graphical element.
ErrorBar expects data in one of the following forms: - Symmetric error bars: a single error value representing both lower and upper bounds. - Asymmetric error bars: an array of two values representing lower and upper bounds separately. First value is the lower bound, second value is the upper bound.
The values provided are relative to the main data value. For example, if the main data value is 10 and the error value is 2, the error bar will extend from 8 to 12 for symmetric error bars.
In other words, what ErrorBar will render is: - For symmetric error bars: [value - errorVal, value + errorVal] - For asymmetric error bars: [value - errorVal[0], value + errorVal[1]]
In stacked or ranged Bar charts, ErrorBar will use the higher data value as the reference point for calculating the error bar positions.
ErrorBarContext

function FunnelChart

FunnelChart: <DataPointType = any>(
    props: CartesianChartProps<DataPointType> & { ref?: React.Ref<SVGSVGElement> }
) => React.ReactElement;

ResponsiveContainerContext CartesianViewBoxContext CartesianChartContext

function getNiceTickValues

getNiceTickValues: (
    [min, max]: NumberDomain,
    tickCount?: number,
    allowDecimals?: boolean,
    niceTicksMode?: NiceTicksAlgorithm
) => number[];

Calculate the ticks of an interval. Ticks can appear outside the interval if it makes them more rounded and nice.
Parameter tuple
of [min,max] min: The minimum value, max: The maximum value
Parameter tickCount
The count of ticks
Parameter allowDecimals
Allow the ticks to be decimals or not
Parameter niceTicksMode
The algorithm to use for calculating nice ticks. array of ticks

function getRelativeCoordinate

getRelativeCoordinate: {
    (event: MousePointer): RelativePointer;
    (event: TouchPointer): RelativePointer[];
};

Computes relative element coordinates from mouse or touch event.

The output coordinates are relative to the top-left corner of the active element (= currentTarget), where the top-left corner is (0, 0). Moving right, the x-coordinate increases, and moving down, the y-coordinate increases.

The coordinates are rounded to the nearest integer and account for CSS transform scale. So element that's scaled will return the same coordinates as element that's not scaled.

In other words: you zoom in or out, numbers stay the same.

This function works with both HTML elements and SVG elements.

It works with both Mouse and Touch events. For Touch events, it returns an array of coordinates, one for each touch point. For Mouse events, it returns a single coordinate object.

Parameter event

The mouse or touch event from React event handlers (works with both HTML and SVG elements)

Returns

Coordinates relative to the top-left corner of the element. Single object for Mouse events, array of objects for Touch events.

Example 1

// In an HTML element event handler. Legend passes the native event as the 3rd argument.
<Legend onMouseMove={(_data, _i, e) => {
  // These coordinates are relative to the top-left corner of the Legend element
  const { relativeX, relativeY } = getRelativeCoordinate(e);
  console.log(`Mouse at Legend position: (${relativeX}, ${relativeY})`);
}}>

Example 2

// In an SVG element event handler. Area is an SVG element, and passes the event as second argument.
<Area onMouseMove={(_, e) => {
  const { relativeX, relativeY } = getRelativeCoordinate(e);
  console.log(`Mouse at Area position: (${relativeX}, ${relativeY})`);
  // Here you can call usePlotArea to convert to chart coordinates
}}>

Example 3

// In a chart root touch handler. Chart root passes the event as second argument.
<LineChart onTouchMove={(_, e) => {
  const touchPoints = getRelativeCoordinate(e);
  touchPoints.forEach(({ relativeX, relativeY }, index) => {
    console.log(`Touch point ${index} at LineChart position: (${relativeX}, ${relativeY})`);
  });
}}>

3.8

function Label

Label: typeof Label;

CartesianViewBoxContext PolarViewBoxContext CartesianLabelContext PolarLabelContext

function LabelList

LabelList: typeof LabelList;

LabelListContext

function LineChart

LineChart: <DataPointType = any>(
    props: CartesianChartProps<DataPointType> & { ref?: React.Ref<SVGSVGElement> }
) => React.ReactElement;

ResponsiveContainerContext CartesianViewBoxContext CartesianChartContext

function PieChart

PieChart: <DataPointType = any>(
    props: PolarChartProps<DataPointType> & { ref?: React.Ref<SVGSVGElement> }
) => React.ReactElement;

ResponsiveContainerContext PolarViewBoxContext PolarChartContext

function PolarAngleAxis

PolarAngleAxis: typeof PolarAngleAxis;

PolarLabelContext PolarViewBoxContext

function PolarRadiusAxis

PolarRadiusAxis: typeof PolarRadiusAxis;

PolarLabelContext PolarViewBoxContext

function Radar

Radar: typeof Radar;

PolarChartContext LabelListContext

function RadarChart

RadarChart: <DataPointType = any>(
    props: PolarChartProps<DataPointType> & { ref?: React.Ref<SVGSVGElement> }
) => React.ReactElement;

ResponsiveContainerContext PolarViewBoxContext PolarChartContext

function RadialBar

RadialBar: typeof RadialBar;

PolarChartContext LabelListContext CellReader

function RadialBarChart

RadialBarChart: <DataPointType = any>(
    props: PolarChartProps<DataPointType> & { ref?: React.Ref<SVGSVGElement> }
) => React.ReactElement;

ResponsiveContainerContext PolarViewBoxContext PolarChartContext

function ReferenceArea

ReferenceArea: typeof ReferenceArea;

Draws a rectangular area on the chart to highlight a specific range.
This component, unlike Rectangle or , is aware of the cartesian coordinate system, so you specify the area by using data coordinates instead of pixels.
ReferenceArea will calculate the pixels based on the provided data coordinates.
If you prefer to render rectangles using pixels rather than data coordinates, consider using the Rectangle component instead.
CartesianLabelContext CartesianChartContext

function ReferenceDot

ReferenceDot: typeof ReferenceDot;

Draws a circle on the chart to highlight a specific point.
This component, unlike Dot or , is aware of the cartesian coordinate system, so you specify its center by using data coordinates instead of pixels.
ReferenceDot will calculate the pixels based on the provided data coordinates.
If you prefer to render dots using pixels rather than data coordinates, consider using the Dot component instead.
CartesianLabelContext CartesianChartContext

function ReferenceLine

ReferenceLine: typeof ReferenceLine;

Draws a line on the chart connecting two points.
This component, unlike , is aware of the cartesian coordinate system, so you specify the dimensions by using data coordinates instead of pixels.
ReferenceLine will calculate the pixels based on the provided data coordinates.
If you prefer to render using pixels rather than data coordinates, consider using the instead.
CartesianLabelContext CartesianChartContext

function Sankey

Sankey: typeof Sankey;

Flow diagram in which the width of the arrows is proportional to the flow rate. It is typically used to visualize energy or material or cost transfers between processes.
ResponsiveContainerContext TooltipEntrySettings

function ScatterChart

ScatterChart: <DataPointType = any>(
    props: CartesianChartProps<DataPointType> & { ref?: React.Ref<SVGSVGElement> }
) => React.ReactElement;

ResponsiveContainerContext CartesianViewBoxContext CartesianChartContext

function SunburstChart

SunburstChart: (outsideProps: SunburstChartProps) => React.JSX.Element;

The sunburst is a hierarchical chart, similar to a Treemap, plotted in polar coordinates. Sunburst charts effectively convey the hierarchical relationships and proportions within each level. It is easy to see all the middle layers in the hierarchy, which might get lost in other visualizations. For some datasets, the radial layout may be more visually appealing and intuitive than a traditional Treemap.
ResponsiveContainerContext TooltipEntrySettings

Tooltip: (
    outsideProps: TooltipProps<ValueType, NameType>
) => React.JSX.Element | null;

The Tooltip component displays a floating box with data values when hovering over or clicking on chart elements.
It can be configured to show information for individual data points or for all points at a specific axis coordinate. The appearance and content of the tooltip can be customized via props.
See Also
- CartesianChartContext PolarChartContext TooltipEntrySettings

function Treemap

Treemap: (outsideProps: Props) => React.JSX.Element;

The Treemap chart is used to visualize hierarchical data using nested rectangles.
ResponsiveContainerContext TooltipEntrySettings

function useActiveTooltipCoordinate

useActiveTooltipCoordinate: () => Coordinate | undefined;

Returns the Cartesian x + y coordinates of the active Tooltip.
Returns undefined if there is no active user interaction or if used outside a chart context.
Recharts only allows one Tooltip per chart, so this hook does not take any parameters. Weird things may happen if you have multiple Tooltip components in the same chart so please don't do that.
Returns
{Coordinate | undefined} The coordinate of the active Tooltip, or undefined. 3.7

function useActiveTooltipDataPoints

useActiveTooltipDataPoints: <T = unknown>() => readonly T[];

Returns the currently active data points being displayed in the Tooltip. Active means that it is currently visible; this hook will return undefined if there is no current interaction.
This follows the <Tooltip /> props, if the Tooltip element is present in the chart. If there is no <Tooltip /> then this hook will follow the default Tooltip props.
Data point is whatever you pass as an input to the chart using the data={} prop.
This returns an array because a chart can have multiple graphical items in it (multiple Lines for example) and tooltip with shared={true} will display all items at the same time.
Returns undefined when used outside a chart context.
Returns
Data points that are currently visible in a Tooltip

function useActiveTooltipLabel

useActiveTooltipLabel: () => ActiveLabel;

Returns the active tooltip label. The label is one of the values from the chart data, and is used to display in the tooltip content.
Returns undefined if there is no active user interaction or if used outside a chart context
Returns
ActiveLabel 3.0

function useCartesianScale

useCartesianScale: (
    dataPoint: CartesianDataPoint,
    xAxisId?: AxisId,
    yAxisId?: AxisId
) => Coordinate | undefined;

Converts a data point (in data coordinates) to pixel coordinates.
This hook is useful for positioning annotations, custom shapes, or other elements at specific data points on the chart. It uses the axis scales to convert data values to their corresponding pixel positions within the chart area.
This hook must be used within a chart context (inside a LineChart, BarChart, etc.). Returns undefined if used outside a chart context, or if the axes don't exist, or if the data point cannot be converted (e.g., if the data values are outside the axis domains).
This is a convenience hook that combines useXAxisScale and useYAxisScale together in a single call.
Parameter dataPoint
The data point with x and y values in data coordinates.
Parameter xAxisId
The xAxisId of the X-axis. Defaults to 0 if not provided.
Parameter yAxisId
The yAxisId of the Y-axis. Defaults to 0 if not provided.
Returns
The pixel x,y coordinates, or undefined if conversion is not possible. 3.8
Example 1
// Position a marker at data point { x: 'Page C', y: 2500 } const pixelCoords = useCartesianScale({ x: 'Page C', y: 2500 }); if (pixelCoords) { return <circle cx={pixelCoords.x} cy={pixelCoords.y} r={5} fill="red" />; }

function useChartHeight

useChartHeight: () => number | undefined;

Returns the height of the chart in pixels.
If you are using chart with hardcoded height props, then the height returned will be the same as the height prop on the main chart element.
If you are using a chart with a ResponsiveContainer, the height will be the size of the chart as the ResponsiveContainer has decided it would be.
If the chart has any axes or legend, the height will be the size of the chart including the axes and legend. Meaning: adding axes and legend will not change the height.
The dimensions do not scale, meaning as user zoom in and out, the height number will not change as the chart gets visually larger or smaller.
Returns undefined if used outside a chart context.
Returns
{number | undefined} The height of the chart in pixels, or undefined if not in a chart context.

function useChartWidth

useChartWidth: () => number | undefined;

Returns the width of the chart in pixels.
If you are using chart with hardcoded width prop, then the width returned will be the same as the width prop on the main chart element.
If you are using a chart with a ResponsiveContainer, the width will be the size of the chart as the ResponsiveContainer has decided it would be.
If the chart has any axes or legend, the width will be the size of the chart including the axes and legend. Meaning: adding axes and legend will not change the width.
The dimensions do not scale, meaning as user zoom in and out, the width number will not change as the chart gets visually larger or smaller.
Returns undefined if used outside a chart context.
Returns
{number | undefined} The width of the chart in pixels, or undefined if not in a chart context.

function useIsTooltipActive

useIsTooltipActive: () => boolean;

Returns true if the Tooltip is currently active (visible).
Returns false if the Tooltip is not active or if used outside a chart context.
Recharts only allows one Tooltip per chart, so this hook does not take any parameters. Weird things may happen if you have multiple Tooltip components in the same chart so please don't do that.
Returns
{boolean} True if the Tooltip is active, false otherwise. 3.7

function useMargin

useMargin: () => Margin | undefined;

Margin is the empty space around the chart. Excludes axes and legend and brushes and the like. This is declared by the user in the chart props. If you are interested in the space occupied by axes, legend, or brushes, use useOffset instead, which also includes calculated widths and heights of axes and legends.
Returns undefined if used outside a chart context.
Returns
{Margin | undefined} The margin of the chart in pixels, or undefined if not in a chart context.

function useOffset

useOffset: () => ChartOffset | undefined;

Returns the offset of the chart in pixels.
Offset defines the blank space between the chart and the plot area. This blank space is occupied by supporting elements like axes, legends, and brushes.
The offset includes:
- Margins - Width and height of the axes - Width and height of the legend - Brush height
If you are interested in the margin alone, use useMargin instead.
The offset is independent of charts position on the page, meaning it does not change as the chart is scrolled or resized.
It is also independent of the scale and zoom, meaning that as the user zooms in and out, the numbers will not change as the chart gets visually larger or smaller.
This hook must be used within a chart context (inside a <LineChart>, <BarChart>, etc.). This hook returns undefined if used outside a chart context.
Returns
Offset of the chart in pixels, or undefined if used outside a chart context. 3.1

function usePlotArea

usePlotArea: () => PlotArea | undefined;

Plot area is the area where the actual chart data is rendered. This means: bars, lines, scatter points, etc.
The plot area is calculated based on the chart dimensions and the offset.
Plot area width and height are the dimensions in pixels; x and y are the coordinates of the top-left corner of the plot area relative to the chart container.
They are also independent of the scale and zoom, meaning that as the user zooms in and out, the plot area dimensions will not change as the chart gets visually larger or smaller.
This hook must be used within a chart context (inside a <LineChart>, <BarChart>, etc.). This hook returns undefined if used outside a chart context.
Returns
Plot area of the chart in pixels, or undefined if used outside a chart context. 3.1

function useXAxisDomain

useXAxisDomain: (
    xAxisId?: AxisId
) => NumberDomain | CategoricalDomain | undefined;

Returns the calculated domain of an X-axis.
The domain can be numerical: [min, max], or categorical: ['a', 'b', 'c'].
The type of the domain is defined by the type prop of the XAxis.
The values of the domain are calculated based on the data and the dataKey of the axis.
If the chart has a Brush, the domain will be filtered to the brushed indexes if the hook is used outside a Brush context, and the full domain will be returned if the hook is used inside a Brush context.
Parameter xAxisId
The xAxisId of the X-axis. Defaults to 0 if not provided.
Returns
The domain of the X-axis, or undefined if it cannot be calculated or if used outside a chart context. 3.2

function useXAxisInverseDataSnapScale

useXAxisInverseDataSnapScale: (
    xAxisId?: AxisId
) => InverseScaleFunction | undefined;

Returns a function to convert pixel coordinates back to data values for an XAxis, but snapping to the closest data point.
This is similar to useXAxisInverseScale, but instead of returning the exact data value at the pixel position (interpolation), it returns the value of the closest data point.
This is useful for implementing interactions where you want to select the closest data point rather than an exact value or a tick.
This hook must be used within a chart context (inside a LineChart, BarChart, etc.). Returns undefined if used outside a chart context, or if the axes don't exist.
Parameter xAxisId
The xAxisId of the XAxis. Defaults to 0 if not provided.
Returns
An inverse scale function that maps pixel coordinates to the closest data value, or undefined. 3.8

function useXAxisInverseScale

useXAxisInverseScale: (xAxisId?: AxisId) => InverseScaleFunction | undefined;

Returns a function to convert pixel coordinates back to data values for an XAxis.
This is useful for implementing interactions like click-to-add-annotation, drag interactions, or tooltips that need to determine what data point corresponds to a mouse position.
For continuous (numerical) scales, returns an interpolated value. For categorical scales, returns the closest category in the domain - which is the same behaviour as useXAxisInverseDataSnapScale.
This hook must be used within a chart context (inside a LineChart, BarChart, etc.). Returns undefined if used outside a chart context, or if the axes don't exist.
Parameter xAxisId
The xAxisId of the XAxis. Defaults to 0 if not provided.
Returns
An inverse scale function that maps pixel coordinates to data values, or undefined. 3.8
Example 1
const xInverseScale = useXAxisInverseScale(); if (xInverseScale) { const dataValue = xInverseScale(150); // Returns the data value at pixel x=150 }

function useXAxisInverseTickSnapScale

useXAxisInverseTickSnapScale: (
    xAxisId?: AxisId
) => InverseScaleFunction | undefined;

Returns a function to convert pixel coordinates back to data values for an XAxis, but snapping to the closest axis tick.
This is similar to useXAxisInverseScale, but instead of returning the exact data value at the pixel position (interpolation), it returns the value of the closest tick.
This is useful for implementing interactions where you want to select the closest tick rather than an exact value or a data point.
This hook must be used within a chart context (inside a LineChart, BarChart, etc.). Returns undefined if used outside a chart context, or if the axes don't exist.
Parameter xAxisId
The xAxisId of the XAxis. Defaults to 0 if not provided.
Returns
An inverse scale function that maps pixel coordinates to the closest tick value, or undefined. 3.8

function useXAxisScale

useXAxisScale: (xAxisId?: AxisId) => ScaleFunction | undefined;

Returns a function to convert data values to pixel coordinates for an XAxis.
This is useful for positioning annotations, custom shapes, or other elements at specific data points on the chart.
This hook must be used within a chart context (inside a LineChart, BarChart, etc.). Returns undefined if used outside a chart context, or if the axes don't exist.
Parameter xAxisId
The xAxisId of the XAxis. Defaults to 0 if not provided.
Returns
A scale function that maps data values to pixel coordinates, or undefined. 3.8
Example 1
const xScale = useXAxisScale(); if (xScale) { const pixelX = xScale('Page A'); // Returns the pixel x-coordinate for 'Page A' }

function useXAxisTicks

useXAxisTicks: (xAxisId?: AxisId) => ReadonlyArray<TickItem> | undefined;

Returns the ticks of an XAxis.
This hook is useful for accessing the calculated ticks of an XAxis. The ticks are the same as the ones rendered by the XAxis component.
Parameter xAxisId
The xAxisId of the XAxis. Defaults to 0 if not provided.
Returns
An array of ticks, or undefined if the axis doesn't exist or hasn't been calculated yet. 3.8

function useYAxisDomain

useYAxisDomain: (
    yAxisId?: AxisId
) => NumberDomain | CategoricalDomain | undefined;

Returns the calculated domain of a Y-axis.
The domain can be numerical: [min, max], or categorical: ['a', 'b', 'c'].
The type of the domain is defined by the type prop of the YAxis.
The values of the domain are calculated based on the data and the dataKey of the axis.
Does not interact with Brushes, as Y-axes do not support brushing.
Parameter yAxisId
The yAxisId of the Y-axis. Defaults to 0 if not provided.
Returns
The domain of the Y-axis, or undefined if it cannot be calculated or if used outside a chart context. 3.2

function useYAxisInverseDataSnapScale

useYAxisInverseDataSnapScale: (
    yAxisId?: AxisId
) => InverseScaleFunction | undefined;

Returns a function to convert pixel coordinates back to data values for a YAxis, but snapping to the closest data point.
This is similar to useYAxisInverseScale, but instead of returning the exact data value at the pixel position (interpolation), it returns the value of the closest data point.
This is useful for implementing interactions where you want to select the closest data point rather than an exact value or a tick.
This hook must be used within a chart context (inside a LineChart, BarChart, etc.). Returns undefined if used outside a chart context, or if the axes don't exist.
Parameter yAxisId
The yAxisId of the YAxis. Defaults to 0 if not provided.
Returns
An inverse scale function that maps pixel coordinates to the closest data value, or undefined. 3.8

function useYAxisInverseScale

useYAxisInverseScale: (yAxisId?: AxisId) => InverseScaleFunction | undefined;

Returns a function to convert pixel coordinates back to data values for a YAxis.
This is useful for implementing interactions like click-to-add-annotation, drag interactions, or tooltips that need to determine what data point corresponds to a mouse position.
For continuous (numerical) scales, returns an interpolated value. For categorical scales, returns the closest category in the domain - which is the same behaviour as useYAxisInverseDataSnapScale.
This hook must be used within a chart context (inside a LineChart, BarChart, etc.). Returns undefined if used outside a chart context, or if the axes don't exist.
Parameter yAxisId
The yAxisId of the YAxis. Defaults to 0 if not provided.
Returns
An inverse scale function that maps pixel coordinates to data values, or undefined. 3.8
Example 1
const yInverseScale = useYAxisInverseScale(); if (yInverseScale) { const dataValue = yInverseScale(200); // Returns the data value at pixel y=200 }

function useYAxisInverseTickSnapScale

useYAxisInverseTickSnapScale: (
    yAxisId?: AxisId
) => InverseScaleFunction | undefined;

Returns a function to convert pixel coordinates back to data values for a YAxis, but snapping to the closest axis tick.
This is similar to useYAxisInverseScale, but instead of returning the exact data value at the pixel position (interpolation), it returns the value of the closest tick.
This is useful for implementing interactions where you want to select the closest tick rather than an exact value or a data point.
This hook must be used within a chart context (inside a LineChart, BarChart, etc.). Returns undefined if used outside a chart context, or if the axes don't exist.
Parameter yAxisId
The yAxisId of the YAxis. Defaults to 0 if not provided.
Returns
An inverse scale function that maps pixel coordinates to the closest tick value, or undefined. 3.8

function useYAxisScale

useYAxisScale: (yAxisId?: AxisId) => ScaleFunction | undefined;

Returns a function to convert data values to pixel coordinates for a YAxis.
This is useful for positioning annotations, custom shapes, or other elements at specific data points on the chart.
This hook must be used within a chart context (inside a LineChart, BarChart, etc.). Returns undefined if used outside a chart context, or if the axes don't exist.
Parameter yAxisId
The yAxisId of the YAxis. Defaults to 0 if not provided.
Returns
A scale function that maps data values to pixel coordinates, or undefined. 3.8
Example 1
const yScale = useYAxisScale(); if (yScale) { const pixelY = yScale(1500); // Returns the pixel y-coordinate for value 1500 }

function useYAxisTicks

useYAxisTicks: (yAxisId?: AxisId) => ReadonlyArray<TickItem> | undefined;

Returns the ticks of a YAxis.
This hook is useful for accessing the calculated ticks of a YAxis. The ticks are the same as the ones rendered by the YAxis component.
Parameter yAxisId
The yAxisId of the YAxis. Defaults to 0 if not provided.
Returns
An array of ticks, or undefined if the axis doesn't exist or hasn't been calculated yet. 3.8

function XAxis

XAxis: <DataPointType = any, DataValueType = any>(
    props: Props<DataPointType, DataValueType>
) => ReactElement;

CartesianViewBoxContext CartesianLabelContext

function YAxis

YAxis: <DataPointType = any, DataValueType = any>(
    props: Props<DataPointType, DataValueType>
) => ReactElement;

CartesianViewBoxContext CartesianLabelContext

function ZAxis

ZAxis: typeof ZAxis;

Virtual axis, does not render anything itself. Has no ticks, grid lines, or labels. Useful for dynamically setting Scatter point size, based on data.
CartesianViewBoxContext

function ZIndexLayer

ZIndexLayer: ({ zIndex, children }: ZIndexLayerProps) => React.ReactNode;

A layer that renders its children into a portal corresponding to the given zIndex. We can't use regular CSS z-index because SVG does not support it. So instead, we create separate DOM nodes for each zIndex layer and render the children into the corresponding DOM node using React portals.
This component must be used inside a Chart component.
Parameter zIndex
numeric zIndex value, higher values are rendered on top of lower values
Parameter children
the content to render inside this zIndex layer
3.4

Interfaces

interface BarRectangleItem

interface BarRectangleItem extends RectangleProps {}

property background

background?: BarRectangleType;

the coordinate of background rectangle

property height

height: number;

property originalDataIndex

originalDataIndex: number;

Stable pre-filter index within the currently displayed data slice. Used for matching with activeIndex from tooltip and for BarStack clip-path indexing.

property parentViewBox

parentViewBox: CartesianViewBoxRequired;

property payload

readonly payload?: any;

property stackedBarStart

stackedBarStart: number;

Chart range coordinate of the baseValue of the first bar in a stack.

property tooltipPosition

tooltipPosition: Coordinate;

property value

value: number | [number, number];

property width

width: number;

property x

x: number;

property y

y: number;

interface CartesianTickItem

interface CartesianTickItem extends TickItem {}

property isShow

isShow?: boolean;

property tickCoord

tickCoord?: number;

property tickSize

tickSize?: number;

interface CartesianViewBox

interface CartesianViewBox {}

property height

height?: number;

property width

width?: number;

property x

x?: number;

property y

y?: number;

interface CellProps

interface Props extends SVGProps<SVGElement> {}

property fill

fill?: string;

The fill color.

property stroke

stroke?: string;

The stroke color.

interface Coordinate

interface Coordinate {}

property x

x: number;

property y

y: number;

interface CustomScaleDefinition

interface CustomScaleDefinition<
    Domain extends CategoricalDomainItem = CategoricalDomainItem
> {}

A subset of d3-scale. This is the external representation; This is the type that we expect from axis.scale props, if users want to provide custom scales.
The actual d3 scales have many more methods, but we don't need them all. Specifically we want to avoid all the setters - immutable API is preferred in Recharts and mutating state will lead to hard-to-debug issues.
See Also
- ScaleType and RechartsScaleType for string shortcuts that you can use instead of this interface.

property bandwidth

bandwidth?: () => number;

Returns width of each band. Most scales are not banded, so this method is optional. Banded scales (like scaleBand from d3-scale) will implement this method.

property ticks

ticks?: (count: number | undefined) => ReadonlyArray<number>;

Quantitative (continuous) scales provide a ticks method that returns representative values from the scale’s domain. Ordinal and band scales do not have this method.
An optional count argument requests more or fewer ticks. The number of ticks returned, however, is not necessarily equal to the requested count.
Parameter count
number of ticks
See Also
- https://d3js.org/d3-scale/linear#linear_ticks
- https://observablehq.com/@d3/scale-ticks

method copy

copy: () => CustomScaleDefinition<Domain>;

Returns an exact copy of this scale. Changes to this scale will not affect the returned scale, and vice versa. We use this method in Recharts to ensure immutability - changes to the scale outside should not affect the internal state, as they won't trigger re-renders in React.

method domain

domain: { (): ReadonlyArray<Domain>; (newDomain: readonly Domain[]): this };

Returns the scale's current domain. The domain could be: - in categorical scales: an array of strings or categories - in continuous scales: tuple of two numbers: [min, max]
Sets the domain of the scale.

method invert

invert: (value: number) => Domain | undefined;

Given a value from the range, returns the corresponding value from the domain.
This method is optional, as not all scales provide an inverse mapping. Linear and time scales typically do, while band and ordinal scales may not.

method range

range: { (): ReadonlyArray<number>; (newRange: readonly number[]): this };

Returns the scale’s current range.
Sets the range of the scale.

call signature

(input: Domain): number | undefined;

Given an arbitrary input, returns the corresponding point derived from the output range if the input is in the scale's domain. If the input is not included in the domain, returns undefined.
Parameter input

interface DefaultTooltipContentProps

interface Props<
    TValue extends ValueType = ValueType,
    TName extends NameType = NameType
> {}

property accessibilityLayer

accessibilityLayer?: boolean;

property contentStyle

contentStyle?: CSSProperties;

property formatter

formatter?: Formatter<TValue, TName>;

property itemSorter

itemSorter?: TooltipItemSorter<TValue, TName>;

property itemStyle

itemStyle?: CSSProperties;

property label

label?: ReactNode;

property labelClassName

labelClassName?: string;

property labelFormatter

labelFormatter?: (
    label: ReactNode,
    payload: ReadonlyArray<Payload<TValue, TName>>
) => ReactNode;

property labelStyle

labelStyle?: CSSProperties;

property payload

payload?: ReadonlyArray<Payload<TValue, TName>>;

property separator

separator?: string;

property wrapperClassName

wrapperClassName?: string;

interface HTMLMousePointer

interface HTMLMousePointer {}

Simplified version of the MouseEvent so that we don't have to mock the whole thing in tests.
This is meant to represent the React.MouseEvent which is a wrapper on top of https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent

property clientX

clientX: number;

property clientY

clientY: number;

property currentTarget

currentTarget: HTMLElementTarget;

interface HTMLTouchPointer

interface HTMLTouchPointer {}

property currentTarget

currentTarget: HTMLElementTarget;

property touches

touches: ArrayLike<Pick<Touch, 'clientX' | 'clientY'>>;

interface LabelListEntry

interface LabelListEntry<DataPointItem = any> {}

property fill

fill: string | undefined;

property payload

payload: DataPointItem;

Payload is the source data object for this entry. The shape of this depends on what the user has passed as the data prop to the chart.

property value

value: unknown;

Value is what renders in the UI as the label content. If undefined, then the LabelList will pull it from the payload using the dataKey.

interface LegendPayload

interface LegendPayload {}

property color

color?: string;

property dataKey

dataKey?: DataKey<any>;

property formatter

formatter?: Formatter;

property inactive

inactive?: boolean;

property legendIcon

legendIcon?: ReactElement<SVGElement>;

property payload

payload?: object;

Different graphical items put different information in the payload object so double check in runtime what are you getting here.

property type

type?: LegendType;

property value

value: string | undefined;

This is the text that will be displayed in the legend in the DOM. If undefined, the text will not be displayed, so the icon will be rendered without text.

interface Margin

interface Margin {}

property bottom

bottom: number;

property left

left: number;

property right

right: number;

property top

top: number;

interface Padding

interface Padding {}

property bottom

bottom: number;

property left

left: number;

property right

right: number;

property top

top: number;

interface RadarPoint

interface RadarPoint {}

property angle

angle: number;

property cx

cx?: number;

property cy

cy?: number;

property name

name?: string | number;

property payload

payload?: any;

property radius

radius?: number;

property value

value?: number;

property x

x: number;

property y

y: number;

interface RadialBarSectorProps

interface RadialBarSectorProps extends RadialBarDataItem {}

property index

index: number;

property isActive

isActive: boolean;

property option

option: RadialBarProps['activeShape'];

interface RelativePointer

interface RelativePointer {}

Coordinates relative to the top-left corner of the active element. Also include scale which means that element that's scaled will return the same coordinates as element that's not scaled.

property relativeX

relativeX: number;

property relativeY

relativeY: number;

interface ResponsiveContainerProps

interface Props {}

property aspect

aspect?: number;

width / height. If specified, the height will be calculated by width / aspect.

property children

children: ReactNode;

The content of the container. It can contain multiple charts, and then they will all share the same dimensions.

property className

className?: string | number;

The HTML element's class name

property debounce

debounce?: number;

If specified a positive number, debounced function will be used to handle the resize event. 0

property height

height?: Percent | number;

The height of chart container. Can be a number or a percent string like "100%". '100%'

property id

id?: string | number;

Unique identifier of this component. Used as an HTML attribute id.

property initialDimension

initialDimension?: {
    width: number;
    height: number;
};

The initial width and height of the container. {"width":-1,"height":-1}

property maxHeight

maxHeight?: number;

The maximum height of the container. It can be a number.

property minHeight

minHeight?: string | number;

The minimum height of the container.

property minWidth

minWidth?: string | number;

The minimum width of the container. 0

property onResize

onResize?: (width: number, height: number) => void;

If specified provides a callback providing the updated chart width and height values.

property style

style?: Omit<CSSProperties, keyof Props>;

The style of the container.

property width

width?: Percent | number;

The width of chart container. Can be a number or a percent string like "100%". '100%'

interface SankeyData

interface SankeyData {}

property links

links: LinkDataItem[];

property nodes

nodes: any[];

interface SankeyLinkProps

interface LinkProps extends SVGProps<SVGPathElement> {}

property index

index: number;

property linkWidth

linkWidth: number;

property payload

payload: Omit<SankeyLink, 'source' | 'target'> & {
    source: SankeyNode;
    target: SankeyNode;
};

property sourceControlX

sourceControlX: number;

property sourceRelativeY

sourceRelativeY: number;

property sourceX

sourceX: number;

property sourceY

sourceY: number;

property targetControlX

targetControlX: number;

property targetRelativeY

targetRelativeY: number;

property targetX

targetX: number;

property targetY

targetY: number;

interface SankeyNode

interface SankeyNode {}

property depth

depth: number;

property dx

dx: number;

property dy

dy: number;

property name

name: string;

property sourceLinks

sourceLinks: number[];

property sourceNodes

sourceNodes: number[];

property targetLinks

targetLinks: number[];

property targetNodes

targetNodes: number[];

property value

value: any;

property x

x: number;

property y

y: number;

interface SankeyNodeProps

interface NodeProps extends Omit<SVGProps<SVGRectElement>, 'height' | 'width'> {}

property height

height: number;

property index

index: number;

property payload

payload: SankeyNode;

property width

width: number;

property x

x: number;

property y

y: number;

interface ScatterPointItem

interface ScatterPointItem {}

Scatter coordinates are nullable because sometimes the point value is out of the domain, and we can't compute a valid coordinate for it.
Scatter -> Symbol ignores points with null cx or cy so those won't render if using the default shapes. However: the points are exposed via various props and can be used in custom shapes so we keep them around.

property cx

cx: number | undefined;

The x coordinate of the point center in pixels.

property cy

cy: number | undefined;

The y coordinate of the point center in pixels.

property height

height: number;

Height of the point in pixels.

property node

node: ScatterPointNode;

property payload

payload?: any;

property size

size: number;

ScatterPointItem size is an abstract number that is used to calculate the radius of the point. It's not the radius itself, but rather a value that is used to calculate the radius. Interacts with the zAxis range.

property tooltipPayload

tooltipPayload?: TooltipPayload;

property tooltipPosition

tooltipPosition: Coordinate;

property width

width: number;

Width of the point in pixels.

property x

x: number | undefined;

The x coordinate (in pixels) of the top-left corner of the rectangle that wraps the point.

property y

y: number | undefined;

The y coordinate (in pixels) of the top-left corner of the rectangle that wraps the point.

interface ScatterPointNode

interface ScatterPointNode {}

property x

x?: number | string;

property y

y?: number | string;

property z

z?: number | string;

interface SunburstChartProps

interface SunburstChartProps extends EventThrottlingProps {}

property children

children?: React.ReactNode;

property className

className?: string;

property cx

cx?: number;

The x-coordinate of center in pixels. If undefined, it will be set to half of the chart width.

property cy

cy?: number;

The y-coordinate of center in pixels. If undefined, it will be set to half of the chart height.

property data

data: SunburstData;

The source data. Each element should be an object. The properties of each object represent the values of different data dimensions.
Use the dataKey prop to specify which properties to use.
Example 1
data={[{ name: 'a', value: 12, fill: '#8884d8' }, { name: 'b', value: 5, fill: '#83a6ed' }]}

property dataKey

dataKey?: string;

Decides how to extract value from the data.

property endAngle

endAngle?: number;

Angle, in degrees, at which the chart should end.

property fill

fill?: string;

property height

height?: number | Percent;

The height of chart container. Can be a number or a percent string like "100%".
See Also

property id

id?: string;

property innerRadius

innerRadius?: number;

The radius of the inner circle at the center of the chart.

property nameKey

nameKey?: DataKey<any>;

Name represents each sector in the tooltip. This allows you to extract the name from the data:
- 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 name.

property onClick

onClick?: (node: SunburstData) => void;

property onMouseEnter

onMouseEnter?: (node: SunburstData, e: React.MouseEvent) => void;

property onMouseLeave

onMouseLeave?: (node: SunburstData, e: React.MouseEvent) => void;

property outerRadius

outerRadius?: number;

Outermost edge of the chart. Defaults to the max possible radius for a circle inscribed in the chart container

property padding

padding?: number;

Distance between sectors.

property responsive

responsive?: boolean;

If true, then it will listen to container size changes and adapt the SVG chart accordingly. If false, then it renders the chart at the specified width and height and will stay that way even if the container size changes.
This is similar to ResponsiveContainer but without the need for an extra wrapper component. The responsive prop also uses standard CSS sizing rules, instead of custom resolution logic (like ResponsiveContainer does). false

property ringPadding

ringPadding?: number;

Padding between each hierarchical level.

property startAngle

startAngle?: number;

Angle in degrees from which the chart should start.

property stroke

stroke?: string;

property style

style?: CSSProperties;

property textOptions

textOptions?: TextProps;

An object with svg text options to control the appearance of the chart labels.

property width

width?: number | Percent;

The width of chart container. Can be a number or a percent string like "100%".
See Also

interface SunburstData

interface SunburstData {}

property children

children?: SunburstData[];

property fill

fill?: string;

property name

name: string;

property tooltipIndex

tooltipIndex?: TooltipIndex;

property value

value?: number;

index signature

[key: string]: any;

interface SVGMousePointer

interface SVGMousePointer {}

Simplified version of the MouseEvent for SVG elements.
Similar to MousePointer but uses SVGGraphicsElement properties instead of HTMLElement properties. SVG elements use getBBox() to get the intrinsic size instead of offsetWidth/offsetHeight.

property clientX

clientX: number;

property clientY

clientY: number;

property currentTarget

currentTarget: SVGElementTarget;

interface SVGTouchPointer

interface SVGTouchPointer {}

property currentTarget

currentTarget: SVGElementTarget;

property touches

touches: ArrayLike<Pick<Touch, 'clientX' | 'clientY'>>;

interface TickItem

interface TickItem {}

property coordinate

coordinate: number;

property index

index: number;

property offset

offset?: number;

How far this tick is offset from the start of a category band. On axes that do not have bands, this will always be zero.
We never read offset internally in Recharts, but it has been part of the external API so let's keep it here for people who do use it.

property value

value: any;

interface TooltipPayloadEntry

interface Payload<
    TValue extends ValueType = ValueType,
    TName extends NameType = NameType
> extends Omit<SVGProps<SVGElement>, 'name'> {}

property chartType

chartType?: string;

property className

className?: string;

property color

color?: string;

property dataKey

dataKey?: DataKey<any>;

property fill

fill?: string;

property formatter

formatter?: Formatter<TValue, TName>;

property graphicalItemId

graphicalItemId: string;

The id of the graphical item that the data point belongs to

property hide

hide?: boolean;

property name

name?: TName;

property nameKey

nameKey?: DataKey<any>;

property payload

payload?: any;

property stroke

stroke?: string;

property strokeDasharray

strokeDasharray?: string | number;

property strokeWidth

strokeWidth?: number | string;

property type

type?: TooltipType;

property unit

unit?: ReactNode;

property value

value?: TValue;

interface TreemapNode

interface TreemapNode {}

This is what is returned from squarify, the final treemap data structure that gets rendered and is stored in

property children

children: ReadonlyArray<TreemapNode> | null;

property depth

depth: number;

property height

height: number;

property index

index: number;

property name

name: string;

property root

root?: TreemapNode;

property tooltipIndex

tooltipIndex: TooltipIndex;

property value

value: number;

property width

width: number;

property x

x: number;

property y

y: number;

index signature

[k: string]: unknown;

interface TreemapProps

interface Props<
    DataPointType extends TreemapDataType = TreemapDataType,
    DataValueType = any
> extends DataConsumer<DataPointType, DataValueType>,
        EventThrottlingProps {}

property animationBegin

animationBegin?: number;

Specifies when the animation should begin, the unit of this option is ms. 0

property animationDuration

animationDuration?: AnimationDuration;

Specifies the duration of animation, the unit of this option is ms. 1500

property animationEasing

animationEasing?: AnimationTiming;

The type of easing function. 'linear'

property animationId

animationId?: number;

Deprecated
unused prop, doesn't do anything, use key instead

property aspectRatio

aspectRatio?: number;

The treemap will try to keep every single rectangle's aspect ratio near the aspectRatio given. 1.618033988749895

property children

children?: ReactNode;

property className

className?: string;

property colorPanel

colorPanel?: ReadonlyArray<string>;

property content

content?: TreemapContentType;

If set to a React element, the option is the customized React element of rendering the content. If set to a function, the function will be called to render the content.

property data

data?: ReadonlyArray<DataPointType>;

The source data. Each element should be an object. The properties of each object represent the values of different data dimensions.
Use the dataKey prop to specify which properties to use.
If the children property is present on an element, it will be treated as a nested treemap.

property dataKey

dataKey?: DataKey<DataPointType, DataValueType>;

Decides how to extract the value of this Treemap from the data: - 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 of this Treemap.

property fill

fill?: string;

property height

height?: number | Percent;

The height of chart container. Can be a number or a percent string like "100%".

property id

id?: string;

property isAnimationActive

isAnimationActive?: boolean | 'auto';

If set false, animation of treemap will be disabled. If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility. 'auto'

property isUpdateAnimationActive

isUpdateAnimationActive?: boolean | 'auto';

property nameKey

nameKey?: DataKey<DataPointType, DataValueType>;

Name represents each sector in the tooltip. This allows you to extract the name from the data:
- 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 name.

property nestIndexContent

nestIndexContent?:
    | React.ReactElement
    | ((item: TreemapNode, i: number) => ReactNode);

property onAnimationEnd

onAnimationEnd?: () => void;

The customized event handler of animation end

property onAnimationStart

onAnimationStart?: () => void;

The customized event handler of animation start

property onClick

onClick?: (node: TreemapNode) => void;

property onMouseEnter

onMouseEnter?: (
    node: TreemapNode,
    e: React.MouseEvent<SVGGraphicsElement>
) => void;

property onMouseLeave

onMouseLeave?: (
    node: TreemapNode,
    e: React.MouseEvent<SVGGraphicsElement>
) => void;

property stroke

stroke?: string;

property style

style?: React.CSSProperties;

property type

type?: 'flat' | 'nest';

The type of treemap to render.
- 'flat': Renders the entire treemap at once, with all leaf nodes visible. - 'nest': Renders an interactive, nested treemap. Clicking on a parent node will "zoom in" to show its children, and a breadcrumb navigation will be displayed to allow navigating back up the hierarchy.
'flat'

property width

width?: number | Percent;

The width of chart container. Can be a number or a percent string like "100%".

interface ZAxisProps

interface Props<DataPointType = any, DataValueType = any>
    extends Omit<BaseAxisProps<DataPointType, DataValueType>, 'domain'> {}

property domain

domain?: AxisDomain;

Specify the domain of axis when the axis is a number axis.
If undefined, then the domain is calculated based on the data and dataKeys.
The length of domain should be 2, and we will validate the values in domain.
Each element in the array can be a number, 'auto', 'dataMin', 'dataMax', a string like 'dataMin - 20', 'dataMax + 100', or a function that accepts a single argument and returns a number.
If any element of domain is set to be 'auto', comprehensible scale ticks will be calculated, and the final domain of axis is generated by the ticks. If a function, receives '[dataMin, dataMax]', and must return a computed domain as '[min, max]'.
Example 1
<ZAxis type="number" domain={['dataMin', 'dataMax']} />
Example 2
<ZAxis type="number" domain={[0, 'dataMax']} />
Example 3
<ZAxis type="number" domain={['auto', 'auto']} />
Example 4
<ZAxis type="number" domain={[0, 'dataMax + 1000']} />
Example 5
<ZAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
Example 6
<ZAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
Example 7
<ZAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
Example 8
<ZAxis type="number" domain={[0, 100]} allowDataOverflow />

property range

range?: AxisRange;

The range of axis. Unlike other axes, the range of z-axis is not informed by chart dimensions.

property scale

scale?:
    | ScaleType
    | CustomScaleDefinition
    | CustomScaleDefinition<string>
    | CustomScaleDefinition<number>
    | CustomScaleDefinition<Date>;

Scale function determines how data values are mapped to visual values. In other words, decided the mapping between data domain and coordinate range.
If undefined, or 'auto', the scale function is created internally according to the type of axis and data.
You can define a custom scale, either as a string shortcut to a d3 scale, or as a complete scale definition object.
Example 1
Example 2
import { scaleLog } from 'd3-scale'; const scale = scaleLog().base(Math.E); <ZAxis scale={scale} />

property type

type?: 'number' | 'category';

The type of axis.
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.

property zAxisId

zAxisId?: AxisId;

The unique id of z-axis.

Type Aliases

type ActiveDotProps

type ActiveDotProps = DotProps & {
    payload: any;
    index: number;
    dataKey: DataKey<any> | undefined;
    cx: number | undefined;
    cy: number | undefined;
    r: number | string | undefined;
    fill: string;
    strokeWidth: number;
    stroke: string;
    value: any;
};

These are the props we are going to pass to an activeDot or dot if it is a function or a custom Component

type ActiveLabel

type ActiveLabel = string | number | undefined;

type AreaProps

type Props<DataPointType, ValueAxisType> = AreaSvgProps &
    AreaProps<DataPointType, ValueAxisType>;

type AxisDomainItem

type AxisDomainItem =
    | string
    | number
    | ((d: number) => string | number)
    | 'auto'
    | 'dataMin'
    | 'dataMax';

type AxisId

type AxisId = string | number;

type AxisInterval

type AxisInterval =
    | number
    | 'preserveStart'
    | 'preserveEnd'
    | 'preserveStartEnd'
    | 'equidistantPreserveStart'
    | 'equidistantPreserveEnd';

Defines how ticks are placed and whether / how tick collisions are handled. 'preserveStart' keeps the left tick on collision and ensures that the first tick is always shown. 'preserveEnd' keeps the right tick on collision and ensures that the last tick is always shown. 'preserveStartEnd' keeps the left tick on collision and ensures that the 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.

type AxisRange

type AxisRange = readonly [number, number];

type BandPosition

type BandPosition = 'start' | 'middle' | 'end';

Position within a band for banded scales. In scales that are not banded, this parameter is ignored.

type BarProps

type Props<DataPointType = any, ValueAxisType = any> = Partial<BarEvents> &
    BarProps<DataPointType, ValueAxisType> &
    Omit<BarSvgProps, keyof BarEvents>;

type BarShapeProps

type BarShapeProps = BarRectangleItem & {
    isActive: boolean;
    index: number;
    option?: ActiveShape<BarShapeProps, SVGPathElement> | undefined;
};

type BarStackProps

type BarStackProps = {
    /**
     * When two Bars have the same axisId and same stackId, then the two Bars are stacked in the chart.
     * This prop sets the stack ID for all Bar components inside this BarStack component.
     * If undefined, a unique id will be generated automatically.
     *
     * When both BarStack and individual Bar components have stackId defined,
     * the BarStack's stackId wins, and the individual Bar's stackId is ignored.
     */
    stackId?: StackId;
    /**
     * Radius applies only once to all bars inside of this stack group,
     * as if they were one huge bar.
     * Meaning that if you have three bars stacked together, and you set
     * radius to 10, only the outer corners of the entire stack will be rounded: the middle bars will have square corners.
     *
     * Unless! The edge bars are smaller than the radius value, in which case the bars at the edge get a lot of radius
     * and the middle one gets a little bit of radius.
     *
     * You may want to combine this with setting individual Bar components' radius to their own values for best effect.
     * `Bar.radius` prop will round corners of individual bars, while `BarStack.radius` will round corners of the entire stack.
     *
     * If you provide a single number, it applies to all four corners.
     * If you provide an array of four numbers, they apply to top-left, top-right, bottom-right, bottom-left corners respectively.
     *
     * @defaultValue 0
     */
    radius?: RectRadius;
    children?: ReactNode;
};

type BaseTickContentProps

type BaseTickContentProps = {
    angle: number;
    className?: string;
    fill: string | undefined;
    height?: number | string;
    index: number;
    name?: string;
    stroke: string;
    payload: CartesianTickItem;
    textAnchor: TextAnchor;
    tickFormatter: TickFormatter | undefined;
    verticalAnchor: TextVerticalAnchor;
    visibleTicksCount: number;
    width?: number | string;
    x: number | string;
    y: number | string;
};

type BrushProps

type Props = Omit<SVGProps<SVGElement>, 'onChange' | 'onDragEnd' | 'ref'> &
    BrushProps;

type CartesianAxisProps

type Props = Omit<
    PresentationAttributesAdaptChildEvent<any, SVGElement>,
    'viewBox' | 'scale' | 'ref'
> &
    CartesianAxisProps;

type CartesianDataPoint

type CartesianDataPoint = {
    x: number | string;
    y: number | string;
};

Data point with x and y values that can be converted to pixel coordinates. The x and y values should be in the same format as your chart data.

type CartesianGridProps

type Props = AcceptedSvgProps & CartesianGridProps;

type ChartOffset

type ChartOffset = {
    /**
     * Distance from the top edge of the chart to the top edge of the plot area.
     */
    readonly top: number;
    /**
     * Distance from the bottom edge of the chart to the bottom edge of the plot area.
     * Note that this is not a coordinate, this is a distance.
     * Meaning, `offset.bottom` could be 0 in a perfectly fine big chart.
     */
    readonly bottom: number;
    /**
     * Distance from the left edge of the chart to the left edge of the plot area.
     */
    readonly left: number;
    /**
     * Distance from the right edge of the chart to the right edge of the plot area.
     * Note that this is not a coordinate, this is a distance.
     * Meaning, `offset.right` could be 0 in a perfectly fine big chart.
     */
    readonly right: number;
};

Defines the blank space between the chart and the plot area. This blank space is occupied by supporting elements like axes, legends, and brushes. This also includes any margins that might be applied to the chart.

type CrossProps

type Props = SVGProps<SVGPathElement> & CrossProps;

type CurveProps

type Props = Omit<
    PresentationAttributesWithProps<CurveProps, SVGPathElement>,
    | 'type'
    | 'points'
    | 'onClick'
    | 'onMouseEnter'
    | 'onMouseLeave'
    | 'onMouseDown'
    | 'onMouseUp'
    | 'onMouseMove'
    | 'onMouseOver'
    | 'onMouseOut'
> &
    CurveMouseEvents &
    CurveProps;

type CustomizedProps

type Props<P, C extends Comp<P>> = P & {
    /**
     * Render your components directly, without Customized wrapper. Will be removed in 4.0
     * @deprecated
     * @example Before: `<Customized component={<MyCustomComponent />} />`
     * @example After: `<MyCustomComponent />`
     */
    component: C;
};

type DataKey

type DataKey<DataPointType, DataValueType = any> = TypedDataKey<
    DataPointType,
    DataValueType
>;

Extracts values from data objects.

type DefaultLegendContentProps

type Props = DefaultLegendContentProps &
    Omit<
        PresentationAttributesAdaptChildEvent<any, ReactElement>,
        keyof DefaultLegendContentProps
    >;

type DotItemDotProps

type DotItemDotProps = SVGPropsNoEvents<Omit<DotProps, 'points' | 'ref'>> & {
    points: ReadonlyArray<DotPoint>;
    index: number;
    payload: any;
    dataKey: DataKey<any> | undefined;
    value: any;
};

Inside the dot event handlers we provide extra information about the dot point that the Dot component itself does not need but users might find useful.

type DotProps

type Props = PresentationAttributesWithProps<DotProps, SVGCircleElement> & DotProps;

type ErrorBarProps

type Props = SVGProps<SVGLineElement> & ErrorBarProps;

type FunnelProps

type Props<DataPointType = any, DataValueType = any> = FunnelSvgProps &
    FunnelProps<DataPointType, DataValueType>;

type FunnelTrapezoidItem

type FunnelTrapezoidItem = TrapezoidProps &
    TrapezoidViewBox & {
        value?: number | string;
        payload?: any;
        tooltipPosition: Coordinate;
        name: string;
        labelViewBox: TrapezoidViewBox;
        parentViewBox: CartesianViewBoxRequired;
        val: number | ReadonlyArray<number>;
        tooltipPayload: TooltipPayload;
    };

type IfOverflow

type IfOverflow = 'hidden' | 'visible' | 'discard' | 'extendDomain';

type InternalRadarProps

type InternalRadarProps = WithIdRequired<PropsWithDefaults> & RadarComposedData;

type InverseScaleFunction

type InverseScaleFunction = (pixelValue: number) => unknown;

A function that converts pixel coordinates back to data values.
Parameter pixelValue
The pixel coordinate to convert.
Returns
The closest data value in the domain.

type LabelListProps

type Props = Omit<SvgTextProps, 'children'> & LabelListProps;

type LabelListPropsWithPosition

type LabelListPropsWithPosition = LabelListProps & {
    position: LabelListProps['position'];
};

type LabelProps

type Props = Omit<SVGProps<SVGTextElement>, 'viewBox'> & LabelProps;

type LayerProps

type Props = SVGAttributes<SVGGElement> & LayerProps;

type LegendProps

type Props = Omit<DefaultLegendContentProps, 'payload' | 'ref' | 'verticalAlign'> & {
    /**
     * Renders the content of the legend.
     *
     * This should return HTML elements, not SVG elements.
     *
     * - If not set, the {@link DefaultLegendContent} component is used.
     * - If set to a React element, this element will be cloned and extra props will be passed in.
     * - If set to a function, the function will be called and should return HTML elements.
     *
     * @example <Legend content={CustomizedLegend} />
     * @example <Legend content={renderLegend} />
     */
    content?: ContentType;
    /**
     * CSS styles to be applied to the wrapper `div` element.
     */
    wrapperStyle?: CSSProperties;
    /**
     * Width of the legend.
     * Accept CSS style string values like `100%` or `fit-content`, or number values like `400`.
     */
    width?: number | string;
    /**
     * Height of the legend.
     * Accept CSS style string values like `100%` or `fit-content`, or number values like `400`.
     */
    height?: number | string;
    payloadUniqBy?: UniqueOption<LegendPayload>;
    onBBoxUpdate?: (box: ElementOffset | null) => void;
    /**
     * If portal is defined, then Legend will use this element as a target
     * for rendering using React Portal.
     *
     * If this is undefined then Legend renders inside the recharts-wrapper element.
     *
     * @see {@link https://react.dev/reference/react-dom/createPortal}
     */
    portal?: HTMLElement | null;
    /**
     * Sorts Legend items. Defaults to `value` which means it will sort alphabetically
     * by the label.
     *
     * If `null` is provided then the payload is not sorted. Be aware that without sort,
     * the order of items may change between renders!
     *
     * @defaultValue value
     */
    itemSorter?: LegendItemSorter | null;
    /**
     * The alignment of the whole Legend container:
     *
     * - `bottom`: shows the Legend below chart, and chart height reduces automatically to make space for it.
     * - `top`: shows the Legend above chart, and chart height reduces automatically.
     * - `middle`:  shows the Legend in the middle of chart, covering other content, and chart height remains unchanged.
     * The exact behavior changes depending on `align` prop.
     *
     * @defaultValue bottom
     */
    verticalAlign?: VerticalAlignmentType;
};

type LegendType

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

type LineProps

type Props<DataPointType = any, ValueAxisType = any> = LineSvgProps &
    LineProps<DataPointType, ValueAxisType>;

type MouseHandlerDataParam

type MouseHandlerDataParam = {
    /**
     * Index of the active tick in the current chart. Only works with number-indexed one-dimensional data charts,
     * like Line, Area, Bar, Pie, etc.
     *
     * Doesn't work with two-dimensional data charts like Treemap, Sankey. But one day it will which is why the TooltipIndex type is here.
     */
    activeTooltipIndex: number | TooltipIndex | undefined;
    isTooltipActive: boolean;
    /**
     * Exactly the same as activeTooltipIndex - this was also duplicated in recharts@2 so let's keep both properties for better backwards compatibility.
     */
    activeIndex: number | TooltipIndex | undefined;
    /**
     * The category or domain value of the active tooltip entry.
     */
    activeLabel: ActiveLabel;
    activeDataKey: DataKey<any> | undefined;
    activeCoordinate: Coordinate | undefined;
};

Despite the name, this type is used for all event types, not just mouse events.

type MousePointer

type MousePointer = HTMLMousePointer | SVGMousePointer;

Recharts accepts mouse events from both HTML and SVG elements.

type NiceTicksAlgorithm

type NiceTicksAlgorithm = 'none' | 'auto' | 'adaptive' | 'snap125';

Controls how Recharts calculates "nice" tick values for numerical axes.
- 'none': Recharts does not apply any tick-rounding algorithm; tick positions are determined entirely by d3, evenly spaced but not rounded to human-friendly numbers. There is no domain-extension logic applied in this mode.
- 'auto' *(default)*: Recharts automatically decides whether and how to apply tick niceties based on the domain definition. When the domain contains an 'auto' keyword, Recharts uses the 'adaptive' algorithm and may extend the domain slightly to produce clean tick labels. Otherwise, it applies the same algorithm while keeping ticks within the fixed domain. This mirrors the default behavior from Recharts v2.
- 'adaptive': Always applies the space-efficient algorithm (getAdaptiveStep), which fills the available range as densely as possible while still rounding steps to reasonable numbers (e.g. 10, 20, 25). May produce less "round-looking" labels than 'snap125', but wastes less space. The domain-extension logic still applies when the domain contains an 'auto' keyword.
- 'snap125': Always applies the round-numbers algorithm (getSnap125Step), which snaps step sizes to values from the set {1, 2, 2.5, 5} × 10ⁿ. Produces very human-friendly labels (e.g. 0, 5, 10, 15, 20) but may leave blank space at the edges of the chart. The domain-extension logic still applies when the domain contains an 'auto' keyword.
See Also
- https://recharts.github.io/guide/axisTicks/

type NoCentric

type NoCentric<T> = 'Radar' extends keyof T
    ? never
    : 'RadarChart' extends keyof T
    ? never
    : T;

type NoFunnel

type NoFunnel<T> = 'Funnel' extends keyof T
    ? never
    : 'FunnelChart' extends keyof T
    ? never
    : T;

type NoRadial

type NoRadial<T> = 'RadialBar' extends keyof T
    ? never
    : 'RadialBarChart' extends keyof T
    ? never
    : 'Pie' extends keyof T
    ? never
    : 'PieChart' extends keyof T
    ? never
    : T;

type NumberDomain

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

NumberDomain is an evaluated AxisDomain. Unlike AxisDomain, it has no variety - it's a tuple of two number. This is after all the keywords and functions were evaluated and what is left is [min, max].
Know that the min, max values are not guaranteed to be nice numbers - values like -Infinity or NaN are possible.
There are also category axes that have different things than numbers in their domain.

type PieLabel

type PieLabel =
    | boolean
    | LabelListPropsWithPosition
    | Partial<PieLabelRenderProps>
    | ((props: PieLabelRenderProps) => ReactNode | ReactElement<SVGElement>)
    | ReactElement<SVGElement>;

The label prop in Pie accepts a variety of alternatives.

type PieLabelRenderProps

type PieLabelRenderProps = Omit<SVGPropsNoEvents<PieSvgAttributes>, 'offset'> &
    Omit<PieSectorDataItem, 'offset'> &
    PieLabelExtraProps &
    Coordinate;

type PieProps

type Props<DataPointType = any, DataValueType = any> = PieSvgAttributes &
    PieProps<DataPointType, DataValueType>;

type PieSectorDataItem

type PieSectorDataItem = PiePresentationProps &
    PieCoordinate &
    PieSectorData & {
        cornerRadius: number | undefined;
    };

We spread the data object into the sector data item, so we can't really know what is going to be inside.
This type represents our best effort, but it all depends on the input data and what is inside of it.
https://github.com/recharts/recharts/issues/6380 https://github.com/recharts/recharts/discussions/6375

type PieSectorShapeProps

type PieSectorShapeProps = PieSectorDataItem & {
    isActive: boolean;
    index: number;
};

type PieShape

type PieShape =
    | ReactNode
    | ((props: PieSectorShapeProps, index: number) => React.ReactElement);

type PlotArea

type PlotArea = {
    /**
     * The width of the plot area.
     * This will be the same as `chartWidth - offset.left - offset.right`
     */
    readonly width: number;
    /**
     * The height of the plot area.
     * This will be the same as `chartHeight - offset.top - offset.bottom`
     */
    readonly height: number;
    /**
     * The x coordinate of the top-left corner of the plot area.
     * This will be the same as `offset.left`
     */
    readonly x: number;
    /**
     * The y coordinate of the top-left corner of the plot area.
     * This will be the same as `offset.top`
     */
    readonly y: number;
};

Plot area is the area where the actual chart data is rendered. This means: bars, lines, scatter points, etc.

type PolarAngleAxisProps

type Props<DataPointType = any, DataValueType = any> = AxisSvgProps &
    PolarAngleAxisProps<DataPointType, DataValueType>;

type PolarCoordinate

type PolarCoordinate = Coordinate & {
    angle: number;
    startAngle: number;
    endAngle: number;
    clockWise: boolean;
    cx: number;
    cy: number;
    innerRadius: number;
    outerRadius: number;
    radius: number;
};

type PolarGridProps

type Props = SVGProps<SVGLineElement> & PolarGridProps;

type PolarRadiusAxisProps

type Props<DataPointType = any, DataValueType = any> = AxisSvgProps &
    PolarRadiusAxisProps<DataPointType, DataValueType>;

type PolygonProps

type Props = Omit<SVGProps<SVGPolygonElement>, 'points'> & PolygonProps;

type RadarProps

type Props<DataPointType = any, DataValueType = any> = Omit<
    SVGProps<SVGGraphicsElement>,
    'onMouseEnter' | 'onMouseLeave' | 'points' | 'ref'
> &
    RadarProps<DataPointType, DataValueType>;

type RadialBarDataItem

type RadialBarDataItem = SectorProps &
    PolarViewBoxRequired &
    TooltipTriggerInfo & {
        value?: any;
        payload?: any;
        background?: SectorProps;
    };

type RadialBarProps

type RadialBarProps<DataPointType = any, DataValueType = any> = Omit<
    PresentationAttributesAdaptChildEvent<RadialBarDataItem, SVGElement>,
    'ref' | keyof InternalRadialBarProps<DataPointType, DataValueType>
> &
    Omit<InternalRadialBarProps<DataPointType, DataValueType>, 'sectors'>;

type RectangleProps

type Props = Omit<SVGProps<SVGPathElement>, 'radius'> & RectangleProps;

type ReferenceAreaProps

type Props<
    XValueType extends ReferenceCoordinateValue = any,
    YValueType extends ReferenceCoordinateValue = any
> = Omit<SVGPropsAndEvents<RectangleProps>, 'width' | 'height' | 'x' | 'y'> &
    ReferenceAreaProps<XValueType, YValueType>;

type ReferenceDotProps

type Props<
    XValueType extends ReferenceCoordinateValue = any,
    YValueType extends ReferenceCoordinateValue = any
> = Omit<DotProps, 'cx' | 'cy' | 'clipDot' | 'dangerouslySetInnerHTML'> &
    ReferenceDotProps<XValueType, YValueType>;

type ReferenceLineProps

type Props<
    XValueType extends ReferenceCoordinateValue = any,
    YValueType extends ReferenceCoordinateValue = any
> = Omit<SVGProps<SVGLineElement>, 'viewBox'> &
    ReferenceLineProps<XValueType, YValueType>;

This excludes viewBox prop from svg for two reasons: 1. The components wants viewBox of object type, and svg wants string - so there's a conflict, and the component will throw if it gets string 2. Internally the component calls svgPropertiesNoEvents which filters the viewBox away anyway

type ReferenceLineSegment

type ReferenceLineSegment = readonly [
    {
        x?: number | string;
        y?: number | string;
    },
    {
        x?: number | string;
        y?: number | string;
    }
];

Single point that defines one end of a segment. These coordinates are in data space, meaning that you should provide values that correspond to the data domain of the axes. So you would provide a value of Page A to indicate the data value Page A and then recharts will convert that to pixels.
Likewise for numbers. If your x-axis goes from 0 to 100, and you want the line to end at 50, you would provide 50 here.

type RenderableText

type RenderableText = string | number | boolean | null | undefined;

type SankeyElementType

type SankeyElementType = 'node' | 'link';

type SankeyNodeOptions

type SankeyNodeOptions =
    | ReactElement<SVGProps<SVGRectElement>>
    | ((props: NodeProps) => ReactNode)
    | RectangleProps;

type SankeyProps

type Props = Omit<SVGProps<SVGSVGElement>, keyof SankeyProps> & SankeyProps;

type ScaleFunction

type ScaleFunction = (
    value: unknown,
    options?: {
        position?: BandPosition;
    }
) => number | undefined;

A function that converts data values to pixel coordinates.
Parameter value
The data value to convert (number, string, or category).
Parameter options
Optional configuration for banded scales.
Parameter
options.position - Position within a band: 'start', 'middle', or 'end'.
Returns
The pixel coordinate, or undefined if the value is not in the domain.

type ScatterProps

type Props<DataPointType = any, ValueAxisType = any> = BaseScatterSvgProps &
    ScatterProps<DataPointType, ValueAxisType>;

type ScatterShapeProps

type ScatterShapeProps = ScatterPointItem & {
    index: number;
    [DATA_ITEM_GRAPHICAL_ITEM_ID_ATTRIBUTE_NAME]: GraphicalItemId;
};

type SectorProps

type Props = Omit<
    SVGProps<SVGPathElement>,
    'cx' | 'cy' | 'dangerouslySetInnerHTML'
> &
    Partial<SectorProps>;

SVG cx, cy are string | number | undefined, but internally we use number so let's override the types here.

type SurfaceProps

type Props = Omit<SVGProps<SVGSVGElement>, 'viewBox'> & SurfaceProps;

type SymbolsProps

type SymbolsProps = Omit<SVGProps<SVGPathElement>, 'type'> & InnerSymbolsProp;

type SymbolType

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

type TextAnchor

type TextAnchor = 'start' | 'middle' | 'end' | 'inherit';

type TextProps

type Props = Omit<SVGProps<SVGTextElement>, 'textAnchor' | 'verticalAnchor'> &
    TextProps;

type TextVerticalAnchor

type TextVerticalAnchor = 'start' | 'middle' | 'end';

type TooltipContentProps

type TooltipContentProps<
    TValue extends ValueType = ValueType,
    TName extends NameType = NameType
> = TooltipProps<TValue, TName> & {
    label?: string | number;
    payload: TooltipPayload;
    coordinate: Coordinate | undefined;
    active: boolean;
    accessibilityLayer: boolean;
    activeIndex: TooltipIndex | undefined;
};

type TooltipIndex

type TooltipIndex = string | null;

null means no active index string means: whichever index from the chart data it is. Different charts have different requirements on data shapes, and are also responsible for providing a function that will accept this index and return data.

type TooltipItemSorter

type TooltipItemSorter<
    TValue extends ValueType = ValueType,
    TName extends NameType = NameType
> =
    | 'dataKey'
    | 'value'
    | 'name'
    | ((item: Payload<TValue, TName>) => number | string | undefined);

type TooltipPayload

type TooltipPayload = ReadonlyArray<TooltipPayloadEntry>;

This is what Tooltip renders.

type TooltipProps

type TooltipProps<
    TValue extends ValueType = ValueType,
    TName extends NameType = NameType
> = Omit<DefaultTooltipContentProps<TValue, TName>, PropertiesReadFromContext> & {
    /**
     * If true, then Tooltip is always displayed, once an activeIndex is set by mouse over, or programmatically.
     * If false, then Tooltip is never displayed.
     * If undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls.
     */
    active?: boolean;
    /**
     * This option allows the tooltip to extend beyond the viewBox of the chart itself.
     * @defaultValue {"x":false,"y":false}
     */
    allowEscapeViewBox?: AllowInDimension;
    /**
     * Specifies the duration of animation, the unit of this option is ms.
     * @defaultValue 400
     */
    animationDuration?: AnimationDuration;
    /**
     * The type of easing function.
     * @defaultValue ease
     */
    animationEasing?: AnimationTiming;
    /**
     * Tooltip always attaches itself to the "Tooltip" axis. Which axis is it? Depends on the layout:
     * - horizontal layout -> X axis
     * - vertical layout -> Y axis
     * - radial layout -> radial axis
     * - centric layout -> angle axis
     *
     * Tooltip will use the default axis for the layout, unless you specify an axisId.
     *
     * @defaultValue 0
     */
    axisId?: AxisId;
    /**
     * Renders the content of the tooltip.
     *
     * This should return HTML elements, not SVG elements.
     *
     * - If not set, the {@link DefaultTooltipContent} component is used.
     * - If set to a React element, this element will be cloned and extra props will be passed in.
     * - If set to a function, the function will be called and should return HTML elements.
     *
     * @see {@link https://recharts.github.io/en-US/examples/CustomContentOfTooltip/ Example with custom content}
     */
    content?: ContentType<TValue, TName>;
    /**
     * The style of tooltip content which is a dom element.
     * @defaultValue {}
     */
    contentStyle?: CSSProperties;
    /**
     * If set false, no cursor will be drawn when tooltip is active.
     * If set a object, the option is the configuration of cursor.
     * If set a React element, the option is the custom react element of drawing cursor.
     * @defaultValue true
     */
    cursor?: CursorDefinition;
    defaultIndex?: number | TooltipIndex;
    /**
     * When an item of the payload has value null or undefined, this item won't be displayed.
     * @defaultValue true
     */
    filterNull?: boolean;
    /**
     * Function to customize the value in the tooltip.
     * If you return an array, the first entry will be the formatted "value", and the second entry will be the formatted "name"
     */
    formatter?: (
        value: TValue,
        name: TName,
        item: TooltipPayloadEntry,
        index: number,
        payload: TooltipPayload
    ) => ReactNode | [ReactNode, ReactNode];
    /**
     * If true, the tooltip will display information about hidden series.
     * Defaults to false.
     * Interacting with the hide property of Area, Bar, Line, Scatter.
     *
     * @defaultValue false
     */
    includeHidden?: boolean | undefined;
    /**
     * If set false, animation of tooltip will be disabled.
     * If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility.
     * @defaultValue auto
     */
    isAnimationActive?: boolean | 'auto';
    /**
     * Sorts tooltip items.
     * Defaults to 'name' which means it sorts alphabetically by graphical item `name` property.
     * @defaultValue name
     */
    itemSorter?: TooltipItemSorter;
    /**
     * The style of default tooltip content item which is a li element.
     * @defaultValue {}
     */
    itemStyle?: CSSProperties;
    /**
     * The formatter function of label in tooltip.
     */
    labelFormatter?: (label: any, payload: TooltipPayload) => ReactNode;
    /**
     * The style of default tooltip label which is a p element.
     * @defaultValue {}
     */
    labelStyle?: CSSProperties;
    /**
     * The offset size between the position of tooltip and the mouse cursor position.
     * When a number is provided, the same offset is applied to both x and y axes.
     *
     * When a Coordinate object is provided, you can specify different offsets for each axis (x and y as numbers)
     * @defaultValue 10
     */
    offset?: number | Coordinate;
    payloadUniqBy?: UniqueOption<TooltipPayloadEntry>;
    /**
     * If portal is defined, then Tooltip will use this element as a target
     * for rendering using React Portal: https://react.dev/reference/react-dom/createPortal
     *
     * If this is undefined then Tooltip renders inside the recharts-wrapper element.
     */
    portal?: HTMLElement | null;
    /**
     * If this field is set, the tooltip will be displayed at the specified position
     * regardless of the mouse position.
     *
     * You can set a single field (x or y) and let the other field be calculated automatically based
     * on the mouse position.
     */
    position?: Partial<Coordinate>;
    /**
     * @defaultValue {"x":false,"y":false}
     */
    reverseDirection?: AllowInDimension;
    /**
     * The separator between name and value.
     * @defaultValue ' : '
     */
    separator?: string;
    /**
     * Defines whether the tooltip is reacting to the current data point,
     * or to all data points at the current axis coordinate.
     *
     * - `true`: tooltip will appear on top of all bars on an axis tick.
     * - `false`: tooltip will appear on individual bars.
     *
     * Different chart types allow different modes, and have different defaults.
     *
     * @see {@link https://github.com/recharts/recharts/wiki/Tooltip-event-type-and-shared-prop Tooltip event type and shared prop wiki page}
     */
    shared?: boolean;
    /**
     * If `hover` then the Tooltip shows on mouse enter and hides on mouse leave.
     *
     * If `click` then the Tooltip shows after clicking and stays active.
     *
     * @defaultValue hover
     */
    trigger?: TooltipTrigger;
    /**
     * @defaultValue false
     */
    useTranslate3d?: boolean;
    /**
     * CSS styles to be applied to the wrapper `div` element.
     */
    wrapperStyle?: CSSProperties;
};

type TooltipValueType

type ValueType = number | string | ReadonlyArray<number | string>;

type TouchPointer

type TouchPointer = HTMLTouchPointer | SVGTouchPointer;

type TrapezoidProps

type Props = SVGProps<SVGPathElement> & TrapezoidProps;

type TreemapContentType

type TreemapContentType = ReactNode | ((props: TreemapNode) => React.ReactElement);

type TypedCentricChartContext

type TypedCentricChartContext<TData, TCategorical, TNumerical, TComponents> = {
    RadarChart: React.ComponentType<Omit<PolarChartProps<TData>, 'layout'>>;
} & Omit<
    {
        [K in keyof TComponents]: K extends 'PolarAngleAxis'
            ? React.ComponentType<PolarAngleAxisProps<TData, TCategorical>>
            : K extends 'PolarRadiusAxis'
            ? React.ComponentType<PolarRadiusAxisProps<TData, TNumerical>>
            : K extends 'RadialBar'
            ? React.ComponentType<RadialBarProps<TData, TNumerical>>
            : K extends 'Radar'
            ? React.ComponentType<RadarProps<TData, TNumerical>>
            : K extends 'Pie'
            ? React.ComponentType<PieProps<TData, TNumerical>>
            : TComponents[K];
    },
    'RadialBar' | 'RadialBarChart' | 'Pie' | 'PieChart'
>;

type TypedHorizontalChartContext

type TypedHorizontalChartContext<TData, TCategorical, TNumerical, TComponents> = {
    AreaChart: React.ComponentType<Omit<CartesianChartProps<TData>, 'layout'>>;
    BarChart: React.ComponentType<Omit<CartesianChartProps<TData>, 'layout'>>;
    LineChart: React.ComponentType<Omit<CartesianChartProps<TData>, 'layout'>>;
    ComposedChart: React.ComponentType<Omit<CartesianChartProps<TData>, 'layout'>>;
    ScatterChart: React.ComponentType<Omit<CartesianChartProps<TData>, 'layout'>>;
} & Omit<
    {
        [K in keyof TComponents]: K extends 'XAxis'
            ? React.ComponentType<XAxisProps<TData, TCategorical>>
            : K extends 'YAxis'
            ? React.ComponentType<YAxisProps<TData, TNumerical>>
            : K extends 'ZAxis'
            ? React.ComponentType<ZAxisProps<TData, TNumerical>>
            : K extends 'Area'
            ? React.ComponentType<AreaProps<TData, TNumerical>>
            : K extends 'Bar'
            ? React.ComponentType<BarProps<TData, TNumerical>>
            : K extends 'Line'
            ? React.ComponentType<LineProps<TData, TNumerical>>
            : K extends 'Scatter'
            ? React.ComponentType<ScatterProps<TData, TNumerical>>
            : TComponents[K];
    },
    'Funnel' | 'FunnelChart'
>;

type TypedRadialChartContext

type TypedRadialChartContext<TData, TCategorical, TNumerical, TComponents> = {
    RadialBarChart: React.ComponentType<Omit<PolarChartProps<TData>, 'layout'>>;
    PieChart: React.ComponentType<Omit<PolarChartProps<TData>, 'layout'>>;
} & Omit<
    {
        [K in keyof TComponents]: K extends 'PolarAngleAxis'
            ? React.ComponentType<PolarAngleAxisProps<TData, TNumerical>>
            : K extends 'PolarRadiusAxis'
            ? React.ComponentType<PolarRadiusAxisProps<TData, TCategorical>>
            : K extends 'RadialBar'
            ? React.ComponentType<RadialBarProps<TData, TNumerical>>
            : K extends 'Radar'
            ? React.ComponentType<RadarProps<TData, TNumerical>>
            : K extends 'Pie'
            ? React.ComponentType<PieProps<TData, TNumerical>>
            : TComponents[K];
    },
    'Radar' | 'RadarChart'
>;

type TypedVerticalChartContext

type TypedVerticalChartContext<TData, TCategorical, TNumerical, TComponents> = {
    AreaChart: React.ComponentType<Omit<CartesianChartProps<TData>, 'layout'>>;
    BarChart: React.ComponentType<Omit<CartesianChartProps<TData>, 'layout'>>;
    LineChart: React.ComponentType<Omit<CartesianChartProps<TData>, 'layout'>>;
    ComposedChart: React.ComponentType<Omit<CartesianChartProps<TData>, 'layout'>>;
    ScatterChart: React.ComponentType<Omit<CartesianChartProps<TData>, 'layout'>>;
    FunnelChart: React.ComponentType<Omit<CartesianChartProps<TData>, 'layout'>>;
} & {
    [K in keyof TComponents]: K extends 'XAxis'
        ? React.ComponentType<XAxisProps<TData, TNumerical>>
        : K extends 'YAxis'
        ? React.ComponentType<YAxisProps<TData, TCategorical>>
        : K extends 'ZAxis'
        ? React.ComponentType<ZAxisProps<TData, TNumerical>>
        : K extends 'Area'
        ? React.ComponentType<AreaProps<TData, TNumerical>>
        : K extends 'Bar'
        ? React.ComponentType<BarProps<TData, TNumerical>>
        : K extends 'Line'
        ? React.ComponentType<LineProps<TData, TNumerical>>
        : K extends 'Scatter'
        ? React.ComponentType<ScatterProps<TData, TNumerical>>
        : K extends 'Funnel'
        ? React.ComponentType<FunnelProps<TData, TNumerical>>
        : TComponents[K];
};

type XAxisOrientation

type XAxisOrientation = 'top' | 'bottom';

type XAxisPadding

type XAxisPadding =
    | {
          left?: number;
          right?: number;
      }
    | 'gap'
    | 'no-gap';

type XAxisProps

type Props<DataPointType = any, DataValueType = any> = Omit<
    PresentationAttributesAdaptChildEvent<TickItem, SVGTextElement>,
    'scale' | 'ref'
> &
    XAxisProps<DataPointType, DataValueType>;

type XAxisTickContentProps

type XAxisTickContentProps = BaseTickContentProps & {
    orientation: XAxisOrientation;
    padding: XAxisPadding | undefined;
};

type YAxisOrientation

type YAxisOrientation = 'left' | 'right';

type YAxisPadding

type YAxisPadding =
    | {
          top?: number;
          bottom?: number;
      }
    | 'gap'
    | 'no-gap';

type YAxisProps

type Props<DataPointType = any, DataValueType = any> = Omit<
    PresentationAttributesAdaptChildEvent<TickItem, SVGTextElement>,
    'scale' | 'ref'
> &
    YAxisProps<DataPointType, DataValueType>;

type YAxisTickContentProps

type YAxisTickContentProps = BaseTickContentProps & {
    orientation: YAxisOrientation;
    padding: YAxisPadding | undefined;
};

Namespaces

namespace Brush

namespace Brush {}

variable displayName

var displayName: string;

namespace CartesianGrid

namespace CartesianGrid {}

variable displayName

var displayName: string;

namespace Customized

namespace Customized {}

variable displayName

var displayName: string;

namespace ErrorBar

namespace ErrorBar {}

variable displayName

var displayName: string;

namespace Label

namespace Label {}

variable displayName

var displayName: string;

namespace LabelList

namespace LabelList {}

variable displayName

var displayName: string;

namespace PolarAngleAxis

namespace PolarAngleAxis {}

variable displayName

var displayName: string;

namespace PolarRadiusAxis

namespace PolarRadiusAxis {}

variable displayName

var displayName: string;

namespace Radar

namespace Radar {}

variable displayName

var displayName: string;

namespace RadialBar

namespace RadialBar {}

variable displayName

var displayName: string;

namespace ReferenceArea

namespace ReferenceArea {}

variable displayName

var displayName: string;

namespace ReferenceDot

namespace ReferenceDot {}

variable displayName

var displayName: string;

namespace ReferenceLine

namespace ReferenceLine {}

variable displayName

var displayName: string;

namespace Sankey

namespace Sankey {}

variable displayName

var displayName: string;

namespace ZAxis

namespace ZAxis {}

variable displayName

var displayName: string;

Package Files (75)

Dependencies (11)

Dev Dependencies (91)

Peer Dependencies (3)

Badge

To add a badge like this oneto your package's README, use the codes available below.

You may also use Shields.io to create a custom badge linking to https://www.jsdocs.io/package/recharts.

Markdown

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/recharts)

HTML

<a href="https://www.jsdocs.io/package/recharts"><img src="https://img.shields.io/badge/jsDocs.io-reference-blue" alt="jsDocs.io"></a>

Updated 2 days ago.
Package analyzed in 5491 ms.
Missing or incorrect documentation? Open an issue for this package.

recharts

Install

Overview

Index

Variables

Functions

Interfaces

Type Aliases

Namespaces

Variables

variable BarStack

variable CartesianAxis

Deprecated

variable Cell

See Also

Deprecated

variable Cross

variable Curve

variable DefaultZIndexes

variable Dot

Parameter props

variable Funnel

variable Global

variable Layer

variable Legend

variable Line

variable Pie

variable PolarGrid

variable Polygon

variable Rectangle

Parameter rectangleProps

variable ResponsiveContainer

See Also

variable Scatter

variable Sector

variable Surface

variable Symbols

variable Text

variable Trapezoid

Functions

function Area

function AreaChart

function Bar

function BarChart

function Brush

See Also

function CartesianGrid

function ComposedChart

function createCentricChart

Example 1

See Also

function createHorizontalChart

Example 1

See Also

function createRadialChart

Example 1

See Also

function createVerticalChart

Example 1

See Also

function Customized

Example 1

Example 2

Deprecated

function DefaultLegendContent

function DefaultTooltipContent

function ErrorBar

function FunnelChart

function getNiceTickValues

Parameter tuple

Parameter tickCount

Parameter allowDecimals

Parameter niceTicksMode

function getRelativeCoordinate

Parameter event

Returns

Example 1

Example 2

Example 3

function Label