Charts

webwrench uses Chart.js (bundled via bitwrench) for all chart rendering. One function, many chart types.

Basic Chart

import webwrench as ww

ww.chart([12, 19, 3, 5, 2, 3], type="bar", labels=["Jan", "Feb", "Mar", "Apr", "May", "Jun"])
ww.serve()

Chart Types

TypeValueUse Case
Bar"bar"Categorical comparisons
Line"line"Trends over time
Pie"pie"Proportions of a whole
Doughnut"doughnut"Proportions (with center hole)
Radar"radar"Multi-axis comparisons
Scatter"scatter"X-Y data points
Bubble"bubble"X-Y with size dimension
Polar Area"polarArea"Radial proportions

Multiple Datasets

ww.chart(
    datasets=[
        {"label": "2024", "data": [10, 20, 30, 40]},
        {"label": "2025", "data": [15, 25, 20, 45]},
    ],
    type="line",
    labels=["Q1", "Q2", "Q3", "Q4"],
    title="Revenue Comparison",
)

Dynamic Updates

ww.chart() returns a ChartHandle. Call .update(data) to change the data:

chart = ww.chart([1, 2, 3], type="bar", labels=["A", "B", "C"])
slider = ww.slider("Scale", min=1, max=10, value=1)

@slider.on_change
def scale(val):
    chart.update([1 * val, 2 * val, 3 * val])

The plot() Function

ww.plot() is a convenience for dict-based data (DataFrame-like):

data = {
    "month": ["Jan", "Feb", "Mar", "Apr"],
    "sales": [100, 150, 130, 170],
}
ww.plot(data, x="month", y="sales", type="line", title="Monthly Sales")

Chart Options

Pass a Chart.js options dict for full control:

ww.chart(
    [12, 19, 3],
    type="bar",
    labels=["A", "B", "C"],
    options={
        "plugins": {"legend": {"display": False}},
        "scales": {"y": {"beginAtZero": True}},
    },
)