Donut chart issues with empty segments

[kylekarpack]

Provide a general summary of the issue here

When rendering segment labels on a donut chart, there are several issues if all segments have a value of 0.

🤔 Expected Behavior?

1. No NaNs displayed
2. No overlapping labels (or potentially no labels shown at all)
3. Potentially some sort of fallback behavior

😯 Current Behavior

Several rendering problems with the chart:

💁 Possible Solution

Falling back to a "No data found" label would be fine:

Alternatively, an empty donut chart would work nicely:

🔦 Context

No response

🖥️ Steps to Reproduce

Visit the CodeSandbox here

Ensure that all data points have a value of 0, and show percentage and value labels on a donut chart:

import {
  Chart,
  ChartPopover,
  ChartTooltip,
  Legend,
} from "@adobe/react-spectrum-charts";
import {
  Donut,
  DonutSummary,
  SegmentLabel,
} from "@adobe/react-spectrum-charts/rc";
import { defaultTheme, Provider } from "@adobe/react-spectrum";

export default function App() {
  return (
    <Provider theme={defaultTheme} height="100%">
      <div className="App">
        <Chart
          colorScheme="dark"
          data={[
            {
              browser: "Chrome",
              count: 0,
            },
            {
              browser: "Firefox",
              count: 0,
            },
          ]}
          height={350}
          width={400}
        >
          <Donut color="browser" holeRatio={0.8} metric="count">
            <ChartTooltip />
            <ChartPopover width="auto" />
            <DonutSummary label="Visitors" />
            <SegmentLabel percent value />
          </Donut>
          <Legend highlight isToggleable position="right" title="Browsers" />
        </Chart>
      </div>
    </Provider>
  );
}

Version

1.11.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

AJO B2B

🕷 Tracking Issue

No response

[marshallpete]

The proposed solution is to use a light gray (gray-200 or similar) ring as the donut and to display the value in the center as 0. Also we will drop all direct labels.

[Sid-80]

@marshallpete @kylekarpack I am willing to work on this issue!

[marshallpete]

@Sid-80 sounds good. Please review the Contribution Guidelines and the Developer Docs before you get started.