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.

Props

Appearance

className · string

CSS class name to apply to the group element.

Content

children · ReactNode

SVG elements to group together.

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

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

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

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

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>