Bar chart

In plain words

A chart of bars to compare a few amounts.

A vertical bar chart drawn with pz.canvas in the theme colors, with optional labels under the bars.

ui.bar_chart · Category: Data · Full reference →

Preview

Code

ui.bar_chart([12, 19, 8, 15, 22, 17, 9], labels=["M", "T", "W", "T", "F", "S", "S"],
             width=360, height=180)

When to use

• To compare a handful of values side by side (per day, per category).

Usage

from pyzed import ui

ui.bar_chart([12, 19, 8, 15, 22, 17, 9], labels=["M", "T", "W", "T", "F", "S", "S"],
             width=360, height=180)

Variants

About these captures

Each capture is recorded by pyzed itself, off-screen at 2x, in One Dark or One Light to match this site’s theme, and cropped to the component so it shows at its real size. The pointer hovers, presses or types into it; a component that does not react to the pointer cycles through a few themes. With reduced motion you see the first frame. Open Code under a capture to see the snippet that draws it; free names such as on_save stand for your own callbacks.

Options

labels=

Code

ui.bar_chart([12, 19, 8, 15, 22], labels=["M", "T", "W", "T", "F"], width=240, height=120)

No labels

Code

ui.bar_chart([4, 8, 6, 9, 3, 7, 5, 10], width=240, height=100)

tint="success"

Code

ui.bar_chart([5, 9, 7, 12], labels=["Q1", "Q2", "Q3", "Q4"], width=240, height=120, tint="success")

tint="warning"

Code

ui.bar_chart([30, 12, 18], labels=["cpu", "io", "net"], width=240, height=120, tint="warning")

Events

Bar chart has no events of its own: it shows what you give it. Like every widget it also has the 18 common events (click, double_click, right_click, mouse_enter, drag, key_down, resize…), attached with .on(...): see Events and Events of every component.

Properties and API

ui.bar_chart

bar_chart(values, *, labels=None, width=320, height=160, tint='accent', theme=None)

A vertical bar chart with optional labels.

Property	Default	Description
values	required	Values.
labels	None	Labels under each bar.
width	320	Width: pixels, "fill", "shrink" or "fill:N" (proportion).
height	160	Height: pixels, "fill", "shrink" or "fill:N" (proportion).
tint	"accent"	Semantic color: "accent", "error", "warning", "success", "info" or a token.
theme	None	Theme to use instead of the current one (pyzed.theme.current()).

Full reference →

Related

DonutA donut chart with a label in the middle.

SparklineA tiny line chart for trends.

StatA dashboard number with change and sparkline.