Skip to main content

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.

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>