Unexpected(?) difference in displaying go.Bar and go.Pie

Panel
1

I have an app which displays both go.Bar and go.Pie objects. However, go.Pie has less user options (see the pictures’ upper right corners below) than go.Bar and the title is small. The title seems to be also a bit off from the right position. Both plots are displayed in a FastListTemplate and the Python code for generating them is identical, only the argument for add_trace() differs. The go.Bar seems to be drawn on top of empty go.Figure and the go.Pie seems to cover the empty go.Figure completely so the grid is not visible in the background. If this is normal behaviour, then why doesn’t go.Pie offer the same options for the user? Instead, there’s only an option for downloading the chart.

go.Bar
go.Bar1095×651 9.05 KB

go.Pie
go.Pie1050×667 38.2 KB

Code snippets:

case 'Waste percents':
            for i, value in enumerate(result.columns):
                fig.add_trace(
                    Bar(
                        y=[''], 
                        x=[result.iloc[0,i]], 
                        name=value, 
                        orientation='h'
                    )
                )
            fig.update_layout(
                title='Hävikin osuus valmistetusta ruoasta prosentteina',
                xaxis_title='%',
                barmode='stack'
            )
            fig.update_traces(hovertemplate='%{y:.1f}%{x}')

case 'Service line product waste':
            fig.add_trace(
                Pie(
                    labels=result.columns,
                    values=result.iloc[0,:].values.tolist(),
                    #title='Linjastohävikin koostumus',
                    title=dict(
                        text='Linjastohävikin koostumus',
                        position='top center'
                    ),
                    hole=0.3, 
                    textposition='inside',
                    hovertemplate='%{label}<br>%{value:.1f}%<extra></extra>'
                )
            )
1 Like
2

Hi @jvkloc

Could you please share a minimum, reproducible example such that we can be sure we can replicate what you see? Thanks.

3

Here is a minimal example.

from panel import Column, extension
from panel.template import FastListTemplate
from plotly.graph_objects import Bar, Figure, Pie

def bar_chart() -> Figure:
    fig = Figure()    
    names = ['name_1', 'name_2']
    values = [[8.5], [1.5]]
    for i, name in enumerate(names):
        fig.add_trace(
            Bar(
                y=[''], 
                x=values[i], 
                name=name, 
                orientation='h'
            )
        )
    fig.update_layout(
        title='Minimal example go.Bar',
        xaxis_title='x_axis',
        barmode='stack'
    )
    fig.update_traces(hovertemplate='%{y:.1f}%{x}')
    return fig


def pie_chart() -> Figure:
    fig = Figure()
    names = ['name_1', 'name_2', 'name_3']
    values = [3, 2, 5]
    fig.add_trace(
        Pie(
            labels=names,
            values=values,
            title=dict(
                text='Minimal go.Pie',
                position='top left'
            ),
            hole=0.3, 
            textposition='inside',
            hovertemplate='%{label}<br>%{value:.1f}%<extra></extra>'
        )
    )     
    return fig


def main() -> None:
    extension('plotly')
    template: FastListTemplate = FastListTemplate(
        title='Minimal example',
        main=Column(bar_chart(), pie_chart())
    )
    template.show()

if __name__ == '__main__':
    main()

EDIT: this serves also as an example of not being ale to trigger dark mode. In this one, too, the dark mode button seems to refresh the page but doesn’t change the theme.