API

图表类型

通用组件

笛卡尔坐标系组件

极坐标系组件

图形

动画

主题

LabelList

相关链接

import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Label, LabelList } 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,
  },
];

// #endregion
const LabelListChartExample = ({ 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: 5,
    }}
  >
    <CartesianGrid />
    <XAxis dataKey="name">
      <Label value="Pages of my website" offset={0} position="insideBottom" />
    </XAxis>
    <YAxis
      width="auto"
      label={{
        value: 'pv of page',
        angle: -90,
        position: 'insideLeft',
        textAnchor: 'middle',
      }}
    />
    <Bar dataKey="pv" isAnimationActive={isAnimationActive}>
      <LabelList dataKey="name" position="insideTop" angle={45} />
    </Bar>
    <Bar dataKey="uv" isAnimationActive={isAnimationActive}>
      <LabelList dataKey="uv" position="top" />
    </Bar>
    <RechartsDevtools />
  </BarChart>
);

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

// #region Sample data
const data = [
  {
    name: 'Page A',
    uv: 4000,
    pv: 2400,
  },
  {
    name: 'Page B',
    uv: 3000,
    pv: 1398,
  },
  {
    name: 'Page C',
    uv: 2000,
    pv: 9800,
  },
  {
    name: 'Page D',
    uv: 2780,
    pv: 3908,
  },
];

// #endregion
const pillBackground: TextBackgroundProps = {
  rx: 10,
  padding: { x: 8, y: 3 },
  fillOpacity: 0.9,
};

const BarChartWithLabelBackground = ({ 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: 5,
    }}
  >
    <CartesianGrid />
    <XAxis dataKey="name" />
    <YAxis width="auto" />
    <Bar dataKey="pv" stackId="a" isAnimationActive={isAnimationActive}>
      {/* `background` with default styles: a rounded rectangle in the chart background color */}
      <LabelList dataKey="pv" position="inside" background />
    </Bar>
    <Bar dataKey="uv" stackId="a" isAnimationActive={isAnimationActive}>
      {/* `background` with custom rectangle props */}
      <LabelList dataKey="uv" position="inside" background={pillBackground} />
    </Bar>
    <RechartsDevtools />
  </BarChart>
);

export default BarChartWithLabelBackground;

父组件

LabelList consumes context provided by these components:

  • anglenumberoptional

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

    默认值：0

  • backgroundTextBackgroundProps | false | trueoptional

    Draws a rectangle behind each label, for example to keep labels readable on top of filled shapes.

    • true draws the background with the styles from the theme's graphicalItems[n].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 graphicalItems[n].label.background, and draws no background without a theme.

    Each background is sized from its rendered label and follows curved label paths. It is not drawn for custom content.

    Recharts 自 3.11

    格式：

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

    示例：

  • clockWisebooleanoptional

    The parameter to calculate the view box of label in radial charts.

  • contentFunction | ReactNodeoptional

    If set a React element, the option is the customized React element of rendering each 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 to a function, the function is called once for each item

    格式：

    <LabelList content={CustomizedLabel} />

    示例：

  • dataKeyFunction | number | stringoptional

    Decides how to extract the value of each label from the data:

    • string: the name of the field in the data object;
    • number: the index of the field in the data;
    • function: a function that receives the data object and returns the value of each label.

    If set, then valueAccessor will be ignored.

    Scatter requires this prop to be set. Other graphical components will show the same value as the dataKey of the component by default.

    示例：

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

  • offsetnumber | stringoptional

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

    默认值：5

    示例：

  • 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

  • valueAccessorFunctionoptional

    The accessor function to get the value of each label. Is ignored if dataKey is specified.

    示例：

  • 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

    示例：