Donut summary metric value and label responsiveness

[marshallpete]

Provide a general summary of the feature here

The summary metric and value at the center of a donut chart should be responsive to the size of the donut hole.

🤔 Expected Behavior?

An algorithm should figure out target font size of both the metric value and the metric label based on the donut hole radius.

The font sizes for both the metric value and metric label should have max and min values.

Metric value (need to verify these look good once implemented)

• max: 72
• min: 18

Metric label (need to verify these look good once implemented)

• max: 48
• min: 12

If text is too wide to fit without overlapping the donut ring, it should be truncated.

If the inner radius of the donut is less than 100 (need to try this out and adjust as needed once implemented), then the metric value and metric label should not be drawn at all.

All the pixel values listed here are starting points. They will need to be adjusted once we have a basic implementation and can try out this feature.

💁 Possible Solution

If the inner radius is < 100px. Set the fontSize for the summary text to 0.

To figure out the available width for the text. you can use the pythagorean theorem (a^2 + b^2 = c^2).

Variables:
r = inner radius of the donut
h = font size + any offset from the circle center
w = available width for the text

Solution:
(2r)^2 = (2h)^2 + w^2
w = 2 * sqrt(r^2 - h^2)

Example:
Inner radius is 200px and the font height is 24 and the offset from center is 4.
w = 2 * sqrt(200^2 - (24 + 4)^2)
w = 396px

🔦 Context

If you have a larger donut chart, the summary number and value should be larger.
If you have a smaller donut chart, the summary number and value should be smaller.
If the donut is really small, there shouldn't be any summary info in the center.
If the donut is a displayed as a pie chart, we also shouldn't have any summary content in the center.

💻 Examples

No response

🧢 Your Company/Team

Adobe