React+ChartJS V3 中annotation注解功能不生效问题

在TypeScript项目中使用react-chartjs-2 v4.1搭配ChartJS v3.8开发时，需要在柱状图中绘制一条水平参考线，预期效果如下：

现有零散的annotation功能示例均无法正常运行，没有可直接参考的完整可运行示例。

已安装chartjs-plugin-annotation依赖包，使用如下代码实现时注解功能始终不生效：

import React from 'react';
import { Bar } from 'react-chartjs-2';

export const MyChart: React.FC = () => {
  const options2 = {
    plugins: {
      legend: {
        display: false,
      },
      annotation: {
        annotations: [
          {
            id: 'a-line-1',
            type: 'line',
            mode: 'horizontal',
            scaleID: 'y',
            value: 1.0,
            borderColor: 'red',
            borderWidth: 4,
            label: {
              enabled: false,
              content: 'Test label',
            },
          },
        ],
      },
    },
  };

   const data2 = {
    labels:   [ 'a', 'b'],
    datasets: [ { data: [1, 2] } ],
   };

   return (<Bar options={options2} data={data2} height={150} />
   );
};

注解不生效由两个问题导致：

• 未显式注册annotation插件：Chart.js v3采用组件化注册机制，所有第三方插件必须手动注册后才会加载，仅安装依赖包不会自动启用插件能力
• 配置结构错误：适配Chart.js v3的chartjs-plugin-annotation@2.x版本中，annotations字段要求传入对象结构，而非数组结构，注解id作为对象的键定义，不需要在注解配置内部单独声明id字段

import React from 'react';
import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  BarElement,
  Legend
} from 'chart.js';
// 引入annotation插件
import annotationPlugin from 'chartjs-plugin-annotation';
import { Bar } from 'react-chartjs-2';

// 注册图表所需的内置组件和第三方注解插件
ChartJS.register(
  CategoryScale,
  LinearScale,
  BarElement,
  Legend,
  annotationPlugin
);

export const MyChart: React.FC = () => {
  const options2 = {
    plugins: {
      legend: {
        display: false,
      },
      annotation: {
        annotations: {
          // 注解id作为对象key，替换原数组结构
          'a-line-1': {
            type: 'line',
            mode: 'horizontal',
            scaleID: 'y',
            value: 1.0,
            borderColor: 'red',
            borderWidth: 4,
            label: {
              enabled: false,
              content: 'Test label',
            },
          },
        },
      },
    },
  };

  const data2 = {
    labels: ['a', 'b'],
    datasets: [{ data: [1, 2] }],
  };

  return <Bar options={options2} data={data2} height={150} />;
};

TypeScript项目额外注意：如果出现类型报错，安装@types/chartjs-plugin-annotation类型包即可。

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