Expose chartRect to labelInterpolationFnc

[minht11]

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.

			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 })

chartist/src/axes/Axis.ts

Lines 64 to 75 in 71aff29

	createGridAndLabels(
	gridGroup: Svg,
	labelGroup: Svg,
	chartOptions: OptionsWithDefaults,
	eventEmitter: EventEmitter
	) {
	const axisOptions =
	this.units.pos === 'x' ? chartOptions.axisX : chartOptions.axisY;
	const projectedValues = this.ticks.map((tick, i) =>
	this.projectValue(tick, i)
	);
	const labelValues = this.ticks.map(axisOptions.labelInterpolationFnc);

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