Changing the size of Altair plot renders in Jupyter notebook

There is no way to automatically scale Altair charts to the size of the browser window. The size of charts is controlled by the view configuration and/or the width and height properties in the chart specification; for example:

import altair as alt
from vega_datasets import data
cars = data.cars()

alt.Chart(cars).mark_point().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin'
).properties(
    width=800,
    height=300
)

You can use the same method you use to scale the notebook, but applied to altair chart.

from IPython.display import HTML,display
css_str = '<style>.chart-wrapper canvas {width:90% !important}</style>'
display(HTML(css_str))

A few gotchya's:

• The CSS Selector is from inspecting the elements, not by spec, so it will break
• The Height does not scale with width. You'll need. a reasonable value for that.

Just logging this here as I had the same issue and found a solution:

As per the Vega documentation, you can set width to container, which will adjust the chart size to its surrounding HTML container.

import altair as alt
from vega_datasets import data
cars = data.cars()

alt.Chart(cars).mark_point().encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin'
).properties(
    width='container'
)

N.b.: This does not work with the standard alt.Chart.save method, as the built-in HTML template does not anticipate responsive styling.

Here's the relevant snippets of how I got it to run (in a standard Flask/Jinja2 stack - you can adapt this to run in a Jupyter notebook using IPython.display.display and IPython.display.HTML):

app.py

Serve the chart by rendering an HTML template, containing the chart as a JSON object which represents the Vega spec (Vega is the underlying JavaScript library that renders Altair charts).

@app.route('/chart')
def chart():
    the_chart = alt.Chart(...).properties(width='container')
    return render_template('chart.html.jinja2', chart=the_chart.to_json())

chart.html.jinja2

Template to embed a chart

...

<!-- anchor point: this is an empty `div` that will be filled with the chart -->
<div id="chart_pl" class="altair"></div>

...

<!-- import vega libraries -->
<script src="https://cdn.jsdelivr.net/npm/vega@5"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-lite@4"></script>
<script src="https://cdn.jsdelivr.net/npm/vega-embed@6"></script>

<!-- render the chart with vega -->
<script type="text/javascript">
    <!-- the JSON object needs to mark as `safe` so it doesn't get HTML-quoted -->
    var spec = {{ chart|safe }};
    <!-- some vega options -->
    var opt = {"renderer": "canvas", "actions": false};
    <!-- embed the chart into div with ID "chart" -->
    vegaEmbed("#chart_pl", spec, opt);
</script>

style.css

Ensure that the div we marked as class="altair" gets sized appropriately

.altair {
    width: 100%;
}