carbon-design-system / carbon-charts

:bar_chart: :chart_with_upwards_trend:⠀Robust dataviz framework implemented using D3 & typescript
https://charts.carbondesignsystem.com
Apache License 2.0
912 stars 185 forks source link

[Enhancement]: Allow a threshold value for when to show % labels on a pie or donut chart #1692

Open Fryguy opened 11 months ago

Fryguy commented 11 months ago

Name

Jason Frey

Are you an IBM employee?

Summary

Allow for a configuration value for a threshold below which text values on a chart will not be presented.

Justification

Overlapping labels on a pie or donut chart has been brought up before^1 in a number of issues, but there are challenges to make them work correctly. For example:

chart

Since there isn't really a great way to present these, the general recommendation is to not use pie or donut charts for this, or to use workarounds like grouping all values under a certain amount into an "Other" category. In the case of our application, that is not an option, because the raw data comes from the customer, and they build a report through our reporting engine choosing the type of chart they would like to see. As such, neither of those workarounds work for us.

@theiliad and I spoke about this internally a few months back but I hadn't opened an issue for it.

Desired UX and success metrics

A threshold value that can be set where values below that number are not shown in pie and donut charts (perhaps other charts as well). The wedge would still be present, but there would be no Text value near it.

"Must have" functionality

A threshold value that can be set.

Specific timeline issues / requests

As soon as possible, if possible.

Available extra resources

The ManageIQ team has a UI team member (also an IBMer) that can assist with testing this out in our application.

What priority level would this issue be in your opinion?

P2

Fryguy commented 11 months ago

An alternative to not showing it at all is that in place of the raw text values, we can present a single <X% where X is the threshold number

Fryguy commented 11 months ago

Example of what "blank" would look like:

chart-blank

Example of what "<X%" might look like:

chart- 3