> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/recharts/recharts/llms.txt
> Use this file to discover all available pages before exploring further.

# Layer

> API reference for the Recharts Layer component

Creates an SVG group element to group other SVG elements together.

The Layer component is useful when you want to apply transformations or styles to a set of elements without affecting other elements in the SVG. It wraps the standard [SVG g element](https://developer.mozilla.org/en-US/docs/Web/SVG/Reference/Element/g).

## Props

### Appearance

<ParamField path="className" type="string">
  CSS class name to apply to the group element.
</ParamField>

### Content

<ParamField path="children" type="ReactNode">
  SVG elements to group together.
</ParamField>

### SVG properties

This component accepts all standard SVG g element attributes including:

* `transform` - Transformation to apply to the group
* `opacity` - Opacity for all children
* `style` - Inline styles

All SVG g element event handlers are also supported (onClick, onMouseEnter, etc.).

## Examples

### Basic grouping

```tsx theme={null}
import { Layer } from 'recharts';

<Layer className="data-points">
  <circle cx={100} cy={100} r={5} fill="#8884d8" />
  <circle cx={150} cy={120} r={5} fill="#8884d8" />
  <circle cx={200} cy={90} r={5} fill="#8884d8" />
</Layer>
```

### With transformation

```tsx theme={null}
import { Layer } from 'recharts';

<Layer transform="translate(50, 50) rotate(45)">
  <rect x={0} y={0} width={100} height={100} fill="#82ca9d" />
  <text x={50} y={50} textAnchor="middle">Rotated</text>
</Layer>
```

### With shared opacity

```tsx theme={null}
import { Layer } from 'recharts';

<Layer opacity={0.5}>
  <circle cx={100} cy={100} r={30} fill="#8884d8" />
  <circle cx={140} cy={100} r={30} fill="#82ca9d" />
  <circle cx={120} cy={130} r={30} fill="#ffc658" />
</Layer>
```

### Nested layers with different transformations

```tsx theme={null}
import { Layer } from 'recharts';

<Layer transform="translate(100, 100)">
  <Layer transform="scale(2)">
    <circle cx={0} cy={0} r={10} fill="#8884d8" />
  </Layer>
  <Layer transform="rotate(45)">
    <rect x={-20} y={-20} width={40} height={40} fill="none" stroke="#82ca9d" />
  </Layer>
</Layer>
```