Chart js (plugin annotation) label overflow issue

Question

Need to know possible solutions to resolve such issue:

My annotation object looks like this:

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

Is any way maybe to add a free space above bar to show annotation properly?

PS I can't set max value for Y because it's dynamic

Answer 1

I could set the clip option to false in order to draw the label outside of chart area.

Here you can find the doc: https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/configuration.html#top-level-options

Here an example:

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

Answer 2

You can add padding to the graph. options: { layout: { padding: 40 } } https://www.chartjs.org/docs/latest/general/padding.html