data_visualization

Data Visualization

Best practices for creating charts, tables, and live data displays.

Plotly Charts

Creating a Chart

import plotly.express as px

# Create figure
df = pd.DataFrame({"x": [1, 2, 3], "y": [4, 5, 6]})
fig = px.line(df, x="x", y="y", title="My Chart")

# Show as widget
show_plotly(figure_json=fig.to_json(), title="Line Chart")

Updating a Chart

# Full update
new_fig = px.bar(df, x="category", y="value")
update_plotly(widget_id, figure_json=new_fig.to_json())

# Layout-only update (faster - doesn't re-render data)
layout_update = {"title": {"text": "Updated Title"}}
update_plotly(widget_id, figure_json=json.dumps({"layout": layout_update}), layout_only=True)

Theme Consistency

PyWry automatically switches Plotly charts between plotly_dark and plotly_white templates when the theme toggles. To customize per-theme styles while preserving automatic switching, use template_dark and template_light on PlotlyConfig:

from pywry import PlotlyConfig

config = PlotlyConfig(
    template_dark={"layout": {"paper_bgcolor": "#1a1a2e", "plot_bgcolor": "#16213e"}},
    template_light={"layout": {"paper_bgcolor": "#ffffff", "plot_bgcolor": "#f0f0f0"}},
)

show_plotly(figure_json=fig.to_json(), title="Themed Chart", config=config)

User values are deep-merged on top of the built-in base template — your overrides always win, and anything you don't set is inherited from the base.

Chart Sizing

# Let chart fill container
fig.update_layout(
    autosize=True,
    margin=dict(l=40, r=40, t=50, b=40),
)

# Or set explicit size
fig.update_layout(
    width=600,
    height=400,
)

AG Grid Tables

Creating a Table

import json

# Data as list of dicts
data = [
    {"name": "Alice", "age": 30, "city": "NYC"},
    {"name": "Bob", "age": 25, "city": "LA"},
]

# Show as AG Grid widget
show_dataframe(data_json=json.dumps(data), title="Users")

Theme Consistency

# AG Grid themes
# - ag-theme-quartz-dark (dark mode)
# - ag-theme-quartz (light mode)
# Widget auto-applies based on current theme