Chart.js 3.x注解插件：标签置于水平线右侧被截断问题求助

我用Chart.js和chartjs-plugin-annotation制作了图表（不含绿色文本），但无法将绿色的“100%”文本放置在水平线的最右侧。尝试修改annotations.label.xValue和annotations.label.xAdjust参数后，标签要么位置不符合预期，要么因超出画布被截断。

我的部分代码如下：

annotation: {
    annotations: {
        line1: {
            type: "line" as const,
            yMin: 20,
            yMax: 20,
            borderColor: "rgba(0, 186, 52, 1)",
            borderWidth: 2,
        },
        label1: {
            type: "label",
            content: ["100%"],
            color: "rgba(0, 186, 52, 1)",
            yValue: 20,
            xValue:'4/7',
            xAdjust: 10
        },
    },
},

这里有几个可行的解决办法：

• 通过锚点属性精准对齐标签
  给label1添加xAnchor: 'end'和position: 'end'，同时将xValue设为'end'，让标签自动对齐到水平线右端，再通过xAdjust微调位置避免贴边：

  label1: {
      type: "label",
      content: ["100%"],
      color: "rgba(0, 186, 52, 1)",
      yValue: 20,
      xValue: 'end',
      xAnchor: 'end',
      position: 'end',
      xAdjust: -10, // 根据标签大小调整偏移量
  }
  

• 给图表右侧添加内边距
  如果不想修改标签定位逻辑，可以直接给图表配置右侧内边距，预留出显示标签的空间：

  options: {
      layout: {
          padding: {
              right: 30, // 数值根据标签实际大小调整
          }
      },
      // 其他图表配置
      annotation: { /* 你的注释配置 */ }
  }
  

• 调整标签渲染顺序
  若标签被其他图表元素遮挡或截断，可将drawTime设为'afterDatasetsDraw'，确保标签在所有数据集绘制完成后再渲染：

  annotation: {
      drawTime: 'afterDatasetsDraw',
      annotations: { /* 你的注释配置 */ }
  }
  

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