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

score 1 · Accepted Answer · answered Sep 21 '22 at 11:10

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

answered Sep 21 '22 at 11:10

user2057925

2,377
1
12
12

1

If you don't have enough space on the top of the chart, use layout.padding.top options of chart configuration to have space on top of chart area – user2057925 Sep 21 '22 at 11:11

score 0 · Answer 2 · answered Nov 24 '22 at 11:10

0

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

answered Nov 24 '22 at 11:10

N.Ekanayake

43
5

options: { layout: { padding: { left: 50 } } } You can add padding top,bottom, left,right also – N.Ekanayake Nov 24 '22 at 11:23

Chart js (plugin annotation) label overflow issue

2 Answers2