Skip to main content

Streamlit Dashboard with Vizly

You have a Streamlit app and you need charts. With Vizly, you pass DataFrames directly to chart constructors and render them with a single function call. No messing with Plotly figure objects, no Altair spec wrangling, no custom HTML iframes.

Single chart​

One chart in one iframe. Simple. In v1.0.1, pass data as a pd.DataFrame or use dict types (list[dict], dict[list]) directly.

import streamlit as st
import vizly as vz

vz.set_theme("corporate")

data = [
    {'date': '2026-01-01', 'revenue': 42, 'cost': 18},
    {'date': '2026-01-02', 'revenue': 48, 'cost': 20},
    {'date': '2026-01-03', 'revenue': 45, 'cost': 19},
]
chart = vz.line(data, x='date', y=['revenue', 'cost'], title='Revenue vs cost')
st_vizly(chart, height=420, events=True)

Set events=True on a chart to enable click payloads ({name, value, seriesName}) emitted via postMessage to the parent Streamlit app.

Multi-chart dashboard (one iframe, one ECharts load)​

For dashboards with multiple charts, use st_dashboard() or pass a list to st_vizly(). ECharts loads once, not once per chart.

import streamlit as st
import pandas as pd
import vizly as vz
from vizly.integrations.streamlit import st_vizly, st_dashboard

vz.set_theme("corporate")

# Datasets
df_line = pd.DataFrame({
    'date': ['2026-01-01', '2026-01-02', '2026-01-03', '2026-01-04', '2026-01-05', 
             '2026-01-06', '2026-01-07', '2026-01-08', '2026-01-09', '2026-01-10',
             '2026-01-11', '2026-01-12', '2026-01-13', '2026-01-14'],
    'revenue': [42, 48, 45, 61, 58, 72, 68, 81, 76, 90, 84, 95, 88, 102],
    'cost': [18, 20, 19, 24, 22, 28, 26, 31, 29, 34, 32, 37, 35, 40],
})
df_pie = pd.DataFrame({
    'name': ['Enterprise', 'Mid-market', 'SMB', 'Startup', 'Partner'],
    'value': [34, 26, 18, 12, 10],
})
df_bar = pd.DataFrame({
    'region': ['Northeast', 'Southeast', 'Midwest', 'Southwest', 'West', 'Canada'],
    'sales': [86, 64, 71, 58, 93, 47],
})

# Build charts
c1 = vz.line(df_line, x='date', y=['revenue', 'cost'], title='Revenue vs cost')
c2 = vz.pie(df_pie, names='name', values='value', title='Segment mix')
c3 = vz.bar(df_bar, x='region', y='sales', title='Sales by region')

# Render all in one iframe
st_dashboard([c1, c2, c3], height=900)

Tabbed dashboard​

Use vz.tab() to create a compact tabbed interface within your dashboard.

df_bar = pd.DataFrame({
    'region': ['Northeast', 'Southeast', 'Midwest', 'Southwest', 'West', 'Canada'],
    'sales': [86, 64, 71, 58, 93, 47],
})
df_pie = pd.DataFrame({
    'name': ['Enterprise', 'Mid-market', 'SMB', 'Startup', 'Partner'],
    'value': [34, 26, 18, 12, 10],
})
df_radar = pd.DataFrame({
    'name': ['Atlas', 'Nova', 'Pulse'],
    'speed': [88, 72, 95],
    'power': [76, 91, 68],
    'range': [81, 64, 87],
    'accuracy': [90, 85, 78],
    'efficiency': [70, 88, 82],
})

chart = vz.tab(charts=[
    vz.bar(df_bar, x='region', y='sales', title='Sales by region'),
    vz.pie(df_pie, names='name', values='value', title='Segment mix'),
    vz.radar(df_radar, names='name', values=['speed', 'power', 'range', 'accuracy', 'efficiency'],
             title='Capability radar'),
], title="Dashboard tabs")
st_vizly(chart, height=500)

Timeline / animated dashboard​

Walk through time periods with animated transitions between snapshots.

df = pd.DataFrame({
    'date': ['2026-01-01', '2026-01-02', '2026-01-03', '2026-01-04', '2026-01-05',
             '2026-01-06', '2026-01-07', '2026-01-08', '2026-01-09', '2026-01-10',
             '2026-01-11', '2026-01-12', '2026-01-13', '2026-01-14'],
    'revenue': [42, 48, 45, 61, 58, 72, 68, 81, 76, 90, 84, 95, 88, 102],
    'cost': [18, 20, 19, 24, 22, 28, 26, 31, 29, 34, 32, 37, 35, 40],
})

chart = vz.timeline(charts=[
    vz.line(df, x="date", y="revenue", title="Revenue"),
    vz.line(df, x="date", y="cost", title="Cost"),
    vz.mix(df, x="date", bar="cost", line="revenue", title="Combined"),
], title="Timeline dashboard")
st_vizly(chart, height=500)

Pro tips​

TipDetails
One iframe for all chartsUse st_dashboard() or pass a list to st_vizly(). Each st_vizly(chart) call creates a separate Streamlit iframe with its own ECharts copy (~1MB per iframe).
Set theme onceCall vz.set_theme("corporate") at the top of your script. All subsequent charts inherit it.
Grid layoutUse vz.grid() to arrange charts in a fixed grid within a single chart container.
Per-chart theme overridePass theme="dark" as a kwarg to any chart factory to override the session theme.
Click eventsAdd events=True to any chart constructor to emit click/hover payloads via postMessage to the parent Streamlit app.
Dict data inputv1.0.1 accepts list[dict], dict[list], or pd.DataFrame for all data parameters. No forced DataFrame conversion needed.