fix tooltip clipped on single-class chart

[ikondrat]

What has changed and why?

Fixes LIG-10233: the popover/tooltip is not visible when hovering a class distribution bar chart that has a single class.

Root cause: the vertical BarChart only sets overflow-x-auto on its scroll container (no explicit overflow-y). Per the CSS overflow spec, once one axis gets a value other than visible, the browser forces the other axis to become auto too — so the container clips vertically as well, even though only horizontal scroll was intended. ECharts renders its tooltip by default as a DOM element positioned inside that same container. With a single class, the bar nearly fills the chart's height budget, so the tooltip pops up right at the top edge and gets clipped by that implicit vertical overflow. With several bars of varying height the effect is much less visible, which is why it surfaced specifically on the single-class case.

Fix: set appendToBody: true on the tooltip in buildEchartsOption.ts. This is a standard ECharts option that renders the tooltip as a position: fixed element attached to document.body, escaping any ancestor overflow containers. Histogram/buildHistogramOption.ts already works around a related-but-different issue with confine: false (keeps the tooltip from being repositioned back inside the viewport) — that option does not address clipping by an ancestor's overflow.

No dependencies added; single-file, ~9-line change.

How has it been tested?

• Manually traced the CSS overflow interaction and ECharts tooltip DOM placement against the BarChart.svelte / buildEchartsOption.ts source and the existing singleClass Storybook fixture (BarChart.stories.svelte → "Single class" story) that reproduces the reported layout.
• npx prettier --check on the changed file: clean.
• npx eslint on the changed file: clean.
• Could not run npm run test:unit for this file in this environment: it transitively imports the generated API client ($lib/api/lightly_studio_local), which is generated from a running backend (make start in lightly_studio) that wasn't available here. This is pre-existing environment setup, unrelated to the change itself.

Did you update CHANGELOG.md?

• Yes

Summary by CodeRabbit

• Bug Fixes
  • Fixed an issue where the Class distribution bar chart tooltip could be clipped when the chart had only one class.
  • Tooltips now render fully, including in constrained-height/overflow containers.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 462c127a-4285-47c8-a8f7-368a4ef1875d

📥 Commits

Reviewing files that changed from the base of the PR and between d54bc78 and 2beb8b0.

📒 Files selected for processing (1)

• CHANGELOG.md

---

📝 Walkthrough

Walkthrough

ECharts bar chart tooltips are appended to document.body to avoid chart-container clipping. The Unreleased changelog records the fix for single-class class distribution charts.

Changes

Bar chart tooltip overflow fix

Layer / File(s)	Summary
Tooltip rendering and release notes lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts, CHANGELOG.md	ECharts tooltips render in document.body, and the changelog documents the single-class tooltip clipping fix.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Possibly related PRs

• lightly-ai/lightly-studio#1618: Introduces the related BarChart tooltip behavior affected by this rendering change.

Suggested reviewers: igorsusmelj

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main fix: preventing a clipped tooltip on single-class bar charts.
Description check	✅ Passed	The description follows the template and includes the change summary, testing notes, and changelog update.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/lig-10233-barchart-tooltip-clipped

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[CLAassistant]

Thank you for your submission! We really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 2 committers have signed the CLA.

✅ ikondrat
❌ Klusha (OpenClaw agent)

---

Klusha (OpenClaw agent) seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
_{You have signed the CLA already but the status is still pending? Let us recheck it.}

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 9ba15059a1

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[ikondrat]

/review

[lightly-fast-track-bot]

❌ Fast Track: checks did not pass

Failed guardrails: frontend/complexity (Guardrail threw: Cannot find module 'eslint'
Require stack:

• /home/runner/work/lightly-studio/lightly-studio/lightly_studio_view/package.json), frontend/coverage ( [FAIL] lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts: coverage data not found)

Guardrail	Result	Message
dummy	✅	Always passes.
frontend/complexity	❌	Guardrail threw: Cannot find module 'eslint' Require stack: - /home/runner/work/lightly-studio/lightly-studio/lightly_studio_view/package.json
backend/complexity	✅	0 file(s) checked.
backend/coverage	✅	0 file(s) checked.
diff-size	✅	PR adds 2 line(s) (limit: 215).
frontend/coverage	❌	[FAIL] lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts: coverage data not found

_{Reflects 2beb8b0.}