# Source: https://mui.com/x/api/charts/charts-surface.md

# ChartsSurface API

## Demos

For examples and details on the usage of this React component, visit the component demo pages:

- [Charts - Custom components](/x/react-charts/components/)
- [Charts - Composition](/x/react-charts/composition/)

## Import

```jsx
import { ChartsSurface } from '@mui/x-charts/ChartsSurface';
// or
import { ChartsSurface } from '@mui/x-charts';
// or
import { ChartsSurface } from '@mui/x-charts-pro';
// or
import { ChartsSurface } from '@mui/x-charts-premium';
```

> **Note**: The `ref` is forwarded to the root element.

> Any other props supplied will be provided to the root element (native element).

## CSS

### Rule name

| Global class | Rule name | Description |
|--------------|-----------|-------------|
| - | root | Styles applied to the root element. |

## Source code

If you did not find the information on this page, consider having a look at the implementation of the component for more detail.

- [/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx](https://github.com/mui/material-ui/tree/HEAD/packages/x-charts/src/ChartsSurface/ChartsSurface.tsx)