recharts

recharts

Version 3.4.1
Published 3 days ago
5.81 MB
11 dependencies
MIT license

Install

npm i recharts

yarn add recharts

pnpm add recharts

Overview

React charts

Index

Classes

ErrorBar
Funnel

Variables

variable Area

const Area: ComponentType<Props>;

variable AreaChart

const AreaChart: React.ForwardRefExoticComponent<any>;

variable Bar

const Bar: ComponentType<Props>;

variable BarChart

const BarChart: React.ForwardRefExoticComponent<any>;

variable CartesianAxis

const CartesianAxis: React.ForwardRefExoticComponent<any>;

variable Cell

const Cell: FunctionComponent<SVGProps<SVGElement>>;

variable ComposedChart

const ComposedChart: React.ForwardRefExoticComponent<any>;

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 throughout the library.

variable Dot

const Dot: React.FC<any>;

variable FunnelChart

const FunnelChart: React.ForwardRefExoticComponent<any>;

variable getNiceTickValues

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

variable Global

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

variable Layer

const Layer: React.ForwardRefExoticComponent<any>;

variable Line

const Line: ComponentType<Props>;

variable LineChart

const LineChart: React.ForwardRefExoticComponent<any>;

variable PieChart

const PieChart: React.ForwardRefExoticComponent<any>;

variable PolarGrid

const PolarGrid: {
    ({
        gridType,
        radialLines,
        angleAxisId,
        radiusAxisId,
        cx: cxFromOutside,
        cy: cyFromOutside,
        innerRadius: innerRadiusFromOutside,
        outerRadius: outerRadiusFromOutside,
        polarAngles: polarAnglesInput,
        polarRadius: polarRadiusInput,
        ...inputs
    }: Props): React.JSX.Element | null;
    displayName: string;
};

variable Polygon

const Polygon: React.FC<Props>;

variable RadarChart

const RadarChart: React.ForwardRefExoticComponent<any>;

variable RadialBarChart

const RadialBarChart: React.ForwardRefExoticComponent<any>;

variable Rectangle

const Rectangle: React.FC<Props>;

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 ResizeObserver 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
- https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver

variable Scatter

const Scatter: ComponentType<Props>;

variable ScatterChart

const ScatterChart: React.ForwardRefExoticComponent<any>;

variable Sector

const Sector: React.FC<Props>;

variable Surface

const Surface: React.ForwardRefExoticComponent<any>;

variable Symbols

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

variable Text

const Text: React.ForwardRefExoticComponent<any>;

variable Trapezoid

const Trapezoid: React.FC<any>;

variable XAxis

const XAxis: ComponentType<Props>;

variable YAxis

const YAxis: ComponentType<Props>;

Functions

function Brush

Brush: typeof Brush;

function CartesianGrid

CartesianGrid: typeof CartesianGrid;

function Customized

Customized: typeof Customized;

custom svg elements by rechart instance props and state.
Returns
{Object} svg elements

function DefaultLegendContent

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

function DefaultTooltipContent

DefaultTooltipContent: <TValue extends ValueType, TName extends NameType>(
    props: Props<TValue, TName>
) => React.JSX.Element;

function Label

Label: typeof Label;

function LabelList

LabelList: typeof LabelList;

function Legend

Legend: typeof Legend;

function Pie

Pie: typeof Pie;

function PolarAngleAxis

PolarAngleAxis: typeof PolarAngleAxis;

function PolarRadiusAxis

PolarRadiusAxis: typeof PolarRadiusAxis;

function Radar

Radar: typeof Radar;

function RadialBar

RadialBar: typeof RadialBar;

function ReferenceArea

ReferenceArea: typeof ReferenceArea;

function ReferenceDot

ReferenceDot: typeof ReferenceDot;

function ReferenceLine

ReferenceLine: typeof ReferenceLine;

function Sankey

Sankey: typeof Sankey;

function SunburstChart

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

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

function Treemap

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

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: () => string | undefined;

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
string | undefined

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

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. This also includes any margins that might be applied to the chart. If you are interested in the margin alone, use useMargin instead.
Returns
Offset of the chart in pixels, or undefined if used outside a chart context.

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.
Returns
Plot area of the chart in pixels, or undefined if used outside a chart context.

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.

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.

function ZAxis

ZAxis: typeof ZAxis;

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

Classes

class ErrorBar

class ErrorBar extends Component<Props> {}

property defaultProps

static defaultProps: {
    readonly stroke: 'black';
    readonly strokeWidth: 1.5;
    readonly width: 5;
    readonly offset: 0;
    readonly isAnimationActive: true;
    readonly animationBegin: 0;
    readonly animationDuration: 400;
    readonly animationEasing: 'ease-in-out';
    readonly zIndex: 400;
};

property displayName

static displayName: string;

method render

render: () => React.JSX.Element;

class Funnel

class Funnel extends PureComponent<Props> {}

property defaultProps

static defaultProps: {
    readonly stroke: '#fff';
    readonly fill: '#808080';
    readonly legendType: 'rect';
    readonly hide: false;
    readonly isAnimationActive: boolean;
    readonly animationBegin: 400;
    readonly animationDuration: 1500;
    readonly animationEasing: 'ease';
    readonly nameKey: 'name';
    readonly lastShapeType: 'triangle';
};

property displayName

static displayName: string;

method render

render: () => React.JSX.Element;

Interfaces

interface DefaultTooltipContentProps

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

property accessibilityLayer

accessibilityLayer: boolean;

property contentStyle

contentStyle?: CSSProperties;

property formatter

formatter?: Formatter<TValue, TName>;

property itemSorter

itemSorter?:
    | 'dataKey'
    | 'value'
    | 'name'
    | ((item: Payload<TValue, TName>) => number | string | undefined);

property itemStyle

itemStyle?: CSSProperties;

property label

label?: any;

property labelClassName

labelClassName?: string;

property labelFormatter

labelFormatter?: (
    label: any,
    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 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?: {
    strokeDasharray?: number | string;
    value?: any;
};

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 ResponsiveContainerProps

interface Props {}

property aspect

aspect?: number;

The aspect ratio of the chart. It is calculated as width / height. If specified, the height will be calculated by the width and this ratio.

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 class name of the container.

property debounce

debounce?: number;

The debounce time for resizing events. 0

property height

height?: Percent | number;

The height of the container. If a percentage string is specified, it is calculated responsive to the height of the parent element. '100%'

property id

id?: string | number;

The id of the container.

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. It can be a percentage string or a number.

property minWidth

minWidth?: string | number;

The minimum width of the container. It can be a percentage string or a number. 0

property onResize

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

A callback function that will be called when the container is resized.
Parameter width
The new width of the container.
Parameter height
The new height of the container.

property style

style?: Omit<CSSProperties, keyof Props>;

The style of the container.

property width

width?: Percent | number;

The width of the container. If a percentage string is specified, it is calculated responsive to the width of the parent element. '100%'

interface TreemapProps

interface Props {}

property animationBegin

animationBegin?: number;

property animationDuration

animationDuration?: AnimationDuration;

property animationEasing

animationEasing?: AnimationTiming;

property animationId

animationId?: number;

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

property aspectRatio

aspectRatio?: number;

This is aspect ratio of the individual treemap rectangles. If you want to define aspect ratio of the chart itself, set it via the style prop: e.g. <Treemap style={{ aspectRatio: 4 / 3 }}>

property children

children?: ReactNode;

property className

className?: string;

property colorPanel

colorPanel?: [];

property content

content?: TreemapContentType;

property data

data?: ReadonlyArray<TreemapDataType>;

property dataKey

dataKey?: DataKey<any>;

property fill

fill?: string;

property height

height?: number | Percent;

property isAnimationActive

isAnimationActive?: boolean;

property isUpdateAnimationActive

isUpdateAnimationActive?: boolean;

property nameKey

nameKey?: DataKey<any>;

property nestIndexContent

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

property onAnimationEnd

onAnimationEnd?: () => void;

property onAnimationStart

onAnimationStart?: () => void;

property onClick

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

property onMouseEnter

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

property onMouseLeave

onMouseLeave?: (node: TreemapNode, e: React.MouseEvent) => 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;

interface ZAxisProps

interface Props {}

property dataKey

dataKey?: DataKey<any>;

The key of data displayed in the axis

property domain

domain?: AxisDomain;

The domain of scale in this axis

property name

name?: string;

The name of data displayed in the axis

property range

range?: AxisRange;

The range of axis

property scale

scale?: ScaleType | RechartsScale | undefined;

property type

type?: 'number' | 'category';

property unit

unit?: string;

The unit of data displayed in the axis

property zAxisId

zAxisId?: string | number;

The unique id of z-axis

Type Aliases

type AreaProps

type Props = AreaSvgProps & AreaProps;

type BarProps

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

type BrushProps

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

type CartesianAxisProps

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

type CartesianGridProps

type Props = AcceptedSvgProps & CartesianGridProps;

type CellProps

type Props = SVGProps<SVGElement>;

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'
> &
    CurveProps;

type CustomizedProps

type Props<P, C extends Comp<P>> = P & {
    component: C;
};

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 = FunnelSvgProps & FunnelProps;

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 LabelListProps

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

type LabelProps

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

type LayerProps

type Props = SVGAttributes<SVGGElement> & LayerProps;

type LegendProps

type Props = Omit<DefaultProps, 'payload' | 'ref'> & {
    wrapperStyle?: CSSProperties;
    width?: number;
    height?: number;
    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: https://react.dev/reference/react-dom/createPortal
     *
     * If this is undefined then Legend renders inside the recharts-wrapper element.
     */
    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!
     */
    itemSorter?: LegendItemSorter | null;
};

type LegendType

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

type LineProps

type Props = LineSvgProps & LineProps;

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;
    activeLabel: string | undefined;
    activeDataKey: DataKey<any> | undefined;
    activeCoordinate: Coordinate | undefined;
};

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 = PieSvgAttributes & PieProps;

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 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 = AxisSvgProps & PolarAngleAxisProps;

type PolarGridProps

type Props = SVGProps<SVGLineElement> & PolarGridProps;

type PolarRadiusAxisProps

type Props = AxisSvgProps & PolarRadiusAxisProps;

type PolygonProps

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

type RadarProps

type Props = Omit<
    SVGProps<SVGElement>,
    'onMouseEnter' | 'onMouseLeave' | 'points' | 'ref'
> &
    RadarProps;

type RadialBarProps

type RadialBarProps = Omit<
    PresentationAttributesAdaptChildEvent<any, SVGElement>,
    'ref'
> &
    InternalRadialBarProps;

type RectangleProps

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

type ReferenceAreaProps

type Props = RectangleProps & ReferenceAreaProps;

type ReferenceDotProps

type Props = DotProps & ReferenceDotProps;

type ReferenceLineProps

type Props = Omit<SVGProps<SVGLineElement>, 'viewBox'> & ReferenceLineProps;

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 = [
    {
        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 ScatterProps

type Props = BaseScatterSvgProps & ScatterProps;

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 = SVGProps<SVGPathElement> & InnerSymbolsProp;

type TextProps

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

type TooltipContentProps

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

type TooltipProps

type TooltipProps<TValue extends ValueType, TName extends 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 active is undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls.
     */
    active?: boolean;
    /**
     * If true, then Tooltip will information about hidden series (defaults to false).
     * Interacting with the hide property of Area, Bar, Line, Scatter.
     *
     * default: false
     */
    includeHidden?: boolean | undefined;
    allowEscapeViewBox?: AllowInDimension;
    animationDuration?: AnimationDuration;
    animationEasing?: AnimationTiming;
    content?: ContentType<TValue, TName>;
    cursor?: CursorDefinition;
    filterNull?: boolean;
    defaultIndex?: number | TooltipIndex;
    isAnimationActive?: boolean;
    offset?: number;
    payloadUniqBy?: UniqueOption<Payload<TValue, TName>>;
    /**
     * 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;
    position?: Partial<Coordinate>;
    reverseDirection?: AllowInDimension;
    /**
     * If true, tooltip will appear on top of all bars on an axis tick.
     * If false, tooltip will appear on individual bars.
     * Currently only supported in BarChart and RadialBarChart.
     * If undefined then defaults to true.
     */
    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.
     *
     * Default `hover`
     */
    trigger?: TooltipTrigger;
    useTranslate3d?: boolean;
    wrapperStyle?: CSSProperties;
    /**
     * 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.
     */
    axisId?: AxisId;
};

type TrapezoidProps

type Props = SVGProps<SVGPathElement> & TrapezoidProps;

type XAxisProps

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

type YAxisProps

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

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 Label

namespace Label {}

variable displayName

var displayName: string;

namespace LabelList

namespace LabelList {}

variable displayName

var displayName: string;

namespace Legend

namespace Legend {}

variable displayName

var displayName: string;

namespace Pie

namespace Pie {}

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 (64)

Dependencies (11)

Dev Dependencies (80)

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 3 days ago.
Package analyzed in 7146 ms.
Missing or incorrect documentation? Open an issue for this package.

recharts

Install

Overview

Index

Variables

Functions

Classes

Interfaces

Type Aliases

Namespaces

Variables

variable Area

variable AreaChart

variable Bar

variable BarChart

variable CartesianAxis

variable Cell

variable ComposedChart

variable Cross

variable Curve

variable DefaultZIndexes

variable Dot

variable FunnelChart

variable getNiceTickValues

variable Global

variable Layer

variable Line

variable LineChart

variable PieChart

variable PolarGrid

variable Polygon

variable RadarChart

variable RadialBarChart

variable Rectangle

variable ResponsiveContainer

See Also

variable Scatter

variable ScatterChart

variable Sector

variable Surface

variable Symbols

variable Text

variable Trapezoid

variable XAxis

variable YAxis

Functions

function Brush

function CartesianGrid

function Customized

Returns

function DefaultLegendContent

function DefaultTooltipContent

function Label

function LabelList

function Legend

function Pie

function PolarAngleAxis

function PolarRadiusAxis

function Radar

function RadialBar

function ReferenceArea

function ReferenceDot

function ReferenceLine

function Sankey

function SunburstChart

function Tooltip

function Treemap

function useActiveTooltipDataPoints

Returns

function useActiveTooltipLabel

Returns

function useChartHeight

Returns

function useChartWidth

Returns

function useMargin

Returns

function useOffset

Returns

function usePlotArea