chartjs-plugin-annotation icon indicating copy to clipboard operation
chartjs-plugin-annotation copied to clipboard

xAdjust scriptable context not working properly

Open d0ublezer0 opened this issue 3 years ago • 3 comments

I want adjust label position according to his width with this code:

{
      drawTime: 'beforeDraw',
      type: 'label',
      color: 'rgba(0, 32, 51, 0.6)',
      font: {
        size: 10,
      },
      xValue: x,
      xAdjust: ctx => {
        console.log('el', ctx.element); // get element with width
        console.log('el w', ctx.element.width); // undefined
        // return ctx.element ? -(ctx.element.width/2) : 0
        return -130;
      },
      yValue: y,
      textAlign: 'right',
      content: [trend.string, `R2: ${trend.r2}`],
      enabled: true
    };

But element.width sometime is undefined. How to resolve this? Screenshot at Apr 12 16-29-04

d0ublezer0 avatar Apr 12 '22 13:04 d0ublezer0

This is because xAdjust is resolved in measureRect, which is done when resolving the element properties (including width).

Maybe textAlign or position options might get the result you are looking for? https://www.chartjs.org/chartjs-plugin-annotation/latest/guide/types/label.html#configuration

kurkle avatar Apr 12 '22 13:04 kurkle

If I interpret your code correctly, you want to move the label on the left for the half of its width.

As @kurkle said, it's possible using:

  position: {
    x: 'end'
  },

image

stockiNail avatar Apr 12 '22 14:04 stockiNail

My goal is place label at end of chart line: right side of text to the line end. Width of label is dynamic, so i tried to calculate width of label and adjust its position.

@stockiNail position:end save me, thank you!

d0ublezer0 avatar Apr 12 '22 14:04 d0ublezer0