Chart.js（插件注释） label 溢出问题

Question

需要知道解决此类问题的可能解决方案：

我的注释 object 如下所示：

{
      type: 'label',
      borderRadius: 0,
      borderWidth: 0,
      content: content,
      font: {
        size: 8,
        weight: 'bold'
      },
      position: {
        x: 'center',
        y: 'end'
      },
      xValue: name,
      yValue: value
    }

有什么办法可以在栏上方添加一个可用空间以正确显示注释？

PS 我无法为 Y 设置最大值，因为它是动态的

Answer 1

我可以将clip选项设置为 false，以便在图表区域之外绘制 label。

在这里您可以找到文档： https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/configuration.html#top-level-options

这里有一个例子：

const options = {
  plugins: {
    annotation: {
      clip: false,
      annotations: {
        ...
      }
    }
  }
};

Answer 2

您可以向图形添加填充。 选项：{布局：{填充：40}} https://www.chartjs.org/docs/latest/general/padding.html