chartschartjs-plugin-annotation

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


Solution

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