tessl/npm-recharts

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

—

Pending

Overview

Eval results

Files

Shape Components

Name: tessl/npm-recharts
Author: tessl

Primitive shape components for custom visualizations and chart element construction. These components provide the building blocks for creating custom chart elements and can be used standalone or as part of larger chart compositions.

Capabilities

Basic Shape Components

Rectangle

Rounded rectangle shape component with animation support, commonly used for bars and backgrounds.

/**
 * Rectangle shape component with rounded corners and animation
 * @param props - Rectangle configuration and styling options
 * @returns React component rendering SVG rectangle path
 */
function Rectangle(props: RectangleProps): JSX.Element;

interface RectangleProps extends React.SVGProps<SVGPathElement> {
  /** Rectangle X position */
  x?: number;
  /** Rectangle Y position */
  y?: number;
  /** Rectangle width */
  width?: number;
  /** Rectangle height */
  height?: number;
  /** Corner radius - single value or array for each corner [topRight, bottomRight, bottomLeft, topLeft] */
  radius?: number | [number, number, number, number];
  /** CSS class name */
  className?: string;
  /** Enable animation */
  isAnimationActive?: boolean;
  /** Animation duration in milliseconds */
  animationDuration?: number;
  /** Animation easing function */
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
}

Usage Example:

import { Rectangle } from 'recharts';

<Rectangle 
  x={10} 
  y={10} 
  width={100} 
  height={50} 
  radius={[10, 10, 0, 0]} 
  fill="#8884d8" 
/>

Sector

Circular sector/arc shape component for pie charts and circular visualizations.

/**
 * Sector shape component for circular arcs and pie slices
 * @param props - Sector configuration and styling options
 * @returns React component rendering SVG sector path
 */
function Sector(props: SectorProps): JSX.Element;

interface SectorProps {
  /** Center X coordinate */
  cx?: number;
  /** Center Y coordinate */
  cy?: number;
  /** Inner radius */
  innerRadius?: number;
  /** Outer radius */
  outerRadius?: number;
  /** Starting angle in degrees */
  startAngle?: number;
  /** Ending angle in degrees */
  endAngle?: number;
  /** Corner radius for rounded edges */
  cornerRadius?: number | string;
  /** Force corner radius on small sectors */
  forceCornerRadius?: boolean;
  /** Corner radius applied externally */
  cornerIsExternal?: boolean;
  /** CSS class name */
  className?: string;
  /** Fill color */
  fill?: string;
  /** Stroke color */
  stroke?: string;
  /** Stroke width */
  strokeWidth?: number | string;
}

Dot

Circular dot/point shape component for scatter plots and line chart points.

/**
 * Dot shape component for circular points and markers
 * @param props - Dot configuration and styling options
 * @returns React component rendering SVG circle
 */
function Dot(props: DotProps): JSX.Element;

interface DotProps extends React.SVGProps<SVGCircleElement> {
  /** Center X coordinate */
  cx?: number;
  /** Center Y coordinate */
  cy?: number;
  /** Dot radius */
  r?: number;
  /** CSS class name */
  className?: string;
  /** Clip dot to chart area */
  clipDot?: boolean;
}

Cross

Cross/plus symbol shape component for markers and indicators.

/**
 * Cross shape component for plus/cross symbols
 * @param props - Cross configuration and styling options
 * @returns React component rendering SVG cross paths
 */
function Cross(props: CrossProps): JSX.Element;

interface CrossProps extends React.SVGProps<SVGElement> {
  /** Center X coordinate */
  x?: number;
  /** Center Y coordinate */
  y?: number;
  /** Cross size */
  size?: number;
  /** Fill color */
  fill?: string;
  /** Stroke color */
  stroke?: string;
}

Advanced Shape Components

Curve

Curved line/path component with various interpolation types for smooth data connections.

/**
 * Curve shape component for smooth line interpolation
 * @param props - Curve configuration and path options
 * @returns React component rendering SVG curve path
 */
function Curve(props: CurveProps): JSX.Element;

interface CurveProps {
  /** Curve interpolation type */
  type?: CurveType;
  /** Array of points to connect */
  points?: Array<{ x: number; y: number }>;
  /** Fill color for closed curves */
  fill?: string;
  /** Stroke color */
  stroke?: string;
  /** Stroke width */
  strokeWidth?: number | string;
  /** Chart layout direction */
  layout?: 'horizontal' | 'vertical';
  /** Connect null/undefined points */
  connectNulls?: boolean;
  /** Path element ref */
  pathRef?: React.Ref<SVGPathElement>;
  /** CSS class name */
  className?: string;
}

type CurveType = 
  | 'basis' | 'basisClosed' | 'basisOpen'
  | 'bumpX' | 'bumpY' 
  | 'linear' | 'linearClosed' 
  | 'natural' 
  | 'monotoneX' | 'monotoneY' 
  | 'step' | 'stepBefore' | 'stepAfter';

Polygon

Multi-point polygon shape component for connecting multiple coordinate points.

/**
 * Polygon shape component for multi-point geometric shapes
 * @param props - Polygon configuration and point data
 * @returns React component rendering SVG polygon
 */
function Polygon(props: PolygonProps): JSX.Element;

interface PolygonProps extends React.SVGProps<SVGPolygonElement> {
  /** Array of coordinate points */
  points?: Array<{ x: number; y: number }>;
  /** CSS class name */
  className?: string;
}

Symbols

Various symbol shapes component (circle, cross, diamond, square, star, triangle, wye) for data point markers.

/**
 * Symbols shape component for various marker symbols
 * @param props - Symbol configuration and type options
 * @returns React component rendering specified symbol shape
 */
function Symbols(props: SymbolsProps): JSX.Element;

interface SymbolsProps {
  /** Symbol type */
  type?: SymbolType;
  /** Symbol size */
  size?: number;
  /** Size calculation type */
  sizeType?: 'area' | 'diameter';
  /** CSS class name */
  className?: string;
  /** Center X coordinate */
  cx?: number;
  /** Center Y coordinate */
  cy?: number;
}

type SymbolType = 'circle' | 'cross' | 'diamond' | 'square' | 'star' | 'triangle' | 'wye';

Usage Example:

import { ScatterChart, Scatter, Symbols } from 'recharts';

<ScatterChart data={data}>
  <Scatter 
    dataKey="value" 
    shape={<Symbols type="star" size={64} />}
  />
</ScatterChart>

Trapezoid

Trapezoid shape component specifically designed for funnel charts.

/**
 * Trapezoid shape component for funnel chart segments
 * @param props - Trapezoid configuration and dimensions  
 * @returns React component rendering SVG trapezoid path
 */
function Trapezoid(props: TrapezoidProps): JSX.Element;

interface TrapezoidProps {
  /** Top-left X position */
  x?: number;
  /** Top-left Y position */
  y?: number;
  /** Upper width (top edge) */
  upperWidth?: number;
  /** Lower width (bottom edge) */
  lowerWidth?: number;
  /** Trapezoid height */
  height?: number;
  /** Fill color */
  fill?: string;
  /** Stroke color */
  stroke?: string;
  /** Stroke width */
  strokeWidth?: number | string;
  /** CSS class name */
  className?: string;
}

Shape Component Usage Patterns

Custom Bar Shapes

import { BarChart, Bar, Rectangle } from 'recharts';

const CustomBar = (props: any) => {
  const { fill, x, y, width, height } = props;
  return (
    <Rectangle 
      x={x} 
      y={y} 
      width={width} 
      height={height} 
      radius={[4, 4, 0, 0]} 
      fill={fill} 
    />
  );
};

<BarChart data={data}>
  <Bar dataKey="value" shape={<CustomBar />} />
</BarChart>

Custom Pie Sector Shapes

import { PieChart, Pie, Sector } from 'recharts';

const CustomSector = (props: any) => {
  const { cx, cy, innerRadius, outerRadius, startAngle, endAngle, fill } = props;
  return (
    <Sector
      cx={cx}
      cy={cy}
      innerRadius={innerRadius}
      outerRadius={outerRadius + 10}
      startAngle={startAngle}
      endAngle={endAngle}
      fill={fill}
      cornerRadius={5}
    />
  );
};

<PieChart>
  <Pie data={data} dataKey="value" activeShape={<CustomSector />} />
</PieChart>

Custom Line Dots

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

const CustomDot = (props: any) => {
  const { cx, cy, fill } = props;
  return <Dot cx={cx} cy={cy} r={6} fill={fill} stroke="#fff" strokeWidth={2} />;
};

<LineChart data={data}>
  <Line dataKey="value" dot={<CustomDot />} />
</LineChart>

Animation and Styling

Animation Props

Most shape components support animation through these common props:

interface AnimationProps {
  /** Enable animation */
  isAnimationActive?: boolean;
  /** Animation duration in milliseconds */
  animationDuration?: number;
  /** Animation easing function */
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
  /** Animation start value */
  animationBegin?: number;
}

Common Styling Props

All shape components inherit standard SVG styling properties:

interface CommonShapeProps extends React.SVGProps<SVGElement> {
  /** Fill color */
  fill?: string;
  /** Fill opacity */
  fillOpacity?: number | string;
  /** Stroke color */
  stroke?: string;
  /** Stroke width */
  strokeWidth?: number | string;
  /** Stroke opacity */
  strokeOpacity?: number | string;
  /** Stroke dash array */
  strokeDasharray?: string | number;
  /** CSS class name */
  className?: string;
  /** Inline styles */
  style?: React.CSSProperties;
}

Install with Tessl CLI