Label overlaps with line

[marcelschmidttuk]

Sometimes when the yMin and yMax is higher than the chart values the label overlaps with the line. It only happens at certain values, sometimes it just works fine.

Label yAdjust is ignored.
yAdjust: -8,

[stockiNail]

@marcelschmidttuk this is happening because the plugin is trying to show the label fitting as much as possible in the chart area, if the line is drawn in the chart area. Do you have a codepen (or something like that) to use to debug it, using your use case?

[stockiNail]

@marcelschmidttuk let me ask what's your expectation, to evaluate an enhancement. Do you expect to see the label (as is today), or to have a cut or hidden one?

[marcelschmidttuk]

@stockiNail if you set the yMin and yMax to 24.3 or 19.5 it overlaps.

https://codepen.io/marceltuk/pen/poOQaRX

I would expect that there is enough padding inside the chart area to always look like this:

[stockiNail]

I would expect that there is enough padding inside the chart area to always look like this:

@marcelschmidttuk the plugin doesn't create space changing the chart size. There is only 1 case where the scales are changed if the values of the annotation are out of range (see adjustScaleRange option) but we are not in this use case.
I don't think it's doable to adjust the scale based on the coordinates of an annotation even because the scale adjustments are done before the annotation element creation.

I see as workaround if you can set the "max" value on Y axis giving space to the label to be drawn. For instance, following your codepen, setting max: 30 (when is 24.3) or max: 25 (when 19.3).
In this way you are adding space to chart area to show the label.

Another option is to set yAdjust as scriptable option and returns it as negative value if there is space on top of the line otherwise returns it as positive (the label will be on the bottom of the line).

yAdjust(ctx) {
  const chart = ctx.chart;
  const pixelOnScale = chart.scales.y.getPixelForValue(19.5); // <-- 19.5 hard-coded value 
  return (chart.chartArea.top > (pixelOnScale - 32)) ? 8 : -8;  // <-- 32 hard-coded value to change using the font line height
},

I put some hard-coded values but they could be changed based on the code of the use case.

[marcelschmidttuk]

Thanks I just added enough space to the Y Axis in the afterDataLimits event.

[stockiNail]

Thank you very much @marcelschmidttuk because this issue has re-highlighted a possible change on line label behavior when it's overflowing. I think this behavior might be changed by the user (by an option) because it could depend on use cases.