fix tooltip clipped on single-class chart

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

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. appendTo: 'body' escapes it entirely.
+            appendTo: 'body',
             formatter: (params: { name: string; value: number }[]) => {
                 const [{ name, value }] = params;
                 const percent = totalCount > 0 ? ` (${formatPercent(value / totalCount)})` : '';