Creating Interactive Pie and Donut charts with Plotly

[n-srinidhi]

Hi!I am trying to create an interactive Pie chart using Plotly, since the Wide Pie Card did not meet my requirements. However, The Frame Card isn't generating, What are the different ways I can display Pie and Donut charts on Wave and keep them updated and interative?(By Interactive I mean Pop ups on click etc.)

df=q.client.frame_dict['least_traded']['overall']
fig = px.pie(df, values='Login', names='Symbol', title='Least Traded Symbols')
config = {
        'scrollZoom': False,
        'showLink': False,
        'displayModeBar': False
}
html = pio.to_html(fig, validate=False, include_plotlyjs='cdn', config=config)
# Render the plot as an HTML.
q.page['graph'] = ui.frame_card(box=ui.box(zone='middle',order=2), title='', content=html)

Layout is as follows:

meta=ui.meta_card(
    box='',
    title='Centra',
    stylesheet=ui.inline_stylesheet(style),
    #scripts=[ui.script('https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.3.0/chart.min.js')],
    #script=ui.inline_script(content=donut_script,targets=['myChart_do'],),
    layouts=[
        ui.layout(
            breakpoint='xs',
            zones=[
                ui.zone(name='header'),
                ui.zone(name='top',size='20%'),
                ui.zone(name='middle',size='20%'),
                ui.zone(name='bottom',direction=ui.ZoneDirection.ROW,size='60%',zones=[
                    ui.zone('bot_left',size='50%'),
                    ui.zone('bot_right',size='50%')
                ]),
                #ui.zone(name='footer')
                ]),
            ui.layout(
            breakpoint='xl',
            zones=[
                ui.zone(name='header'),
                ui.zone(name='top'),
                ui.zone(name='middle'),
                ui.zone(name='bottom',direction=ui.ZoneDirection.ROW,zones=[
                    ui.zone('bot_left',size='50%'),
                    ui.zone('bot_right',size='50%')
                ]),
                #ui.zone(name='footer')
                ])
            ])

df is a dataframe with this format:

[mturoci]

Are you able to render the plot outside of Wave? E.g. in a plain HTML or Jupyter notebook? Another guess is that there is not enough space in your middle zone so adding a fixed size could help. However, all these are just guesses unless you provide a runnable minimal repro code.

[n-srinidhi]

Thank you for your response. Isn't there a better or a simpler way to render donuts and pie charts? The Wide Pie Stat Card doesn't meet my requirements.

[mturoci]

There is currently not. In fact, we want to discourage the usage of pie / donut charts as these usually have worse UX than regular bar plots for example.

The Wide Pie Stat Card doesn't meet my requirements.

What are your requirements? Being able to handle the click event?

[n-srinidhi]

Click event yes, Plus it looks kind of flat on the dashboard.

[mturoci]

Both issues should be already addressed in our bar charts. However, if you still want those features on the pie chart, you can make a feature request and accompanying PR to show how you envision it.

[n-srinidhi]

Alright. Thanks a lot!