Charts and data

Components in this family

• Sign-ups by weekday

  Sample content

  Shuffle the sample

  Data as a table

  Sign-ups by weekday (sign-ups)

  Label	Value
  Mon	18
  Tue	31
  Wed	24
  Thu	42
  Fri	36
  Sat	12
  Sun	9

  Live bar chart

  Bars that grow into place and slide when your data changes.

  <chart-bars-live>

• Traffic by source

  Sample content

  100total

  • Search46%
  • Direct27%
  • Social17%
  • Email10%

  Data as a table

  Traffic by source (visits)

  Label	Value	Share
  Search	46	46%
  Direct	27	27%
  Social	17	17%
  Email	10	10%

  Donut chart

  A donut with a legend that highlights slices and a table beside it.

  <chart-donut>

• This week at a glance

  Illustrative numbers

  • Visits171▲ +43%
  • Sign-ups31▲ +72%
  • Load time1.4 s▼ -26%
  • Replies10▲ +11%

  Data as a table

  Metric	First	Latest	Change
  Visits	120	171	up 43 percent
  Sign-ups	18	31	up 72 percent
  Load time	1.9	1.4	down 26 percent
  Replies	9	10	up 11 percent

  KPI board

  Tiles with a big number, a change arrow and a sparkline.

  <kpi-board>

• Activity, week by week

  Illustrative numbers

  Point at a day to read it.

  LessMore

  Data as a table

  Activity, week by week (events)

  Week of	Total
  Jan 5	26
  Jan 12	23
  Jan 19	26
  Jan 26	27
  Feb 2	21
  Feb 9	30
  Feb 16	26
  Feb 23	29
  Mar 2	34
  Mar 9	36
  Mar 16	29
  Mar 23	34
  Mar 30	34
  Apr 6	37
  Apr 13	45
  Apr 20	46
  Apr 27	44
  May 4	47
  May 11	53
  May 18	53

  Heatmap calendar

  A week-by-week grid of days shaded by value.

  <heatmap-calendar>

• Server load Illustrative numbers

  72%High

  Try a value

  Gauge meter

  A semicircle gauge with zones, a swinging needle and a slider to try values.

  <gauge-meter>