API

图表类型

通用组件

笛卡尔坐标系组件

极坐标系组件

图形

ResponsiveContainer

The ResponsiveContainer 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.

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.

相关链接

Props

  • childrenReactNode

    The content of the container. It can contain multiple charts, and then they will all share the same dimensions.

    示例：

  • aspectnumberoptional

    width / height. If specified, the height will be calculated by width / aspect.

  • classNamenumber | stringoptional

    The HTML element's class name

  • debouncenumberoptional

    If specified a positive number, debounced function will be used to handle the resize event.

    默认值：0

  • height`${number}%` | numberoptional

    The height of chart container. Can be a number or a percent string like "100%".

    默认值："100%"

  • idnumber | stringoptional

    Unique identifier of this component. Used as an HTML attribute id.

  • initialDimensionObjectoptional

    The initial width and height of the container.

    默认值：{"width":-1,"height":-1}

  • maxHeightnumberoptional

    The maximum height of the container. It can be a number.

  • minHeightnumber | stringoptional

    The minimum height of the container.

  • minWidthnumber | stringoptional

    The minimum width of the container.

    默认值：0

  • styleOmit<React.CSSProperties, keyof Props>optional

    The style of the container.

  • width`${number}%` | numberoptional

    The width of chart container. Can be a number or a percent string like "100%".

    默认值："100%"

  • onResizeFunctionoptional

    If specified provides a callback providing the updated chart width and height values.