Recharts

https://recharts.github.io/
Admin
A composable charting library built on React components for creating interactive and customizable...
Tokens:241,097
Snippets:2,084
Trust Score:9.7
Update:4 days ago
Show doc for...
Tokens:
Raw
### XAxis Auto Height Implementation

Source: https://recharts.github.io/en-US/examples/XAxisAutoHeightExample

Example showing the setup for a BarChart with an XAxis configured for automatic height adjustment.

```javascript
import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
  

// #region Sample data…// #endregion
export default function XAxisAutoHeightExample() {
return (
<div style={{ width: '100%' }}>
<BarChart
style={{ width: '100%', maxWidth: '700px', maxHeight: '30vh', aspectRatio: 1.618 }}
```

--------------------------------

### Example usage of useActiveTooltipDataPoints

Source: https://recharts.github.io/en-US/api/useActiveTooltipDataPoints

A basic implementation showing the setup of a chart component using Recharts hooks and components.

```typescript
import { Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, createHorizontalChart } from 'recharts';
import { generateMockData, MockDataType, RechartsDevtools } from '@recharts/devtools';
  

const data: Array<MockDataType> = generateMockData(6, 26213);
  

const Typed = createHorizontalChart<MockDataType, string, number>()({ XAxis, YAxis, Tooltip, Line });
  

export default function Example() {
return (
<Typed.LineChart
style={{ width: '100%', maxWidth: '700px', height: '100%', maxHeight: '70vh', aspectRatio: 1.618 }}
responsive
data={data}
margin={{
top: 5,
right: 0,
left: 0,
bottom: 5,
}}
>
<CartesianGrid />
<Typed.XAxis dataKey="label" />
```

--------------------------------

### ZAxis domain configuration examples

Source: https://recharts.github.io/en-US/api/ZAxis

Examples showing various ways to define the domain prop for a numeric ZAxis, including auto-scaling, data-relative offsets, and custom functions.

```jsx
<ZAxis type="number" domain={['dataMin', 'dataMax']} />
<ZAxis type="number" domain={[0, 'dataMax']} />
<ZAxis type="number" domain={['auto', 'auto']} />
<ZAxis type="number" domain={[0, 'dataMax + 1000']} />
<ZAxis type="number" domain={['dataMin - 100', 'dataMax + 100']} />
<ZAxis type="number" domain={[dataMin => (0 - Math.abs(dataMin)), dataMax => (dataMax * 2)]} />
<ZAxis type="number" domain={([dataMin, dataMax]) => { const absMax = Math.max(Math.abs(dataMin), Math.abs(dataMax)); return [-absMax, absMax]; }} />
<ZAxis type="number" domain={[0, 100]} allowDataOverflow />
```

--------------------------------

### Configure axis tick generation strategies

Source: https://recharts.github.io/en-US/guide/axisTicks

This example demonstrates the setup for testing different niceTicks algorithms, including the data structure and control state definitions.

```typescript
import { CartesianGrid, Line, LineChart, Tooltip, XAxis, YAxis, NiceTicksAlgorithm } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
import type { Lever } from '../../Shared/levers/Levers.tsx';
import { createRangeLever, createSelectLever } from '../../Shared/levers/Levers.tsx';
  

const data = [
{ x: 0, y: 12 },
{ x: 117, y: 45 },
{ x: 234, y: 23 },
{ x: 351, y: 78 },
{ x: 468, y: 156 },
];
  

export type AxisTicksControlsType = {
niceTicks: NiceTicksAlgorithm;
tickCount: number;
scale: 'linear' | 'symlog';
};
  

export const axisTicksDefaultState: AxisTicksControlsType = {
niceTicks: 'auto',
tickCount: 5,
scale: 'linear',
};
  

const niceTicksOptions: ReadonlyArray<NiceTicksAlgorithm> = ['none', 'auto', 'adaptive', 'snap125'];
```

--------------------------------

### Bar Chart Range Example

Source: https://recharts.github.io/en-US/api/BarChart

An example demonstrating a BarChart with configurable animation settings.

```javascript
import { BarChart, XAxis, YAxis, Tooltip, Bar } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
  

// #region Sample data…// #endregion
const BarChartRangeExample = ({ isAnimationActive = true }) => (
<BarChart
style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}

```

--------------------------------

### Bar label configuration examples

Source: https://recharts.github.io/zh-CN/api/Bar

Examples showing different ways to configure the label prop for the Bar component, including boolean, object, and function types.

```jsx
<Bar label />
<Bar label={{ position: 'top', fontSize: 20 }} />
<Bar label={CustomizedLabelFn} />
```

--------------------------------

### Bar Chart Range Example

Source: https://recharts.github.io/zh-CN/api/BarChart

An example demonstrating a BarChart with an animation toggle prop.

```javascript
import { BarChart, XAxis, YAxis, Tooltip, Bar } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
  

// #region Sample data…// #endregion
const BarChartRangeExample = ({ isAnimationActive = true }) => (
<BarChart
style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
>
```

--------------------------------

### ReferenceArea x1 and x2 coordinate usage

Source: https://recharts.github.io/en-US/api/ReferenceArea

Examples of defining the starting and ending X-coordinates using domain values.

```jsx
<ReferenceArea x1="Monday" x2="Friday" />
<ReferenceArea x1={10} x2={50} />
<ReferenceArea x1="Page C" />
```

--------------------------------

### Configure Pie paddingAngle

Source: https://recharts.github.io/zh-CN/api/Pie

Example of setting the paddingAngle property on the Pie component.

```jsx
<Pie paddingAngle={5} />
https://recharts.github.io/examples/PieChartWithPaddingAngle
```

--------------------------------

### Treemap with Data and Tooltip

Source: https://recharts.github.io/en-US/api/Treemap

Example showing the import of Treemap, TreemapNode, and Tooltip, along with a sample hierarchical data structure.

```javascript
import { Tooltip, Treemap, TreemapNode } from 'recharts';
  

import { RechartsDevtools } from '@recharts/devtools';
  

const data = [
{
name: 'axis',
children: [
{ name: 'Axes', size: 1302 },
{ name: 'Axis', size: 24593 },
{ name: 'AxisGridLine', size: 652 },
{ name: 'AxisLabel', size: 636 },
{ name: 'CartesianAxes', size: 6703 },
],
},
{
name: 'controls',
children: [
{ name: 'AnchorControl', size: 2138 },
{ name: 'ClickControl', size: 3824 },
{ name: 'Control', size: 1353 },
{ name: 'ControlList', size: 4665 },
{ name: 'DragControl', size: 2649 },
{ name: 'ExpandControl', size: 2832 },
{ name: 'HoverControl', size: 4896 },

```

--------------------------------

### ReferenceArea y1 and y2 coordinate usage

Source: https://recharts.github.io/en-US/api/ReferenceArea

Examples of defining the starting and ending Y-coordinates using domain values.

```jsx
<ReferenceArea y1={100} y2={500} />
<ReferenceArea y1="low" y2="high" />
<ReferenceArea y1={200} />
```

--------------------------------

### MultiXAxisExample component implementation

Source: https://recharts.github.io/en-US/examples/MultiXAxisExample

This example demonstrates how to configure a LineChart with multiple X-axes, each identified by a unique xAxisId, and how to map Line components and the Tooltip to these axes.

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

// #region Sample data…// #endregion
export default function MultiXAxisExample() {
return (
<LineChart
style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
responsive
data={data}
>
<XAxis dataKey="name" xAxisId="a" orientation="top" height={40} />
<XAxis mirror dataKey="uv" xAxisId="b" height={50} />
<XAxis dataKey="pv" type="number" xAxisId="c" height={60} />
<XAxis mirror dataKey="amt" type="number" orientation="top" xAxisId="d" height={20} />
<Tooltip defaultIndex={2} axisId="a" />
<Line dataKey="name" xAxisId="a" />
<Line dataKey="uv" xAxisId="b" />
<Line dataKey="pv" xAxisId="c" />
<Line dataKey="amt" xAxisId="d" />
</LineChart>
);
}
```

--------------------------------

### ReferenceDot label configuration

Source: https://recharts.github.io/en-US/api/ReferenceDot

Example showing how to render a label on a ReferenceDot using the label prop.

```jsx
<ReferenceDot x={10} y={20} label={{ value: 'Target', position: 'top' }} />
```

--------------------------------

### Cardinal Area Chart Implementation

Source: https://recharts.github.io/en-US/examples/CardinalAreaChart

This example shows the setup of a Cardinal Area Chart using Recharts components and the curveCardinal function from d3-shape to define the interpolation tension.

```typescript
import { Area, AreaChart, XAxis, YAxis, CartesianGrid, Tooltip, createHorizontalChart } from 'recharts';
import { generateMockData, MockDataType, RechartsDevtools } from '@recharts/devtools';
import { curveCardinal } from 'd3-shape';
  

const data = generateMockData(6, 9823);
  

const Typed = createHorizontalChart<MockDataType, string, number>()({
AreaChart,
CartesianGrid,
XAxis,
YAxis,
Area,
Tooltip,
});
  

const cardinal = curveCardinal.tension(0.8);
  

const CardinalAreaChart = () => {
return (
<Typed.AreaChart
style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
responsive
data={data}
margin={{
top: 20,
right: 0,
```

--------------------------------

### PieChart with Cell customization example

Source: https://recharts.github.io/en-US/api/Cell

Interactive example showing a PieChart with custom cell styling. Uses Recharts and RechartsDevtools. The code is partially displayed; the full example is available in the source.

```tsx
import { PieChart, Pie, Sector, PieSectorShapeProps, Label, LabelList, LabelProps } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
  

// #region Sample data…// #endregion
```

--------------------------------

### Line activeDot prop configurations

Source: https://recharts.github.io/en-US/api/Line

Examples showing how to configure the activeDot prop to control dot rendering on user interaction.

```jsx
<Line dataKey="value" activeDot={false} />
<Line dataKey="value" activeDot={{ stroke: 'red', strokeWidth: 2, r: 10 }} />
<Line dataKey="value" activeDot={CustomizedActiveDot} />
```

--------------------------------

### Recharts Devtools setup

Source: https://recharts.github.io/zh-CN/api/ZIndexLayer

Basic setup for importing Recharts components and the RechartsDevtools.

```javascript
import React, { useRef, useEffect, useState } from 'react';
import ReactDOM from 'react-dom/client';
import { Legend, Pie, PieChart, Tooltip } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
```

--------------------------------

### ReferenceArea label configuration

Source: https://recharts.github.io/en-US/api/ReferenceArea

Example of using the label prop to render a label inside the ReferenceArea.

```jsx
<ReferenceArea x1={10} x2={20} label={{ value: 'Target', position: 'insideTop' }} />
```

--------------------------------

### AreaChart Range Example

Source: https://recharts.github.io/en-US/api/AreaChart

An example demonstrating the use of AreaChart for range-based data visualization.

```javascript
import { Area, AreaChart, Tooltip, XAxis, YAxis } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
  

// #region Sample data…// #endregion
const AreaChartRangeExample = ({ isAnimationActive = true }) => (
<AreaChart
style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
>
```

--------------------------------

### Configure Line label rendering

Source: https://recharts.github.io/en-US/api/Line

Examples of how to configure the label prop to display labels for each data point.

```jsx
<Line dataKey="value" label />
<Line dataKey="value" label={{ fill: 'red', fontSize: 20 }} />
<Line dataKey="value" label={CustomizedLabel} />
```

--------------------------------

### Configure activeBar prop

Source: https://recharts.github.io/en-US/api/Bar

Examples of configuring the activeBar prop to define how bars appear when active.

```jsx
<Bar activeBar={{ fill: 'red' }} />
<Bar activeBar={CustomActiveBarFn} />
```

--------------------------------

### BarChart with custom Rectangle shape example

Source: https://recharts.github.io/en-US/api/Cell

Interactive example showing a BarChart with a custom Rectangle shape using the shape prop. Includes a custom component MyCustomRectangle that uses BarShapeProps and a colors array. The code is partially displayed; the full example is available in the source.

```tsx
import { BarChart, Bar, Rectangle, BarShapeProps } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
  

// #region Sample data…// #endregion
  

const colors = ['#8884d8', '#83a6ed', '#8dd1e1', '#82ca9d', '#a4de6c', 'url(#pattern-checkers)'];
  

const MyCustomRectangle = (props: BarShapeProps) => {
return <Rectangle {...props} fill="none" stroke={colors[props.index]} strokeWidth={props.index === 2 ? 4 : 1} />;
};
  

const CellBarExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => (
<BarChart style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }} responsive data={data}>
```

--------------------------------

### interpolate(start, end, animationElapsedTime)

Source: https://recharts.github.io/en-US/api/interpolate

Function to interpolate between two numbers. If both start and end are numbers, it calculates the interpolated value based on the parameter animationElapsedTime (0 to 1). If either start or end is not a number, it returns the end value directly. You will typically use this function when implementing custom animations.

```APIDOC
## interpolate(start, end, animationElapsedTime)

### Description
Function to interpolate between two numbers. If both start and end are numbers, it calculates the interpolated value based on the parameter animationElapsedTime (0 to 1). If either start or end is not a number, it returns the end value directly. You will typically use this function when implementing custom animations.

### Parameters
- **start** (number) - Required - The starting value (when animationElapsedTime=0)
- **end** (number) - Required - The final value (when animationElapsedTime=1)
- **animationElapsedTime** (number) - Required - Interpolation factor; values in [0, 1] interpolate between start and end, and values outside that range extrapolate

### Return Value
- **number** - The interpolated value

### Notes
- animationElapsedTime can be outside the (0, 1) range, depending on easing.
- This one interpolates only numbers; if you want to interpolate colors or strings then perhaps see d3-interpolate.
- Available since Recharts 3.9
```

--------------------------------

### Funnel Component Usage Example

Source: https://recharts.github.io/zh-CN/api/Funnel

Example code demonstrating how to render a Funnel chart using Recharts, including the FunnelChart, Funnel, LabelList, and RechartsDevtools components.

```APIDOC
## Funnel Component

### Description
Example usage of the Funnel component from Recharts to create a funnel chart.

### Code Example
```jsx
import { FunnelChart, Funnel, LabelList, Trapezoid, Label, FunnelTrapezoidItem } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

const FunnelExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => {
  return (
    <FunnelChart
      style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
      responsive
      margin={{ right: 30 }}
    >
      <Funnel
        dataKey="value"
        data={data}
        isAnimationActive={isAnimationActive}
        activeShape={FunnelWithDimensions}
        reversed
      >
        <LabelList position="right" fill="#000" stroke="none" dataKey="name" offset={20} />
      </Funnel>
      <RechartsDevtools />
    </FunnelChart>
  );
};

export default FunnelExample;
```

### Properties
- **data** (array) - The source data. Each element should be an object. The properties of each object represent the values of different data dimensions. Use the `dataKey` prop to specify which properties to use.
- **dataKey** (string | number | function) - Decides how to extract the value from the data. Can be a string (field name), number (index), or function that receives the data object and returns the value.
- **isAnimationActive** (boolean) - If set false, animation of funnel will be disabled. If set "auto", the animation will be disabled in SSR and will respect the user's prefers-reduced-motion system preference for accessibility. Default: `"auto"`.
- **activeShape** (ReactElement | function) - This component is rendered when this graphical item is activated (could be by mouse hover, touch, keyboard, programmatically).
- **reversed** (boolean) - Default: `false`.
- **animationBegin** (number) - Specifies when the animation should begin, the unit of this option is ms. Default: `400`.
- **animationDuration** (number) - Specifies the duration of animation, the unit of this option is ms. Default: `1500`.
- **animationEasing** (string) - The type of easing function. Default: `"ease"`.
- **animationInterpolation** (function) - Custom animation function for interpolating data items. When provided, this replaces the default animation interpolation.
- **animationMatch** (string | function) - Strategy for matching previous items to next items during animation. Options: `matchAppend` (default), `matchByIndex`, `matchByDataKey('someKey')`, or custom function. Default: `"append"`.
- **hide** (boolean) - Hides the whole graphical element when true. Default: `false`.
- **id** (string) - Unique identifier of this component. Used as an HTML attribute `id`, and also to identify this element internally. If undefined, Recharts will generate a unique ID automatically.
- **legendType** (string) - The type of icon in legend. If set to 'none', no legend item will be rendered. Default: `"rect"`.
- **name** (string | number | function) - Name represents each sector in the tooltip. This allows you to extract the name from the data. Default: `"name"`.
- **shape** (ReactElement | function) - If set a ReactElement, the shape of funnel can be customized. If set a function, the function will be called to render customized shape. During animations, the function shape also receives `animationElapsedTime`, `isAnimating`, and `isEntrance`. By default, renders a trapezoid.
- **tooltipType** (string) - Formats the value displayed in the tooltip for this Funnel. When set, takes precedence over the `formatter` prop on the Tooltip component.
- **type** (string) - Default: `"triangle"`.
```

--------------------------------

### ZAxis scale configuration

Source: https://recharts.github.io/en-US/api/ZAxis

Examples of setting the scale prop using a string shortcut or a custom d3-scale object.

```jsx
<ZAxis scale="log" />
import { scaleLog } from 'd3-scale';
const scale = scaleLog().base(Math.E);
<ZAxis scale={scale} />
```
Tokens:
Raw