ResponsiveChart

A wrapper component that provides responsive sizing for charts, automatically measuring container width and calculating height.

Basic Usage

Wrap your chart in ResponsiveChart and use the render function to receive the calculated dimensions:

tsx

import { ResponsiveChart, LineChart } from '@derpdaderp/chartkit';

<ResponsiveChart aspectRatio={16 / 9}>
  {({ width, height }) => (
    <LineChart
      data={data}
      series={series}
      theme="midnight"
      width={width}
      height={height}
    />
  )}
</ResponsiveChart>

Aspect Ratio

Use aspectRatio to maintain proportions. The chart will fill the container width and calculate height based on the ratio:

16:9

4:3

Fixed Height

Use height for a fixed pixel height while still getting responsive width:

tsx

<ResponsiveChart height={250}>
  {({ width, height }) => (
    <LineChart
      data={data}
      series={series}
      theme="midnight"
      width={width}
      height={height}
    />
  )}
</ResponsiveChart>

Min/Max Height

Constrain the calculated height with minHeight and maxHeight:

tsx

<ResponsiveChart 
  aspectRatio={16 / 9} 
  minHeight={200} 
  maxHeight={500}
>
  {({ width, height }) => (
    <LineChart
      data={data}
      series={series}
      theme="midnight"
      width={width}
      height={height}
    />
  )}
</ResponsiveChart>

Resize Debounce

Control how quickly the chart responds to window resizes with debounce:

tsx

// Fast response (less smooth)
<ResponsiveChart aspectRatio={16 / 9} debounce={50}>
  ...
</ResponsiveChart>

// Slower response (smoother)
<ResponsiveChart aspectRatio={16 / 9} debounce={200}>
  ...
</ResponsiveChart>

Full Container

When neither height nor aspectRatio is provided, the chart will fill 100% of its container:

tsx

<div style={{ height: '400px' }}>
  <ResponsiveChart>
    {({ width, height }) => (
      <LineChart
        data={data}
        series={series}
        theme="midnight"
        width={width}
        height={height}
      />
    )}
  </ResponsiveChart>
</div>

Props

Prop	Type	Default	Description
`children*`	`(dimensions: { width: number; height: number }) => ReactNode`	-	Render function receiving dimensions
`height`	`number`	-	Fixed height in pixels
`aspectRatio`	`number`	-	Aspect ratio (width/height)
`minHeight`	`number`	`100`	Minimum height in pixels
`maxHeight`	`number`	-	Maximum height in pixels
`debounce`	`number`	`100`	Resize debounce in ms
`className`	`string`	-	Additional CSS class
`style`	`CSSProperties`	-	Additional styles