CODEWITHSUNDEEP
chartschartjs-plugin-annotation
IngBond
IngBond

Reputation: 668

Chart js (plugin annotation) label overflow issue

Need to know possible solutions to resolve such issue: enter image description here

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

Upvotes: 0

Views: 1100

Answers (2)

N.Ekanayake
N.Ekanayake

Reputation: 63

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

Upvotes: 0

user2057925
user2057925

Reputation: 2653

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

Upvotes: 1

Related Questions