From 6464ca51ee255c9027abf130631d7a3e719044bb Mon Sep 17 00:00:00 2001 From: "Klusha (OpenClaw agent)" Date: Tue, 21 Jul 2026 10:53:04 +0000 Subject: [PATCH 1/4] fix(BarChart): tooltip clipped on single-class chart (LIG-10233) Vertical BarChart only sets overflow-x-auto on its scroll container. Per the CSS overflow spec, an overflow-x other than 'visible' forces overflow-y to also become 'auto', so the container clips vertically too. With few bars (e.g. a single class) the bar nearly fills the height budget and ECharts' default in-container tooltip renders near the top edge, getting clipped by that implicit vertical overflow. Fix: set appendToBody on the tooltip so ECharts renders it as a position:fixed element attached to document.body, escaping any ancestor overflow containers. --- .../src/lib/components/BarChart/buildEchartsOption.ts | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts b/lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts index c9ae91f98..07f64e9cc 100644 --- a/lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts +++ b/lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts @@ -73,6 +73,15 @@ export function buildEchartsOption( tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, + // Render the tooltip in `document.body` instead of inside the chart's + // own overflow container. Vertical bars only set `overflow-x-auto` + // on that container, but per the CSS overflow spec an `overflow-x` + // other than `visible` forces the browser to also treat `overflow-y` + // as `auto` — so the container clips vertically too. With few bars + // (e.g. a single class) the bar nearly fills the height budget and + // the tooltip renders right at the top edge, getting clipped by that + // implicit vertical overflow. appendToBody escapes it entirely. + appendToBody: true, formatter: (params: { name: string; value: number }[]) => { const [{ name, value }] = params; const percent = totalCount > 0 ? ` (${formatPercent(value / totalCount)})` : ''; From 9ba15059a18abb8993f366309d258eed04c888a6 Mon Sep 17 00:00:00 2001 From: Klusha Date: Tue, 21 Jul 2026 11:16:37 +0000 Subject: [PATCH 2/4] docs: add CHANGELOG entry for LIG-10233 tooltip fix --- CHANGELOG.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index ebb8176aa..f93b4478e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed +- Class distribution bar chart: tooltip was clipped when hovering a chart with a single class. + ### Security ## \[1.0.3\] - 2026-07-10 From c7a5330f5af742dcaf6c5e8796a46028a52bfcad Mon Sep 17 00:00:00 2001 From: Klusha Date: Tue, 21 Jul 2026 12:40:44 +0000 Subject: [PATCH 3/4] fix(BarChart): use appendTo: 'body' instead of deprecated appendToBody Addresses review feedback from chatgpt-codex-connector on PR #1705: ECharts 6.1.0 (locked frontend dependency) marks appendToBody as deprecated in favor of appendTo: 'body'. Same behavior, non-deprecated API. --- .../src/lib/components/BarChart/buildEchartsOption.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts b/lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts index 07f64e9cc..c69cea96f 100644 --- a/lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts +++ b/lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts @@ -80,8 +80,8 @@ export function buildEchartsOption( // as `auto` — so the container clips vertically too. With few bars // (e.g. a single class) the bar nearly fills the height budget and // the tooltip renders right at the top edge, getting clipped by that - // implicit vertical overflow. appendToBody escapes it entirely. - appendToBody: true, + // implicit vertical overflow. appendTo: 'body' escapes it entirely. + appendTo: 'body', formatter: (params: { name: string; value: number }[]) => { const [{ name, value }] = params; const percent = totalCount > 0 ? ` (${formatPercent(value / totalCount)})` : ''; From d54bc78ee7d46d3b005a87782afb33cea78a0f1a Mon Sep 17 00:00:00 2001 From: Kondrat Shmoylov Date: Tue, 21 Jul 2026 15:08:43 +0200 Subject: [PATCH 4/4] Update buildEchartsOption.ts --- .../src/lib/components/BarChart/buildEchartsOption.ts | 8 -------- 1 file changed, 8 deletions(-) diff --git a/lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts b/lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts index c69cea96f..fb344099b 100644 --- a/lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts +++ b/lightly_studio_view/src/lib/components/BarChart/buildEchartsOption.ts @@ -73,14 +73,6 @@ export function buildEchartsOption( tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' }, - // Render the tooltip in `document.body` instead of inside the chart's - // own overflow container. Vertical bars only set `overflow-x-auto` - // on that container, but per the CSS overflow spec an `overflow-x` - // other than `visible` forces the browser to also treat `overflow-y` - // as `auto` — so the container clips vertically too. With few bars - // (e.g. a single class) the bar nearly fills the height budget and - // the tooltip renders right at the top edge, getting clipped by that - // implicit vertical overflow. appendTo: 'body' escapes it entirely. appendTo: 'body', formatter: (params: { name: string; value: number }[]) => { const [{ name, value }] = params;