Chart

Charts drawn with Chart.js 4.5.1: line, area, bar (grouped, stacked or horizontal), pie, doughnut, polar area, scatter, bubble and radar. A chart fills its container and redraws whenever the container changes size, so it suits dashboards whose tiles people resize.

Added in #65.

from wapyt import ChartConfig, ChartDataset

chart = self.add_chart("sales", ChartConfig(
    type="bar", labels=["Q1", "Q2", "Q3", "Q4"], title="Revenue", stacked=True,
    datasets=[ChartDataset("EU", [1200, 1500, 1700, 2100]),
              ChartDataset("US", [2200, 2100, 2600, 3000])],
    value_prefix="$", compact=True,
))
chart.on_click(lambda p: show_region(p["dataset"], p["label"]))

Outside a layout cell: Chart(config, container=element) or Chart(config, root="#selector").

Sizing and dashboards

• The chart always takes the whole of its container. Give it a container with a height: a layout cell, a dashboard tile, or ChartConfig(height=240) where there is none.
• It redraws whenever that container's size changes: a splitter dragged, a tab shown, a dashboard tile resized or moved, the browser window resized. A container that is hidden or zero-sized when the chart is created is fine; it draws once it has a size.
• Tested with gridstack 14 tiles: resizing them from code or by dragging, moving them, and reflowing the grid. gridstack animates a resize, and the chart follows it as it goes.
• In a small tile (under about 280 x 180 px) an automatic legend and the axis titles step aside so the data keeps the room; they come back when the tile grows.
• For very large dashboards, resize_delay=100 waits until a resize settles before redrawing. chart.resize() redraws at once, for a dashboard's "resize stopped" hook (normally not needed).

Config

ChartConfig
type	line, area, bar, pie, doughnut, polarArea, scatter, bubble, radar
labels	The categories along the axis, or the slices of a pie
datasets	ChartDataset entries (below)
title	Drawn above the chart
legend	auto (for two or more series, and for pies), top, bottom, left, right or none
stacked, horizontal	Stacked bars or areas; horizontal bars
x_label, y_label	Axis titles
y_min, y_max, begin_at_zero	The value axis range (from 0 unless begin_at_zero=False)
value_prefix, value_suffix, decimals, compact	How values show on the axis, in tooltips and in the table: "$", "%", 2, 1.2K
animation, resize_delay, height	See above
table_toggle	A small "Table" button that shows the data as a table instead
aria_label	What screen readers call it (default: the title and type)
options	Raw Chart.js options, merged over wapyt's, for anything not covered

ChartDataset
label	The series name: legend, tooltip, table, and its colour
data	One value per label (None for a gap); scatter {"x", "y"}, bubble {"x", "y", "r"}
color / colors	An explicit colour; for pies, one per slice
type	Draw this series differently on the same axis (a "line" over bars)
fill, tension, dashed, point_radius	Line styling: area fill, curve, dashes (targets), point size
stack, hidden	Stack group; start hidden (the legend can show it)

Colours and design

• Series take colours from an 8-colour palette, in a fixed order, with separate light and dark versions; switching the theme redraws charts in the other set.
• A series keeps its colour by its label: set_data with some series filtered out doesn't repaint the rest.
• More than 8 series (or pie slices) without colours of your own raise an error: group the smallest into "Other", split the chart, or pass color= / colors=. There is no 9th colour, so repeated colours never make two series look alike.
• One value axis. Two measures on different scales belong in two charts side by side; wapyt doesn't draw dual-axis charts.

Data and methods

Method
set_data(labels=None, datasets=None)	Replace the labels and / or the series
update_dataset(key, data)	New values for one series, by index or label
append(label, values, max_points=None)	Add a point to each series at the end; past max_points the oldest drop off (a live feed)
set_title, set_type	A new title; redraw as another type (bar ↔ line)
set_options(dict)	Merge raw Chart.js options
resize(), show_table(show=True), to_image(), destroy()	Redraw now; table view; a PNG data URL; remove it

on_click fires when a bar, point or slice is clicked: {dataset, dataset_index, label, index, value}.

Accessibility

Every chart carries its data as a table that screen readers read (the chart itself is an image named by its title). table_toggle=True lets anyone switch to that table. Titles, labels and values are drawn on the canvas or put in as text, so data can't inject markup.

About the Chart.js copy

pyTincture only runs scripts from its own server, so wapyt ships Chart.js itself (MIT licence, next to it in wapyt/assets/). It loads with the other widget assets and adds about 70 KB (gzipped) to every app.