> ## 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.

# 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](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg).

## Props

### Size

<ParamField path="width" type="number | string" required>
  The width of the SVG surface. Can be a number (pixels) or a string (e.g., "100%").
</ParamField>

<ParamField path="height" type="number | string" required>
  The height of the SVG surface. Can be a number (pixels) or a string (e.g., "100%").
</ParamField>

### Viewport

<ParamField path="viewBox" type="{ 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.
</ParamField>

### Appearance

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

<ParamField path="style" type="CSSProperties">
  Inline styles to apply to the SVG element.
</ParamField>

### Accessibility

<ParamField path="title" type="string">
  The title of the SVG, rendered as a `<title>` element for accessibility.
</ParamField>

<ParamField path="desc" type="string">
  The description of the SVG, rendered as a `<desc>` element for accessibility.
</ParamField>

### Content

<ParamField path="children" type="ReactNode">
  SVG elements to render inside the Surface.
</ParamField>

### 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

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

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

### With custom viewBox

```tsx theme={null}
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

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

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