Donut / Pie chart: Hide labels? Hide labels based on % of the pie/donut filled?

[tony]

Code sandbox:

• Donut: https://codesandbox.io/s/carbon-components-hide-labels-donut-0mngj?file=/src/index.js
• Pie: https://codesandbox.io/s/carbon-components-hide-labels-pie-9o3h6?file=/src/index.js

I am submitting a...

• [x] Feature request
• [x] Design defect
• [ ] Source code defect
• [ ] Demo/documentation defect
• [ ] Other

charts version: 0.41.14

Issue description

Steps to produce the issue

Current behavior

Attempting to hide:

      pie: {
        labels: {
          formatter: () => void 0
        }
      },

PieChart with pie.legends zero'd out: https://codesandbox.io/s/carbon-components-hide-labels-pie-void-7yxzs?file=/src/index.js

DonutChart With .pie.legends set to void: https://codesandbox.io/s/carbon-components-hide-labels-donut-void-j2tc6

Expected behavior

Would hope for some way to hide labels outright

Or a way to hide conditionally based on % of the graph/circle filled

Screenshot or recording

[tony]

Edited above:

I think this needs design advice since this is how to handle the layout of data when there's not enough room for it.

[natashadecoste]

@jeanservaas I can add a configuration to enable/disable the labels (and then not draw any callouts either). Is there more design explorations that need to be done for conditional rendering of callouts? There are some problems with what to do with slices that are too small for labels to not collide

[jeanservaas]

@natashadecoste Sorry, I know this issue has been kicking around for a while.

I would definitely add a config to enable/disable the labels in the meantime.

Beyond that, I think we need to label smaller slices either outside of the chart or in a tooltip with a table... and then just disable those labels. But I'm not too familiar with conventions around this... so yes, it would take a little research and some quick design explorations I think to address properly.

I also consulted @shixiedesign and @mjabbink to see what they say.

[kavyanekkalapu]

@natashadecoste @jeanservaas Hi, I am one of the ui dev using these charts, I am not sure who is fixing this issue but it is exactly what we are seeing in our project with pie and donut charts, Is there a way to hide labels for smaller percentages (<4%) and display percentages in tooltip? Right now tooltips are not displaying %. Something like first chart in below screenshot (Second one is carbon chart with same values), thank you.

Example:

[shawnmgoulet]

@natashadecoste this issue has been around for some time now, but wanted to check in on the suggested approach. We have the same issue as has been discussed.