chartjs / chartjs-plugin-annotation

Annotation plugin for Chart.js
MIT License
603 stars 325 forks source link

xAdjust scriptable context not working properly #726

Closed d0ublezer0 closed 1 year ago

d0ublezer0 commented 2 years ago

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

kurkle commented 2 years ago

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

stockiNail commented 2 years ago

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

d0ublezer0 commented 2 years ago

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!