Multi-Chart Compositions with Vizly

Real dashboards need multiple charts. Vizly provides four composition types - grid, page, tab, and timeline - to arrange charts in organized layouts while loading ECharts once.

Grid layout

Arrange multiple charts in a fixed grid. Best for dashboards where you want all charts visible simultaneously.

import pandas as pd
import vizly as vz

vz.set_theme('corporate')

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_bar = pd.DataFrame({
    'region': ['Northeast', 'Southeast', 'Midwest', 'Southwest', 'West', 'Canada'],
    'sales': [86, 64, 71, 58, 93, 47],
})
df_area = 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],
})
df_scatter = pd.DataFrame({
    'height': [1.86, 1.726, 1.893, 1.829, 1.588, 1.94, 1.854, 1.864,
               1.601, 1.73, 1.698, 1.921, 1.808, 1.879, 1.727, 1.641,
               1.772, 1.576, 1.881, 1.803, 1.853, 1.692, 1.938, 1.907,
               1.861, 1.628, 1.737, 1.568, 1.612, 1.823, 1.848, 1.937,
               1.68, 1.698, 1.738, 1.626],
    'weight': [58.2, 74.8, 62.9, 84.2, 73.0, 92.0, 85.6, 67.0,
               91.9, 90.6, 70.6, 65.8, 84.8, 58.7, 61.6, 52.4,
               89.8, 83.9, 85.8, 89.5, 74.0, 79.3, 58.7, 57.5,
               84.1, 74.6, 79.1, 88.7, 82.5, 78.6, 78.8, 66.6,
               53.5, 73.0, 62.3, 71.6],
})

chart = vz.grid(
    charts=[
        vz.line(df_line, x='date', y=['revenue', 'cost'], title='Revenue vs cost'),
        vz.bar(df_bar, x='region', y='sales', title='Sales by region'),
        vz.area(df_area, x='date', y='revenue', title='Revenue trend'),
        vz.scatter(df_scatter, x='height', y='weight', title='Height vs weight'),
    ],
    title="Grid showcase",
)
chart.to_html()

Page layout (scrolling dashboard)

A vertically scrolling page with full-width charts, one after another. Best for narrative-driven dashboards or reports.

import pandas as pd
import vizly as vz

vz.set_theme('corporate')

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_map = pd.DataFrame({
    'name': ['United States', 'Canada', 'Brazil', 'Germany', 'United Kingdom',
             'France', 'India', 'Japan', 'Australia', 'South Africa'],
    'value': [92, 54, 61, 48, 57, 44, 73, 66, 39, 28],
})

chart = vz.page(
    charts=[
        vz.line(df_line, x='date', y=['revenue', 'cost'], title='Revenue vs cost'),
        vz.pie(df_pie, names='name', values='value', title='Segment mix'),
        vz.map(df_map, title='Global demand'),
    ],
    title="Executive Dashboard",
)
chart.to_html()

Tab layout

Charts are organized in tabs, with one visible at a time. Best for dense dashboards where you want to conserve vertical space.

import pandas as pd
import vizly as vz

vz.set_theme('corporate')

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="Tab showcase",
)
chart.to_html()

Timeline / slideshow

Walk through time periods or scenarios with animated transitions between snapshots.

import pandas as pd
import vizly as vz

vz.set_theme('corporate')

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 showcase",
)
chart.to_html()

Compose chart comparison

Layout	Visibility	Best for
`grid`	All charts visible simultaneously	Dense operational dashboards
`page`	All charts, vertical scroll	Reports, executive summaries
`tab`	One tab at a time	Compact interfaces with multiple data modes
`timeline`	One snapshot at a time, animated	Time-series walkthroughs, scenario comparison

Connected dashboards (v1.0.1)

Multi-chart dashboards support cross-chart filtering. Pass connect=True to link chart interactions, or connect=False for independent charts:

# Linked dashboard: clicking a region in the map filters the bar chart
chart = vz.page(
    charts=[
        vz.map(df_map, title='Global demand', connect=True),
        vz.bar(df_bar, x='region', y='revenue', title='Revenue by region', connect=True),
    ],
    title="Linked Dashboard",
)
chart.render("linked.html")

# Cross-origin messaging for embedded dashboards
chart = vz.page(
    charts=[...],
    message_origin="https://app.example.com",
)

Use message_origin to restrict postMessage events to a specific parent origin when embedding dashboards in iframes.

When to use which

Static report: page or grid - all content visible at once
Dense dashboard: tab - conserve screen real estate
Time walkthrough: timeline - step through periods or scenarios
Operational monitor: grid - see everything at a glance

All four compose types share ECharts once across child charts. Use dashboard_html() for programmatic shell pages.

Grid layout​

Page layout (scrolling dashboard)​

Tab layout​

Timeline / slideshow​

Compose chart comparison​

Connected dashboards (v1.0.1)​

When to use which​