Altair Line Chart Height Chops Off

Using Streamlit
1

Summary

Using the altair line chart to display x-axis dates and y-axis quantitative values. When altering the y-axis domain to a specific range, if the max value is too small, the line chart only will show the x-axis. Is there a method to create a standard scale based on range of domain min/max? Or is there a way to specify my own custom y-axis values?

Steps to reproduce

Code snippet:

import streamlit as st
import datetime
import pandas as pd
import altair as alt

y_list = [162, 162, 162, 162, 162, 162, 162, 162, 162, 96, 31, -33, -98, -163, -163, -163, -228]

x_list = [datetime.date(2023, 8, 20), datetime.date(2023, 8, 21), datetime.date(2023, 8, 22), datetime.date(2023, 8, 23), datetime.date(2023, 8, 24), datetime.date(2023, 8, 25), datetime.date(2023, 8, 26), datetime.date(2023, 8, 27), datetime.date(2023, 8, 28), datetime.date(2023, 8, 29), datetime.date(2023, 8, 30), datetime.date(2023, 8, 31), datetime.date(2023, 9, 1), datetime.date(2023, 9, 2), datetime.date(2023, 9, 3), datetime.date(2023, 9, 4), datetime.date(2023, 9, 5)]

line_data = pd.DataFrame({'x': x_list, 'y': y_list})

y_domain = [0, 162] # Only shows x-axis
# y_domain = [0, 400] # Better

line_chart = alt.Chart(line_data).mark_line().encode(
    x=alt.X('x:T', axis=alt.Axis(title='Date', grid=True, ticks=True, tickCount=12,
                                    format='%Y-%m-%d', labelAngle=-45, tickColor='pink', tickSize=10, tickWidth=3,)
                                    ),
    
    y=alt.Y('y:Q', axis=alt.Axis(title='Tiles'), 
            scale=alt.Scale(domain=y_domain)
            )
)

st.altair_chart(line_chart, use_container_width=True)

Expected behavior:

The y-axis should stretch to a standard scale of values between the defined domain min/max.

Debug info

  • Streamlit version: 1.24.0
  • Python version: 3.10
  • Using Conda
2

The main issue you’re facing might be related to the y-axis domain range [0, 162] being too small. This could cause the line chart to appear as just the x-axis when the data values are close to the x-axis.

import streamlit as st
import datetime
import pandas as pd
import altair as alt

y_list = [162, 162, 162, 162, 162, 162, 162, 162, 162, 96, 31, -33, -98, -163, -163, -163, -228]

x_list = [datetime.date(2023, 8, 20), datetime.date(2023, 8, 21), datetime.date(2023, 8, 22), datetime.date(2023, 8, 23), datetime.date(2023, 8, 24), datetime.date(2023, 8, 25), datetime.date(2023, 8, 26), datetime.date(2023, 8, 27), datetime.date(2023, 8, 28), datetime.date(2023, 8, 29), datetime.date(2023, 8, 30), datetime.date(2023, 8, 31), datetime.date(2023, 9, 1), datetime.date(2023, 9, 2), datetime.date(2023, 9, 3), datetime.date(2023, 9, 4), datetime.date(2023, 9, 5)]

line_data = pd.DataFrame({'x': x_list, 'y': y_list})

y_min = min(y_list)  # Adjust the y-axis minimum value
y_max = max(y_list)  # Adjust the y-axis maximum value
y_padding = (y_max - y_min) * 0.1  # Add some padding to the y-axis range

y_domain = [y_min - y_padding, y_max + y_padding]  # Adjusted y-axis domain range

line_chart = alt.Chart(line_data).mark_line().encode(
    x=alt.X('x:T', axis=alt.Axis(title='Date', grid=True, ticks=True, tickCount=8,
                                  format='%Y-%m-%d', labelAngle=-45, tickColor='pink', tickSize=10, tickWidth=3,)
                                  ),

    y=alt.Y('y:Q', axis=alt.Axis(title='Tiles'),
            scale=alt.Scale(domain=y_domain)
            )
)

st.altair_chart(line_chart, use_container_width=True)```
3

Is this due to having y_values that are below zero?

4

Yes, I have adjusted the value of y domain.

1 Like
5

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.