elastic / elastic-charts

https://elastic.github.io/elastic-charts/storybook
Other
366 stars 116 forks source link

[partition] improve pie chart labelling #2128

Open markov00 opened 1 year ago

markov00 commented 1 year ago

Even if I strongly believe in the goodness of the current implementation of labels in pie chart, I believe we need to make an effort to improve the followings:

### Tasks
- [ ] https://github.com/elastic/elastic-charts/issues/2195
- [ ] https://github.com/elastic/elastic-charts/issues/2197
gvnmagni commented 1 year ago

Note for the design team: given the potential complexity of very crowded piecharts, we should consider the possibility of forcing the presence of a legend instead of finding a visual way to make all labels to be placed within the chart's area.

This is not a final solution (there are tons or pros and cons), it is just a consideration that we should keep in mind

gvnmagni commented 11 months ago

A first round of tests and draft brought us to this series of improvements that we should consider.

1. Label style and structure In order to provide a better hierarchy of information the font weight have been switched, series name will be bolder while values will be lighter. Ideally, we would prefer using a two-lines structure but we know we have to deal with limited amount of space and, in case of need, there would be no problem in going on single line if that allows for the display of both elements (name and value).

Export

2. Colors Labels are currently full black which is not consistent with EUI while the EUI default color for texts is not accessible on top of all our charts colors. Therefore a compromise was needed, the new default color for labels would be colors.title [#1a1c21] which is accessible and not full black at the same time.

3. Positioning Labels would be always oriented in the same classic direction instead of following the slices. We know this would cause few labels to disappear but we would like to reach a much better consistency and overall appearance. All labels would be at the same distance from the center of the pie (still to be decided how we define this distance and which is the reference point of these labels) and we would use a single-line version

export 2

4. Labels disappearance We would like to switch from a "display all labels" approach to a "display all labels that could live comfortably" approach. This would cause few labels to disappear but one solution could be to force the presence of a legend in order to display all series values anyway. Note: we should consider what to do in case of report by users

nickofthyme commented 11 months ago

Great idea here @gvnmagni,

The positioning idea sounds good but to me this approach looks strange for slices >𝜋/4 (1/8 of a circle). Beyond this I think centering the label at the geometric centroid of the slice looks better. Did you consider this approach or have any options against this approach?

gvnmagni commented 11 months ago

I am completely open to any approach, I have no preference. We should see how it look like and proceed with the option we believe suits better. The closer we place labels to the outer limit of the piechart, the more space we have and we would fit more labels. We just have to calibrate that in order to balance the overall appearance with the need to display as many labels as possible

But yeah, there is no prior decision on that, I'd love to consider together different options 🚀

nickofthyme commented 11 months ago

We just have to calibrate that in order to balance the overall appearance

Exactly! And I think for slices over 𝜋, the centroid would tend to pull into the center of the pie. So agree, there is a might be several approaches based on the angle of the slice. We can discuss more when we start development.