如何为react-chartjs-2及chartjs-plugins-datalabels配置数据标签？

嘿，这两个问题我刚好之前处理过，给你详细说说怎么解决：

首先要确认你已经安装了所需依赖：
npm install chart.js react-chartjs-2 chartjs-plugin-datalabels

1. 为数据标签添加$前缀/后缀 #

核心是利用chartjs-plugin-datalabels的formatter函数，它能接收每个数据点的原始值，返回你想要的格式化字符串。

下面是完整的组件示例：

import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
import { Bar } from 'react-chartjs-2';
import ChartDataLabels from 'chartjs-plugin-datalabels';

// 注册必要的Chart.js组件和数据标签插件
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Title,
  Tooltip,
  Legend,
  ChartDataLabels
);

const SalesBarChart = () => {
  const chartData = {
    labels: ['一月', '二月', '三月', '四月'],
    datasets: [
      {
        label: '月度销售额',
        data: [1200, 1900, 3000, 5000],
        backgroundColor: 'rgba(54, 162, 235, 0.5)',
      },
    ],
  };

  const chartOptions = {
    responsive: true,
    plugins: {
      legend: {
        position: 'top',
      },
      title: {
        display: true,
        text: '季度销售数据',
      },
      // 配置数据标签插件
      datalabels: {
        // 添加$前缀
        formatter: (value) => `$${value}`,
        // 如果需要后缀，改成 `${value}$` 即可
        color: '#2d3748',
        font: {
          weight: 'bold',
          size: 12,
        },
      },
    },
  };

  return <Bar data={chartData} options={chartOptions} />;
};

export default SalesBarChart;

2. 将数据标签移至柱子顶部的左侧/右侧 #

要调整标签位置，主要靠anchor、align和offset三个属性配合：

• anchor：定义标签相对于柱子的锚定位置，垂直柱状图中'end'对应柱子顶部
• align：定义标签相对于锚点的对齐方向，可选left/right/center
• offset：微调标签与锚点的距离，避免和柱子重叠

移至柱子顶部左侧 #

修改chartOptions.plugins.datalabels部分：

datalabels: {
  formatter: (value) => `$${value}`,
  color: '#2d3748',
  font: {
    weight: 'bold',
    size: 12,
  },
  anchor: 'end', // 锚定在柱子顶部
  align: 'left', // 向左对齐
  offset: 6, // 偏移6px，避免贴在柱子边缘
}

移至柱子顶部右侧 #

只需要把align改成right即可：

datalabels: {
  formatter: (value) => `$${value}`,
  color: '#2d3748',
  font: {
    weight: 'bold',
    size: 12,
  },
  anchor: 'end',
  align: 'right', // 向右对齐
  offset: 6,
}

如果是水平柱状图（设置indexAxis: 'y'），anchor: 'end'会对应柱子右侧，这时候调整align为top/bottom就能实现顶部/底部的左右定位，原理完全一致。

内容的提问来源于stack exchange，提问作者Coder