ZENTU · WIDGET #69

Vertical or horizontal, grouped or stacked, with a goal line, a highlighted top bar, a color per bar, glowing fills, capsule and lollipop shapes and numbers that count up as the bars grow.

Section 01

4 options for bar fill — all shown live below.

1
Solidfill = solid

Monthly Revenue

Comparing this year with last year.

2
Gradientfill = gradient

Monthly Revenue

Comparing this year with last year.

3
Stripedfill = striped

Monthly Revenue

Comparing this year with last year.

4
Glass (outlined)fill = glass

Monthly Revenue

Comparing this year with last year.

Section 02

4 options for card style — all shown live below.

1
Nonecard = none

Monthly Revenue

Comparing this year with last year.

2
White Cardcard = card

Monthly Revenue

Comparing this year with last year.

3
Dark Cardcard = dark

Monthly Revenue

Comparing this year with last year.

4
Outlinedcard = outline

Monthly Revenue

Comparing this year with last year.

Section 03

5 options for bar shape — all shown live below.

1
Squareshape = square

Monthly Revenue

Comparing this year with last year.

2
Rounded Endsshape = rounded

Monthly Revenue

Comparing this year with last year.

3
Pillshape = pill

Monthly Revenue

Comparing this year with last year.

4
Capsuleshape = capsule

Monthly Revenue

Comparing this year with last year.

5
Lollipopshape = lollipop

Monthly Revenue

Comparing this year with last year.

Section 04

3 options for value labels — all shown live below.

1
None (tooltip only)value_labels = none

Monthly Revenue

Comparing this year with last year.

2
Outside the barvalue_labels = outside

Monthly Revenue

Comparing this year with last year.

3
Inside the barvalue_labels = inside

Monthly Revenue

Comparing this year with last year.

Section 05

3 options for grid lines — all shown live below.

1
Nonegrid = none

Monthly Revenue

Comparing this year with last year.

2
Solidgrid = solid

Monthly Revenue

Comparing this year with last year.

3
Dashedgrid = dashed

Monthly Revenue

Comparing this year with last year.

Section 06

3 options for legend — all shown live below.

1
Toplegend = top

Monthly Revenue

Comparing this year with last year.

2
Bottomlegend = bottom

Monthly Revenue

Comparing this year with last year.

3
Hiddenlegend = hidden

Monthly Revenue

Comparing this year with last year.

Section 07

Extra switches for the finishing touches.

1
Orientation: Vertical (columns)orientation = vertical

Monthly Revenue

Comparing this year with last year.

2
Orientation: Horizontal (bars)orientation = horizontal

Monthly Revenue

Comparing this year with last year.

3
Multi-series Mode: Grouped (side by side)mode = grouped

Monthly Revenue

Comparing this year with last year.

4
Multi-series Mode: Stackedmode = stacked

Monthly Revenue

Comparing this year with last year.

Section 08

Switch parts of the widget on or off.

1
Enable Series 2 — Offs2_on = off

Monthly Revenue

Comparing this year with last year.

2
Enable Series 3 — Ons3_on = yes

Monthly Revenue

Comparing this year with last year.

3
Show Value Axis — Offshow_axis = off

Monthly Revenue

Comparing this year with last year.

4
Tooltip — Offtooltip = off

Monthly Revenue

Comparing this year with last year.

5
Grow Animation on Scroll — Offanimate = off

Monthly Revenue

Comparing this year with last year.

6
Hide On Desktop — Onhide_desktop = hidden-desktop

Monthly Revenue

Comparing this year with last year.

Section 09

New tools in context: a sales goal, a best-seller list and a customer survey.

Monthly sales

Target £60k · sample data

Best-selling products

Units this week (sample)

How did we do?

Customer survey, 1–5 stars (sample)

Section 10

Grouped series on a frosted glass card, with a goal line and glowing bars.

Website visits vs sign-ups

Thousands per quarter (sample)

Team workload

Open tasks by team (sample)