tessl/npm-recharts

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

—

Pending

Overview

Eval results

Files

Polar Components

Name: tessl/npm-recharts
Author: tessl

Components for polar coordinate system charts, including polar axes, data series, and grid systems. These components enable circular data visualizations like pie charts, radar charts, and radial bar charts.

Capabilities

Polar Axes Components

PolarAngleAxis

Angular axis component for polar coordinate system, defining the angular divisions and labels.

/**
 * Polar angle axis component for angular divisions in polar charts
 * @param props - Angle axis configuration and display options
 * @returns React component rendering angular axis
 */
function PolarAngleAxis(props: PolarAngleAxisProps): JSX.Element;

interface PolarAngleAxisProps {
  /** Unique identifier for this angle axis */
  angleAxisId?: string | number;
  /** Data key for angle values */
  dataKey?: string | number | ((dataObject: any) => any);
  /** Center X coordinate */
  cx?: number;
  /** Center Y coordinate */
  cy?: number;
  /** Inner radius */
  radius?: number;
  /** Axis line type */
  axisLineType?: 'polygon' | 'circle';
  /** Tick orientation */
  orientation?: 'inner' | 'outer';
  /** Number of ticks */
  tickCount?: number;
  /** Tick formatter function */
  tickFormatter?: (value: any, index: number) => string;
  /** Tick component */
  tick?: boolean | React.ComponentType<any> | React.ReactElement;
  /** Axis line component */
  axisLine?: boolean | React.SVGProps<SVGElement>;
  /** Tick line component */
  tickLine?: boolean | React.SVGProps<SVGLineElement>;
  /** Reverse axis direction */
  reversed?: boolean;
  /** Allow duplicate categories */
  allowDuplicatedCategory?: boolean;
  /** Type of axis */
  type?: 'number' | 'category';
  /** Data domain */
  domain?: [any, any];
  /** Scale type */
  scale?: 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold';
}

PolarRadiusAxis

Radial axis component for polar coordinate system, defining the radial distance scale.

/**
 * Polar radius axis component for radial distance scale in polar charts
 * @param props - Radius axis configuration and display options
 * @returns React component rendering radial axis
 */
function PolarRadiusAxis(props: PolarRadiusAxisProps): JSX.Element;

interface PolarRadiusAxisProps {
  /** Unique identifier for this radius axis */
  radiusAxisId?: string | number;
  /** Angle for axis position */
  angle?: number;
  /** Tick orientation */
  orientation?: 'left' | 'right' | 'middle';
  /** Axis data type */
  type?: 'number' | 'category';
  /** Number of ticks */
  tickCount?: number;
  /** Tick formatter function */
  tickFormatter?: (value: any, index: number) => string;
  /** Allow decimal values */
  allowDecimals?: boolean;
  /** Data domain */
  domain?: [any, any] | ((dataMin: any, dataMax: any) => [any, any]);
  /** Scale type */
  scale?: 'auto' | 'linear' | 'pow' | 'sqrt' | 'log' | 'identity' | 'time' | 'band' | 'point' | 'ordinal' | 'quantile' | 'quantize' | 'utc' | 'sequential' | 'threshold';
  /** Tick values array */
  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>;
}

PolarGrid

Grid system component for polar charts, providing background grid lines in circular or polygonal patterns.

/**
 * Polar grid component for background grid in polar charts
 * @param props - Grid configuration and styling options
 * @returns React component rendering polar grid lines
 */
function PolarGrid(props: PolarGridProps): JSX.Element;

interface PolarGridProps extends React.SVGProps<SVGLineElement> {
  /** Center X coordinate */
  cx?: number;
  /** Center Y coordinate */
  cy?: number;
  /** Inner radius */
  innerRadius?: number;
  /** Outer radius */
  outerRadius?: number;
  /** Angular positions for grid lines */
  polarAngles?: number[];
  /** Radial positions for grid lines */
  polarRadius?: number[];
  /** Grid type */
  gridType?: 'polygon' | 'circle';
  /** Show radial lines */
  radialLines?: boolean;
  /** Associated angle axis ID */
  angleAxisId?: string | number;
  /** Associated radius axis ID */
  radiusAxisId?: string | number;
}

Polar Data Series Components

Pie

Pie series component for pie and donut charts, displaying proportional data as circular sectors.

/**
 * Pie series component for pie and donut chart visualization
 * @param props - Pie configuration and styling options
 * @returns React component rendering pie sectors
 */
function Pie(props: PieProps): JSX.Element;

interface PieProps {
  /** Data key for pie values */
  dataKey: string | number | ((dataObject: any) => any);
  /** Center X coordinate */
  cx?: number | string;
  /** Center Y coordinate */
  cy?: number | string;
  /** Starting angle in degrees */
  startAngle?: number;
  /** Ending angle in degrees */
  endAngle?: number;
  /** Padding angle between sectors */
  paddingAngle?: number;
  /** Inner radius (for donut charts) */
  innerRadius?: number | string;
  /** Outer radius */
  outerRadius?: number | string;
  /** Corner radius for rounded sectors */
  cornerRadius?: number | string;
  /** Fill color */
  fill?: string;
  /** Stroke color */
  stroke?: string;
  /** Stroke width */
  strokeWidth?: number | string;
  /** Active sector index */
  activeIndex?: number | number[];
  /** Active sector shape component */
  activeShape?: React.ComponentType<any> | React.ReactElement;
  /** Inactive sector shape component */
  inactiveShape?: React.ComponentType<any> | React.ReactElement;
  /** Label configuration */
  label?: boolean | React.ComponentType<any> | React.ReactElement | ((entry: any, index: number) => React.ReactNode);
  /** Label line configuration */
  labelLine?: boolean | React.ComponentType<any> | React.ReactElement;
  /** Hide pie in legend */
  hide?: boolean;
  /** Legend type */
  legendType?: LegendType;
  /** Tooltip type */
  tooltipType?: 'none';
  /** Animation duration */
  animationDuration?: number;
  /** Animation easing */
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
  /** Minimum angle for small sectors */
  minAngle?: number;
  /** Name key for labels */
  nameKey?: string | number | ((dataObject: any) => any);
}

interface PieLabelRenderProps {
  cx: number;
  cy: number;
  midAngle: number;
  innerRadius: number;
  outerRadius: number;
  value: any;
  index: number;
  percent: number;
  name?: any;
  payload: any;
}

Usage Example:

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

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

const COLORS = ['#0088FE', '#00C49F', '#FFBB28'];

<PieChart width={400} height={400}>
  <Pie
    data={data}
    cx="50%"
    cy="50%"
    outerRadius={80}
    fill="#8884d8"
    dataKey="value"
    label={({ name, percent }) => `${name}: ${(percent * 100).toFixed(0)}%`}
  >
    {data.map((entry, index) => (
      <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
    ))}
  </Pie>
  <Tooltip />
  <Legend />
</PieChart>

Radar

Radar series component for radar/spider charts, connecting data points in a circular pattern.

/**
 * Radar series component for multivariate data visualization
 * @param props - Radar configuration and styling options
 * @returns React component rendering radar area
 */
function Radar(props: RadarProps): JSX.Element;

interface RadarProps {
  /** Data key for radar values */
  dataKey: string | number | ((dataObject: any) => any);
  /** Associated angle axis ID */
  angleAxisId?: string | number;
  /** Associated radius axis ID */
  radiusAxisId?: string | number;
  /** Radar points array */
  points?: Array<{ x: number; y: number; cx: number; cy: number; angle: number; radius: number; value: number; payload: any }>;
  /** Shape component for radar area */
  shape?: React.ComponentType<any> | React.ReactElement;
  /** Fill color */
  fill?: string;
  /** Fill opacity */
  fillOpacity?: number | string;
  /** Stroke color */
  stroke?: string;
  /** Stroke width */
  strokeWidth?: number | string;
  /** Stroke opacity */
  strokeOpacity?: number | string;
  /** Dot component for data points */
  dot?: boolean | React.ComponentType<any> | React.ReactElement;
  /** Active dot component */
  activeDot?: boolean | React.ComponentType<any> | React.ReactElement;
  /** Hide radar in legend */
  hide?: boolean;
  /** Legend type */
  legendType?: LegendType;
  /** Tooltip type */
  tooltipType?: 'none';
  /** Connect null data points */
  connectNulls?: boolean;
  /** Animation duration */
  animationDuration?: number;
}

Usage Example:

import { RadarChart, Radar, PolarGrid, PolarAngleAxis, PolarRadiusAxis } from 'recharts';

const data = [
  { subject: 'Math', A: 120, B: 110 },
  { subject: 'Chinese', A: 98, B: 130 },
  { subject: 'English', A: 86, B: 130 },
  { subject: 'Geography', A: 99, B: 100 },
  { subject: 'Physics', A: 85, B: 90 },
  { subject: 'History', A: 65, B: 85 },
];

<RadarChart cx="50%" cy="50%" outerRadius="80%" width={400} height={400} data={data}>
  <PolarGrid />
  <PolarAngleAxis dataKey="subject" />
  <PolarRadiusAxis />
  <Radar name="Student A" dataKey="A" stroke="#8884d8" fill="#8884d8" fillOpacity={0.6} />
  <Radar name="Student B" dataKey="B" stroke="#82ca9d" fill="#82ca9d" fillOpacity={0.6} />
</RadarChart>

RadialBar

Radial bar series component for radial bar charts, displaying bars in a circular layout.

/**
 * Radial bar series component for circular bar visualization
 * @param props - Radial bar configuration and styling options
 * @returns React component rendering radial bars
 */
function RadialBar(props: RadialBarProps): JSX.Element;

interface RadialBarProps {
  /** Data key for bar values */
  dataKey: string | number | ((dataObject: any) => any);
  /** Associated angle axis ID */
  angleAxisId?: string | number;
  /** Associated radius axis ID */
  radiusAxisId?: string | number;
  /** Minimum angle for bars */
  minAngle?: number;
  /** Clock-wise direction */
  clockWise?: boolean;
  /** Corner radius */
  cornerRadius?: number | string;
  /** Fill color */
  fill?: string;
  /** Stroke color */
  stroke?: string;
  /** Stroke width */
  strokeWidth?: number | string;
  /** Background bar component */
  background?: boolean | React.ComponentType<any> | React.ReactElement;
  /** Bar shape component */
  shape?: React.ComponentType<any> | React.ReactElement;
  /** Active bar shape component */
  activeShape?: React.ComponentType<any> | React.ReactElement;
  /** Hide bar in legend */
  hide?: boolean;
  /** Legend type */
  legendType?: LegendType;
  /** Tooltip type */
  tooltipType?: 'none';
  /** Animation duration */
  animationDuration?: number;
  /** Animation easing */
  animationEasing?: 'ease' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'linear';
}

Usage Example:

import { RadialBarChart, RadialBar, Legend } from 'recharts';

const data = [
  { name: '18-24', uv: 31.47, pv: 2400, fill: '#8884d8' },
  { name: '25-29', uv: 26.69, pv: 4567, fill: '#83a6ed' },
  { name: '30-34', uv: 15.69, pv: 1398, fill: '#8dd1e1' },
  { name: '35-39', uv: 8.22, pv: 9800, fill: '#82ca9d' },
];

<RadialBarChart cx="50%" cy="50%" innerRadius="10%" outerRadius="80%" width={400} height={400} data={data}>
  <RadialBar minAngle={15} label={{ position: 'insideStart', fill: '#fff' }} background clockWise dataKey="uv" />
  <Legend iconSize={18} width={120} height={140} layout="vertical" verticalAlign="middle" wrapperStyle={{ color: '#999' }} />
</RadialBarChart>

Common Polar Props

Default Props for Polar Axes

PolarAngleAxis Default Props

interface PolarAngleAxisDefaultProps {
  type: 'category';
  angleAxisId: 0;
  scale: 'auto';
  cx: '50%';
  cy: '50%';
  orientation: 'outer';
  axisLineType: 'polygon';
  tickCount: 6;
  allowDuplicatedCategory: true;
}

PolarRadiusAxis Default Props

interface PolarRadiusAxisDefaultProps {
  type: 'number';
  radiusAxisId: 0;
  cx: '50%';
  cy: '50%';
  angle: 90;
  orientation: 'right';
  stroke: '#ccc';
  axisLine: true;
  tick: true;
  tickCount: 5;
  allowDecimals: true;
}

Shared Polar Types

interface PolarViewBox {
  cx?: number;
  cy?: number;
  innerRadius?: number;
  outerRadius?: number;
  startAngle?: number;
  endAngle?: number;
}

interface PieActiveShape {
  cx: number;
  cy: number;
  innerRadius: number;
  outerRadius: number;
  startAngle: number;
  endAngle: number;
  fill: string;
  payload: any;
  value: any;
}

Install with Tessl CLI