No. 48 of 106

Bar Chart

Bar and column charts for the numbers behind the news.

    On this page
  1. Bar Fill
  2. Card Style
  3. Bar Shape
  4. Value Labels
  5. Grid Lines
Section 01

4 options for bar fill — all shown live below.

1
Solidfill = solid

Monthly Job Gains

Jobs added each month, in thousands.

2
Gradientfill = gradient

Monthly Job Gains

Jobs added each month, in thousands.

3
Stripedfill = striped

Monthly Job Gains

Jobs added each month, in thousands.

4
Glass (outlined)fill = glass

Monthly Job Gains

Jobs added each month, in thousands.

Section 02

4 options for card style — all shown live below.

1
Nonecard = none

Monthly Job Gains

Jobs added each month, in thousands.

2
White Cardcard = card

Monthly Job Gains

Jobs added each month, in thousands.

3
Dark Cardcard = dark

Monthly Job Gains

Jobs added each month, in thousands.

4
Outlinedcard = outline

Monthly Job Gains

Jobs added each month, in thousands.

Section 03

5 options for bar shape — all shown live below.

1
Squareshape = square

Monthly Job Gains

Jobs added each month, in thousands.

2
Rounded Endsshape = rounded

Monthly Job Gains

Jobs added each month, in thousands.

3
Pillshape = pill

Monthly Job Gains

Jobs added each month, in thousands.

4
Capsuleshape = capsule

Monthly Job Gains

Jobs added each month, in thousands.

5
Lollipopshape = lollipop

Monthly Job Gains

Jobs added each month, in thousands.

Section 04

3 options for value labels — all shown live below.

1
None (tooltip only)value_labels = none

Monthly Job Gains

Jobs added each month, in thousands.

2
Outside the barvalue_labels = outside

Monthly Job Gains

Jobs added each month, in thousands.

3
Inside the barvalue_labels = inside

Monthly Job Gains

Jobs added each month, in thousands.

Section 05

3 options for grid lines — all shown live below.

1
Nonegrid = none

Monthly Job Gains

Jobs added each month, in thousands.

2
Solidgrid = solid

Monthly Job Gains

Jobs added each month, in thousands.

3
Dashedgrid = dashed

Monthly Job Gains

Jobs added each month, in thousands.

Section 06

3 options for legend — all shown live below.

1
Toplegend = top

Monthly Job Gains

Jobs added each month, in thousands.

2
Bottomlegend = bottom

Monthly Job Gains

Jobs added each month, in thousands.

3
Hiddenlegend = hidden

Monthly Job Gains

Jobs added each month, in thousands.

Section 07

Extra switches for the finishing touches.

1
Orientation: Vertical (columns)orientation = vertical

Monthly Job Gains

Jobs added each month, in thousands.

2
Orientation: Horizontal (bars)orientation = horizontal

Monthly Job Gains

Jobs added each month, in thousands.

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

Monthly Job Gains

Jobs added each month, in thousands.

4
Multi-series Mode: Stackedmode = stacked

Monthly Job Gains

Jobs added each month, in thousands.

Section 08

Switch parts of the widget on or off.

1
Enable Series 2 — Offs2_on = off

Monthly Job Gains

Jobs added each month, in thousands.

2
Enable Series 3 — Ons3_on = yes

Monthly Job Gains

Jobs added each month, in thousands.

3
Show Value Axis — Offshow_axis = off

Monthly Job Gains

Jobs added each month, in thousands.

4
Tooltip — Offtooltip = off

Monthly Job Gains

Jobs added each month, in thousands.

5
Grow Animation on Scroll — Offanimate = off

Monthly Job Gains

Jobs added each month, in thousands.

6
Hide On Desktop — Onhide_desktop = hidden-desktop

Monthly Job Gains

Jobs added each month, in thousands.

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)

Website visits vs sign-ups

Thousands per quarter (sample)

Team workload

Open tasks by team (sample)