Skip to content

  • VisualizationPage · Index
  • What’s newPage · Latest additions
  • Styles indexPage · Home
  • Compare stylesPage · Side by side
  • Patterns indexPage · Index
  • Articles indexPage · Index
  • Folio design systemPage · House system
  • Folio FoundationsPage · House system
  • Folio ComponentsPage · House system
  • Folio PatternsPage · House system
  • Folio MotionPage · House system
  • Folio ExamplesPage · House system
  • Folio ButtonsPage · Component
  • Folio Text fieldsPage · Component
  • Folio SelectPage · Component
  • Folio Checkboxes & switchesPage · Component
  • Folio Radio groupsPage · Component
  • Folio TabsPage · Component
  • Folio MenusPage · Component
  • Folio DialogsPage · Component
  • Folio TooltipsPage · Component
  • Folio Breadcrumbs & paginationPage · Component
  • Folio CardsPage · Component
  • Folio Badges & avatarsPage · Component
  • Folio Data tablesPage · Component
  • Folio Progress & loadingPage · Component
  • Folio FeedbackPage · Component
  • Folio Empty statesPage · Component
  • Folio MediaPage · Component
← Visualization

Area chart

A filled region emphasizes magnitude over time.

Listening through the week

Listening through the week: area. Sessions (thousands). Full values follow in the data view.6 observations. Use the data view for exact values.0MonTueWedThuFriSat4080MobileSessions (thousands)
Illustrative data
View data6 records
Listening through the week
ItemGroupSessions (thousands)
MonMobile32
TueMobile48
WedMobile42
ThuMobile68
FriMobile76
SatMobile56

When it fits

Show how the level of a quantity rises and falls.

What you need

Ordered observations of an amount with a meaningful zero.

Watch for

Overlapping filled series can hide one another.

In practice

Unemployment across industries, published by Vega-Lite contributors.
Unemployment across industries · Vega-Lite contributors · BSD-3-Clause

Related alternatives

Line chart Stacked bar
Sources and accessibility

The authored example uses illustrative data. Published references retain their original information and presentation.

Use Tab to reach controls and the data view. Native selects support arrow keys. All values are available in the data view; color and hover are never the only way to read the example.