feat: add legend to pie charts

[MikeShi42]

Add a legend panel alongside pie charts that maps each color to its corresponding label and value. The legend:

• Displays a colored swatch, label text, and numeric value for each slice
• Sits on the right side of the pie chart
• Scrolls vertically when there are many items
• Is capped at 40% width to preserve chart visibility
• Uses Mantine ScrollArea for smooth overflow handling
• Respects the chart's number format configuration

Resolves HDX-4136

Summary

Screenshots or video

How to test locally or on Vercel

References

• Linear Issue:
• Related PRs:

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
hyperdx-oss	Ready	Preview, Comment	May 2, 2026 0:33am

[changeset-bot]

⚠️ No Changeset found

Latest commit: 0c09070

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[MikeShi42]

@cursoragent the legend clips if there are a lot of groups, can you make it scrollable?

[cursor]

All 815 tests pass across all 15 test suites. The fix is working correctly.

Here's a summary of what was done:

Problem: The pie chart legend was clipping content when there are many groups because maxHeight: '100%' doesn't effectively constrain height in a flex container with align-items: center. The percentage height had no definite reference, so the ScrollArea's height was determined by its content rather than being capped.

Fix: Replaced maxHeight: '100%' with alignSelf: 'stretch' on the ScrollArea component. This gives the ScrollArea a definite height (matching the parent flex container's height) which enables the internal scroll mechanism of Mantine's ScrollArea to activate properly when content overflows.

Testing:

• All 8 pie chart unit tests pass (including a new test for the scrollable legend with 30 groups)
• All 815 unit tests pass across the project
• Lint and TypeScript type checking pass cleanly

  

[github-actions]

E2E Test Results

✅ All tests passed • 159 passed • 3 skipped • 1094s

Status	Count
✅ Passed	159
❌ Failed	0
⚠️ Flaky	4
⏭️ Skipped	3

Tests ran across 4 shards in parallel.

View full report →

[github-actions]

🔵 Tier 2 — Low Risk

Small, isolated change with no API route or data model modifications.

Why this tier:

• Standard feature/fix — introduces new logic or modifies core functionality

Review process: AI review + quick human skim (target: 5–15 min). Reviewer validates AI assessment and checks for domain-specific concerns.
SLA: Resolve within 4 business hours.

Stats

• Production files changed: 1
• Production lines changed: 59 (+ 51 in test files, excluded from tier calculation)
• Branch: cursor/add-pie-chart-legend-4d3a
• Author: MikeShi42

To override this classification, remove the review/tier-2 label and apply a different review/tier-* label. Manual overrides are preserved on subsequent pushes.

[github-actions]

PR Review

• ⚠️ Double truncation in legend label — truncateMiddle(entry.label, 40) is applied and then the result is passed to <Text truncate="end">. Only one approach is needed; CSS truncate="end" alone handles overflow gracefully and is consistent with how the rest of the UI works. The title={entry.label} tooltip is correct and sufficient for showing the full value.

• ⚠️ Non-unique key on legend items — key={entry.label} will cause React key collisions if the same label appears more than once (e.g. two slices with the same group value). Consider using the index as a fallback: key={entry.label + '-' + index}, matching how similar charts handle this.

• ✅ legendType="none" removal is safe — no <Legend /> component exists in the PieChart, so this prop had no effect; removing it is correct cleanup.

• ✅ Tests look solid — legend rendering, label presence, and scroll container styles are covered.