UltraKit · Widget #69

Bar Chart

Vertical / Horizontal × Grouped / Stacked × 3 Series × 3 Bar Shapes × 3 Fills × Grid Styles × Value Labels × Tooltip × Grow Animation

4 Bar Fill4 Card Style3 Bar Shape3 Value Labels3 Grid Lines3 Legend4 More Choices6 Toggles

Section 01

Bar Fill

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

Card Style

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

Bar Shape

3 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.

Section 04

Value Labels

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

Grid Lines

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

Legend

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

More Choices

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

Show & Hide Options

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.