recharts

const Area: ComponentType<Props>;

const AreaChart: React.ForwardRefExoticComponent<any>;

const Bar: ComponentType<Props>;

const BarChart: React.ForwardRefExoticComponent<any>;

const BarStack: ComponentType<BarStackProps>;

const CartesianAxis: React.ForwardRefExoticComponent<any>;

const Cell: FunctionComponent<SVGProps<SVGElement>>;

const ComposedChart: React.ForwardRefExoticComponent<any>;

const Cross: React.FC<any>;

const Curve: React.FC<Props>;

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

const Dot: React.FC<any>;

const FunnelChart: React.ForwardRefExoticComponent<any>;

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

const Layer: React.ForwardRefExoticComponent<any>;

const Line: ComponentType<Props>;

const LineChart: React.ForwardRefExoticComponent<any>;

const PieChart: React.ForwardRefExoticComponent<any>;

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

const Polygon: React.FC<Props>;

const RadarChart: React.ForwardRefExoticComponent<any>;

const RadialBarChart: React.ForwardRefExoticComponent<any>;

const Rectangle: React.FC<Props>;

const ResponsiveContainer: React.ForwardRefExoticComponent<any>;

const Scatter: ComponentType<Props>;

const ScatterChart: React.ForwardRefExoticComponent<any>;

const Sector: React.FC<Props>;

const Surface: React.ForwardRefExoticComponent<any>;

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

const Text: React.ForwardRefExoticComponent<any>;

const Trapezoid: React.FC<any>;

const XAxis: ComponentType<Props>;

const YAxis: ComponentType<Props>;

Brush: typeof Brush;

CartesianGrid: typeof CartesianGrid;

Customized: typeof Customized;

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

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

ErrorBar: typeof ErrorBar;

Funnel: typeof Funnel;

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

Label: typeof Label;

LabelList: typeof LabelList;

Legend: typeof Legend;

Pie: typeof Pie;

PolarAngleAxis: typeof PolarAngleAxis;

PolarRadiusAxis: typeof PolarRadiusAxis;

Radar: typeof Radar;

RadialBar: typeof RadialBar;

ReferenceArea: typeof ReferenceArea;

ReferenceDot: typeof ReferenceDot;

ReferenceLine: typeof ReferenceLine;

Sankey: typeof Sankey;

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

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

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

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

useActiveTooltipLabel: () => ActiveLabel;

useChartHeight: () => number | undefined;

useChartWidth: () => number | undefined;

useMargin: () => Margin | undefined;

useOffset: () => ChartOffset | undefined;

usePlotArea: () => PlotArea | undefined;

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

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

ZAxis: typeof ZAxis;

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

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

type Props = AreaSvgProps & AreaProps;

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

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

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 Props = Omit<SVGProps<SVGElement>, 'onChange' | 'onDragEnd' | 'ref'> &
    BrushProps;

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

type Props = AcceptedSvgProps & CartesianGridProps;

type Props = SVGProps<SVGElement>;

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

type Props = SVGProps<SVGPathElement> & CrossProps;

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

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

type DataKey<T> = string | number | ((obj: T) => any);

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

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

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

type Props = SVGProps<SVGLineElement> & ErrorBarProps;

type Props = FunnelSvgProps & FunnelProps;

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 = 'hidden' | 'visible' | 'discard' | 'extendDomain';

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

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

type Props = SVGAttributes<SVGGElement> & LayerProps;

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!
     *
     * @defaultValue value
     */
    itemSorter?: LegendItemSorter | null;
};

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

type Props = LineSvgProps & LineProps;

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

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

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

type Props = PieSvgAttributes & PieProps;

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

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

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

type Props = AxisSvgProps & PolarAngleAxisProps;

type Props = SVGProps<SVGLineElement> & PolarGridProps;

type Props = AxisSvgProps & PolarRadiusAxisProps;

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

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

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

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

type Props = Omit<
    SVGPropsAndEvents<RectangleProps>,
    'width' | 'height' | 'x' | 'y'
> &
    ReferenceAreaProps;

type Props = DotProps & ReferenceDotProps;

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

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

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

type Props = BaseScatterSvgProps & ScatterProps;

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

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

type SymbolsProps = SVGProps<SVGPathElement> & InnerSymbolsProp;

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

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 TooltipIndex = string | null;

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 undefined, Recharts will control when the Tooltip displays. This includes mouse and keyboard controls.
     */
    active?: boolean;
    /**
     * @defaultValue {"x":false,"y":false}
     */
    allowEscapeViewBox?: AllowInDimension;
    /**
     * @defaultValue 400
     */
    animationDuration?: AnimationDuration;
    /**
     * @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;
    content?: ContentType<TValue, TName>;
    /**
     * @defaultValue true
     */
    cursor?: CursorDefinition;
    defaultIndex?: number | TooltipIndex;
    /**
     * @defaultValue true
     */
    filterNull?: boolean;
    /**
     * If true, then Tooltip will information about hidden series (defaults to false).
     * Interacting with the hide property of Area, Bar, Line, Scatter.
     *
     * @defaultValue false
     */
    includeHidden?: boolean | undefined;
    /**
     * @defaultValue auto
     */
    isAnimationActive?: boolean | 'auto';
    /**
     * @defaultValue 10
     */
    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>;
    /**
     * @defaultValue {"x":false,"y":false}
     */
    reverseDirection?: AllowInDimension;
    /**
     * If true, tooltip will appear on top of all bars on an axis tick.
     * If false, tooltip will appear on individual bars.
     */
    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;
    wrapperStyle?: CSSProperties;
};