usePlotArea

Plot area is the area where the actual chart data is rendered. This means: bars, lines, scatter points, etc.

The plot area is calculated based on the chart dimensions and the offset.

Plot area width and height are the dimensions in pixels;x and y are the coordinates of the top-left corner of the plot area relative to the chart container.

They are also independent of the scale and zoom, meaning that as the user zooms in and out, the plot area dimensions will not change as the chart gets visually larger or smaller.

This hook must be used within a chart context (inside a <LineChart>, <BarChart>, etc.). This hook returns undefined if used outside a chart context.

Available since Recharts 3.1

import { Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, createHorizontalChart } from 'recharts';
import { generateMockData, MockDataType, RechartsDevtools } from '@recharts/devtools';

const data: Array<MockDataType> = generateMockData(6, 26213);

const Typed = createHorizontalChart<MockDataType, string, number>()({ XAxis, YAxis, Tooltip, Line });

export default function Example() {
  return (
    <Typed.LineChart
      style={{ width: '100%', maxWidth: '700px', height: '100%', maxHeight: '70vh', aspectRatio: 1.618 }}
      responsive
      data={data}
      margin={{
        top: 5,
        right: 0,
        left: 0,
        bottom: 5,
      }}
    >
      <CartesianGrid />
      <Typed.XAxis dataKey="label" />
      <Typed.YAxis width="auto" />
      <Tooltip />
      <Legend />
      <Typed.Line dataKey="x" />
      <Typed.Line dataKey="y" />
      <RechartsDevtools />
    </Typed.LineChart>
  );
}

Return value

PlotArea | undefined

Plot area of the chart in pixels, or undefined if used outside a chart context.