recharts
- Version 3.0.2
- Published
- 5.28 MB
- 11 dependencies
- MIT license
Install
npm i recharts
yarn add recharts
pnpm add recharts
Overview
React charts
Index
Variables
Functions
Classes
Interfaces
Type Aliases
- AreaProps
- BarProps
- BrushProps
- CartesianAxisProps
- CartesianGridProps
- CellProps
- CrossProps
- CurveProps
- CustomizedProps
- DefaultLegendContentProps
- DotProps
- ErrorBarProps
- FunnelProps
- LabelListProps
- LabelProps
- LayerProps
- LegendProps
- LegendType
- LineProps
- PieLabel
- PieProps
- PolarAngleAxisProps
- PolarGridProps
- PolarRadiusAxisProps
- PolygonProps
- RadarProps
- RadialBarProps
- RectangleProps
- ReferenceAreaProps
- ReferenceDotProps
- ReferenceLineProps
- ScatterProps
- SectorProps
- SurfaceProps
- SymbolsProps
- TextProps
- TooltipContentProps
- TooltipProps
- TrapezoidProps
- XAxisProps
- YAxisProps
Namespaces
Variables
variable AreaChart
const AreaChart: React.ForwardRefExoticComponent<any>;
variable BarChart
const BarChart: 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 Dot
const Dot: React.FC<any>;
variable FunnelChart
const FunnelChart: React.ForwardRefExoticComponent<any>;
variable getNiceTickValues
const getNiceTickValues: ( [min, max]: [number, number], tickCount?: number, allowDecimals?: boolean) => number[];
variable Global
const Global: { isSsr: boolean };
variable Layer
const Layer: React.ForwardRefExoticComponent<any>;
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, ...inputs }: Props): React.JSX.Element; 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>;
variable ScatterChart
const ScatterChart: React.ForwardRefExoticComponent<any>;
variable Sector
const Sector: React.FC<any>;
variable Surface
const Surface: React.ForwardRefExoticComponent<any>;
variable Symbols
const Symbols: { ({ type, size, sizeType, ...rest }: SymbolsProps): React.JSX.Element; registerSymbol: (key: string, factory: D3SymbolType) => void;};
variable Text
const Text: React.ForwardRefExoticComponent<any>;
variable Trapezoid
const Trapezoid: React.FC<any>;
Functions
function CartesianGrid
CartesianGrid: typeof CartesianGrid;
function Customized
Customized: typeof Customized;
custom svg elements by rechart instance props and state.
Returns
{Object} svg elements
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 SunburstChart
SunburstChart: (props: SunburstChartProps) => React.JSX.Element;
function Tooltip
Tooltip: <TValue extends ValueType, TName extends NameType>( outsideProps: TooltipProps<TValue, TName>) => React.JSX.Element;
function Treemap
Treemap: (props: Props) => React.JSX.Element;
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.
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 theheight
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 thewidth
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.
Classes
class Area
class Area extends PureComponent<Props> {}
property defaultProps
static defaultProps: { readonly activeDot: true; readonly animationBegin: 0; readonly animationDuration: 1500; readonly animationEasing: 'ease'; readonly connectNulls: false; readonly dot: false; readonly fill: '#3182bd'; readonly fillOpacity: 0.6; readonly hide: false; readonly isAnimationActive: boolean; readonly legendType: 'line'; readonly stroke: '#3182bd'; readonly xAxisId: 0; readonly yAxisId: 0;};
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class Bar
class Bar extends PureComponent<Props> {}
property defaultProps
static defaultProps: Partial<Props>;
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class Brush
class Brush extends PureComponent<Props, State> {}
property defaultProps
static defaultProps: { height: number; travellerWidth: number; gap: number; fill: string; stroke: string; padding: { top: number; right: number; bottom: number; left: number }; leaveTimeOut: number; alwaysShowText: boolean;};
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class CartesianAxis
class CartesianAxis extends Component<Props, IState> {}
constructor
constructor(props: Props);
property defaultProps
static defaultProps: Partial<Props>;
property displayName
static displayName: string;
property tickRefs
tickRefs: React.MutableRefObject<Element[]>;
method getTickLineCoord
getTickLineCoord: (data: CartesianTickItem) => { line: { x1: number; y1: number; x2: number; y2: number }; tick: { x: number; y: number };};
Calculate the coordinates of endpoints in ticks
Parameter data
The data of a simple tick (x1, y1): The coordinate of endpoint close to tick text (x2, y2): The coordinate of endpoint close to axis
method getTickTextAnchor
getTickTextAnchor: () => string;
method getTickVerticalAnchor
getTickVerticalAnchor: () => 'end' | 'start' | 'middle';
method render
render: () => React.JSX.Element;
method renderAxisLine
renderAxisLine: () => React.JSX.Element;
method renderTickItem
static renderTickItem: ( option: Props['tick'], props: any, value: ReactNode) => React.JSX.Element;
method renderTicks
renderTicks: ( fontSize: string, letterSpacing: string, ticks?: ReadonlyArray<CartesianTickItem>) => React.ReactElement | null;
render the ticks
Parameter fontSize
Fontsize to consider for tick spacing
Parameter letterSpacing
Letter spacing to consider for tick spacing
Parameter ticks
The ticks to actually render (overrides what was passed in props) {ReactElement | null} renderedTicks
method shouldComponentUpdate
shouldComponentUpdate: ( { viewBox, ...restProps }: Props, nextState: IState) => boolean;
class DefaultLegendContent
class DefaultLegendContent extends PureComponent<Props> {}
property defaultProps
static defaultProps: Partial<Props>;
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
method renderIcon
renderIcon: ( data: LegendPayload, iconType: IconType | undefined) => React.JSX.Element;
Render the path of icon
Parameter data
Data of each legend item
Parameter iconType
if defined, it will always render this icon. If undefined then it uses icon from data.type Path element
method renderItems
renderItems: () => React.JSX.Element[];
Draw items of legend Items
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';};
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;
class Legend
class Legend extends PureComponent<Props, State> {}
property defaultProps
static defaultProps: { align: string; iconSize: number; itemSorter: string; layout: string; verticalAlign: string;};
property displayName
static displayName: string;
method getWidthOrHeight
static getWidthOrHeight: ( layout: LayoutType | undefined, height: number | undefined, width: number | undefined, maxWidth: number) => null | { height?: number; width?: number };
method render
render: () => React.JSX.Element;
class Line
class Line extends PureComponent<Props> {}
property defaultProps
static defaultProps: { readonly activeDot: true; readonly animateNewValues: true; readonly animationBegin: 0; readonly animationDuration: 1500; readonly animationEasing: 'ease'; readonly connectNulls: false; readonly dot: true; readonly fill: '#fff'; readonly hide: false; readonly isAnimationActive: boolean; readonly label: false; readonly legendType: 'line'; readonly stroke: '#3182bd'; readonly strokeWidth: 1; readonly xAxisId: 0; readonly yAxisId: 0;};
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class Pie
class Pie extends PureComponent<Props, State> {}
property defaultProps
static defaultProps: { readonly animationBegin: 400; readonly animationDuration: 1500; readonly animationEasing: 'ease'; readonly cx: '50%'; readonly cy: '50%'; readonly dataKey: 'value'; readonly endAngle: 360; readonly fill: '#808080'; readonly hide: false; readonly innerRadius: 0; readonly isAnimationActive: boolean; readonly labelLine: true; readonly legendType: 'rect'; readonly minAngle: 0; readonly nameKey: 'name'; readonly outerRadius: '80%'; readonly paddingAngle: 0; readonly rootTabIndex: 0; readonly startAngle: 0; readonly stroke: '#fff';};
property displayName
static displayName: string;
property id
id: string;
method render
render: () => React.JSX.Element;
class PolarAngleAxis
class PolarAngleAxis extends PureComponent<Props> {}
property axisType
static axisType: string;
property defaultProps
static defaultProps: { readonly allowDuplicatedCategory: true; readonly angleAxisId: 0; readonly axisLine: true; readonly cx: 0; readonly cy: 0; readonly orientation: 'outer'; readonly reversed: false; readonly scale: 'auto'; readonly tick: true; readonly tickLine: true; readonly tickSize: 8; readonly type: 'category';};
property displayName
static displayName: string;
method render
render: () => React.ReactNode;
class PolarRadiusAxis
class PolarRadiusAxis extends PureComponent<Props> {}
property axisType
static axisType: string;
property defaultProps
static defaultProps: { readonly allowDataOverflow: false; readonly allowDuplicatedCategory: true; readonly angle: 0; readonly axisLine: true; readonly cx: 0; readonly cy: 0; readonly orientation: 'right'; readonly radiusAxisId: 0; readonly scale: 'auto'; readonly stroke: '#ccc'; readonly tick: true; readonly tickCount: 5; readonly type: 'number';};
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class Radar
class Radar extends PureComponent<Props> {}
property defaultProps
static defaultProps: Partial<Props>;
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class RadialBar
class RadialBar extends PureComponent<RadialBarProps> {}
property defaultProps
static defaultProps: Partial<RadialBarProps>;
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class ReferenceArea
class ReferenceArea extends Component<Props> {}
property defaultProps
static defaultProps: { ifOverflow: string; xAxisId: number; yAxisId: number; r: number; fill: string; fillOpacity: number; stroke: string; strokeWidth: number;};
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class ReferenceDot
class ReferenceDot extends Component<Props> {}
property defaultProps
static defaultProps: Partial<any>;
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class ReferenceLine
class ReferenceLine extends Component<Props> {}
property defaultProps
static defaultProps: { ifOverflow: string; xAxisId: number; yAxisId: number; fill: string; stroke: string; fillOpacity: number; strokeWidth: number; position: string;};
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class Sankey
class Sankey extends PureComponent<Props, State> {}
property defaultProps
static defaultProps: { nameKey: string; dataKey: string; nodePadding: number; nodeWidth: number; linkCurvature: number; iterations: number; margin: { top: number; right: number; bottom: number; left: number }; sort: boolean;};
property displayName
static displayName: string;
property state
state: State;
method getDerivedStateFromProps
static getDerivedStateFromProps: (nextProps: Props, prevState: State) => State;
method handleClick
handleClick: ( item: NodeProps | LinkProps, type: SankeyElementType, e: MouseEvent) => void;
method handleMouseEnter
handleMouseEnter: ( item: NodeProps | LinkProps, type: SankeyElementType, e: MouseEvent) => void;
method handleMouseLeave
handleMouseLeave: ( item: NodeProps | LinkProps, type: SankeyElementType, e: MouseEvent) => void;
method render
render: () => React.JSX.Element;
class Scatter
class Scatter extends Component<Props> {}
property defaultProps
static defaultProps: { readonly xAxisId: 0; readonly yAxisId: 0; readonly zAxisId: 0; readonly legendType: 'circle'; readonly lineType: 'joint'; readonly lineJointType: 'linear'; readonly data: any[]; readonly shape: 'circle'; readonly hide: false; readonly isAnimationActive: boolean; readonly animationBegin: 0; readonly animationDuration: 400; readonly animationEasing: 'linear';};
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class XAxis
class XAxis extends Component<Props> {}
property defaultProps
static defaultProps: { allowDataOverflow: boolean; allowDecimals: boolean; allowDuplicatedCategory: boolean; height: number; hide: boolean; mirror: boolean; orientation: XAxisOrientation; padding: XAxisPadding; reversed: boolean; scale: | import('../util/types').ScaleType | import('../util/ChartUtils').RechartsScale; tickCount: number; type: import('../util/types').AxisDomainType; xAxisId: number;};
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class YAxis
class YAxis extends Component<Props> {}
property defaultProps
static defaultProps: Partial<Props>;
property displayName
static displayName: string;
method render
render: () => React.JSX.Element;
class ZAxis
class ZAxis extends Component<Props> {}
property defaultProps
static defaultProps: { zAxisId: number; range: AxisRange; scale: ScaleType | RechartsScale; type: import('../util/types').AxisDomainType;};
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);
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 PieLabelRenderProps
interface PieLabelRenderProps extends PieDef {}
property index
index?: number;
property name
name: string;
property percent
percent?: number;
property stroke
stroke: string;
property textAnchor
textAnchor: string;
property x
x: number;
property y
y: number;
index signature
[key: string]: any;
interface ResponsiveContainerProps
interface Props {}
property aspect
aspect?: number;
property children
children: ReactElement;
property className
className?: string | number;
property debounce
debounce?: number;
property height
height?: string | number;
property id
id?: string | number;
property initialDimension
initialDimension?: { width: number; height: number;};
property maxHeight
maxHeight?: number;
property minHeight
minHeight?: string | number;
property minWidth
minWidth?: string | number;
property onResize
onResize?: (width: number, height: number) => void;
property style
style?: Omit<CSSProperties, keyof Props>;
property width
width?: string | number;
interface TreemapProps
interface Props {}
property animationBegin
animationBegin?: number;
property animationDuration
animationDuration?: AnimationDuration;
property animationEasing
animationEasing?: AnimationTiming;
property animationId
animationId?: number;
property aspectRatio
aspectRatio?: number;
property children
children?: any;
property className
className?: string;
property colorPanel
colorPanel?: [];
property content
content?: React.ReactElement | ((props: TreemapNode) => React.ReactElement);
property data
data?: ReadonlyArray<TreemapDataType>;
property dataKey
dataKey?: DataKey<any>;
property fill
fill?: string;
property height
height?: number;
property isAnimationActive
isAnimationActive?: boolean;
property isUpdateAnimationActive
isUpdateAnimationActive?: boolean;
property nameKey
nameKey?: DataKey<any>;
property nestIndexContent
nestIndexContent?: React.ReactElement | ((item: any, i: number) => any);
property onAnimationEnd
onAnimationEnd?: () => void;
property onAnimationStart
onAnimationStart?: () => void;
property onClick
onClick?: (node: TreemapNode) => void;
property onMouseEnter
onMouseEnter?: (node: TreemapNode, e: any) => void;
property onMouseLeave
onMouseLeave?: (node: TreemapNode, e: any) => void;
property stroke
stroke?: string;
property style
style?: any;
property type
type?: 'flat' | 'nest';
property width
width?: number;
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'> & CartesianAxisProps;
type CartesianGridProps
type Props = AcceptedSvgProps & CartesianGridProps;
type CellProps
type Props = SVGProps<SVGElement>;
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 = InternalProps & Omit< PresentationAttributesAdaptChildEvent<any, ReactElement>, keyof InternalProps >;
type DotProps
type Props = PresentationAttributesWithProps<DotProps, SVGCircleElement> & DotProps;
type ErrorBarProps
type Props = SVGProps<SVGLineElement> & ErrorBarProps;
type FunnelProps
type Props = FunnelSvgProps & FunnelProps;
type LabelListProps
type Props<T extends Data> = SVGProps<SVGTextElement> & LabelListProps<T>;
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; itemSorter?: LegendItemSorter;};
type LegendType
type LegendType = | 'circle' | 'cross' | 'diamond' | 'line' | 'plainline' | 'rect' | 'square' | 'star' | 'triangle' | 'wye' | 'none';
type LineProps
type Props = LineSvgProps & LineProps;
type PieLabel
type PieLabel<P extends PieLabelProps = PieLabelProps> = | ReactElement<SVGElement> | ((props: P) => ReactNode | ReactElement<SVGElement>) | (SVGProps<SVGTextElement> & { offsetRadius?: number; }) | boolean;
type PieProps
type Props = PieSvgAttributes & PieProps;
type PolarAngleAxisProps
type Props = AxisSvgProps & PolarAngleAxisProps;
type PolarGridProps
type Props = SVGProps<SVGPathElement> & 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 callsfilterProps
which filters the viewBox away anyway
type ScatterProps
type Props = BaseScatterSvgProps & ScatterProps;
type SectorProps
type Props = SVGProps<SVGPathElement> & Partial<SectorProps>;
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: any[]; coordinate: ChartCoordinate; active: boolean; accessibilityLayer: boolean;};
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. */ 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; 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 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;
function parseViewBox
parseViewBox: (props: any) => ViewBox;
function renderCallByParent
renderCallByParent: ( parentProps: { children?: ReactNode; label?: unknown; labelRef?: React.RefObject<Element>; }, viewBox?: ViewBox, checkPropsLabel?: boolean) => ReactElement[] | null;
namespace LabelList
namespace LabelList {}
variable displayName
var displayName: string;
function renderCallByParent
renderCallByParent: <T extends Data>( parentProps: { children?: ReactNode; label?: unknown }, data: readonly T[], checkPropsLabel?: boolean) => React.JSX.Element[];
Package Files (59)
- types/cartesian/Area.d.ts
- types/cartesian/Bar.d.ts
- types/cartesian/Brush.d.ts
- types/cartesian/CartesianAxis.d.ts
- types/cartesian/CartesianGrid.d.ts
- types/cartesian/ErrorBar.d.ts
- types/cartesian/Funnel.d.ts
- types/cartesian/Line.d.ts
- types/cartesian/ReferenceArea.d.ts
- types/cartesian/ReferenceDot.d.ts
- types/cartesian/ReferenceLine.d.ts
- types/cartesian/Scatter.d.ts
- types/cartesian/XAxis.d.ts
- types/cartesian/YAxis.d.ts
- types/cartesian/ZAxis.d.ts
- types/chart/AreaChart.d.ts
- types/chart/BarChart.d.ts
- types/chart/ComposedChart.d.ts
- types/chart/FunnelChart.d.ts
- types/chart/LineChart.d.ts
- types/chart/PieChart.d.ts
- types/chart/RadarChart.d.ts
- types/chart/RadialBarChart.d.ts
- types/chart/Sankey.d.ts
- types/chart/ScatterChart.d.ts
- types/chart/SunburstChart.d.ts
- types/chart/Treemap.d.ts
- types/component/Cell.d.ts
- types/component/Customized.d.ts
- types/component/DefaultLegendContent.d.ts
- types/component/DefaultTooltipContent.d.ts
- types/component/Label.d.ts
- types/component/LabelList.d.ts
- types/component/Legend.d.ts
- types/component/ResponsiveContainer.d.ts
- types/component/Text.d.ts
- types/component/Tooltip.d.ts
- types/container/Layer.d.ts
- types/container/Surface.d.ts
- types/context/chartLayoutContext.d.ts
- types/hooks.d.ts
- types/index.d.ts
- types/polar/Pie.d.ts
- types/polar/PolarAngleAxis.d.ts
- types/polar/PolarGrid.d.ts
- types/polar/PolarRadiusAxis.d.ts
- types/polar/Radar.d.ts
- types/polar/RadialBar.d.ts
- types/shape/Cross.d.ts
- types/shape/Curve.d.ts
- types/shape/Dot.d.ts
- types/shape/Polygon.d.ts
- types/shape/Rectangle.d.ts
- types/shape/Sector.d.ts
- types/shape/Symbols.d.ts
- types/shape/Trapezoid.d.ts
- types/util/Global.d.ts
- types/util/scale/getNiceTickValues.d.ts
- types/util/types.d.ts
Dependencies (11)
Dev Dependencies (85)
- @babel/cli
- @babel/core
- @babel/preset-env
- @babel/preset-react
- @babel/preset-typescript
- @babel/runtime
- @chromatic-com/storybook
- @codecov/bundle-analyzer
- @reduxjs/toolkit
- @storybook/addon-a11y
- @storybook/addon-docs
- @storybook/addon-essentials
- @storybook/addon-interactions
- @storybook/addon-links
- @storybook/addon-mdx-gfm
- @storybook/addon-webpack5-compiler-swc
- @storybook/components
- @storybook/icons
- @storybook/manager-api
- @storybook/preview-api
- @storybook/react
- @storybook/react-webpack5
- @storybook/source-loader
- @storybook/test
- @storybook/test-runner
- @storybook/theming
- @storybook/types
- @stryker-mutator/typescript-checker
- @stryker-mutator/vitest-runner
- @testing-library/jest-dom
- @testing-library/react
- @testing-library/user-event
- @types/d3-interpolate
- @types/d3-shape
- @types/d3-time-format
- @types/node
- @types/react
- @types/react-dom
- @types/react-is
- @types/react-router-dom
- @typescript-eslint/eslint-plugin
- @typescript-eslint/parser
- @vitejs/plugin-react
- @vitest/coverage-v8
- babel-loader
- babel-plugin-dev-expression
- browserslist
- chromatic
- concurrently
- cross-env
- d3-scale-chromatic
- d3-time
- d3-time-format
- eslint
- eslint-config-airbnb
- eslint-config-prettier
- eslint-plugin-eslint-comments
- eslint-plugin-import
- eslint-plugin-jsx-a11y
- eslint-plugin-prettier
- eslint-plugin-react
- eslint-plugin-react-hooks
- eslint-plugin-storybook
- glob
- husky
- jsdom
- lint-staged
- prettier
- react
- react-dom
- react-is
- react-redux
- react-router-dom
- rimraf
- storybook
- terser-webpack-plugin
- ts-loader
- typescript
- update-browserslist-db
- vitest
- vitest-axe
- webpack
- webpack-bundle-analyzer
- webpack-cli
- webpack-dev-server
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[](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 .
Package analyzed in 7751 ms. - Missing or incorrect documentation? Open an issue for this package.