Saving Altair Charts¶

Altair chart objects have a Chart.save() method which allows charts to be saved in a variety of formats.

JSON format¶

The fundamental chart representation output by Altair is a JSON string format; one of the core methods provided by Altair is Chart.to_json(), which returns a JSON string that represents the chart content. Additionally, you can save a chart to a JSON file using Chart.save(), by passing a filename with a .json extension.

For example, here we save a simple scatter-plot to JSON:

import altair as alt
from vega_datasets import data

chart = alt.Chart(data.cars.url).mark_point().encode(
    x='Horsepower:Q',
    y='Miles_per_Gallon:Q',
    color='Origin:N'
)

chart.save('chart.json')

The contents of the resulting file will look something like this:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
  "config": {
    "view": {
      "continuousHeight": 300,
      "continuousWidth": 400
    }
  },
  "data": {
    "url": "https://vega.github.io/vega-datasets/data/cars.json"
  },
  "encoding": {
    "color": {
      "field": "Origin",
      "type": "nominal"
    },
    "x": {
      "field": "Horsepower",
      "type": "quantitative"
    },
    "y": {
      "field": "Miles_per_Gallon",
      "type": "quantitative"
    }
  },
  "mark": "point"
}

This JSON can then be inserted into any web page using the vegaEmbed library.

HTML format¶

If you wish for Altair to take care of the HTML embedding for you, you can save a chart directly to an HTML file using

chart.save('chart.html')

This will create a simple HTML template page that loads Vega, Vega-Lite, and vegaEmbed, such that when opened in a browser the chart will be rendered.

For example, saving the above scatter-plot to HTML creates a file with the following contents, which can be opened and rendered in any modern javascript-enabled web browser:

<!DOCTYPE html>
<html>
<head>
  <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>
</head>
<body>
  <div id="vis"></div>
  <script type="text/javascript">
    var spec = {
      "$schema": "https://vega.github.io/schema/vega-lite/v4.json",
      "config": {
        "view": {
          "continuousHeight": 300,
          "continuousWidth": 400
        }
      },
      "data": {
        "url": "https://vega.github.io/vega-datasets/data/cars.json"
      },
      "encoding": {
        "color": {
          "field": "Origin",
          "type": "nominal"
        },
        "x": {
          "field": "Horsepower",
          "type": "quantitative"
        },
        "y": {
          "field": "Miles_per_Gallon",
          "type": "quantitative"
        }
      },
      "mark": "point"
    };
    var opt = {"renderer": "canvas", "actions": false};
    vegaEmbed("#vis", spec, opt);
  </script>
</body>
</html>

You can view the result here: chart.html.

By default, canvas is used for rendering the visualization in vegaEmbed. To change to svg rendering, use the embed_options as such:

chart.save('chart.html', embed_options={'renderer':'svg'})

Note

This is not the same as alt.renderers.enable('svg'), what renders the chart as a static svg image within a Jupyter notebook.

PNG, SVG, and PDF format¶

To save an Altair chart object as a PNG, SVG, or PDF image, you can use

chart.save('chart.png')
chart.save('chart.svg')
chart.save('chart.pdf')

However, saving these images requires some additional extensions to run the javascript code necessary to interpret the Vega-Lite specification and output it in the form of an image.

Altair can do this via the altair_saver package, which can be installed with:

$ conda install altair_saver

or:

$ pip install altair_saver

See the altair_saver documentation for information about additional installation requirements.

Figure Size/Resolution¶

When using chart.save() above, the resolution of the resulting PNG is controlled by the resolution of your screen. The easiest way to produce a higher-resolution PNG image is to scale the image to make it larger, and thus to contain more pixels at a given resolution.

This can be done with the scale_factor argument, which defaults to 1.0:

chart.save('chart.png', scale_factor=2.0)