elastic-charts
elastic-charts copied to clipboard
[partition] improve pie chart labelling
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)
### Tasks
- [ ] https://github.com/elastic/elastic-charts/issues/2195
- [ ] https://github.com/elastic/elastic-charts/issues/2197
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
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).
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
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
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?
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 🚀
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.