Skip to content

Responsive graphics in Altair

By default, Altair graphics are given a specific height and width. But you probably don't want that! You usually want a visualization to change sizes as the page gets smaller.

When creating your graphic in Altair, you'll need to set the width to be container. It might look like this:


Then when you embed your code into a web page, you'll want to tell the container it is in to expand as wide as possible using CSS:

.vega-container {
    width: 100%;