Using Altair in a Dash project - error running the app

Question

I am facing an issue using Altair in a Dash project.

I am building an app using Dash. The plot to display on it is generated using Altair instead of Plotly-Dash. When I run the app I am receiving an error with the following message:

dash.exceptions.InvalidCallbackReturnValue: The callback for `[<Output `my-graph.figure`>, <Output `download2.data`>]`
returned a value having type `tuple`
which is not JSON serializable.

(This error originated from the built-in JavaScript code that runs Dash apps. Click to see the full stack trace or open your browser's console.)
TypeError: Cannot read properties of null (reading 'layout')

In general, Dash properties can only be dash components, strings, dictionaries, numbers, None, or lists of those.

By the last part, I think this issue is being generated by Altair plot.

So my question is: how can I solve this? I prefer to use Altair instead of Plotly.

Do any of you face a similar issue?

Answer 1

You can see detailed examples for how to combine Altair with different dashboarding frameworks in my answer here . For Dash, there is no official support for and Altair plot class, but you can use an iframe to render your plot:

import altair as alt
from vega_datasets import data
import dash
import dash_html_components as html
import dash_core_components as dcc
from dash.dependencies import Input, Output


cars = data.cars()

# Setup app and layout/frontend
app = dash.Dash(__name__,  external_stylesheets=['https://codepen.io/chriddyp/pen/bWLwgP.css'])
app.layout = html.Div([
    dcc.Dropdown(
        id='x_column-widget',
        value='Miles_per_Gallon',  # REQUIRED to show the plot on the first page load
        options=[{'label': col, 'value': col} for col in cars.columns]),
    html.Iframe(
        id='scatter',
        style={'border-width': '0', 'width': '100%', 'height': '400px'})])

# Set up callbacks/backend
@app.callback(
    Output('scatter', 'srcDoc'),
    Input('x_column-widget', 'value'))
def plot_altair(x_column):
    chart = alt.Chart(cars).mark_point().encode(
        x=x_column,
        y='Displacement',
        tooltip='Horsepower').interactive()
    return chart.to_html()

if __name__ == '__main__':
    app.run_server(debug=True)