@octanejs/recharts 0.1.16 → 0.1.18

package/src/component/Tooltip.tsrx.d.ts

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

package/src/component/TooltipBoundingBox.tsrx

@@ -0,0 +1,135 @@
+import * as React from 'octane';
+import type { OctaneNode } from 'octane';
+
+import {
+	AllowInDimension,
+	AnimationDuration,
+	EasingInput,
+	CartesianViewBox,
+	Coordinate,
+	PolarCoordinate,
+} from '../util/types';
+import { ElementOffset, SetElementOffset } from '../util/useElementOffset';
+import { getTooltipTranslate } from '../util/tooltip/translate';
+import { usePrefersReducedMotion } from '../util/usePrefersReducedMotion';
+
+export type TooltipBoundingBoxProps = {
+	active: boolean;
+	allowEscapeViewBox: AllowInDimension;
+	animationDuration: AnimationDuration;
+	animationEasing: EasingInput;
+	children: OctaneNode;
+	coordinate: Coordinate | PolarCoordinate | undefined;
+	hasPayload: boolean;
+	isAnimationActive: boolean | 'auto';
+	offset: number | Coordinate;
+	position: Partial<Coordinate> | undefined;
+	reverseDirection: AllowInDimension;
+	useTranslate3d: boolean;
+	viewBox: CartesianViewBox;
+	wrapperStyle: React.CSSProperties;
+	lastBoundingBox: ElementOffset;
+	innerRef: SetElementOffset;
+	hasPortalFromProps: boolean;
+};
+
+function resolveTransitionProperty(args: {
+	prefersReducedMotion: boolean;
+	isAnimationActive: boolean | 'auto';
+	active: boolean;
+	animationDuration: number;
+	animationEasing: EasingInput;
+}): `transform ${number}ms ${string}` | undefined {
+	if (args.prefersReducedMotion && args.isAnimationActive === 'auto') {
+		return undefined;
+	}
+	if (args.isAnimationActive && args.active) {
+		const easing =
+			typeof args.animationEasing === 'string' ? args.animationEasing : 'ease';
+		return `transform ${args.animationDuration}ms ${easing}`;
+	}
+	return undefined;
+}
+
+function TooltipBoundingBoxImpl(props: TooltipBoundingBoxProps) {
+	const prefersReducedMotion = usePrefersReducedMotion();
+	const [state, setState] = React.useState(
+		() => ({
+			dismissed: false,
+			dismissedAtCoordinate: { x: 0, y: 0 },
+		}),
+	);
+
+	React.useEffect(() => {
+		const handleKeyDown = (event: KeyboardEvent) => {
+			if (event.key === 'Escape') {
+				setState({
+					dismissed: true,
+					dismissedAtCoordinate: {
+						x: props.coordinate?.x ?? 0,
+						y: props.coordinate?.y ?? 0,
+					},
+				});
+			}
+		};
+		document.addEventListener('keydown', handleKeyDown);
+		return () => {
+			document.removeEventListener('keydown', handleKeyDown);
+		};
+	}, [props.coordinate?.x, props.coordinate?.y]);
+
+	if (
+		state.dismissed &&
+			((props.coordinate?.x ?? 0) !== state.dismissedAtCoordinate.x ||
+				(props.coordinate?.y ?? 0) !== state.dismissedAtCoordinate.y)
+	) {
+		setState({ ...state, dismissed: false });
+	}
+
+	const { cssClasses, cssProperties } = getTooltipTranslate({
+		allowEscapeViewBox: props.allowEscapeViewBox,
+		coordinate: props.coordinate,
+		offsetLeft: typeof props.offset === 'number' ? props.offset : props.offset.x,
+		offsetTop: typeof props.offset === 'number' ? props.offset : props.offset.y,
+		position: props.position,
+		reverseDirection: props.reverseDirection,
+		tooltipBox: {
+			height: props.lastBoundingBox.height,
+			width: props.lastBoundingBox.width,
+		},
+		useTranslate3d: props.useTranslate3d,
+		viewBox: props.viewBox,
+	});
+	const positionStyle: React.CSSProperties =
+		props.hasPortalFromProps
+			? {}
+			: {
+					transition: resolveTransitionProperty({
+						prefersReducedMotion,
+						isAnimationActive: props.isAnimationActive,
+						active: props.active,
+						animationDuration: props.animationDuration,
+						animationEasing: props.animationEasing,
+					}),
+					...cssProperties,
+					pointerEvents: 'none',
+					position: 'absolute',
+					top: 0,
+					left: 0,
+				};
+	const outerStyle: React.CSSProperties = {
+		...positionStyle,
+		visibility: !state.dismissed && props.active && props.hasPayload ? 'visible' : 'hidden',
+		...props.wrapperStyle,
+	};
+	return <div
+		// @ts-expect-error typescript library does not recognize xmlns attribute, but it's required for an HTML chunk inside SVG.
+		xmlns="http://www.w3.org/1999/xhtml"
+		tabIndex={-1}
+		className={cssClasses}
+		style={outerStyle}
+		ref={props.innerRef}
+	>{props.children}</div>;
+}
+
+export const TooltipBoundingBox = React.memo(TooltipBoundingBoxImpl);

package/src/context/CellsContext.ts

@@ -8,6 +8,7 @@
 // effects run in order), so indexes line up with data indexes exactly like the
 // upstream element order did.
 import { createContext, useContext, useMemo, useState } from 'octane';
+import { shallowEqual } from '@octanejs/redux';
 import { splitSlot, subSlot } from '../internal';
 
 export interface CellRegistry {
@@ -58,6 +59,17 @@ export function useCellRegistry(...rest: any[]): [RegisteredCell[] | undefined,
 			};
 			return {
 				register(token: object, props: unknown) {
+					const previousProps = entries.get(token);
+					if (
+						entries.has(token) &&
+						previousProps != null &&
+						props != null &&
+						typeof previousProps === 'object' &&
+						typeof props === 'object' &&
+						shallowEqual(previousProps, props)
+					) {
+						return;
+					}
 					entries.set(token, props);
 					publish();
 				},

package/src/context/legendPayloadContext.tsrx

@@ -0,0 +1,11 @@
+import { LegendPayload } from '../component/DefaultLegendContent';
+import { useAppSelector } from '../state/hooks';
+import { selectLegendPayload } from '../state/selectors/legendSelectors';
+
+/**
+ * Use this hook in Legend, or anywhere else where you want to read the current Legend items.
+ * @return all Legend items ready to be rendered
+ */
+export function useLegendPayload(): ReadonlyArray<LegendPayload> | undefined {
+	return useAppSelector(selectLegendPayload);
+}

package/src/context/useTooltipAxis.ts

@@ -0,0 +1,20 @@
+import { useAppSelector } from '../state/hooks';
+import { getBandSizeOfAxis } from '../util/ChartUtils';
+import { RenderableAxisSettings, selectTooltipAxis } from '../state/selectors/axisSelectors';
+import {
+	selectTooltipAxisScale,
+	selectTooltipAxisTicks,
+} from '../state/selectors/tooltipSelectors';
+
+export const useTooltipAxis = (): RenderableAxisSettings | undefined =>
+	useAppSelector(selectTooltipAxis);
+
+export const useTooltipAxisBandSize = (): number | undefined => {
+	const tooltipAxis = useTooltipAxis();
+	const tooltipTicks = useAppSelector(selectTooltipAxisTicks);
+	const tooltipAxisScale = useAppSelector(selectTooltipAxisScale);
+	if (!tooltipAxis || !tooltipAxisScale) {
+		return getBandSizeOfAxis(undefined, tooltipTicks);
+	}
+	return getBandSizeOfAxis({ ...tooltipAxis, scale: tooltipAxisScale }, tooltipTicks);
+};

package/src/index.d.ts

@@ -0,0 +1,236 @@
+import type { OctaneNode } from 'octane';
+
+export type NameType = string | number;
+export type ValueType = string | number | Array<string | number>;
+type Render = OctaneNode | ((...args: any[]) => OctaneNode);
+type Handler = (...args: any[]) => void;
+
+export interface RechartsProps {
+	accessibilityLayer?: boolean;
+	allowDecimals?: boolean;
+	activeBar?: Render | Record<string, unknown>;
+	activeDot?: Render;
+	activeIndex?: number;
+	activeShape?: Render | Record<string, unknown>;
+	angle?: number;
+	animationBegin?: number;
+	animationDuration?: number;
+	animationEasing?: string;
+	aspect?: number;
+	axisLine?: boolean | Record<string, unknown>;
+	barCategoryGap?: number | string;
+	barGap?: number | string;
+	barSize?: number | string;
+	baseValue?: number | 'dataMin' | 'dataMax';
+	background?: Render | Record<string, unknown>;
+	children?: OctaneNode;
+	className?: string;
+	color?: string;
+	connectNulls?: boolean;
+	content?: Render | Record<string, unknown>;
+	cursor?: Render | Record<string, unknown>;
+	cx?: number | string;
+	cy?: number | string;
+	data?: readonly unknown[];
+	dataKey?: string | number | ((entry: unknown) => unknown);
+	debounce?: number;
+	domain?: readonly unknown[];
+	dot?: Render | Record<string, unknown>;
+	dy?: number | string;
+	endAngle?: number;
+	fill?: string;
+	fillOpacity?: number;
+	fontFamily?: string;
+	fontSize?: number | string;
+	formatter?: (...args: any[]) => OctaneNode;
+	height?: number | string;
+	hide?: boolean;
+	horizontal?: boolean;
+	id?: string;
+	innerRadius?: number | string;
+	interval?: number | string;
+	isAnimationActive?: boolean;
+	label?: Render | Record<string, unknown>;
+	labelLine?: boolean | Record<string, unknown>;
+	labelFormatter?: (...args: any[]) => OctaneNode;
+	layout?: 'horizontal' | 'vertical' | 'centric' | 'radial';
+	legendType?: string;
+	line?: boolean | Record<string, unknown>;
+	link?: Render | Record<string, unknown>;
+	linkCurvature?: number;
+	margin?: number | { top?: number; right?: number; bottom?: number; left?: number };
+	maxBarSize?: number;
+	maxHeight?: number;
+	minTickGap?: number;
+	minHeight?: number | string;
+	minPointSize?: number | ((value: unknown) => number);
+	minWidth?: number | string;
+	name?: string | number;
+	nameKey?: string | number | ((entry: unknown) => unknown);
+	node?: Render | Record<string, unknown>;
+	nodePadding?: number;
+	nodeWidth?: number;
+	onAnimationEnd?: Handler;
+	onAnimationStart?: Handler;
+	onClick?: Handler;
+	onMouseEnter?: Handler;
+	onMouseLeave?: Handler;
+	onResize?: (width: number, height: number) => void;
+	orientation?: string;
+	outerRadius?: number | string;
+	offset?: number;
+	paddingAngle?: number;
+	padding?: number | { top?: number; right?: number; bottom?: number; left?: number };
+	payload?: Record<string, any> | readonly Record<string, any>[];
+	position?: string | { x?: number; y?: number };
+	radius?: number | readonly number[];
+	range?: readonly number[];
+	ref?: unknown;
+	reversed?: boolean;
+	ringPadding?: number;
+	scale?: string | ((value: unknown) => unknown);
+	shape?: Render | Record<string, unknown>;
+	stackId?: string | number;
+	stackOffset?: string;
+	startAngle?: number;
+	stroke?: string;
+	strokeDasharray?: string | number;
+	strokeOpacity?: number;
+	strokeWidth?: number;
+	style?: object;
+	syncId?: string | number;
+	textAnchor?: string;
+	textOptions?: Record<string, unknown>;
+	tick?: Render | Record<string, unknown>;
+	tickCount?: number;
+	tickFormatter?: (value: any, index: number) => string;
+	tickLine?: boolean | Record<string, unknown>;
+	ticks?: readonly unknown[];
+	tooltipType?: string;
+	type?: string;
+	unit?: string | number;
+	valueKey?: string | number | ((entry: unknown) => unknown);
+	vertical?: boolean;
+	verticalAlign?: 'top' | 'middle' | 'bottom';
+	iterations?: number;
+	width?: number | string;
+	xAxisId?: string | number;
+	yAxisId?: string | number;
+	zAxisId?: string | number;
+}
+
+type Component<Props> = (props: Props) => OctaneNode;
+type ChartProps = Pick<
+	RechartsProps,
+	| 'accessibilityLayer'
+	| 'barCategoryGap'
+	| 'barGap'
+	| 'barSize'
+	| 'children'
+	| 'className'
+	| 'cx'
+	| 'cy'
+	| 'data'
+	| 'endAngle'
+	| 'height'
+	| 'innerRadius'
+	| 'layout'
+	| 'margin'
+	| 'maxBarSize'
+	| 'outerRadius'
+	| 'stackOffset'
+	| 'startAngle'
+	| 'style'
+	| 'syncId'
+	| 'width'
+>;
+
+export type AreaProps<DataPointType = unknown, ValueAxisType = unknown> = RechartsProps & {
+	data?: readonly DataPointType[];
+	baseValue?: number | 'dataMin' | 'dataMax' | ValueAxisType;
+};
+export type BarProps = RechartsProps;
+export type BarShapeProps = Omit<RechartsProps, 'payload'> & {
+	payload?: Record<string, any>;
+};
+export type BrushProps = RechartsProps;
+export type CartesianGridProps = RechartsProps;
+export type DotProps = RechartsProps;
+export type FunnelProps = RechartsProps;
+export type LabelListProps = RechartsProps;
+export type LabelProps = RechartsProps;
+export type LegendProps = RechartsProps;
+export type LineProps = RechartsProps;
+export interface PieLabelRenderProps {
+	cx: number;
+	cy: number;
+	x: number;
+	y: number;
+	midAngle: number;
+	innerRadius: number;
+	outerRadius: number;
+	percent: number;
+	value: number;
+	name: NameType;
+}
+export type PieLabel = boolean | ((props: PieLabelRenderProps) => OctaneNode);
+export type PieProps<DataPointType = unknown, DataValueType = unknown> = RechartsProps & {
+	data?: readonly DataPointType[];
+	valueKey?: keyof DataPointType | ((entry: DataPointType) => DataValueType);
+};
+export type PolarAngleAxisProps = RechartsProps;
+export type PolarGridProps = RechartsProps;
+export type PolarRadiusAxisProps = RechartsProps;
+export type RadarProps = RechartsProps;
+export type RadialBarProps = RechartsProps;
+export type ReferenceLineProps = RechartsProps;
+export type ResponsiveContainerProps = RechartsProps;
+export type SankeyProps = RechartsProps;
+export type ScatterProps = RechartsProps;
+export type SunburstChartProps = RechartsProps;
+export type TooltipProps<
+	TValue extends ValueType = ValueType,
+	TName extends NameType = NameType,
+> = RechartsProps & {
+	formatter?: (value: TValue, name: TName, ...rest: any[]) => OctaneNode;
+};
+export type TreemapProps = RechartsProps;
+export type XAxisProps = RechartsProps;
+export type YAxisProps = RechartsProps;
+export type ZAxisProps = RechartsProps;
+
+export declare const Area: Component<AreaProps>;
+export declare const AreaChart: Component<ChartProps>;
+export declare const Bar: Component<BarProps>;
+export declare const BarChart: Component<ChartProps>;
+export declare const Brush: Component<BrushProps>;
+export declare const CartesianGrid: Component<CartesianGridProps>;
+export declare const ComposedChart: Component<ChartProps>;
+export declare const Funnel: Component<FunnelProps>;
+export declare const FunnelChart: Component<ChartProps>;
+export declare const Label: Component<LabelProps>;
+export declare const LabelList: Component<LabelListProps>;
+export declare const Legend: Component<LegendProps>;
+export declare const Line: Component<LineProps>;
+export declare const LineChart: Component<ChartProps>;
+export declare const Pie: Component<PieProps>;
+export declare const PieChart: Component<ChartProps>;
+export declare const PolarAngleAxis: Component<PolarAngleAxisProps>;
+export declare const PolarGrid: Component<PolarGridProps>;
+export declare const PolarRadiusAxis: Component<PolarRadiusAxisProps>;
+export declare const Radar: Component<RadarProps>;
+export declare const RadarChart: Component<ChartProps>;
+export declare const RadialBar: Component<RadialBarProps>;
+export declare const RadialBarChart: Component<ChartProps>;
+export declare const Rectangle: Component<BarShapeProps>;
+export declare const ReferenceLine: Component<ReferenceLineProps>;
+export declare const ResponsiveContainer: Component<ResponsiveContainerProps>;
+export declare const Sankey: Component<SankeyProps>;
+export declare const Scatter: Component<ScatterProps>;
+export declare const ScatterChart: Component<ChartProps>;
+export declare const SunburstChart: Component<SunburstChartProps>;
+export declare const Tooltip: Component<TooltipProps>;
+export declare const Treemap: Component<TreemapProps>;
+export declare const XAxis: Component<XAxisProps>;
+export declare const YAxis: Component<YAxisProps>;
+export declare const ZAxis: Component<ZAxisProps>;