Search code examples
pythonaltair

Altair line chart with last values labeled - how to stop overlapping labels?


How can I stop line labels from overlapping when the last values that the labels are pinned to are close together? I am using Altair 5.5.

import altair as alt
from vega_datasets import data

# Import example data
source = data.stocks()

# Create a common chart object
chart = alt.Chart(source).transform_filter(
    alt.datum.symbol != "IBM"  # A reducation of the dataset to clarify our example. Not required.
).encode(
    alt.Color("symbol").legend(None)
)

# Draw the line
line = chart.mark_line().encode(
    x="date:T",
    y="price:Q"
)

# Use the `argmax` aggregate to limit the dataset to the final value
label = chart.encode(
    x='max(date):T',
    y=alt.Y('price:Q').aggregate(argmax='date'),
    text='symbol'
)

# Create a text label
text = label.mark_text(align='left', dx=4)

# Create a circle annotation
circle = label.mark_circle()

# Draw the chart with all the layers combined
line + circle + text

Solution

  • It's currently not possible for altair to auto position labels so they are not overlapping. Their is a vega-lite issue here.

    If you're willing to manually specify the shifts you can do it like this

    import altair as alt
    from vega_datasets import data
    
    # Import example data
    source = data.stocks()
    
    
    # Create a common chart object
    chart = alt.Chart(
        source
        # ).transform_filter(
        # alt.datum.symbol != "IBM"  # A reducation of the dataset to clarify our example. Not required.
    ).encode(alt.Color("symbol").legend(None))
    
    # Draw the line
    line = chart.mark_line().encode(x="date:T", y="price:Q")
    
    # Use the `argmax` aggregate to limit the dataset to the final value
    label = chart.encode(
        x="max(date):T", y=alt.Y("price:Q").aggregate(argmax="date"), text="symbol"
    )
    
    offset = 8
    # Create a text label
    text = label.mark_text(
        align="left",
        dx=4,
        dy=alt.expr(
            alt.expr.if_(
                alt.datum.symbol == "IBM",
                offset,
                alt.expr.if_(alt.datum.symbol == "AMZN", -offset, 0),
            )
        ),
    )
    
    # Create a circle annotation
    circle = label.mark_circle()
    
    # Draw the chart with all the layers combined
    line + circle + text
    
    

    fixed plot