@arolariu/components
Version:
🎨 70+ beautiful, accessible React components built on Base UI. TypeScript-first, CSS Modules styling, tree-shakeable, SSR-ready. Perfect for modern web apps, design systems & rapid prototyping. Zero config, maximum flexibility! ⚡
351 lines • 18.2 kB
TypeScript
import * as React from "react";
import type { DefaultLegendContentProps, DefaultTooltipContentProps, ResponsiveContainerProps, TooltipValueType } from "recharts";
import * as RechartsPrimitive from "recharts";
declare const THEMES: {
readonly light: "";
readonly dark: ".dark";
};
/**
* Describes per-series chart metadata used by legend and tooltip renderers.
*/
type ChartConfigItem = {
/**
* Label rendered by shared legends and tooltips for the series.
* @default undefined
*/
label?: React.ReactNode;
/**
* Optional icon rendered in legends and tooltips instead of the color swatch.
* @default undefined
*/
icon?: React.ComponentType;
/**
* Unit suffix appended to rendered values when the payload does not provide one.
* @default undefined
*/
unit?: string;
/**
* Shared numeric formatter used by helper content renderers when no Recharts tooltip formatter is supplied.
* @default undefined
*/
formatter?: (value: number) => string;
/**
* Recharts stack identifier that consuming chart primitives can read from config.
* @default undefined
*/
stackId?: string;
};
export type ChartConfig = Record<string, ChartConfigItem & ({
color?: string;
theme?: never;
} | {
color?: never;
theme: Record<keyof typeof THEMES, string>;
})>;
interface ChartContainerProps extends Omit<React.ComponentProps<"div">, "children" | "className" | "id">, Pick<ResponsiveContainerProps, "initialDimension" | "aspect" | "debounce" | "minHeight" | "minWidth" | "maxHeight" | "height" | "width" | "onResize" | "children" | "className" | "id"> {
/**
* Series configuration used to resolve labels, icons, and colors.
* @default undefined
*/
config: ChartConfig;
/**
* Inline styles applied to the inner `ResponsiveContainer`.
* @default undefined
*/
innerResponsiveContainerStyle?: React.ComponentProps<typeof RechartsPrimitive.ResponsiveContainer>["style"];
}
/**
* Provides responsive chart layout and series config context for Recharts content.
*
* @remarks
* - Renders a wrapping `<div>` element
* - Built on `recharts` `ResponsiveContainer`
* - Injects CSS variables so legends and tooltips can share theme-aware colors
*
* @example
* ```tsx
* <ChartContainer config={{sales: {label: "Sales", color: "#2563eb"}}}>
* <RechartsPrimitive.BarChart data={data}>...</RechartsPrimitive.BarChart>
* </ChartContainer>
* ```
*
* @see {@link https://recharts.org/en-US/api/ResponsiveContainer | Recharts ResponsiveContainer Docs}
*/
declare const ChartContainer: React.ForwardRefExoticComponent<Omit<ChartContainerProps, "ref"> & React.RefAttributes<HTMLDivElement>>;
/**
* Emits theme-aware CSS variables for configured chart series colors.
*
* @remarks
* - Renders a `<style>` element
* - Built on the shared chart configuration contract
*
* @example
* ```tsx
* <ChartStyle id='chart-sales' config={config} />
* ```
*
* @see {@link https://recharts.org | Recharts Docs}
*/
declare const ChartStyle: {
({ id, config }: Readonly<{
id: string;
config: ChartConfig;
}>): React.JSX.Element | null;
displayName: string;
};
/**
* Re-exports the Recharts tooltip primitive for use with shared chart helpers.
*
* @remarks
* - Renders the Recharts tooltip container
* - Built on `recharts`
*
* @example
* ```tsx
* <ChartTooltip content={<ChartTooltipContent />} />
* ```
*
* @see {@link https://recharts.org/en-US/api/Tooltip | Recharts Tooltip Docs}
*/
declare const ChartTooltip: typeof RechartsPrimitive.Tooltip;
/**
* Renders shared tooltip content for charts configured with {@link ChartContainer}.
*
* @remarks
* - Renders a `<div>` element when active
* - Built on `recharts` tooltip payloads and shared chart config context
* - Honors `active`, `payload`, `label`, `labelFormatter`, `formatter`, `separator`,
* `className`, `labelClassName`, `color`, `nameKey`, and `labelKey`
* - Ignores `wrapperClassName`, `contentStyle`, `itemStyle`, `labelStyle`, and
* `accessibilityLayer` because this helper renders its own DOM structure
*
* @example
* ```tsx
* <ChartTooltip content={<ChartTooltipContent indicator='line' />} />
* ```
*
* @see {@link https://recharts.org/en-US/api/Tooltip | Recharts Tooltip Docs}
*/
declare function ChartTooltipContent({ active, payload, className, indicator, hideLabel, hideIndicator, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey, separator, }: React.ComponentProps<typeof RechartsPrimitive.Tooltip> & React.ComponentProps<"div"> & {
hideLabel?: boolean;
hideIndicator?: boolean;
indicator?: "line" | "dot" | "dashed";
nameKey?: string;
labelKey?: string;
} & Omit<DefaultTooltipContentProps, "accessibilityLayer">): React.JSX.Element | null;
declare namespace ChartTooltipContent {
var displayName: string;
}
/**
* Re-exports the Recharts legend primitive for use with shared chart helpers.
*
* @remarks
* - Renders the Recharts legend container
* - Built on `recharts`
*
* @example
* ```tsx
* <ChartLegend content={<ChartLegendContent />} />
* ```
*
* @see {@link https://recharts.org/en-US/api/Legend | Recharts Legend Docs}
*/
declare const ChartLegend: React.MemoExoticComponent<(outsideProps: RechartsPrimitive.LegendProps) => React.ReactPortal | null>;
/**
* Renders shared legend content for charts configured with {@link ChartContainer}.
*
* @remarks
* - Renders a `<div>` element when legend payload exists
* - Built on `recharts` legend payloads and shared chart config context
* - Honors `payload`, `verticalAlign`, `className`, and the custom `hideIcon`
* and `nameKey` props
* - Ignores Recharts presentational props such as `align`, `layout`, `iconSize`,
* `iconType`, `formatter`, and item mouse handlers because it renders custom markup
*
* @example
* ```tsx
* <ChartLegend content={<ChartLegendContent />} />
* ```
*
* @see {@link https://recharts.org/en-US/api/Legend | Recharts Legend Docs}
*/
declare function ChartLegendContent({ className, hideIcon, nameKey, payload, verticalAlign, }: React.ComponentProps<"div"> & {
hideIcon?: boolean;
nameKey?: string;
} & RechartsPrimitive.DefaultLegendContentProps): React.JSX.Element | null;
declare namespace ChartLegendContent {
var displayName: string;
}
export { ChartContainer, ChartLegend, ChartLegendContent, ChartStyle, ChartTooltip, ChartTooltipContent };
/** @see {@link https://recharts.github.io/en-US/api/AreaChart | AreaChart API} */
export declare const AreaChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
ref?: React.Ref<SVGSVGElement>;
}) => React.ReactElement;
/** @see {@link https://recharts.github.io/en-US/api/BarChart | BarChart API} */
export declare const BarChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
ref?: React.Ref<SVGSVGElement>;
}) => React.ReactElement;
/** @see {@link https://recharts.github.io/en-US/api/ComposedChart | ComposedChart API} */
export declare const ComposedChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
ref?: React.Ref<SVGSVGElement>;
}) => React.ReactElement;
/** @see {@link https://recharts.github.io/en-US/api/FunnelChart | FunnelChart API} */
export declare const FunnelChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
ref?: React.Ref<SVGSVGElement>;
}) => React.ReactElement;
/** @see {@link https://recharts.github.io/en-US/api/LineChart | LineChart API} */
export declare const LineChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
ref?: React.Ref<SVGSVGElement>;
}) => React.ReactElement;
/** @see {@link https://recharts.github.io/en-US/api/PieChart | PieChart API} */
export declare const PieChart: <DataPointType = any>(props: import("recharts/types/util/types").PolarChartProps<DataPointType> & {
ref?: React.Ref<SVGSVGElement>;
}) => React.ReactElement;
/** @see {@link https://recharts.github.io/en-US/api/RadarChart | RadarChart API} */
export declare const RadarChart: <DataPointType = any>(props: import("recharts/types/util/types").PolarChartProps<DataPointType> & {
ref?: React.Ref<SVGSVGElement>;
}) => React.ReactElement;
/** @see {@link https://recharts.github.io/en-US/api/RadialBarChart | RadialBarChart API} */
export declare const RadialBarChart: <DataPointType = any>(props: import("recharts/types/util/types").PolarChartProps<DataPointType> & {
ref?: React.Ref<SVGSVGElement>;
}) => React.ReactElement;
/** @see {@link https://recharts.github.io/en-US/api/ScatterChart | ScatterChart API} */
export declare const ScatterChart: <DataPointType = any>(props: import("recharts/types/util/types").CartesianChartProps<DataPointType> & {
ref?: React.Ref<SVGSVGElement>;
}) => React.ReactElement;
/** @see {@link https://recharts.github.io/en-US/api/Sankey | Sankey API} */
export declare const Sankey: typeof RechartsPrimitive.Sankey;
/** @see {@link https://recharts.github.io/en-US/api/SunburstChart | SunburstChart API} */
export declare const SunburstChart: (outsideProps: RechartsPrimitive.SunburstChartProps) => React.JSX.Element;
/** @see {@link https://recharts.github.io/en-US/api/Treemap | Treemap API} */
export declare const Treemap: typeof RechartsPrimitive.Treemap;
/** @see {@link https://recharts.github.io/en-US/api/Area | Area API} */
export declare const Area: <DataPointType = any, ValueAxisType = any>(props: RechartsPrimitive.AreaProps<DataPointType, ValueAxisType>) => React.ReactElement;
/** @see {@link https://recharts.github.io/en-US/api/Bar | Bar API} */
export declare const Bar: <DataPointType = any, ValueAxisType = any>(props: RechartsPrimitive.BarProps<DataPointType, ValueAxisType>) => React.ReactElement;
/**
* Groups stacked bars and configures shared stack properties such as radius.
* @since recharts 3.6
* @see {@link https://recharts.github.io/en-US/guide/roundedBars | BarStack Guide}
*/
export declare const BarStack: React.ComponentType<RechartsPrimitive.BarStackProps>;
/** @see {@link https://recharts.github.io/en-US/api/Funnel | Funnel API} */
export declare const Funnel: {
<DataPointType = any, DataValueType = any>(outsideProps: RechartsPrimitive.FunnelProps<DataPointType, DataValueType>): React.ReactElement;
(outsideProps: RechartsPrimitive.FunnelProps<any, any>): React.ReactElement;
};
/** @see {@link https://recharts.github.io/en-US/api/Line | Line API} */
export declare const Line: {
<DataPointType = any, ValueAxisType = any>(props: RechartsPrimitive.LineProps<DataPointType, ValueAxisType>): React.ReactElement;
(props: RechartsPrimitive.LineProps<any, any>): React.ReactElement;
};
/** @see {@link https://recharts.github.io/en-US/api/Pie | Pie API} */
export declare const Pie: {
<DataPointType = any, DataValueType = any>(outsideProps: RechartsPrimitive.PieProps<DataPointType, DataValueType>): React.ReactElement;
(outsideProps: RechartsPrimitive.PieProps<any, any>): React.ReactElement;
};
/** @see {@link https://recharts.github.io/en-US/api/Radar | Radar API} */
export declare const Radar: typeof RechartsPrimitive.Radar;
/** @see {@link https://recharts.github.io/en-US/api/RadialBar | RadialBar API} */
export declare const RadialBar: typeof RechartsPrimitive.RadialBar;
/** @see {@link https://recharts.github.io/en-US/api/Scatter | Scatter API} */
export declare const Scatter: {
<DataPointType = any, ValueAxisType = any>(props: RechartsPrimitive.ScatterProps<DataPointType, ValueAxisType>): React.ReactElement;
(props: RechartsPrimitive.ScatterProps<any, any>): React.ReactElement;
};
/** @see {@link https://recharts.github.io/en-US/api/CartesianGrid | CartesianGrid API} */
export declare const CartesianGrid: typeof RechartsPrimitive.CartesianGrid;
/** @see {@link https://recharts.github.io/en-US/api/PolarAngleAxis | PolarAngleAxis API} */
export declare const PolarAngleAxis: typeof RechartsPrimitive.PolarAngleAxis;
/** @see {@link https://recharts.github.io/en-US/api/PolarGrid | PolarGrid API} */
export declare const PolarGrid: {
(outsideProps: RechartsPrimitive.PolarGridProps): React.JSX.Element | null;
displayName: string;
};
/** @see {@link https://recharts.github.io/en-US/api/PolarRadiusAxis | PolarRadiusAxis API} */
export declare const PolarRadiusAxis: typeof RechartsPrimitive.PolarRadiusAxis;
/** @see {@link https://recharts.github.io/en-US/api/XAxis | XAxis API} – supports `type: "auto"` since v3.7. */
export declare const XAxis: <DataPointType = any, DataValueType = any>(props: RechartsPrimitive.XAxisProps<DataPointType, DataValueType>) => React.ReactElement;
/** @see {@link https://recharts.github.io/en-US/api/YAxis | YAxis API} – supports `type: "auto"` since v3.7. */
export declare const YAxis: <DataPointType = any, DataValueType = any>(props: RechartsPrimitive.YAxisProps<DataPointType, DataValueType>) => React.ReactElement;
/** @see {@link https://recharts.github.io/en-US/api/ZAxis | ZAxis API} */
export declare const ZAxis: typeof RechartsPrimitive.ZAxis;
/** @see {@link https://recharts.github.io/en-US/api/Brush | Brush API} */
export declare const Brush: typeof RechartsPrimitive.Brush;
/** @see {@link https://recharts.github.io/en-US/api/ErrorBar | ErrorBar API} */
export declare const ErrorBar: typeof RechartsPrimitive.ErrorBar;
/** @see {@link https://recharts.github.io/en-US/api/Label | Label API} */
export declare const RechartsLabel: typeof RechartsPrimitive.Label;
/** @see {@link https://recharts.github.io/en-US/api/LabelList | LabelList API} */
export declare const LabelList: typeof RechartsPrimitive.LabelList;
/** @see {@link https://recharts.github.io/en-US/api/ReferenceArea | ReferenceArea API} */
export declare const ReferenceArea: typeof RechartsPrimitive.ReferenceArea;
/** @see {@link https://recharts.github.io/en-US/api/ReferenceDot | ReferenceDot API} */
export declare const ReferenceDot: typeof RechartsPrimitive.ReferenceDot;
/** @see {@link https://recharts.github.io/en-US/api/ReferenceLine | ReferenceLine API} */
export declare const ReferenceLine: typeof RechartsPrimitive.ReferenceLine;
/**
* Wraps a chart in a responsive container. Since recharts 3.3+, you can
* alternatively use the `responsive` prop directly on chart containers.
* @see {@link https://recharts.github.io/en-US/api/ResponsiveContainer | ResponsiveContainer API}
*/
export declare const ResponsiveContainer: React.ForwardRefExoticComponent<ResponsiveContainerProps & React.RefAttributes<HTMLDivElement>>;
/** @see {@link https://recharts.github.io/en-US/api/Customized | Customized API} */
export declare const Customized: typeof RechartsPrimitive.Customized;
/**
* @deprecated Since recharts 3.7. Use the `shape` prop on chart series elements instead.
* @see {@link https://recharts.github.io/en-US/api/Cell | Cell API}
*/
export declare const Cell: React.FunctionComponent<RechartsPrimitive.CellProps>;
export declare const Cross: React.FC<RechartsPrimitive.CrossProps>;
export declare const Curve: React.FC<RechartsPrimitive.CurveProps>;
export declare const Dot: React.FC<RechartsPrimitive.DotProps>;
export declare const Polygon: React.FC<RechartsPrimitive.PolygonProps>;
export declare const Rectangle: React.FC<RechartsPrimitive.RectangleProps>;
export declare const Sector: React.FC<RechartsPrimitive.SectorProps>;
export declare const Symbols: {
({ type, size, sizeType, ...rest }: RechartsPrimitive.SymbolsProps): React.JSX.Element | null;
registerSymbol: (key: string, factory: import("d3-shape").SymbolType) => void;
};
export declare const Trapezoid: React.FC<RechartsPrimitive.TrapezoidProps>;
/** @since recharts 3.4 @see {@link https://recharts.github.io/en-US/guide/zIndex | Z-Index Guide} */
export declare const ZIndexLayer: typeof RechartsPrimitive.ZIndexLayer;
/** Default z-index ordering constants. @since recharts 3.4 */
export declare 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;
};
/** Returns the current chart width in pixels. */
export declare const useChartWidth: () => number | undefined;
/** Returns the current chart height in pixels. */
export declare const useChartHeight: () => number | undefined;
/** Returns the chart offset (margins, axes). */
export declare const useOffset: () => RechartsPrimitive.ChartOffset | undefined;
/** Returns the plot area dimensions. */
export declare const usePlotArea: () => RechartsPrimitive.PlotArea | undefined;
/** Returns the chart margin. */
export declare const useMargin: () => RechartsPrimitive.Margin | undefined;
/** Returns whether the tooltip is currently active. @since recharts 3.7 */
export declare const useIsTooltipActive: () => boolean;
/** Returns the active tooltip coordinate. @since recharts 3.7 */
export declare const useActiveTooltipCoordinate: () => RechartsPrimitive.Coordinate | undefined;
/** Returns the active tooltip data points. */
export declare const useActiveTooltipDataPoints: <T = unknown>() => ReadonlyArray<T> | undefined;
/** Returns the active tooltip label. */
export declare const useActiveTooltipLabel: () => RechartsPrimitive.ActiveLabel;
/** Returns the current X-axis domain. */
export declare const useXAxisDomain: (xAxisId?: RechartsPrimitive.AxisId) => RechartsPrimitive.NumberDomain | import("recharts/types/util/types").CategoricalDomain | undefined;
/** Returns the current Y-axis domain. */
export declare const useYAxisDomain: (yAxisId?: RechartsPrimitive.AxisId) => RechartsPrimitive.NumberDomain | import("recharts/types/util/types").CategoricalDomain | undefined;
export type { DefaultLegendContentProps, DefaultTooltipContentProps, TooltipValueType };
//# sourceMappingURL=chart.d.ts.map