API

Charts

General Components

Cartesian Components

Polar Components

Shapes

Animation

Label

Related Links

The "position" in view box of Cartesian Coordinates

import { Label, LineChart, PlotArea, Rectangle, usePlotArea } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

// #region helper component
const PlotAreaRectangle = () => {
  const plotArea: PlotArea | undefined = usePlotArea();
  if (plotArea == null) {
    return null;
  }
  return (
    <Rectangle
      x={plotArea.x}
      y={plotArea.y}
      width={plotArea.width}
      height={plotArea.height}
      stroke="#000"
      fill="none"
    />
  );
};

// #endregion
const LabelCartesianPositions = () => {
  return (
    <LineChart
      style={{ width: '100%', maxWidth: '500px', maxHeight: '200px', aspectRatio: 1 }}
      responsive
      margin={{ top: 30, right: 30, bottom: 30, left: 30 }}
    >
      <PlotAreaRectangle />
      <Label position="top">top</Label>
      <Label position="bottom">bottom</Label>
      <Label position="left">left</Label>
      <Label position="right">right</Label>
      <Label position="center">center</Label>
      <Label position="insideLeft">insideLeft</Label>
      <Label position="insideRight">insideRight</Label>
      <Label position="insideTop">insideTop</Label>
      <Label position="insideBottom">insideBottom</Label>
      <Label position="insideTopLeft">insideTopLeft</Label>
      <Label position="insideTopRight">insideTopRight</Label>
      <Label position="insideBottomLeft">insideBottomLeft</Label>
      <Label position="insideBottomRight">insideBottomRight</Label>
      <RechartsDevtools />
    </LineChart>
  );
};

export default LabelCartesianPositions;

The "position" in view box of PieChart

import { LabelList, Pie, PieChart } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

const LabelPiePositions = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => (
  <PieChart style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }} responsive>
    <Pie
      data={[{ x: 100 }, { x: 200 }]}
      innerRadius="30%"
      paddingAngle={10}
      cornerRadius={9}
      dataKey="x"
      fill="none"
      stroke="black"
      isAnimationActive={isAnimationActive}
    >
      <LabelList position="center" valueAccessor={() => 'center'} />
      <LabelList position="inside" valueAccessor={() => 'inside'} />
      <LabelList position="outside" valueAccessor={() => 'outside'} />
    </Pie>
    <RechartsDevtools />
  </PieChart>
);

export default LabelPiePositions;

The "position" in view box of RadialBarChart

import { LabelList, PolarAngleAxis, RadialBar, RadialBarChart } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

const LabelRadialBarPositions = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => (
  <RadialBarChart
    data={[{ x: 100 }, { x: 200 }]}
    style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
    responsive
    innerRadius="30%"
  >
    <RadialBar dataKey="x" fill="none" stroke="black" isAnimationActive={isAnimationActive}>
      <LabelList position="insideStart" valueAccessor={() => 'insideStart'} />
      <LabelList position="insideEnd" valueAccessor={() => 'insideEnd'} />
      <LabelList position="end" valueAccessor={() => 'end'} />
    </RadialBar>
    <PolarAngleAxis type="number" domain={[0, 250]} tick={false} />
    <RechartsDevtools />
  </RadialBarChart>
);

export default LabelRadialBarPositions;
import { Funnel, FunnelChart, LabelList } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

const LabelFunnelPositions = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => {
  return (
    <FunnelChart
      style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
      responsive
      data={[{ value: 100 }]}
      margin={{
        top: 20,
        right: 0,
        left: 0,
        bottom: 20,
      }}
    >
      <Funnel dataKey="value" fill="none" stroke="black" width="80%" reversed isAnimationActive={isAnimationActive}>
        <LabelList position={{ x: 120, y: 120 }} valueAccessor={() => 'custom'} className="custom" />
        <LabelList position="center" valueAccessor={() => 'center'} />
        <LabelList position="right" valueAccessor={() => 'right'} />
        <LabelList position="insideRight" valueAccessor={() => 'insideRight'} />
        <LabelList position="left" valueAccessor={() => 'left'} />
        <LabelList position="insideLeft" valueAccessor={() => 'insideLeft'} />
        <LabelList position="insideTopLeft" valueAccessor={() => 'insideTopLeft'} />
        <LabelList position="insideBottomLeft" valueAccessor={() => 'insideBottomLeft'} />
        <LabelList position="top" valueAccessor={() => 'top'} />
        <LabelList position="insideTop" valueAccessor={() => 'insideTop'} />
        <LabelList position="insideTopRight" valueAccessor={() => 'insideTopRight'} />
        <LabelList position="insideBottomRight" valueAccessor={() => 'insideBottomRight'} />
        <LabelList position="bottom" valueAccessor={() => 'bottom'} />
        <LabelList position="insideBottom" valueAccessor={() => 'insideBottom'} />
      </Funnel>
      <RechartsDevtools />
    </FunnelChart>
  );
};

export default LabelFunnelPositions;
import { Bar, BarChart, CartesianGrid, Label, LabelList, XAxis, YAxis } from 'recharts';
import { RechartsDevtools } from '@recharts/devtools';

// #region Sample data
const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 2400,
    amt: 2400,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
    amt: 2210,
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
    amt: 2290,
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
    amt: 2000,
  },
  {
    name: 'Page E',
    uv: 1890,
    pv: 4800,
    amt: 2181,
  },
  {
    name: 'Page F',
    uv: 2390,
    pv: 3800,
    amt: 2500,
  },
  {
    name: 'Page G',
    uv: 3490,
    pv: 4300,
    amt: 2100,
  },
];

// #endregion
const LabelBarChartExample = ({ isAnimationActive = true }: { isAnimationActive?: boolean }) => (
  <BarChart
    style={{ width: '100%', maxWidth: '700px', maxHeight: '70vh', aspectRatio: 1.618 }}
    responsive
    data={data}
    margin={{
      top: 15,
      right: 0,
      left: 0,
      bottom: 15,
    }}
  >
    <CartesianGrid />
    <XAxis dataKey="name">
      <Label value="insideBottom" offset={-10} position="insideBottom" />
    </XAxis>
    <YAxis
      width="auto"
      label={{
        value: 'insideLeft',
        angle: -90,
        position: 'insideLeft',
        textAnchor: 'middle',
      }}
    />
    <Bar dataKey="pv" isAnimationActive={isAnimationActive}>
      <LabelList dataKey="name" position="top" />
    </Bar>
    <RechartsDevtools />
  </BarChart>
);
export default LabelBarChartExample;

  • anglenumberoptional

    Text rotation angle in degrees. Positive values rotate clockwise, negative values rotate counterclockwise.

    DEFAULT: 0

  • childrenReactNodeoptional

    The value of label can be set as children or as the value prop

    FORMAT: 

    <Label>foo</Label>

    Examples:

  • classNamestringoptional

  • contentFunction | ReactNodeoptional

    If set a React element, the option is the custom React element of rendering label. Use an SVG element or component, such as <text> or <g>. HTML elements such as <div> are not valid inside the chart SVG and may trigger React DOM warnings. If set a function, the function will be called to render label content.

    FORMAT: 

    <Label content={CustomizedLabel} />
const renderCustomLabel = (props) => <text {...props}>Custom Label</text>;
<Label content={renderCustomLabel} />

  • formatterFunctionoptional

    Function to customize how content is serialized before rendering.

    This should return a renderable text - something that the Text component can render. Typically, a string or number. Custom components are not supported here - use the content prop instead.

  • idstringoptional

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

  • indexnumberoptional

  • labelRefReact.RefObject<SVGTextElement> | nulloptional

  • offsetnumber | stringoptional

    The offset to the specified "position". Direction of the offset depends on the position.

    DEFAULT: 5

  • parentViewBoxRequired<CartesianViewBox> | Required<PolarViewBox>optional

  • position"bottom" | "center" | "centerBottom" | "centerTop" | "end" | "inside" | "insideBottom" | "insideBottomLeft" | "insideBottomRight" | "insideEnd" | "insideLeft" | "insideRight" | "insideStart" | "insideTop" | "insideTopLeft" | "insideTopRight" | "left" | "middle" | "outside" | "right" | "top" | { x?: string | number | undefined; y?: string | number | undefined; }optional

    The position of label relative to the view box.

    DEFAULT: "middle"

    Examples:

  • textBreakAllbooleanoptional

    DEFAULT: false

  • valuefalse | null | number | string | trueoptional

    The value of label can be set as children or as the value prop

    FORMAT: 

    <Label value="foo" />

  • viewBoxRequired<CartesianViewBox> | Required<PolarViewBox>optional

    The box of viewing area. Used for positioning. If undefined, viewBox will be calculated based on surrounding context.

  • zIndexnumberoptional

    Z-Index of this component and its children. The higher the value, the more on top it will be rendered. Components with higher zIndex will appear in front of components with lower zIndex. If undefined or 0, the content is rendered in the default layer without portals.

    Available since Recharts 3.4

    DEFAULT: 2000

    Examples: