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

Bubble chart

Point position shows two measures; circle area adds a third.

Six neighborhood cafés

Six neighborhood cafés: bubble. Wait (minutes). Full values follow in the data view.Horizontal: seats. Circle area in the bubble view: orders per day.00820164024603280SeatsWait (minutes)FernMossReedOakPineElm

Horizontal: seats. Circle area in the bubble view: orders per day.

Illustrative data
View data6 records
Six neighborhood cafés
ItemSeatsWait (minutes)Orders / day
Elm12980
Oak2414160
Pine3211120
Fern4222300
Moss5824240
Reed6818180

When it fits

Add the scale of each observation to a relationship.

What you need

Two numeric coordinates and a nonnegative size value.

Watch for

Scaling radius to value makes large quantities look disproportionately large.

In practice

Health and income across countries, published by Vega-Lite contributors.
Health and income across countries · Vega-Lite contributors · BSD-3-Clause

Related alternatives

Scatterplot Proportional-symbol map
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.