Plotly chart in Voila rendering in single line

Question

I've been toying with some graphs in a notebook and use Voila to visualise them properly for presentations in an HTML rendering. Usually, everything went fine (after lots of tinkering). But now I've encountered a strange but:

When displaying a plotly chart, it renders in a single line in Voila. I've created what I believe to be a minimal example.

Here's the code:

import pandas as pd
import ipywidgets as widgets
pd.options.plotting.backend = "plotly"
def draw(b):
    df = pd.DataFrame({'team': ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'],
                   'points': [18, 22, 19, 14, 14, 11, 20, 28]})
    with output:
        fig2 = df.plot(kind='line', x='team', y='points')
        fig2.show()
button = widgets.Button(description="Draw")
display(button)
output = widgets.Output()
print("Line above output")
display(output)
print("Line below output")
button.on_click(draw)

Here's what it looks like in Notebook (and should look like):

Here is what it looks like in the browser:

No idea what is happening here. Not even a lead to go on.

Answer 1

I think it just an html rendering problem that you can solve by setting the following options:

import plotly.io as pio

# the rest of your code

with output:
        fig2 = df.plot(kind='line', x='team', y='points')
        html_chart = pio.to_html(fig2) 
        display(widgets.HTML(html_chart))