Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[partition] improve pie chart labelling #2128

Open
2 tasks
Tracked by #1902
markov00 opened this issue Aug 3, 2023 · 5 comments
Open
2 tasks
Tracked by #1902

[partition] improve pie chart labelling #2128

markov00 opened this issue Aug 3, 2023 · 5 comments
Assignees
Labels
design enhancement New feature or request :partition Partition/PieChart/Donut/Sunburst/Treemap chart related

Comments

@markov00
Copy link
Member

markov00 commented Aug 3, 2023

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:

  • find a way to show every label (inside or outside). Right now there are situation where outside labels are not represented.
  • by default don't rotate the labels inside the slices, if doesn't fit put the label outside
  • improve alignment of wrapped lines inside the slices (don't make them start from different positions where is not necessary)
Screenshot 2023-08-03 at 15 21 54

Tasks

  1. :partition bug
@markov00 markov00 added enhancement New feature or request :partition Partition/PieChart/Donut/Sunburst/Treemap chart related design needs design A design pass is required and not available labels Aug 3, 2023
@gvnmagni
Copy link

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
Copy link

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
Copy link
Collaborator

nickofthyme commented Sep 19, 2023

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
Copy link

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
Copy link
Collaborator

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.

@gvnmagni gvnmagni removed the needs design A design pass is required and not available label Apr 22, 2024
@gvnmagni gvnmagni self-assigned this May 30, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design enhancement New feature or request :partition Partition/PieChart/Donut/Sunburst/Treemap chart related
Projects
None yet
Development

No branches or pull requests

3 participants