elastic-charts icon indicating copy to clipboard operation
elastic-charts copied to clipboard

Have a displayValueSettings option to dynamically set the label's offset based on the label box

Open dej611 opened this issue 4 years ago • 2 comments

Is your feature request related to a problem? Please describe. Dealing with horizontal offset in horizontal bar charts can be challenging with different value label box sizes: a single offsetX size won't fits all possible values. While for vertical placement it is possible to build a sensible positional heuristic based on the fontSize parameter, with the horizontal version it is more tricky as it's not known the maximum value at init time.

Describe the solution you'd like It would be nice to have both offsetX and offsetY be of type function, so that the developer could return a dynamical value for each value label based on the valueBox to precisely position the label.

Stretch goal: it would be nice to have also an additional overrideChartMargins option, which automagically handles "outside" labels by overriding theme margins for the particular direction.

bar-chart-auto-margins

Describe alternatives you've considered Another approach would be to provide a fixed outside behaviour as in #784 and let the develop build offset tweaks on top of it. As for the additional overrideChartMargins option alternative, for horizontal chart, I think there's nothing I can think of for it.

Additional context This feature would make it possible to provide the correct behaviour for a outside label positioning as shown in the GIF above.

dej611 avatar Aug 24 '20 10:08 dej611

A possible solution to this could be also #856

dej611 avatar Oct 27 '20 09:10 dej611

I believe this would also resolve another issue mentioned internally where the bar values are hidden when constrained to the bar geometry regardless of the offsetY.

Lens offers an option for the values to be inside or outside of the bar. There is a request, see below, to allow showing the values inside whenever possible and outside otherwise.

Bar Chart - With Value Label ⋅ Storybook 2023-08-10 at 3 43 22 PM

See demo story here

nickofthyme avatar Aug 10 '23 20:08 nickofthyme