#1443·chartist

Expose chartRect to labelInterpolationFnc

Author: minht11Created Apr 13, 2025Updated Apr 13, 2025
Labelsenhancement

Would you like to work on this feature?

  • Check this if you would like to implement a PR, we are more than happy to help you go through the process.

What problem are you trying to solve?

I am trying to make sure my labels do not overlap, I have solution that almost works by calculating which labels to render and which not by calculating sizes.

typescript
			labelInterpolationFnc(value: string, index: number) {
				const itemsCount = chartData.value.labels.length
				const minSpaceRequiredForLabel = 40
				const itemWidthAvailable = width.value / itemsCount

				const itemWidth = Math.max(itemWidthAvailable, minSpaceRequiredForLabel)
				const maxVisibleItemsCount = Math.floor(width.value / itemWidth)

				// skip some labels if there is not enough space based on index
				if (index % Math.ceil(itemsCount / maxVisibleItemsCount) !== 0) {
					return ''
				}
				return value
			}

The problem I am experiencing is getting size of the chart. labelInterpolationFnc is called before any other events like draw, so I get flashes. It would be far easier if I could access chart sizes inside interpolation function.

Describe the solution you'd like

labelInterpolationFnc(value: string, index: number, { chartRect }) https://github.com/chartist-js/chartist/blob/71aff294ca1956c833808659bf65b4035f0a5335/src/axes/Axis.ts#L64-L75

Describe alternatives you've considered

Manually observing size with ResizeObserver, but that feels hacky to observe inner chart elements I do not control. Extra work/timing issues. Chart instance already has those values when labelInterpolationFnc is called.

Documentation, Adoption, Migration Strategy

n/a