Recharts -条形图动态标签位置

import React from 'react';
import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, Legend } from 'recharts';

const data = [
  { name: 'A', value: 100 },
  { name: 'B', value: 200 },
  { name: 'C', value: 300 },
];

const CustomizedLabel = ({ x, y, width, value }) => (
  <text x={x + width / 2} y={y} dy={-4} textAnchor="middle" fill="#888">
    {value}
  </text>
);

const App = () => (
  <BarChart width={500} height={300} data={data}>
    <CartesianGrid strokeDasharray="3 3" />
    <XAxis dataKey="name" />
    <YAxis />
    <Tooltip />
    <Legend />
    <Bar dataKey="value" fill="#8884d8" label={<CustomizedLabel />} />
  </BarChart>
);

export default App;