Back to Recharts

ResponsiveContainer

storybook/stories/API/ResponsiveContainer.mdx

3.8.11.0 KB
Original Source

import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks'; import * as ComponentStories from './ResponsiveContainer.stories';

ResponsiveContainer

<Meta of={ComponentStories} /> <Canvas of={ComponentStories.API} layout="padded" />

Description

<p> The <code>ResponsiveContainer</code> component is a container that adjusts its width and height based on the size of its parent element. It is used to create responsive charts that adapt to different screen sizes. </p> <p> This component uses the ResizeObserver API to monitor changes to the size of its parent element. If you need to support older browsers that do not support this API, you may need to include a polyfill. </p>

Child Components

The ResponsiveContainer can be used with the following child components:

  • <AreaChart/>
  • <BarChart/>
  • <ComposedChart/>
  • <FunnelChart/>
  • <LineChart/>
  • <PieChart/>
  • <RadarChart/>
  • <RadialBarChart/>
  • <Sankey/>
  • <ScatterChart/>
  • <SunburstChart/>
  • <Treemap/>

Props

<Controls of={ComponentStories.API} />