Surface

API reference for the Recharts Surface component

Renders an SVG element that serves as the root container for SVG content.

All Recharts charts already include a Surface component internally, so you would not normally use this component directly. However, it can be useful when building custom visualizations outside of the standard chart components.

This component wraps the standard SVG element.

Props

Size

width · number | string · required

The width of the SVG surface. Can be a number (pixels) or a string (e.g., “100%”).

height · number | string · required

The height of the SVG surface. Can be a number (pixels) or a string (e.g., “100%”).

Viewport

viewBox · { x: number, y: number, width: number, height: number }

The SVG viewBox attribute, defining the position and dimension of the viewport.

If not provided, defaults to { x: 0, y: 0, width, height } based on the width and height props.

Appearance

className · string

CSS class name to apply to the SVG element.

style · CSSProperties

Inline styles to apply to the SVG element.

Accessibility

title · string

The title of the SVG, rendered as a <title> element for accessibility.

desc · string

The description of the SVG, rendered as a <desc> element for accessibility.

Content

children · ReactNode

SVG elements to render inside the Surface.

SVG properties

This component accepts all standard SVG element properties including:

• xmlns - XML namespace
• xmlnsXlink - XLink namespace
• preserveAspectRatio - How to scale the viewBox

All SVG element event handlers are also supported.

Examples

Basic surface

import { Surface } from 'recharts';

<Surface width={400} height={300}>
  <circle cx={200} cy={150} r={50} fill="#8884d8" />
</Surface>

With custom viewBox

import { Surface } from 'recharts';

<Surface
  width={400}
  height={300}
  viewBox={{ x: 0, y: 0, width: 800, height: 600 }}
>
  <rect x={100} y={100} width={200} height={150} fill="#82ca9d" />
</Surface>

With accessibility attributes

import { Surface } from 'recharts';

<Surface
  width={400}
  height={300}
  title="Sales Chart"
  desc="A visualization showing quarterly sales data"
>
  {/* Chart content */}
</Surface>