2 Apr 2021

Altair - Remove margin/padding on discrete X axis

One of the Altair charts on my Covid Vaccine Dashboards Streamlit app shows the % of first doses, but when I first created it there was some padding on the X axis that I wanted to remove. In this blog post we’ll learn how to do that.

Pre requisites

Let’s start by installing the following libraries:

pip install pandas altair altair_viewer

Next let’s import them, as shown below:

import pandas as pd
import altair as alt

Visualising % of first doses

Now we’re going to create a DataFrame that contains two columns - one contains the year and week number, the other the percentage of 1st doses administered.

df = pd.DataFrame({
    'dateWeek': ['2021-02', '2021-03', '2021-04', '2021-05', '2021-06', '2021-07', '2021-08', '2021-09', '2021-10', '2021-11', '2021-12', '2021-13'],
    'percentageFirstDose': [95.53223579198118, 99.05357715009595, 99.29015227195728, 99.3040526396809, 99.17822125167659, 97.17701207004448, 93.13782375333588, 86.52577108509273, 80.75997640077365, 84.62332165884469, 67.53684465759456, 46.83433617577248]
})
df

Table 1. Results
	dateWeek	percentageFirstDose
0	2021-02	95.532236
1	2021-03	99.053577
2	2021-04	99.290152
3	2021-05	99.304053
4	2021-06	99.178221
5	2021-07	97.177012
6	2021-08	93.137824
7	2021-09	86.525771
8	2021-10	80.759976
9	2021-11	84.623322
10	2021-12	67.536845
11	2021-13	46.834336

Next we’ll create a line chart using the Altair visualisation libray:

chart = (alt.Chart(df, padding={"left": 10, "top": 10, "right": 10, "bottom": 10})
        .mark_line(point=True)
        .encode(
            x=alt.X("dateWeek"),
            y=alt.Y('percentageFirstDose', axis=alt.Axis(title='% first dose')))
        .properties(title="% of first doses by week"))
chart.show()

Figure 1. Chart showing % of first doses by week

As we can see, this diagram has a padding/margin on either side of the X axis that I wanted to remove.

After trying out a lot of things that didn’t solve the problem, I came across a suggestion by Eitan Lees to set the Scale of the X axis. We can remove all padding by setting that value to 0, as shown below:

chart = (alt.Chart(df, padding={"left": 10, "top": 10, "right": 10, "bottom": 10})
        .mark_line(point=True)
        .encode(
            x=alt.X("dateWeek", scale=alt.Scale(padding=0)),
            y=alt.Y('percentageFirstDose', axis=alt.Axis(title='% first dose')))
        .properties(title="% of first doses by week"))
chart.show()

Figure 2. Chart showing % of first doses by week

Job done!

About the author

I'm currently working on short form content at ClickHouse. I publish short 5 minute videos showing how to solve data problems on YouTube @LearnDataWithMark. I previously worked on graph analytics at Neo4j, where I also co-authored the O'Reilly Graph Algorithms Book with Amy Hodler.