Expose chartRect to labelInterpolationFnc
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 })
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
Source: chartist-js/chartist