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?

P.S. I can't set max value for Y because it's dynamic

user2057925 · Answer

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: {
        ...
      }
    }
  }
};

Chart js (plugin annotation) label overflow issue

1 Answers