or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cartesian-components.mdcharts.mdcomponents.mdhooks-utilities.mdindex.mdpolar-components.mdshapes.md
tile.json

tessl/npm-recharts

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

Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/recharts@3.1.x

To install, run

npx @tessl/cli install tessl/npm-recharts@3.1.0

index.mddocs/

Recharts

Recharts is a comprehensive React charting library built with React and D3, designed to simplify chart creation in React applications through declarative, composable components. It provides native SVG support with minimal dependencies and offers a wide range of chart types including line charts, bar charts, area charts, pie charts, and more complex visualizations.

Package Information

  • Package Name: recharts
  • Package Type: npm
  • Language: TypeScript
  • Installation: npm install recharts

Core Imports

import { 
  LineChart, BarChart, PieChart, AreaChart, ScatterChart,
  XAxis, YAxis, ZAxis, CartesianGrid,
  Tooltip, Legend, ResponsiveContainer,
  Line, Bar, Area, Scatter, Pie,
  Cell, ReferenceLine
} from "recharts";

For CommonJS:

const { LineChart, BarChart, PieChart, XAxis, YAxis } = require("recharts");

Basic Usage

import React from 'react';
import {
  LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer
} from 'recharts';

const data = [
  { name: 'Jan', value: 400 },
  { name: 'Feb', value: 300 },
  { name: 'Mar', value: 600 },
  { name: 'Apr', value: 800 },
];

function MyChart() {
  return (
    <ResponsiveContainer width="100%" height={400}>
      <LineChart data={data}>
        <CartesianGrid strokeDasharray="3 3" />
        <XAxis dataKey="name" />
        <YAxis />
        <Tooltip />
        <Legend />
        <Line type="monotone" dataKey="value" stroke="#8884d8" />
      </LineChart>
    </ResponsiveContainer>
  );
}

Architecture

Recharts follows a declarative, component-based architecture with several key design patterns:

  • Compositional Design: Charts are built by combining independent components (axes, grids, data series, tooltips)
  • Data-Driven: All components accept data props and use dataKey to specify which data fields to visualize
  • SVG-First: Native SVG rendering with full customization through SVG properties
  • Responsive: Built-in responsive capabilities with ResponsiveContainer
  • Type Safety: Full TypeScript support with generic type parameters for data shapes
  • Animation: Configurable animations for smooth transitions and interactions

Capabilities

Chart Components

Complete chart solutions for different data visualization needs, including Cartesian charts (LineChart, BarChart, AreaChart), polar charts (PieChart, RadarChart), and specialized visualizations (Treemap, Sankey).

// Cartesian Charts
function LineChart(props: CartesianChartProps): JSX.Element;
function BarChart(props: CartesianChartProps): JSX.Element;
function AreaChart(props: CartesianChartProps): JSX.Element;

// Polar Charts  
function PieChart(props: PolarChartProps): JSX.Element;
function RadarChart(props: PolarChartProps): JSX.Element;

interface CartesianChartProps {
  data: any[];
  width?: number | string;
  height?: number | string;
  margin?: { top?: number; right?: number; bottom?: number; left?: number };
  layout?: 'vertical' | 'horizontal';
  children?: React.ReactNode;
}

Chart Components

UI Components

Essential UI components for interactive functionality including tooltips, legends, labels, and responsive containers that enhance chart usability and presentation.

function Tooltip<TValue = any, TName = any>(props: TooltipProps<TValue, TName>): JSX.Element;
function Legend(props: LegendProps): JSX.Element;
function ResponsiveContainer(props: ResponsiveContainerProps): JSX.Element;

interface TooltipProps<TValue, TName> {
  active?: boolean;
  content?: React.ComponentType<any> | React.ReactElement;
  cursor?: boolean | React.SVGProps<SVGElement>;
  animationDuration?: number;
}

UI Components

Cartesian Components

Components for Cartesian coordinate system including axes (XAxis, YAxis, ZAxis), data series (Line, Bar, Area, Scatter), grid systems, and reference elements for marking specific values or ranges.

function XAxis(props: XAxisProps): JSX.Element;
function YAxis(props: YAxisProps): JSX.Element;
function Line(props: LineProps): JSX.Element;
function Bar(props: BarProps): JSX.Element;

interface XAxisProps {
  xAxisId?: string | number;
  dataKey?: string | number | ((dataObject: any) => any);
  type?: 'number' | 'category';
  domain?: [any, any] | ((dataMin: any, dataMax: any) => [any, any]);
}

Cartesian Components

Polar Components

Components for polar coordinate system including polar axes (PolarAngleAxis, PolarRadiusAxis), data series (Pie, Radar, RadialBar), and polar grid systems for circular data visualizations.

function PolarAngleAxis(props: PolarAngleAxisProps): JSX.Element;
function Pie(props: PieProps): JSX.Element;
function Radar(props: RadarProps): JSX.Element;

interface PieProps {
  dataKey: string | number | ((dataObject: any) => any);
  cx?: number | string;
  cy?: number | string;
  innerRadius?: number | string;
  outerRadius?: number | string;
}

Polar Components

Shape Components

Primitive shape components for custom visualizations including rectangles, sectors, dots, curves, and symbols that can be used to build custom chart elements.

function Rectangle(props: RectangleProps): JSX.Element;
function Sector(props: SectorProps): JSX.Element;
function Dot(props: DotProps): JSX.Element;

interface RectangleProps extends React.SVGProps<SVGPathElement> {
  x?: number;
  y?: number;
  width?: number;
  height?: number;
  radius?: number | [number, number, number, number];
}

Shape Components

Hooks and Utilities

React hooks for accessing chart state and utility functions for custom chart development, including tooltip data access, chart layout information, and scale utilities.

function useActiveTooltipLabel(): string | undefined;
function useOffset(): ChartOffset | undefined;
function usePlotArea(): PlotArea | undefined;
function useActiveTooltipDataPoints<T = unknown>(): ReadonlyArray<T> | undefined;
function useChartWidth(): number | undefined;
function useChartHeight(): number | undefined;
function getNiceTickValues(domain: [number, number], tickCount?: number, allowDecimals?: boolean): number[];

interface ChartOffset {
  readonly top: number;
  readonly bottom: number;
  readonly left: number;
  readonly right: number;
}

Hooks and Utilities

Core Types

interface ChartOffset {
  readonly top: number;
  readonly bottom: number;
  readonly left: number;
  readonly right: number;
}

interface PlotArea {
  readonly width: number;
  readonly height: number;
  readonly x: number;
  readonly y: number;
}

type LegendType = 'circle' | 'cross' | 'diamond' | 'line' | 'plainline' | 'rect' | 'square' | 'star' | 'triangle' | 'wye' | 'none';