How to detect when a "yAdjusted" label is out of bounds

[gterras]

Hi,

In my stacked Bar chart I display an annotation representing the total of the bar, positioned just above the bar:

That's the red label here, it uses yAdjust: -50, so the label is actually above its actual position (which is the red line on top of the bars).

The problem here is that sometimes the label gets cropped as seen on column 1. The label position in itself is fine, I just want to increase the scale in this case.

adjustScaleRange:true doesn't seem to take label adjustment into account, so I wrote a plugin to adjust the y scale when overflow is detected:

const checkOverflowPlugin = {
	id: 'checkOverflow',
	afterLayout(chart, args) {
		if (isUpdating) return

		const max = chart.scales.y.max

		if (!max) return

		const max_data = chart.scales.y._range.max

                // trying to convert 50 to a position here, is there a better way? 
		const label_position = chart.scales.y.getValueForPixel(
			chart.chartArea.bottom - 50
		) 

		const real_height = ZERO.plus(max_data).plus(ZERO.plus(label_position).abs())

		const is_overflowing = real_height.gt(max)

		if (!is_overflowing) return 

		const nextYMax = // computing the wanted Y size 

		isUpdating = true
		chart.scales.y.options.max = nextYMax
		chart.update()
		isUpdating = false
	},
}

It works, but it's a bit ugly: a flag is needed to prevent recursion (I could't find another matching hook considering the props needed here), but more importantly the update will trigger an extra animation, which I don't want (setting animations to false for the time of update is not possible in my case as I rely on it for other matters).

The question here, unless I'm missing a simpler way to achieve my goal, is how to convert this absolute 50 adjustment into a coordinate at scale, preferably the earlier possible in the life cycle?

My other idea was to create another annotation, invisible this time, that would be positioned at the same point as the red label, and detect if this point is out of bounds (then maybe use adjustScaleRange), but it's not working properly (I can get the wanted value but it seems that accessing ctx.chart in a scriptable yMin() will defer something in the rendering, so the result isn't the same as returning a fixed string of same value).

Also I cannot find a way to "adjust" an annotation the same way an annotation label is adjusted (this would probably solve my case).

I'm running out of ideas, any help would be greatly appreciated!

Thanks

[stockiNail]

@gterras thanks for feedback! Not sure if I caught your requirement.

Correct me if what I understood is wrong.

Currently, using an absolute adjust, the annotation is out of the chart area.
If you want to show it, you could try using clip: false option? You should add the empty space on top of chart area by layout.padding chart option.

Instead, if you want that the adjust will be dynamic, base on the chart scale, you could set it by a scriptable option.

The annotation size (and other options) are calculated during the update phase of the chart and not during the rendering (draw phase).

Can you provide the chart options or create a codepen to play on that?

[gterras]

@gterras in the meantime, I'm curious to know why you are using the annotation plugin instead of datalabels. Having a look to the chart picture you shared, if I understood well you are adding a label on top of bar stack with the total of all bars. Is it correct? If yes, I have replied to a discussion in datalabels plugin how to do that:

Thanks for this I really didn't know you could have multiple labels! Although I think the problem is the same since datalabels wont auto-adjust out of bounds labels, see codepen, unless I'm missing something?

edit: I should add that I'm aware of scale.y.grace, and applying a fixed value did the trick in our app for the last years (it wasn't perfect though, notably with unconventional screen ratios), but now we are adding several labels on top of bars (variable number), which is why I need a most efficient way to do so (which is basically a adjustScaleRange option for annotation labels).

[stockiNail]

@gterras I have played a bit with datalabels:

https://codepen.io/stockinail/pen/VYZQobQ?editors=1010

Why am I pushing to datalabels? Because datalabels is calculating the options in a different phase of annotation plugin, which is usually not related to the datasets and the data.

Let me know if could make sense for you the sample in codepen.

[gterras]

@stockiNail unfortunately "inner" labels don't work for us for several reasons: datasets labels are also displayed (which increases chances of overlap), above bars labels are easier to screen and also have a specific meaning in our case, and most importantly we now sometimes display more than one label:

See this codepen for a minimal setup!

Why am I pushing to datalabels? Because datalabels is calculating the options in a different phase of annotation plugin

I'm gonna look into it although annotation.label.yAdjust is really useful in the first place in my case, I think it would be a nice addition to be able to get the adjusted position or label.adjustScaleRange here (if it's even possible) but I understand it's a niche case.

[stockiNail]

@gterras apologize for my late reply but I was quite busy today on other stuff.

Here my result:

Codepen: https://codepen.io/stockinail/pen/jENgmxj

Some notes:

• I don't use your plugin but I added other plugin with only afterDataLimits hook to set the adjust max value to the scale.
• I use yAdjust option as scriptable options

The sample is based on the use case you shared but it should have any hard code conf (I set 5 ad padding between labels and between the stack bar and the first label but you can use whatever you want).

Feel free to play with codepen and let me know if make sense to you.

[gterras]

@stockiNail Thank you this is truly appreciated! I was working on this at the same time and thought I had made some progress but your solution looks very promising and way more elegant. I'll set this up in real conditions to check if this matches all requirement.

[gterras]

After first testing it appears to work remarkably well, even in extreme situations. The afterDataLimits hook is a perfect fit and labelHeight() is a really luxurious touch! Thanks for your first class involvment @stockiNail, that's a long standing bug closed on our side thanks to you!

[stockiNail]

@gterras glad to read it! Thank you! Nevertheless you caught an important point which is related to the adjustScaleRange options which is not taking care about the size of the annotation but only the values of the annotation. This is wrong for the annotations (or sub-annotations like labels on line) which are located by the center point of the annotation (for labels, point and polygon). Maybe an improvement could be thought even if it could not be doable.

The element (internal implementation of annotation) is calculating (and must be) after update phase, when the scales are consistent.

Another point. Be aware that the label height function you found in the codepen is working well for a label single line and single font. I think it could be helpful to expose the internal function of the plugin as helpers to whom needs it.