Is there a way to align the contents of content: string[] in label annotation?

[rambonette]

I'm trying to figure out a "responsive"/"scalable" way to display annotations with the same proportions in different resolutions.

My goal is to display a number + his unit label annotation on top of a point of a line-type chart. The numeric and units parts have different styling properties. My first approach was to create 2 label annotations: one for the numeric part and one for the unit part, each one with some padding properties in place to align the units part. The problem is that when I change screen resolution the chart canvas size changes and all the padding needs to be changed which leads to hack-y (and frankly not-scalable) scripts to try to maintain proportions.

My second (and current) approach, is to fit everything into one label. Since content:supports a string[] and also font: property supports Font[], this approach maintains alignments in every resolution, even when I update the font size based on the screen resolution. The "issue" is that the content array implicitly places each string in a new line. Is there a way to prevent this?

I'm open to "smarter" approaches too! Thanks in advance to everyone willing to help 😄
Here's a visual example of what I'm trying to achieve:

[stockiNail]

@rambonette as you recognized, the content, based on a string array, allows you to change the font for every single "line".
This could be an enhancement.

At the moment, I'm thinking the best way is to have 2 annotations. About the padding and responsive, you could set the padding (or other) options as scriptable and then calculate the amount of padding based on chart

[rambonette]

@stockiNail thanks for the super-fast reply!
I already tried to script the padding: property. I ended up with poor precision results and a lot of code to maintain. My approach was to find some kind of "growth"/"shrink" ratio based on the ctx.chart.width. I saw many users in the ChartJS's issue page using this technique to figure out the correct font size:

font: (ctx) => {
  const { width } = ctx.chart;
  const size = Math.round(width / 32);
  ...
}

So I figured the same proportion/ratio would work for keeping the padding: equally distanced, which semi-works but it's not precise. Can you point me in the right direction?

Also, I'd love to contribute to this project. Can you give me an idea about where you'd work to make the content: string[] default "alignment" behavior change?

[stockiNail]

Can you point me in the right direction?

well, I'll implement it as you described it, maybe setting the padding value based on the font size ranges.
Making an example, if font size >28 & <= 32, padding = 6, if font size >24 & <= 28, padding = 4 (just an example).
This is to avoid to calculate the ratio based on chart.width, which could return a strange or not consistent padding value.

Can you give me an idea about where you'd work to make the content: string[] default "alignment" behavior change?

In my opinion to do that, you need to add another options (boolean) which if set to true will render the array of strings in a unique row.
This will affect also the label annotation size, which is calculated based on the label content, font, padding and so on.

The first part to have a look is the following:

chartjs-plugin-annotation/src/types/label.js

Lines 32 to 51 in e94475c

	resolveElementProperties(chart, options) {
	let point;
	if (!isBoundToPoint(options)) {
	const {centerX, centerY} = resolveBoxProperties(chart, options);
	point = {x: centerX, y: centerY};
	} else {
	point = getChartPoint(chart, options);
	}
	const padding = toPadding(options.padding);
	const labelSize = measureLabelSize(chart.ctx, options);
	const boxSize = measureRect(point, labelSize, options, padding);
	return {
	initProperties: initAnimationProperties(chart, boxSize, options),
	pointX: point.x,
	pointY: point.y,
	...boxSize,
	rotation: options.rotation
	};
	}
	}

When you have a correct size calculation, you can address the draw part.

[rambonette]

@stockiNail thanks for the tips!
I'll try to work on the additional flag as soon as I have some spare time. Cheers 👋

[stockiNail]

I'm very busy as well.... take your time.