API

图表类型

通用组件

笛卡尔坐标系组件

极坐标系组件

图形

动画

主题

Label

相关链接

笛卡尔坐标系中 "position" 的参数含义

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;

极坐标系中 "position" 的参数含义

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;

径向坐标系中 "position" 的参数含义

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.

    默认值：0

  • backgroundTextBackgroundProps | false | trueoptional

    Draws a background behind the label, for example to keep it readable on top of a filled shape.

    • true draws the background with the styles from the theme's label.background. If neither sets a fill, the fill is the pageBackground color from the theme, or white when no theme is set.
    • An object accepts SVG <rect> attributes such as fill, stroke and rx, and a padding. It is merged over the theme styles key by key.
    • false draws no background, even if the theme turns backgrounds on.
    • undefined uses the theme's label.background, and draws no background without a theme.

    The background is sized from the rendered text and follows curved label paths. It is not drawn for custom content.

    Recharts 自 3.11

    格式：

    <Label position="inside" background />
<Label position="inside" background={{ fill: '#fff', rx: 2, padding: 4 }} />

  • childrenReactNodeoptional

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

    格式：

    <Label>foo</Label>

    示例：

  • 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.

    格式：

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

    默认值：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.

    默认值："middle"

    示例：

  • textBreakAllbooleanoptional

    默认值：false

  • valuefalse | null | number | string | trueoptional

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

    格式：

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

    Recharts 自 3.4

    默认值：2000

    示例：