Changing the size of Altair plot renders in Jupyter notebook

Question

I am rendering Altair plots in Jupyter notebook (not JupyterLab) using:

alt.renderers.enable('notebook')

And everything works fine, however the plots are often small relative to the width of my Jupyter notebook.

If I expand the width of the notebook to 100% of my screen using:

from IPython.core.display import display, HTML
display(HTML("<style>.container { width:100% !important; }</style>"))

Altair plots don't scale accordingly (they stay the same size).

Is there any way to scale the size of rendered plots (i.e., make them bigger) while still keeping them within the notebook?

Thanks!

Lacerated

Answer 1

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
)

Chemoprophylaxis

Answer 2

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%;
}

Tattered

Answer 3

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.

Cowman