Bar Chart with Labels - label gets cut off in interactive mode

[brainbytes42]

What happened?

In PyCharm / Jupyter Notebook, if I plot a bar chart with according number-labels like in this example (but vertical) and make the chart interactive, the label of the highest bar (79) gets cut off. If I leave the call to .interactive() out, the label will be displayed.

import polars as pl
import altair as alt

print(f"Altair {alt.__version__}")

df = pl.DataFrame({"X": ["A", "B", "C"], "Y": [42, 21, 79]})

base = alt.Chart(df).encode(x='X', y='Y')
c = alt.layer(
    base.mark_bar().encode(color='X'),
    base.mark_text(dy=-2, baseline='bottom').encode(text='Y')
).properties(
    width=200,
    height=150,
    title=f'Hello World!',
)

# watch the label 79 at "C"-bar: it gets cut off if set to interactive!
alt.hconcat(*[c, c.interactive()])

On the right, the interactive chart with cut-off label, on the left non-interactive. Scrolling the interactive chart, the label will get revealed:

What would you like to happen instead?

In both modes, interactive and not, the chart should look initially the same and contain also the label of the tallest bar.

Or at least provide a way to scale the axis so that everything will be displayed, even if offset by dy/baseline. (I first hacked a workaround calculating a custom scale/domain of 105% of max value, but to really need this, would be very ugly IMHO.

Thanks!

(BTW: I tried to load the chart in Vega-Editor as proposed in the issue form, but the result was empty and showed an error. And I had to reload the Notebook in PyCharm after that... Well...)

Which version of Altair are you using?

5.5.0

[joelostblom]

I believe this is a design decision taken in Vega-Lite, which sets the clip property to true for charts with a parameter bound to the chart scales (which is what is called an "interactive" chart in Altair). Setting clip to true means that any elements (bars, text, etc) outside the chart area are hidden, which is why the text of the tallest bar does not show up. You can disable this behavior by setting clip=False inside mark_text() in your example; however you will notice that this behavior causes unwanted results when you zoom in on the chart (i.e. the text is still visible and pushes the title away). I've moved this issue to the Vega-Lite board for further discussion since any change would need to happen there, but I'm not sure there is anything that can be done easily to fix this (and I'm unsure what the fix should be; show initially and hide as soon as zooming starts?).

I'm not sure why the charts didn't show up for you in the Vega editor, they do for me and you can view them in this link: Open the Chart in the Vega Editor. If you click "Compiled Vega" at the bottom you will can see the difference with clip when you change the spec to include the scale-bound parameter or not, here is the full diff with the change in clip at the end:

@@ -4,6 +4,7 @@
   "padding": 5,
   "height": 150,
   "data": [
+    {"name": "param_1_store"},
     {
       "name": "data-ef1e0c3963ebcd89a72891f6dd11b565",
       "values": [{"X": "A", "Y": 42}, {"X": "B", "Y": 21}, {"X": "C", "Y": 79}]
@@ -37,7 +38,18 @@
       ]
     }
   ],
-  "signals": [{"name": "childWidth", "value": 200}],
+  "signals": [
+    {"name": "childWidth", "value": 200},
+    {
+      "name": "unit",
+      "value": {},
+      "on": [
+        {"events": "pointermove", "update": "isTuple(group()) ? group() : unit"}
+      ]
+    },
+    {"name": "param_1", "update": "{\"Y\": param_1_Y}"},
+    {"name": "param_1_Y"}
+  ],
   "layout": {"padding": 20, "bounds": "full", "align": "each"},
   "marks": [
     {
@@ -56,6 +68,7 @@
           "name": "concat_0_layer_0_marks",
           "type": "rect",
           "style": ["bar"],
+          "interactive": false,
           "from": {"data": "data_1"},
           "encode": {
             "update": {
@@ -75,6 +88,7 @@
           "name": "concat_0_layer_1_marks",
           "type": "text",
           "style": ["text"],
+          "interactive": false,
           "from": {"data": "data_2"},
           "encode": {
             "update": {
@@ -139,11 +153,124 @@
           "height": {"signal": "height"}
         }
       },
+      "signals": [
+        {
+          "name": "param_1_X",
+          "on": [
+            {
+              "events": [{"source": "view", "type": "dblclick"}],
+              "update": "null"
+            },
+            {
+              "events": {"signal": "param_1_translate_delta"},
+              "update": "panLinear(param_1_translate_anchor.extent_x, -param_1_translate_delta.x / childWidth)"
+            },
+            {
+              "events": {"signal": "param_1_zoom_delta"},
+              "update": "zoomLinear(domain(\"concat_1_x\"), param_1_zoom_anchor.x, param_1_zoom_delta)"
+            }
+          ]
+        },
+        {
+          "name": "param_1_Y",
+          "on": [
+            {
+              "events": [{"source": "view", "type": "dblclick"}],
+              "update": "null"
+            },
+            {
+              "events": {"signal": "param_1_translate_delta"},
+              "update": "panLinear(param_1_translate_anchor.extent_y, param_1_translate_delta.y / height)"
+            },
+            {
+              "events": {"signal": "param_1_zoom_delta"},
+              "update": "zoomLinear(domain(\"concat_1_y\"), param_1_zoom_anchor.y, param_1_zoom_delta)"
+            }
+          ],
+          "push": "outer"
+        },
+        {
+          "name": "param_1_tuple",
+          "on": [
+            {
+              "events": [{"signal": "param_1_X || param_1_Y"}],
+              "update": "param_1_X && param_1_Y ? {unit: \"view_1\", fields: param_1_tuple_fields, values: [param_1_X,param_1_Y]} : null"
+            }
+          ]
+        },
+        {
+          "name": "param_1_tuple_fields",
+          "value": [
+            {"field": "X", "channel": "x", "type": "E"},
+            {"field": "Y", "channel": "y", "type": "R"}
+          ]
+        },
+        {
+          "name": "param_1_translate_anchor",
+          "value": {},
+          "on": [
+            {
+              "events": [{"source": "scope", "type": "pointerdown"}],
+              "update": "{x: x(unit), y: y(unit), extent_x: domain(\"concat_1_x\"), extent_y: domain(\"concat_1_y\")}"
+            }
+          ]
+        },
+        {
+          "name": "param_1_translate_delta",
+          "value": {},
+          "on": [
+            {
+              "events": [
+                {
+                  "source": "window",
+                  "type": "pointermove",
+                  "consume": true,
+                  "between": [
+                    {"source": "scope", "type": "pointerdown"},
+                    {"source": "window", "type": "pointerup"}
+                  ]
+                }
+              ],
+              "update": "{x: param_1_translate_anchor.x - x(unit), y: param_1_translate_anchor.y - y(unit)}"
+            }
+          ]
+        },
+        {
+          "name": "param_1_zoom_anchor",
+          "on": [
+            {
+              "events": [{"source": "scope", "type": "wheel", "consume": true}],
+              "update": "{x: invert(\"concat_1_x\", x(unit)), y: invert(\"concat_1_y\", y(unit))}"
+            }
+          ]
+        },
+        {
+          "name": "param_1_zoom_delta",
+          "on": [
+            {
+              "events": [{"source": "scope", "type": "wheel", "consume": true}],
+              "force": true,
+              "update": "pow(1.001, event.deltaY * pow(16, event.deltaMode))"
+            }
+          ]
+        },
+        {
+          "name": "param_1_modify",
+          "on": [
+            {
+              "events": {"signal": "param_1_tuple"},
+              "update": "modify(\"param_1_store\", param_1_tuple, true)"
+            }
+          ]
+        }
+      ],
       "marks": [
         {
           "name": "view_1_marks",
           "type": "rect",
+          "clip": true,
           "style": ["bar"],
+          "interactive": true,
           "from": {"data": "data_1"},
           "encode": {
             "update": {
@@ -162,7 +289,9 @@
         {
           "name": "concat_1_layer_1_marks",
           "type": "text",
+          "clip": true,
           "style": ["text"],
+          "interactive": false,
           "from": {"data": "data_2"},
           "encode": {
             "update": {
@@ -276,6 +405,7 @@
           {"data": "data_2", "field": "Y"}
         ]
       },
+      "domainRaw": {"signal": "param_1[\"Y\"]"},
       "range": [{"signal": "height"}, 0],
       "nice": true,
       "zero": true