✨ Streamlit Elements - Build draggable and resizable dashboards with Material UI, Nivo charts, and more!

🧩 Streamlit Components
62

Hi @lkdd-ao , thanks for the great work, a newbie question, is there anyway to catch nivo chart click actions?

63

Based on my personal test results, currently testing radar charts is not possible. Callbacks can use the onClick parameter of nivo, which can return structures similar to {id:, value:, index:, date:}
For example, nivo. Bar

{
    id:             string | number,
    value:          number,
    formattedValue: string,
    index:          number,
    indexValue:     string | number,
    color:          string,
    // datum associated to the current index (raw data)
    data:           object
}
64

Hello
i want to view and html webpage inside a dashboard component.
how i can do this?

thanks

65

Is there a way to use plotly or other chart modules instead of nivo for the dash?

66

No, unable to load plot into elements

67

I installed streamlit-elements to make a dashboard.

But I don’t know how to use custom font with streamlit-elements.
Even if you apply a custom font to streamlit itself, it will not be reflected in streamlit-elements parts.

How can I use custom fonts with streamlit-elements?

68

image
Hello Gaku. Yokoyama, is this what you want?

import streamlit as st
from streamlit_elements import elements, mui

with elements(key='test'):
    mui.Typography(
        'Hello Gaku. Yokoyama, is this what you want?',
        sx={'font-family': 'serif'}  # 'fantasy' 'cursive'
        )
69

Thanks for the advice.
I tried that too.

‘serif’, ‘fantasy’ and ‘cursive’ seem to be set to be used in streamlit-elements (mui?).
I want to use a font found on goggle fonts.

Even if I add a font so that it can be used with streamlit, it seems that it is not visible in streamlit-elements (mui?).
I checked with chrome’s developer tool.

Please tell me how to use fonts found in goggle fonts in streamlit-elements (mui?).

70

35FF8668-3814-4384-8A68-1B676AAD4340
I understand, now it should be what you want. :blush:

import streamlit as st
from streamlit_elements import elements, mui, html

with elements(key='test'):
    with html.head():
        html.link(rel='stylesheet', href='https://fonts.googleapis.com/css?family=Sofia')
    mui.Typography(
        'Hello Gaku. Yokoyama, is this what you want?',
        sx={'font-family': 'Sofia', 'font-size': '22px'}  # 
        )
71

Wonderful.
Exactly what I wanted.

Thank you.

72

I want to develop this type of dashboards, Just want to see for reference. But I couldn’t able to open this link, Could you please help me?

73

Did you found a solution to use streamlit and other plotting packages like ploty or altair in the dashboard