Search code examples
altair

How to avoid points being cut off at the edges of the chart

Using the default configuration, points in Altair plots are sometimes cut off at the edges of a chart (here left and top): Example Altair chart

This is the code that produces the chart:

df = pd.DataFrame({
    "X": [0.01, 0.05, 0.1, 3.0, 3.1, 3.2],
    "Y": [1.0, 1.1, 1.2, 2.9, 2.98, 2.99]
})
chart = alt.Chart(
    df,
).mark_point().encode(
    x='X',
    y='Y',
).properties(
    width=400,
    height=350
).interactive()
chart

I have read about clip, clamp and padding, but they do not fit my needs. With clip users of the chart (when it is interactive) can move the plot outside the chart window, which I would like to prevent. clamp is a different form of visualization, also not what I want here. And with padding I get inconsistent results with the data points then sometimes being very far away from the axes.

So my question is, how can I globally configure Altair to always show all points in full? Hopefully, there is a way to achieve this that does not require manually setting the scale domains every time. Thanks a lot for your help.

Kind regards,
Axel

Solution

  • If you remove .interactive I believe you would get what you want:

    enter image description here

    If you click the three dot action menu on the two charts (with and without "interactive") and select to view it in the Vega editor, you will see that interactive adds this section:

      "params": [
    {
      "name": "param_2",
      "select": {"type": "interval", "encodings": ["x", "y"]},
      "bind": "scales"
    }
  ],

    There is nothing here that is controlled by altair but rather by Vega-Lite, so I would raise an issue there to ask why the addition of params (or maybe specifically scale-bound params), changes the display of the points