Plotting

Python has a large collection of plotting libraries and while any content that rendens in a Jupyter Notebooks will render in Jupyter-flex dashboards there are some things to consider for plots to look the best they can.

Interactive (JS) libraries

Since Jupyter-flex dashboards have a web frontend, either static .html files or a running webserver, in general any library that outputs a web based plot will look better, this includes: Altair, plotly, Bokeh and bqplot.

Responsive

For plots to look great in flex dashboards they should be responsive, that means that they should ocupy all the space that the parent html components has instead of having a static width and heigh (e.g. 500px x 500px).

A responsive behaviour is usually not the default for most plotting libraries and but it's very easy to change this. The way to do this differs from library to library here are some tips to make this happen in the libraries that we test more.

Note that Jupyter-flex includes some CSS and JS code to make these popular plotting libraries behave better in a dashboard scenario.

Altair

Starting from Altair version 4.0 it's possible to make a responsive chart width and height, one can do that by setting the width and height properties to "container".

For example take this example:

In [1]:
import altair as alt
from vega_datasets import data
In [2]:
source = data.cars()

plot = alt.Chart(source).mark_circle(size=60).encode(
    x='Horsepower',
    y='Miles_per_Gallon',
    color='Origin',
    tooltip=['Name', 'Origin', 'Horsepower', 'Miles_per_Gallon']
)
In [3]:
plot
Out[3]:

If we tag the previous cell with chart then the size will be static and not responsive, to make it responsive we just add a bit of code:

In [4]:
chart
plot.properties(
    width='container',
    height='container'
)
Out[4]: