tessl/npm-recharts

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

—

Pending

Overview

Eval results

Files

Chart Components

Name: tessl/npm-recharts
Author: tessl

Complete chart solutions for different data visualization needs. Recharts provides both Cartesian charts for linear data representation and polar charts for circular visualizations, plus specialized charts for hierarchical and flow data.

Capabilities

Cartesian Charts

LineChart

Line chart for continuous data with connected points, ideal for showing trends over time or continuous variables.

/**
 * Line chart component for displaying continuous data trends
 * @param props - Chart configuration and data
 * @returns React component rendering an SVG line chart
 */
function LineChart(props: CartesianChartProps): JSX.Element;

Usage Example:

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

const data = [
  { month: 'Jan', sales: 4000 },
  { month: 'Feb', sales: 3000 },
  { month: 'Mar', sales: 5000 },
];

<LineChart width={600} height={300} data={data}>
  <XAxis dataKey="month" />
  <YAxis />
  <Tooltip />
  <Line type="monotone" dataKey="sales" stroke="#8884d8" />
</LineChart>

BarChart

Bar chart for categorical data with rectangular bars, perfect for comparing discrete categories or values.

/**
 * Bar chart component for displaying categorical data comparisons
 * @param props - Chart configuration and data
 * @returns React component rendering an SVG bar chart
 */
function BarChart(props: CartesianChartProps): JSX.Element;

Usage Example:

import { BarChart, Bar, XAxis, YAxis, Tooltip } from 'recharts';

<BarChart width={600} height={300} data={data}>
  <XAxis dataKey="month" />
  <YAxis />
  <Tooltip />
  <Bar dataKey="sales" fill="#8884d8" />
</BarChart>

AreaChart

Area chart with filled areas under lines, useful for showing quantitative progression and cumulative values.

/**
 * Area chart component for displaying quantitative data with filled areas
 * @param props - Chart configuration and data
 * @returns React component rendering an SVG area chart
 */
function AreaChart(props: CartesianChartProps): JSX.Element;

ScatterChart

Scatter plot for showing relationships between two variables, ideal for correlation analysis.

/**
 * Scatter chart component for displaying two-variable relationships
 * @param props - Chart configuration and data
 * @returns React component rendering an SVG scatter plot
 */
function ScatterChart(props: CartesianChartProps): JSX.Element;

ComposedChart

Combination chart supporting multiple chart types in one view, allowing overlay of different data series.

/**
 * Composed chart component supporting multiple chart types
 * @param props - Chart configuration and data
 * @returns React component rendering multiple chart types
 */
function ComposedChart(props: CartesianChartProps): JSX.Element;

FunnelChart

Funnel chart for displaying progressive reduction of data, commonly used for conversion flows.

/**
 * Funnel chart component for displaying progressive data reduction
 * @param props - Chart configuration and data
 * @returns React component rendering an SVG funnel chart
 */
function FunnelChart(props: CartesianChartProps): JSX.Element;

Polar Charts

PieChart

Pie chart for displaying parts of a whole, with support for both pie and donut chart styles.

/**
 * Pie chart component for displaying proportional data
 * @param props - Chart configuration and data
 * @returns React component rendering an SVG pie chart
 */
function PieChart(props: PolarChartProps): JSX.Element;

Usage Example:

import { PieChart, Pie, Cell, Tooltip } from 'recharts';

const data = [
  { name: 'Group A', value: 400 },
  { name: 'Group B', value: 300 },
  { name: 'Group C', value: 300 },
];

<PieChart width={400} height={400}>
  <Pie data={data} dataKey="value" cx="50%" cy="50%" outerRadius={80} fill="#8884d8" />
  <Tooltip />
</PieChart>

RadarChart

Radar/spider chart for multivariate data visualization, showing multiple metrics on different axes.

/**
 * Radar chart component for multivariate data visualization
 * @param props - Chart configuration and data
 * @returns React component rendering an SVG radar chart
 */
function RadarChart(props: PolarChartProps): JSX.Element;

RadialBarChart

Radial bar chart for circular data representation, displaying bars in a circular layout.

/**
 * Radial bar chart component for circular bar visualization
 * @param props - Chart configuration and data
 * @returns React component rendering an SVG radial bar chart
 */
function RadialBarChart(props: PolarChartProps): JSX.Element;

Specialized Charts

Treemap

Treemap for hierarchical data using nested rectangles, where rectangle size represents data magnitude.

/**
 * Treemap component for hierarchical data visualization
 * @param props - Treemap-specific configuration and hierarchical data
 * @returns React component rendering an SVG treemap
 */
function Treemap(props: TreemapProps): JSX.Element;

interface TreemapProps {
  width: number;
  height: number;
  data: TreemapDataType[];
  dataKey: string | number | ((dataObject: any) => any);
  aspectRatio?: number;
  type?: 'flat' | 'nest';
  animationDuration?: number;
}

interface TreemapDataType {
  name?: string;
  size?: number;
  children?: TreemapDataType[];
  [key: string]: any;
}

Sankey

Sankey diagram for visualizing flow between nodes, commonly used for process flows and energy diagrams.

/**
 * Sankey diagram component for flow visualization
 * @param props - Sankey-specific configuration and flow data
 * @returns React component rendering an SVG sankey diagram
 */
function Sankey(props: SankeyProps): JSX.Element;

interface SankeyProps {
  width: number;
  height: number;
  data: SankeyData;
  nodeWidth?: number;
  nodePadding?: number;
  linkCurvature?: number;
  iterations?: number;
  margin?: { top?: number; right?: number; bottom?: number; left?: number };
}

interface SankeyData {
  nodes: Array<{ name: string; [key: string]: any }>;
  links: Array<{ source: number; target: number; value: number; [key: string]: any }>;
}

SunburstChart

Sunburst chart for hierarchical data visualization in concentric circles, showing nested categorical data.

/**
 * Sunburst chart component for hierarchical circular visualization
 * @param props - Sunburst-specific configuration and hierarchical data
 * @returns React component rendering an SVG sunburst chart
 */
function SunburstChart(props: SunburstChartProps): JSX.Element;

interface SunburstChartProps {
  width: number;
  height: number;
  data: SunburstData[];
  dataKey: string | number | ((dataObject: any) => any);
  nameKey?: string | number | ((dataObject: any) => any);
  cx?: number | string;
  cy?: number | string;
  innerRadius?: number | string;
  outerRadius?: number | string;
  startAngle?: number;
  endAngle?: number;
}

interface SunburstData {
  name?: string;
  value?: number;
  children?: SunburstData[];
  [key: string]: any;
}

Common Chart Props

CartesianChartProps

Base props interface for all Cartesian coordinate system charts (LineChart, BarChart, AreaChart, ScatterChart, ComposedChart, FunnelChart).

interface CartesianChartProps {
  /** Array of data objects to visualize */
  data?: any[];
  /** Chart width in pixels */
  width?: number;
  /** Chart height in pixels */
  height?: number;
  /** Chart margins */
  margin?: { top?: number; right?: number; bottom?: number; left?: number };
  /** Layout direction for the chart */
  layout?: 'vertical' | 'horizontal';
  /** Synchronization ID for multiple charts */
  syncId?: string | number;
  /** Synchronization method for coordinated charts */
  syncMethod?: 'index' | 'value' | ((ticks: any[], data: any) => number);
  /** Stacking offset method for stacked charts */
  stackOffset?: 'expand' | 'none' | 'wiggle' | 'silhouette' | 'sign' | 'positive';
  /** Reverse stack order */
  reverseStackOrder?: boolean;
  /** Gap between bar categories */
  barCategoryGap?: number | string;
  /** Gap between bars in same category */
  barGap?: number | string;
  /** Bar size */
  barSize?: number | string;
  /** Maximum bar size */
  maxBarSize?: number;
  /** Data key for accessing data values */
  dataKey?: string | number | ((obj: any) => any);
  /** Enable accessibility layer for screen readers */
  accessibilityLayer?: boolean;
  /** Compact mode for space-saving rendering */
  compact?: boolean;
  /** Throttle delay for mouse events in milliseconds */
  throttleDelay?: number;
  /** CSS class name */
  className?: string;
  /** Inline styles */
  style?: any;
  /** Element ID */
  id?: string;
  /** ARIA role */
  role?: string;
  /** Tab index for keyboard navigation */
  tabIndex?: number;
  /** Chart title for accessibility */
  title?: string;
  /** Chart description for accessibility */
  desc?: string;
  /** React children (axes, data series, etc.) */
  children?: React.ReactNode;
}

PolarChartProps

Base props interface for all polar coordinate system charts (PieChart, RadarChart, RadialBarChart).

interface PolarChartProps {
  /** Array of data objects to visualize */
  data?: any[];
  /** Chart width in pixels */
  width?: number;
  /** Chart height in pixels */
  height?: number;
  /** Center X coordinate */
  cx?: number | string;
  /** Center Y coordinate */
  cy?: number | string;
  /** Inner radius for donut-style charts */
  innerRadius?: number | string;
  /** Outer radius of the chart */
  outerRadius?: number | string;
  /** Starting angle in degrees */
  startAngle?: number;
  /** Ending angle in degrees */
  endAngle?: number;
  /** Chart margins */
  margin?: { top?: number; right?: number; bottom?: number; left?: number };
  /** Layout type */
  layout?: 'centric' | 'radial';
  /** Synchronization ID for multiple charts */
  syncId?: string | number;
  /** Synchronization method for coordinated charts */
  syncMethod?: 'index' | 'value' | ((ticks: any[], data: any) => number);
  /** Stacking offset method for stacked charts */
  stackOffset?: 'expand' | 'none' | 'wiggle' | 'silhouette' | 'sign' | 'positive';
  /** Reverse stack order */
  reverseStackOrder?: boolean;
  /** Gap between bar categories */
  barCategoryGap?: number | string;
  /** Gap between bars in same category */
  barGap?: number | string;
  /** Bar size */
  barSize?: number | string;
  /** Maximum bar size */
  maxBarSize?: number;
  /** Data key for accessing data values */
  dataKey?: string | number | ((obj: any) => any);
  /** Enable accessibility layer for screen readers */
  accessibilityLayer?: boolean;
  /** Throttle delay for mouse events in milliseconds */
  throttleDelay?: number;
  /** CSS class name */
  className?: string;
  /** Inline styles */
  style?: any;
  /** Element ID */
  id?: string;
  /** ARIA role */
  role?: string;
  /** Tab index for keyboard navigation */
  tabIndex?: number;
  /** Chart title for accessibility */
  title?: string;
  /** Chart description for accessibility */
  desc?: string;
  /** React children (data series, axes, etc.) */
  children?: React.ReactNode;
}

Install with Tessl CLI