tessl/npm-recharts

React charting library with declarative, composable components for building interactive data visualizations

—

Pending

Overview

Eval results

Files

Cartesian Components

Name: tessl/npm-recharts
Author: tessl

Components for Cartesian coordinate system charts, including axes, data series, grid systems, and reference elements. These components work together to create line charts, bar charts, area charts, and other rectangular coordinate visualizations.

Capabilities

Axes Components

XAxis

Horizontal axis component for Cartesian charts with support for various data types and formatting options.

/**
 * X-axis component for horizontal axis rendering
 * @param props - X-axis configuration and display options
 * @returns React component rendering horizontal axis
 */
function XAxis(props: XAxisProps): JSX.Element;

interface XAxisProps {
  /** Unique identifier for this X-axis */
  xAxisId?: string | number;
  /** Data key for axis values */
  dataKey?: string | number | ((dataObject: any) => any);
  /** Axis height */
  height?: number;
  /** Axis orientation */
  orientation?: 'top' | 'bottom';
  /** Axis data type */
  type?: 'number' | 'category';
  /** Allow duplicate categories */
  allowDuplicatedCategory?: boolean;
  /** Allow data overflow */
  allowDataOverflow?: boolean;
  /** Allow decimal intervals */
  allowDecimals?: boolean;
  /** Hide axis */
  hide?: boolean;
  /** Scale type */
  scale?: 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold';
  /** Data domain */
  domain?: [any, any] | ((dataMin: any, dataMax: any) => [any, any]);
  /** Tick values array */
  ticks?: any[];
  /** Tick count */
  tickCount?: number;
  /** Tick formatter */
  tickFormatter?: (value: any, index: number) => string;
  /** Padding configuration */
  padding?: { left?: number; right?: number };
  /** Minimum tick gap */
  minTickGap?: number;
  /** Tick display interval */
  interval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
  /** Reverse axis direction */
  reversed?: boolean;
  /** Tick label angle */
  angle?: number;
  /** Tick margin */
  tickMargin?: number;
  /** Mirror axis */
  mirror?: boolean;
  /** Tick component */
  tick?: boolean | React.ComponentType<any> | React.ReactElement;
  /** Axis line component */
  axisLine?: boolean | React.SVGProps<SVGLineElement>;
  /** Tick line component */
  tickLine?: boolean | React.SVGProps<SVGLineElement>;
}

Usage Example:

import { LineChart, Line, XAxis } from 'recharts';

<LineChart data={data}>
  <XAxis 
    dataKey="name" 
    angle={-45}
    textAnchor="end"
    height={60}
  />
  <Line dataKey="value" />
</LineChart>

YAxis

Vertical axis component for Cartesian charts with numeric and categorical data support.

/**
 * Y-axis component for vertical axis rendering
 * @param props - Y-axis configuration and display options
 * @returns React component rendering vertical axis
 */
function YAxis(props: YAxisProps): JSX.Element;

interface YAxisProps {
  /** Unique identifier for this Y-axis */
  yAxisId?: string | number;
  /** Data key for axis values */
  dataKey?: string | number | ((dataObject: any) => any);
  /** Axis width */
  width?: number;
  /** Axis orientation */
  orientation?: 'left' | 'right';
  /** Axis data type */
  type?: 'number' | 'category';
  /** Allow duplicate categories */
  allowDuplicatedCategory?: boolean;
  /** Allow data overflow */
  allowDataOverflow?: boolean;
  /** Allow decimal intervals */
  allowDecimals?: boolean;
  /** Hide axis */
  hide?: boolean;
  /** Scale type */
  scale?: 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold';
  /** Data domain */
  domain?: [any, any] | ((dataMin: any, dataMax: any) => [any, any]);
  /** Tick values array */
  ticks?: any[];
  /** Tick count */
  tickCount?: number;
  /** Tick formatter */
  tickFormatter?: (value: any, index: number) => string;
  /** Padding configuration */
  padding?: { top?: number; bottom?: number };
  /** Minimum tick gap */
  minTickGap?: number;
  /** Tick display interval */
  interval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';
  /** Reverse axis direction */
  reversed?: boolean;
  /** Mirror axis */
  mirror?: boolean;
  /** Tick component */
  tick?: boolean | React.ComponentType<any> | React.ReactElement;
  /** Axis line component */
  axisLine?: boolean | React.SVGProps<SVGLineElement>;
  /** Tick line component */
  tickLine?: boolean | React.SVGProps<SVGLineElement>;
}

ZAxis

Z-axis component for 3D-like data representation in scatter charts.

/**
 * Z-axis component for third dimension data in scatter charts
 * @param props - Z-axis configuration
 * @returns React component providing Z-axis scaling
 */
function ZAxis(props: ZAxisProps): JSX.Element;

interface ZAxisProps {
  /** Unique identifier for this Z-axis */
  zAxisId?: string | number;
  /** Data key for Z values */
  dataKey?: string | number | ((dataObject: any) => any);
  /** Value range for scaling */
  range?: [number, number];
  /** Scale type */
  scale?: 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold';
  /** Axis data type */
  type?: 'number' | 'category';
  /** Axis name */
  name?: string | number;
  /** Axis unit */
  unit?: string | number;
}

CartesianAxis

Low-level axis rendering component used internally by XAxis and YAxis.

/**
 * Low-level Cartesian axis rendering component
 * @param props - Axis rendering configuration
 * @returns React component rendering axis elements
 */
function CartesianAxis(props: CartesianAxisProps): JSX.Element;

interface CartesianAxisProps {
  /** Axis scale function */
  scale: any;
  /** Axis position X */
  x?: number;
  /** Axis position Y */
  y?: number;
  /** Axis width */
  width?: number;
  /** Axis height */
  height?: number;
  /** Axis orientation */
  orientation?: 'top' | 'bottom' | 'left' | 'right';
  /** Tick values */
  ticks?: any[];
  /** Tick component */
  tick?: boolean | React.ComponentType<any> | React.ReactElement;
  /** Axis line component */
  axisLine?: boolean | React.SVGProps<SVGLineElement>;
  /** Tick line component */
  tickLine?: boolean | React.SVGProps<SVGLineElement>;
  /** Mirror axis */
  mirror?: boolean;
}

Data Series Components

Line

Line series component for connecting data points in LineChart and ComposedChart.

/**
 * Line series component for connecting data points
 * @param props - Line configuration and styling options
 * @returns React component rendering line series
 */
function Line(props: LineProps): JSX.Element;

interface LineProps {
  /** Data key for Y values */
  dataKey: string | number | ((dataObject: any) => any);
  /** Associated X-axis ID */
  xAxisId?: string | number;
  /** Associated Y-axis ID */
  yAxisId?: string | number;
  /** Line curve type */
  type?: 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
  /** Stroke color */
  stroke?: string;
  /** Stroke width */
  strokeWidth?: number | string;
  /** Stroke dash array */
  strokeDasharray?: string | number;
  /** Fill color */
  fill?: string;
  /** Fill opacity */
  fillOpacity?: number | string;
  /** Stroke opacity */
  strokeOpacity?: number | string;
  /** Connect null data points */
  connectNulls?: boolean;
  /** Hide line in legend */
  hide?: boolean;
  /** Legend type */
  legendType?: LegendType;
  /** Tooltip type */
  tooltipType?: 'none';
  /** Dot component */
  dot?: boolean | React.ComponentType<any> | React.ReactElement;
  /** Active dot component */
  activeDot?: boolean | React.ComponentType<any> | React.ReactElement;
  /** Animation duration */
  animationDuration?: number;
  /** Animation easing */
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
}

Usage Example:

import { LineChart, Line } from 'recharts';

<LineChart data={data}>
  <Line 
    type="monotone" 
    dataKey="sales" 
    stroke="#8884d8" 
    strokeWidth={2}
    dot={false}
    activeDot={{ r: 6 }}
  />
</LineChart>

Bar

Bar series component for rendering rectangular bars in BarChart and ComposedChart.

/**
 * Bar series component for rendering rectangular data bars
 * @param props - Bar configuration and styling options
 * @returns React component rendering bar series
 */
function Bar(props: BarProps): JSX.Element;

interface BarProps {
  /** Data key for bar values */
  dataKey: string | number | ((dataObject: any) => any);
  /** Associated X-axis ID */
  xAxisId?: string | number;
  /** Associated Y-axis ID */
  yAxisId?: string | number;
  /** Stack ID for stacked bars */
  stackId?: string | number;
  /** Bar size */
  barSize?: number;
  /** Maximum bar size */
  maxBarSize?: number;
  /** Minimum point size for small values */
  minPointSize?: number;
  /** Fill color */
  fill?: string;
  /** Fill opacity */
  fillOpacity?: number | string;
  /** Stroke color */
  stroke?: string;
  /** Stroke width */
  strokeWidth?: number | string;
  /** Bar shape component */
  shape?: React.ComponentType<any> | React.ReactElement;
  /** Active bar component */
  activeBar?: boolean | React.ComponentType<any> | React.ReactElement;
  /** Background bar component */
  background?: boolean | React.ComponentType<any> | React.ReactElement;
  /** Hide bar in legend */
  hide?: boolean;
  /** Legend type */
  legendType?: LegendType;
  /** Tooltip type */
  tooltipType?: 'none';
  /** Chart layout */
  layout?: 'vertical' | 'horizontal';
  /** Animation duration */
  animationDuration?: number;
  /** Animation easing */
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
}

Area

Area series component for filled areas under lines in AreaChart and ComposedChart.

/**
 * Area series component for filled area visualization
 * @param props - Area configuration and styling options
 * @returns React component rendering area series
 */
function Area(props: AreaProps): JSX.Element;

interface AreaProps {
  /** Data key for Y values */
  dataKey: string | number | ((dataObject: any) => any);
  /** Associated X-axis ID */
  xAxisId?: string | number;
  /** Associated Y-axis ID */
  yAxisId?: string | number;
  /** Stack ID for stacked areas */
  stackId?: string | number;
  /** Area curve type */
  type?: 'basis' | 'basisClosed' | 'basisOpen' | 'bumpX' | 'bumpY' | 'bump' | 'linear' | 'linearClosed' | 'natural' | 'monotoneX' | 'monotoneY' | 'monotone' | 'step' | 'stepBefore' | 'stepAfter';
  /** Base line for area */
  baseLine?: number | 'dataMin' | 'dataMax';
  /** Fill color */
  fill?: string;
  /** Fill opacity */
  fillOpacity?: number | string;
  /** Stroke color */
  stroke?: string;
  /** Stroke width */
  strokeWidth?: number | string;
  /** Connect null data points */
  connectNulls?: boolean;
  /** Hide area in legend */
  hide?: boolean;
  /** Legend type */
  legendType?: LegendType;
  /** Tooltip type */
  tooltipType?: 'none';
  /** Dot component */
  dot?: boolean | React.ComponentType<any> | React.ReactElement;
  /** Active dot component */
  activeDot?: boolean | React.ComponentType<any> | React.ReactElement;
  /** Animation duration */
  animationDuration?: number;
}

Scatter

Scatter series component for individual data points in ScatterChart and ComposedChart.

/**
 * Scatter series component for individual data points
 * @param props - Scatter configuration and styling options
 * @returns React component rendering scatter points
 */
function Scatter(props: ScatterProps): JSX.Element;

interface ScatterProps {
  /** Data key for values */
  dataKey?: string | number | ((dataObject: any) => any);
  /** Associated X-axis ID */
  xAxisId?: string | number;
  /** Associated Y-axis ID */
  yAxisId?: string | number;
  /** Associated Z-axis ID */
  zAxisId?: string | number;
  /** Fill color */
  fill?: string;
  /** Point shape component */
  shape?: React.ComponentType<any> | React.ReactElement;
  /** Hide scatter in legend */
  hide?: boolean;
  /** Legend type */
  legendType?: LegendType;
  /** Tooltip type */
  tooltipType?: 'none';
  /** Animation duration */
  animationDuration?: number;
}

Funnel

Funnel series component for progressive data reduction visualization in FunnelChart.

/**
 * Funnel series component for progressive data visualization
 * @param props - Funnel configuration and styling options
 * @returns React component rendering funnel series
 */
function Funnel(props: FunnelProps): JSX.Element;

interface FunnelProps {
  /** Data key for funnel values */
  dataKey: string | number | ((dataObject: any) => any);
  /** Active shape component */
  activeShape?: React.ComponentType<any> | React.ReactElement;
  /** Trapezoid components array */
  trapezoids?: any[];
  /** Animation duration */
  animationDuration?: number;
  /** Animation easing */
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
}

Grid and Support Components

CartesianGrid

Grid lines component for Cartesian coordinate system background.

/**
 * Cartesian grid component for chart background grid lines
 * @param props - Grid configuration and styling options
 * @returns React component rendering grid lines
 */
function CartesianGrid(props: CartesianGridProps): JSX.Element;

interface CartesianGridProps extends React.SVGProps<SVGElement> {
  /** Show horizontal grid lines */
  horizontal?: boolean;
  /** Show vertical grid lines */
  vertical?: boolean;
  /** Horizontal grid line positions */
  horizontalPoints?: number[];
  /** Vertical grid line positions */
  verticalPoints?: number[];
  /** Grid line stroke color */
  stroke?: string;
  /** Grid line stroke width */
  strokeWidth?: number | string;
  /** Grid line stroke dash array */
  strokeDasharray?: string | number;
  /** Fill color between grid lines */
  fill?: string;
  /** Fill opacity */
  fillOpacity?: number | string;
}

ErrorBar

Error bar component for showing data uncertainty or variance.

/**
 * Error bar component for displaying data uncertainty
 * @param props - Error bar configuration and data options
 * @returns React component rendering error bars
 */
function ErrorBar(props: ErrorBarProps): JSX.Element;

interface ErrorBarProps {
  /** Data key for error values */
  dataKey?: string | number | ((dataObject: any) => any);
  /** Error bar data */
  data?: any[];
  /** Associated X-axis ID */
  xAxisId?: string | number;
  /** Associated Y-axis ID */
  yAxisId?: string | number;
  /** Error bar width */
  width?: number;
  /** Stroke color */
  stroke?: string;
  /** Stroke width */
  strokeWidth?: number | string;
  /** Direction of error bars */
  direction?: 'x' | 'y';
}

Brush

Interactive brush component for data range selection and zooming.

/**
 * Brush component for interactive data range selection
 * @param props - Brush configuration and interaction options
 * @returns React component rendering interactive brush
 */
function Brush(props: BrushProps): JSX.Element;

interface BrushProps {
  /** Data key for brush values */
  dataKey?: string | number | ((dataObject: any) => any);
  /** Brush data */
  data?: any[];
  /** Brush X position */
  x?: number;
  /** Brush Y position */
  y?: number;
  /** Brush width */
  width?: number;
  /** Brush height */
  height?: number;
  /** Start index for selection */
  startIndex?: number;
  /** End index for selection */
  endIndex?: number;
  /** Tick formatter function */
  tickFormatter?: (value: any, index: number) => string;
  /** Selection change handler */
  onChange?: (newIndex: { startIndex: number; endIndex: number }) => void;
  /** Fill color */
  fill?: string;
  /** Stroke color */
  stroke?: string;
  /** Gap between brush and chart */
  gap?: number;
  /** Traveller component */
  traveller?: React.ComponentType<any> | React.ReactElement;
}

Reference Components

ReferenceLine

Reference line component for marking specific values on charts.

/**
 * Reference line component for marking specific values
 * @param props - Reference line configuration and styling
 * @returns React component rendering reference line
 */
function ReferenceLine(props: ReferenceLineProps): JSX.Element;

interface ReferenceLineProps {
  /** X value for vertical line */
  x?: number | string;
  /** Y value for horizontal line */
  y?: number | string;
  /** Line segment configuration */
  segment?: Array<{ x?: number | string; y?: number | string }>;
  /** Associated X-axis ID */
  xAxisId?: string | number;
  /** Associated Y-axis ID */
  yAxisId?: string | number;
  /** Stroke color */
  stroke?: string;
  /** Stroke width */
  strokeWidth?: number | string;
  /** Stroke dash array */
  strokeDasharray?: string | number;
  /** Label component */
  label?: string | number | React.ComponentType<any> | React.ReactElement;
  /** If line should be rendered in front */
  isFront?: boolean;
}

ReferenceArea

Reference area component for highlighting value ranges.

/**
 * Reference area component for highlighting ranges
 * @param props - Reference area configuration and styling
 * @returns React component rendering reference area
 */
function ReferenceArea(props: ReferenceAreaProps): JSX.Element;

interface ReferenceAreaProps {
  /** X1 coordinate */
  x1?: number | string;
  /** X2 coordinate */
  x2?: number | string;
  /** Y1 coordinate */
  y1?: number | string;
  /** Y2 coordinate */
  y2?: number | string;
  /** Associated X-axis ID */
  xAxisId?: string | number;
  /** Associated Y-axis ID */
  yAxisId?: string | number;
  /** Fill color */
  fill?: string;
  /** Fill opacity */
  fillOpacity?: number | string;
  /** Stroke color */
  stroke?: string;
  /** Stroke width */
  strokeWidth?: number | string;
  /** Label component */
  label?: string | number | React.ComponentType<any> | React.ReactElement;
  /** If area should be rendered in front */
  isFront?: boolean;
}

ReferenceDot

Reference dot component for marking specific points.

/**
 * Reference dot component for marking specific points
 * @param props - Reference dot configuration and styling
 * @returns React component rendering reference dot
 */
function ReferenceDot(props: ReferenceDotProps): JSX.Element;

interface ReferenceDotProps {
  /** X coordinate */
  x?: number | string;
  /** Y coordinate */
  y?: number | string;
  /** Associated X-axis ID */
  xAxisId?: string | number;
  /** Associated Y-axis ID */
  yAxisId?: string | number;
  /** Dot radius */
  r?: number;
  /** Fill color */
  fill?: string;
  /** Stroke color */
  stroke?: string;
  /** Stroke width */
  strokeWidth?: number | string;
  /** Label component */
  label?: string | number | React.ComponentType<any> | React.ReactElement;
  /** If dot should be rendered in front */
  isFront?: boolean;
}

Install with Tessl CLI