### Sunburst Chart Example

Source: https://recharts.github.io/api/SunburstChart

A basic example demonstrating the usage of the Sunburst Chart. This snippet highlights how to configure the start angle and center coordinates for the chart.

```javascript
startAngle={0}
center={null}
```

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

### Basic LineChart with useOffset Example

Source: https://recharts.github.io/api/useOffset

Demonstrates a basic LineChart setup that implicitly uses the useOffset hook for layout calculations. Ensure this hook is used within a chart context.

```jsx
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

const data = [
  { uv: 4000, pv: 2400, amt: 2400 },
  { uv: 3000, pv: 1398, amt: 2210 },
  { uv: 2000, pv: 9800, amt: 2290 },
  { uv: 2780, pv: 3908, amt: 2000 },
  { uv: 1890, pv: 4800, amt: 2181 },
  { uv: 2390, pv: 3800, amt: 2500 },
  { uv: 3490, pv: 4300, amt: 2100 },
];

const App = () => (
  <LineChart
    width={500}
    height={300}
    data={data}
    margin={{
      top: 5,
      right: 30,
      left: 20,
      bottom: 5,
    }}
  >
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="uv" />
    <YAxis />
    <Tooltip />
    <Legend />
    <Line type="monotone" dataKey="pv" stroke="#8884d8" activeDot={{ r: 8 }} />
    <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
  </LineChart>
);
```

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

### Chart Sizing Guide Example

Source: https://recharts.github.io/api/SunburstChart

Illustrates how to control the dimensions of a Recharts chart container using the `width` and `height` props. These can be specified as numbers or percentage strings.

```javascript
width="100%"
height={null}
```

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

### ScatterChart with Basic Props

Source: https://recharts.github.io/api/ScatterChart

This example demonstrates a basic ScatterChart setup with essential props like style and aspect ratio. It includes Scatter, XAxis, YAxis, CartesianGrid, Tooltip, and Legend components. The RechartsDevtools are also imported for debugging.

```jsx
import { ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
  
// #region Sample data…// #endregion
const ScatterChartExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => (
<ScatterChart
style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
Inspect Hook:useChartWidth | useChartHeightuseMarginuseOffsetusePlotAreauseActiveTooltipDataPointsuseXAxisDomainuseYAxisDomainuseActiveTooltipLabeluseXAxisTicksuseYAxisTicksuseIsTooltipActiveuseActiveTooltipCoordinate
useChartWidth: 700
useChartHeight: 433
Add Annotation:
Horizontal LineVertical LineCircleRectangleLabelFreeform LineCrosshair
Snap to Data:
No snappingSnap to data pointsSnap to axis ticks
Annotations (0):
No annotations yet
>
</ScatterChart>
);
```

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

### Basic Chart Setup with usePlotArea

Source: https://recharts.github.io/api/usePlotArea

Demonstrates a basic LineChart setup. The usePlotArea hook is typically used internally by Recharts components or for advanced custom components that need to interact with the plot area's dimensions. This example shows its import and potential usage context.

```jsx
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

// Assume 'data' is defined elsewhere
// const data = [
//   { name: 'Page A', uv: 4000, pv: 2400, amt: 2400 },
//   { name: 'Page B', uv: 3000, pv: 1398, amt: 2210 },
//   // ... more data
// ];

// Example of how usePlotArea might be used within a custom component or hook
// (Note: Direct usage in this simple example is illustrative, as Recharts manages it internally)
// import { usePlotArea } from 'recharts';

// const MyCustomChartComponent = () => {
//   const plotArea = usePlotArea();
//   console.log('Plot Area:', plotArea);
//   // ... render chart using plotArea dimensions if needed
//   return (
//     <LineChart width={730} height={250} data={data}>
//       <CartesianGrid strokeDasharray="3 3" />
//       <XAxis dataKey="name" />
//       <YAxis />
//       <Tooltip />
//       <Legend />
//       <Line type="monotone" dataKey="pv" stroke="#8884d8" />
//       <Line type="monotone" dataKey="uv" stroke="#82ca9d" />
//     </LineChart>
//   );
// };
```

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

### Basic ComposedChart Setup

Source: https://recharts.github.io/api/ComposedChart

This snippet shows the basic structure for a ComposedChart, including necessary imports and the chart component itself. It's a starting point for creating charts that combine different graphical elements.

```jsx
import { ComposedChart, Line, Area, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

// Sample data would be defined here

// Example usage within a React component:
// <ComposedChart width={700} height={433} data={data}>
//   <XAxis dataKey="name" />
//   <YAxis />
//   <Tooltip />
//   <Legend />
//   <CartesianGrid stroke="#f5f5f5" />
//   <Area type="monotone" dataKey="amt" fill="#8884d8" stroke="#8884d8" />
//   <Bar dataKey="pv" barSize={20} fill="#413ea0" />
//   <Line type="monotone" dataKey="uv" stroke="#ff7300" />
// </ComposedChart>
```

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

### Animated Bar Width Example

Source: https://recharts.github.io/api/Bar

Shows how to animate the width of bars in a Bar Chart. Animation can be controlled by specifying start time and duration.

```jsx
<BarChart width={1000} height={300} data={data} margin={{ top: 20, right: 20, bottom: 20, left: 20 }}>
  <XAxis dataKey="name" />
  <YAxis />
  <Bar dataKey="uv" fill="#8884d8" animationBegin={100} animationDuration={2000} />
</BarChart>
```

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

### Bundle Size Sunburst Example

Source: https://recharts.github.io/api/SunburstChart

This example showcases a Sunburst Chart configured for visualizing bundle sizes. It demonstrates the use of props like `innerRadius`, `outerRadius`, `stroke`, `fill`, and `label` for customization.

```javascript
innerRadius={50}
outerRadius={null}
stroke="#FFF"
fill="#FFF"
label={null}
```

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

### Install Recharts with NPM

Source: https://recharts.github.io/guide/installation

Use this command to install Recharts via NPM, the recommended method for SPAs and projects using module bundlers.

```bash
npm install recharts
```

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

### Simple Bar Chart Example

Source: https://recharts.github.io/api/Bar

A basic example of a Bar Chart. The `dataKey` prop is used to specify which property from the data objects should be used for the bar values.

```jsx
<BarChart width={1000} height={300} data={data}>
  <XAxis dataKey="name" />
  <YAxis />
  <Bar dataKey="uv" fill="#8884d8" />
</BarChart>
```

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

### Shadow DOM Example with Pie Chart

Source: https://recharts.github.io/api/ZIndexLayer

Demonstrates how to use ShadowDomWrapper with a PieChart, including Pie, Tooltip, Legend, and RechartsDevtools. This example showcases a practical application of chart components within a shadow DOM context.

```jsx
import React, { useRef, useEffect, useState } from 'react';
export default function ShadowDomExample({ isAnimationActive = true }: { isAnimationActive?: boolean }) {
return (
<ShadowDomWrapper>
<PieChart width={380} height={300}>
<Pie
data={pieData}
cx="50%"
cy="50%"
labelLine={false}
label={({ name, percent }) => `${name} ${((percent ?? 0) * 100).toFixed(0)}%`}
outerRadius={100}
fill="#8884d8"
dataKey="value"
isAnimationActive={isAnimationActive}
/>
<Tooltip />
<Legend />
<RechartsDevtools />
</PieChart>
</ShadowDomWrapper>
);
}
```

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

### Basic Funnel Chart Example

Source: https://recharts.github.io/api/Funnel

A basic implementation of a Funnel Chart using Recharts. It displays data with a specified key and supports optional animations and custom active shapes. Ensure 'recharts' and '@recharts/devtools' are installed.

```jsx
import { FunnelChart, Funnel, LabelList, Trapezoid, Label, FunnelTrapezoidItem } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
  
// #region Sample data…// #endregion
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;
```

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

### ReferenceArea Example

Source: https://recharts.github.io/api/ReferenceArea

This example demonstrates how to use the ReferenceArea component within a ScatterChart to highlight a specific data range. It requires importing necessary components from 'recharts'.

```jsx
import { ScatterChart, Scatter, XAxis, YAxis, ZAxis, CartesianGrid, Tooltip, Legend, ReferenceArea } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
  

// #region Sample data…// #endregion
const ReferenceAreaExample = ({ isAnimationActive = true }) => (
<ScatterChart
style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
Inspect Hook:useChartWidth | useChartHeightuseMarginuseOffsetusePlotAreauseActiveTooltipDataPointsuseXAxisDomainuseYAxisDomainuseActiveTooltipLabeluseXAxisTicksuseYAxisTicksuseIsTooltipActiveuseActiveTooltipCoordinate
useChartWidth: 700
useChartHeight: 433
Add Annotation:
Horizontal LineVertical LineCircleRectangleLabelFreeform LineCrosshair
Snap to Data:
No snappingSnap to data pointsSnap to axis ticks
Annotations (0):
No annotations yet
/>
);
```

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

### CartesianGrid Fill Examples

Source: https://recharts.github.io/api/CartesianGrid

Demonstrates how to set the background fill color for the grid. Accepts color names or hex codes.

```jsx
<CartesianGrid fill="red" />
```

```jsx
<CartesianGrid fill="#ccc" />
```

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

### Example Usage of useYAxisInverseTickSnapScale

Source: https://recharts.github.io/api/useYAxisInverseTickSnapScale

This example demonstrates how to use the useYAxisInverseTickSnapScale hook within a LineChart component to enable snapping interactions. It includes event handlers for mouse and touch movements to update pointer positions and display crosshairs.

```jsx
const LineChartComponent = () => {
  const [pointers, setPointers] = useState([]);

  const handleMouseMove = useCallback(
    (_data: unknown, event: MouseEvent<SVGGraphicsElement>) => {
      const chartPointer = getRelativeCoordinate(event);
      setPointers([chartPointer]);
    },
    [setPointers],
  );

  const handleTouchMove = useCallback(
    (_data: unknown, event: TouchEvent<SVGGraphicsElement>) => {
      const chartPointers = getRelativeCoordinate(event);
      setPointers(chartPointers);
    },
    [setPointers],
  );

  const handleLeave = useCallback(() => {
    setPointers([]);
  }, [setPointers]);

  return (
    <LineChart
      style={{
        width: '100%',
        maxWidth: '500px',
        maxHeight: '200px',
        aspectRatio: 1,
        touchAction: 'none',
      }}
      responsive
      data={data}
      margin={{ top: 20, right: 50, left: 20, bottom: 30 }}
      onMouseMove={handleMouseMove}
      onMouseLeave={handleLeave}
      onTouchMove={handleTouchMove}
      onTouchEnd={handleLeave}
    >
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="name" />
      <YAxis width="auto" />
      <Line type="monotone" dataKey="sales" stroke="#8884d8" strokeWidth={2} />

      {pointers.map(pointer => (
        <AxisTickCrosshair key={`crosshair-${pointer.relativeX}-${pointer.relativeY}`} pointer={pointer} />
      ))}

      <RechartsDevtools />
    </LineChart>
  );
};
```

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

### Basic Treemap Example

Source: https://recharts.github.io/api/Treemap

A simple Treemap chart demonstrating hierarchical data visualization. It requires importing Treemap from 'recharts'.

```jsx
import { Treemap } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
  

// #region Sample data…// #endregion
Inspect Hook:useChartWidth | useChartHeightuseMarginuseOffsetusePlotAreauseActiveTooltipDataPointsuseXAxisDomainuseYAxisDomainuseActiveTooltipLabeluseXAxisTicksuseYAxisTicksuseIsTooltipActiveuseActiveTooltipCoordinate
useChartWidth: 500
useChartHeight: 375
Add Annotation:
Horizontal LineVertical LineCircleRectangleLabelFreeform LineCrosshair
Snap to Data:
No snappingSnap to data pointsSnap to axis ticks
Annotations (0):
No annotations yet
```

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

### Set up Recharts Development Build

Source: https://recharts.github.io/guide/installation

Clone the Recharts repository and run npm install and build commands to set up a local development environment.

```bash
git clone https://github.com/recharts/recharts.git
cd recharts
npm install
npm run build
```

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

### ReferenceLine Position Example in BarChart

Source: https://recharts.github.io/api/ReferenceLine

Illustrates using ReferenceLine with the 'position' attribute in a BarChart. The 'position' attribute can be set to 'start' to align the line to the beginning of the axis. This example requires BarChart, ReferenceLine, XAxis, YAxis, CartesianGrid, and Tooltip.

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

// #region Sample data…// #endregion
export const ReferenceLinePositionExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => (
<BarChart
style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
responsive
data={smallData}
>
<XAxis dataKey="name" />
<YAxis width="auto" />
<CartesianGrid strokeDasharray="3 3" />
<Tooltip />
<ReferenceLine x="Page B" label={{ value: 'position: start', fill: 'black' }} stroke="black" position="start" />

```

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

### Funnel Chart Label

Source: https://recharts.github.io/api/Label

Basic example of using LabelList within a FunnelChart. This snippet demonstrates the fundamental setup for adding labels to funnel segments.

```jsx
import { Funnel, FunnelChart, LabelList } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
  

```

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

### Recharts Line Chart Component

Source: https://recharts.github.io

A basic Recharts LineChart component setup with CartesianGrid, Line, XAxis, and YAxis. This is a foundational example for creating line charts.

```javascript
export default function IndexLineChart() {
Inspect Hook:useChartWidth | useChartHeightuseMarginuseOffsetusePlotAreauseActiveTooltipDataPointsuseXAxisDomainuseYAxisDomainuseActiveTooltipLabeluseXAxisTicksuseYAxisTicksuseIsTooltipActiveuseActiveTooltipCoordinate
useChartWidth: 636
useChartHeight: 393
Add Annotation:
Horizontal LineVertical LineCircleRectangleLabelFreeform LineCrosshair
Snap to Data:
No snappingSnap to data pointsSnap to axis ticks
Annotations (0):
No annotations yet
```

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

### Example Usage of useXAxisInverseDataSnapScale

Source: https://recharts.github.io/api/useXAxisInverseDataSnapScale

This example demonstrates how to use the useXAxisInverseDataSnapScale hook within a LineChart component. It includes event handlers for mouse and touch interactions to update pointer data, which is then used to render a DomainCrosshair. The chart setup includes standard Recharts components like CartesianGrid, XAxis, YAxis, and Line.

```jsx
const chartPointer: RelativePointer = getRelativeCoordinate(event);
setPointers([chartPointer]);
}, [setPointers]);

const handleTouchMove = useCallback(
(_data: unknown, event: TouchEvent<SVGGraphicsElement>) => {
const chartPointers = getRelativeCoordinate(event);
setPointers(chartPointers);
}, [setPointers]);

const handleLeave = useCallback(() => {
setPointers([]);
}, [setPointers]);

return (
<LineChart
style={{
width: '100%',
maxWidth: '500px',
maxHeight: '200px',
aspectRatio: 1,
touchAction: 'none',
}}
responsive
data={data}
margin={{ top: 20, right: 50, left: 20, bottom: 30 }}
onMouseMove={handleMouseMove}
onMouseLeave={handleLeave}
onTouchMove={handleTouchMove}
onTouchEnd={handleLeave}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis width="auto" />
<Line type="monotone" dataKey="sales" stroke="#8884d8" strokeWidth={2} />

{pointers.map(pointer => (
<DomainCrosshair key={`crosshair-${pointer.relativeX}-${pointer.relativeY}`} pointer={pointer} />
))}

<RechartsDevtools />
</LineChart>
);
```

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

### Bubble Chart Example with Tooltip

Source: https://recharts.github.io/examples/BubbleChart

Demonstrates a basic Bubble Chart with custom tooltip rendering. Ensure data is properly formatted and axes are configured for value and size mapping.

```jsx
import { Scatter, ScatterChart, Tooltip, XAxis, YAxis, ZAxis, TooltipContentProps, TooltipIndex } from 'recharts';
import { ReactNode } from 'react';
import { RechartsDevtools } from '@recharts/devtools';
  

// #region Sample data…// #endregion
const parseDomain = () => [
0,
Math.max(
Math.max.apply(
null,
data01.map(entry => entry.value),
),
Math.max.apply(
null,
data02.map(entry => entry.value),
),
),
];
  

const domain = parseDomain();
const range = [16, 225] as const;
const margin = { top: 10, right: 0, bottom: 0, left: 0 };
  

const renderTooltip = (props: TooltipContentProps) => {
const { active, payload } = props;
  
if (active && payload && payload.length) {
const data = payload[0] && payload[0].payload;
  
return (
<div
style={{
backgroundColor: '#fff',
            border: '1px solid #999',
margin: 0,
            padding: 10,
          }}>
<p className="label">{`${data.name} : ${data.value}`}</p>
<pre className="intro"></pre>
<div className="intro">{`value of item: ${data.value}`}</div>
</div>
);
}
  
return null;
};

const BubbleChart = () => (
<ScatterChart
width={400}
height={400}
margin={margin}>
<XAxis type="number" dataKey="x" name="stature" unit="cm" />
<YAxis type="number" dataKey="y" name="weight" unit="kg" />
<ZAxis type="number" dataKey="value" range={range} />
<Tooltip cursor={{ strokeDasharray: '3 3' }} wrapperStyle={{ zIndex: 1000 }} content={renderTooltip} />
<Scatter name="A school" data={data01} fill="#8884d8" />
<Scatter name="B school" data={data02} fill="#82ca9d" />
</ScatterChart>
);

export default BubbleChart;

```

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

### AreaChart with CartesianGrid

Source: https://recharts.github.io/api/AreaChart

This example demonstrates setting up an AreaChart with a CartesianGrid for visual structure. It includes imports for Area, AreaChart, CartesianGrid, Tooltip, XAxis, and YAxis.

```jsx
import { Area, AreaChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
  
// #region Sample data…// #endregion
```

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

### Basic SunburstChart Setup

Source: https://recharts.github.io/api/SunburstChart

This snippet shows the basic structure for using SunburstChart with ResponsiveContainer and Tooltip. Ensure you have the necessary imports from 'recharts'.

```jsx
import { ResponsiveContainer, SunburstChart, SunburstData, Tooltip } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

// Sample data would be defined here
```

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

### Basic Bar Chart Setup

Source: https://recharts.github.io/api/BarChart

This snippet shows the basic structure for a BarChart, including essential components like XAxis, YAxis, CartesianGrid, Tooltip, and Legend. It requires importing these components from 'recharts'.

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

// #region Sample data…// #endregion

```

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

### Recharts Bar Chart with Animation Controls

Source: https://recharts.github.io/guide/animations

This example demonstrates a Recharts Bar Chart with interactive controls for animation properties. It allows users to toggle animation, set its start delay, duration, and easing function. Useful for visualizing the impact of animation settings.

```jsx
import { Bar, BarChart, CartesianGrid, Tooltip, XAxis, YAxis } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
import type { Lever } from '../../Shared/levers/Levers.tsx';
import { animationBeginLever } from '../../Shared/levers/gallery/animationBeginLever.tsx';
import { animationDurationLever } from '../../Shared/levers/gallery/animationDurationLever.tsx';
import { animationEasingLever, AnimationEasingValue } from '../../Shared/levers/gallery/animationEasingLever.tsx';
import { isAnimationActiveLever } from '../../Shared/levers/gallery/isAnimationActiveLever.tsx';
import { replayAnimationLever } from '../../Shared/levers/gallery/replayAnimationLever.tsx';
  

const data = [
  { month: 'Jan', revenue: 4200 },
  { month: 'Feb', revenue: 5800 },
];

// Assuming Lever components and their associated data/state management are defined elsewhere
// For example:
// const [isAnimationActive, setIsAnimationActive] = React.useState('auto');
// const [animationBegin, setAnimationBegin] = React.useState(0);
// const [animationDuration, setAnimationDuration] = React.useState(400);
// const [animationEasing, setAnimationEasing] = React.useState<AnimationEasingValue>('ease');

// Placeholder for the actual chart component using these levers
function AnimatedBarChart() {
  // ... implementation using levers to control animation props ...
  return (
    <BarChart width={500} height={300} data={data}>
      <CartesianGrid strokeDasharray="3 3" />
      <XAxis dataKey="month" />
      <YAxis />
      <Tooltip />
      <Bar
        dataKey="revenue"
        fill="#8884d8"
        isAnimationActive={isAnimationActiveLever.value}
        animationBegin={animationBeginLever.value}
        animationDuration={animationDurationLever.value}
        animationEasing={animationEasingLever.value}
      />
    </BarChart>
  );
}

// Example of how levers might be rendered (simplified)
function AnimationControls() {
  return (
    <div>
      {replayAnimationLever.render()}
      {isAnimationActiveLever.render()}
      {animationBeginLever.render()}
      {animationDurationLever.render()}
      {animationEasingLever.render()}
    </div>
  );
}

// Main component structure (simplified)
function App() {
  return (
    <div>
      <h1>Recharts Animation Example</h1>
      <AnimationControls />
      <AnimatedBarChart />
      <RechartsDevtools />
    </div>
  );
}

export default App;

```

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

### Multi-Series Line Chart Example

Source: https://recharts.github.io/examples/LineChartHasMultiSeries

This React component renders a line chart capable of displaying multiple data series. It utilizes Recharts components for axes, tooltips, legends, and the chart itself. The series data is mapped to render individual lines, allowing for comparison of different datasets on the same chart. Ensure Recharts and @recharts/devtools are installed.

```jsx
import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
  

// #region Sample data…// #endregion
export default function LineChartHasMultiSeries() {
return (
<LineChart style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }} responsive>
<CartesianGrid strokeDasharray="3 3" stroke="var(--color-border-3)" />
<XAxis dataKey="category" type="category" allowDuplicatedCategory={false} stroke="var(--color-text-3)" />
<YAxis dataKey="value" width="auto" stroke="var(--color-text-3)" />
<Tooltip
cursor={{ stroke: 'var(--color-border-2)' }}
contentStyle={{ backgroundColor: 'var(--color-surface-base)', borderColor: 'var(--color-border-2)' }}
/>
<Legend />
{series.map(s => (
<Line
dataKey="value"
data={s.data}
name={s.name}
key={s.name}
stroke="var(--color-chart-1)"
dot={{
fill: 'var(--color-surface-base)',
}}
activeDot={{
stroke: 'var(--color-surface-base)',
}}
/>
))}
<RechartsDevtools />
</LineChart>
);
}
```

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

### Simple Area Chart Implementation

Source: https://recharts.github.io/examples/AreaChartExample

This snippet shows how to set up a simple Area Chart. It includes defining data, gradients, and essential chart components like XAxis, YAxis, Tooltip, and the Area itself. Ensure 'data' is defined elsewhere.

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

// #region Sample data…// #endregion
const AreaChartExample = ({ isAnimationActive = true }) => (
<AreaChart
style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
responsive
data={data}
margin={{ top: 10, right: 0, left: 0, bottom: 0 }}
>
<defs>
<linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#8884d8" stopOpacity={0.8} />
<stop offset="95%" stopColor="#8884d8" stopOpacity={0} />
</linearGradient>
<linearGradient id="colorPv" x1="0" y1="0" x2="0" y2="1">
<stop offset="5%" stopColor="#82ca9d" stopOpacity={0.8} />
<stop offset="95%" stopColor="#82ca9d" stopOpacity={0} />
</linearGradient>
</defs>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="name" />
<YAxis width="auto" />
<Tooltip />
<Area
type="monotone"
dataKey="uv"
stroke="#8884d8"
fillOpacity={1}
fill="url(#colorUv)"
/>
<Area
type="monotone"
dataKey="pv"
stroke="#82ca9d"
fillOpacity={1}
fill="url(#colorPv)"
/>
</AreaChart>
);
```

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

### Pie Chart With Start Angle

Source: https://recharts.github.io/api/Pie

Defines the starting angle for the Pie chart in degrees. This allows for rotation of the entire chart.

```jsx
<Pie startAngle={90} />
```

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

### Basic Recharts Line Chart Setup

Source: https://recharts.github.io/guide/getting-started

This snippet demonstrates the basic structure for a Recharts LineChart, including essential components like CartesianGrid, Line, Tooltip, XAxis, and YAxis. It also shows how to import RechartsDevtools for debugging.

```javascript
import { CartesianGrid, Legend, Line, LineChart, Tooltip, XAxis, YAxis } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
```

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

### Custom Entrance Animation: Grow from Bottom

Source: https://recharts.github.io/guide/animations

This example demonstrates a custom entrance animation for an Area chart. It combines animationInterpolateFn for point movement with a custom shape to override the default clip-path reveal, preventing it during entrance.

```jsx
import {
  AnimationInterpolateFn,
  Area,
  AreaChart,
  CartesianGrid,
  Tooltip,
  usePlotArea,
  XAxis,
  YAxis,
  AreaRevealShape,
  AreaPointItem,
  interpolate,
  CartesianLayout,
  AreaRevealShapeProps,
} from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
import type { Lever } from '../../../../components/Shared/levers/Levers.tsx';
import { createCheckboxLever } from '../../../../components/Shared/levers/Levers.tsx';
import { animationDurationLever } from '../../../../components/Shared/levers/gallery/animationDurationLever.tsx';
import { replayAnimationLever } from '../../../../components/Shared/levers/gallery/replayAnimationLever.tsx';
import { swapDataSetLever } from '../../../../components/Shared/levers/gallery/swapDataLever.tsx';

// ... other component code and hooks ...

// Example usage within a component (conceptual, actual implementation would be more complex)
// <AreaChart ... >
//   <Area dataKey="value" shape={GrowFromBottomShape} />
// </AreaChart>

// Placeholder for the actual GrowFromBottomShape implementation
// const GrowFromBottomShape = (props: AreaRevealShapeProps) => {
//   // Custom logic to grow from bottom, potentially wrapping AreaRevealShape
//   // and overriding isEntrance behavior if needed.
//   return <AreaRevealShape {...props} isEntrance={false} />; // Example override
// };
```

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

### Ranged Stacked Bar Chart Example

Source: https://recharts.github.io/api/BarStack

This example demonstrates how to use the BarStack component to create a ranged stacked bar chart. It requires importing necessary components from 'recharts' and optionally '@recharts/devtools'.

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

// #region Sample data…// #endregion
  
  

const RangedStackedBarChart = ({
isAnimationActive = true,
defaultIndex,
}: { 
isAnimationActive?: boolean;
defaultIndex?: TooltipIndex;
}) => (
<BarChart
style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
Inspect Hook:useChartWidth | useChartHeightuseMarginuseOffsetusePlotAreauseActiveTooltipDataPointsuseXAxisDomainuseYAxisDomainuseActiveTooltipLabeluseXAxisTicksuseYAxisTicksuseIsTooltipActiveuseActiveTooltipCoordinate
useChartWidth: 700
useChartHeight: 433
Add Annotation:
Horizontal LineVertical LineCircleRectangleLabelFreeform LineCrosshair
Snap to Data:
No snappingSnap to data pointsSnap to axis ticks
Annotations (0):
No annotations yet
#### Child Components
BarStack provides context for these components:
  * `<Bar />`


#### Props
  * Examples: 
    * Ranged Stacked Bar Chart
  * Radius applies only once to all bars inside of this stack group, as if they were one huge bar. Meaning that if you have three bars stacked together, and you set radius to 10, only the outer corners of the entire stack will be rounded: the middle bars will have square corners.
Unless! The edge bars are smaller than the radius value, in which case the bars at the edge get a lot of radius and the middle one gets a little bit of radius.
You may want to combine this with setting individual Bar components' radius to their own values for best effect.`Bar.radius` prop will round corners of individual bars, while `BarStack.radius` will round corners of the entire stack.
If you provide a single number, it applies to all four corners. If you provide an array of four numbers, they apply to top-left, top-right, bottom-right, bottom-left corners respectively.
DEFAULT: `0`
Examples: 
    * Ranged Stacked Bar Chart
  * When two Bars have the same axisId and same stackId, then the two Bars are stacked in the chart. This prop sets the stack ID for all Bar components inside this BarStack component. If undefined, a unique id will be generated automatically.
When both BarStack and individual Bar components have stackId defined, the BarStack's stackId wins, and the individual Bar's stackId is ignored.


Released under the MIT License
Copyright (c) 2016-2026 Recharts Group
Commit: `a1b89c6c`
0
```

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

### Stacked Bar Chart Example

Source: https://recharts.github.io/api/Bar

Illustrates how to create a stacked bar chart using the Bar component. The `dataKey` prop specifies how to extract values from the data objects.

```jsx
<BarChart width={760} height={400} data={data} layout="vertical" stackOffset="expand">
  <XAxis type="number" />
  <YAxis type="category" dataKey="name" />
  <Bar dataKey="pv" stackId="Stack" fill="#8884d8" />
  <Bar dataKey="amt" stackId="Stack" fill="#82ca9d" />
</BarChart>
```

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

### LabelList Chart Example

Source: https://recharts.github.io/api/LabelList

A basic BarChart utilizing the LabelList component. This example demonstrates how to integrate LabelList within a chart structure. It requires BarChart, Bar, XAxis, YAxis, and CartesianGrid components from 'recharts'.

```jsx
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Label, LabelList } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';
  

// #region Sample data…// #endregion
const LabelListChartExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => (
<BarChart
style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
Inspect Hook:useChartWidth | useChartHeightuseMarginuseOffsetusePlotAreauseActiveTooltipDataPointsuseXAxisDomainuseYAxisDomainuseActiveTooltipLabeluseXAxisTicksuseYAxisTicksuseIsTooltipActiveuseActiveTooltipCoordinate
useChartWidth: 700
useChartHeight: 433
Add Annotation:
Horizontal LineVertical LineCircleRectangleLabelFreeform LineCrosshair
Snap to Data:
No snappingSnap to data pointsSnap to axis ticks
Annotations (0):
No annotations yet

```

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

### Bar Chart with Background Example

Source: https://recharts.github.io/api/Bar

Demonstrates how to render a background for each bar in a Bar Chart. The background can be a boolean, object, React element, or a render function.

```jsx
<BarChart width={150} height={40} data={data}>
  <Bar dataKey="uv" fill="#8884d8" background />
</BarChart>
```

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

### Bar Chart with Custom Styling and Animation

Source: https://recharts.github.io/api/BarChart

This example demonstrates a BarChart with custom styling applied via the 'style' prop, including width, maxWidth, maxHeight, and aspectRatio. It also includes a prop to control animation.

```jsx
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 }}
>

```

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

### Legend Effect Opacity Example

Source: https://recharts.github.io/api/DefaultLegendContent

This example demonstrates how to customize the opacity effect for legend items, likely used for highlighting or indicating item states. It involves setting up event handlers for mouse enter and leave events.

```javascript
https://recharts.github.io/examples/LegendEffectOpacity
```