Skip to main content

Quarto Dashboards

Overview

Quarto Dashboards make it easy to create interactive dashboards using Python, R, Julia, and Observable:

  • Publish a group of related data visualizations as a dashboard. Use a wide variety of components including Plotly, Leaflet, Jupyter Widgets, htmlwidgets; static graphics (Matplotlib, Seaborn, ggplot2, etc.); tabular data; value boxes; and text annotations.

  • Flexible and easy to specify row and column-based Layouts. Components are intelligently re-sized to fill the browser and adapted for display on mobile devices.

  • Author using any notebook editor (JupyterLab, etc.) or in plain text markdown with any text editor (VS Code, Positron, RStudio, Neovim, etc.)

  • Dashboards can be deployed as static web pages (no special server required) or you can optionally integrate a backend Shiny Server for enhanced interactivity.

Examples

You can create highly customized layouts and use a wide variety of dashboard themes as illustrated in these examples (click to see them in more detail):

Screenshot of a Stock Trader dashboard: a row of three values boxes, then a row with a stock ticker graph and a table of closing values. Navy blue and green theme.

Screenshot of a Customer Churn dashboard: a row of three values boxes, then a row with two plots, then a row with a table. Light blue and yellow theme.

Screenshot of a Palmer Penguins dashboard: a sidebar with checkboxes and a dropdown, and two plots in main panel. Blue theme.

For live versions of these dashboards, source code, and additional examples see the dashboard section of the gallery.

Walkthrough

Here we’ll walk through a simple example to illustrate the basics. Then, we’ll provide detailed instructions on how to get started with building your own dashboards.

This simple single-page Python dashboard uses interactive Plotly visualizations to explore development indicators in the Gapminder dataset. The dashboard includes two rows, the second of which includes two columns:

Screenshot of a Development Indicators dashboard: a row titled GDP and Life Expectancy with a single plot, then a row with two plots arranged side by side titled Population and Life Expectancy.

Dashboards consist of several components:

  1. Navigation Bar — Icon, title, and author along with links to sub-pages (if more than one page is defined).

  2. Pages, Rows, Columns, and Tabsets — Pages, rows and columns are defined using markdown headings (with optional attributes to control height, width, etc.). Tabsets can be used to further divide content within a row or column.

  3. Cards, Sidebars, and Toolbars — Cards are containers for plots, data display, and free form content. The content of cards typically maps to cells in your notebook or source document. Sidebars and toolbars are used to present inputs within interactive dashboards.

Dashboards can be created either using Jupyter notebooks (.ipynb) or using plain text markdown (.qmd). Here is the code for the notebook version of the above example (click the image for a zoomed view):

Screenshot of a gapminder-notebook.ipynb open in Jupyter Lab. After cells for Quarto settings and python setup, there is a markdown cell containing the heading Row, followed by a python code cell generating a plot. Then another markdown cell containing the heading Row, followed by two python code cells each generating a plot.

Here is the plain text .qmd version of the dashboard (click on the numbers on the far right for additional explanation of syntax and mechanics):

--- 
title: "Development Indicators by Continent"
author: "Gapminder Analytics Group"
format: dashboard
--- 

```{python}
import plotly.express as px
df = px.data.gapminder()
```

## Row {height=60%}

```{python}
#| title: GDP and Life Expectancy 
px.scatter(  
  df, x="gdpPercap", y="lifeExp", 
  animation_frame="year", animation_group="country", 
  size="pop", color="continent", hover_name="country",
  facet_col="continent", log_x=True, size_max=45, 
  range_x=[100,100000], range_y=[25,90] 
)  
```

## Row {height=40%}

```{python}
#| title: Population
px.area(
  df, x="year", y="pop", 
  color="continent", line_group="country"
)
```

```{python}
#| title: Life Expectancy
px.line(
  df, x="year", y="lifeExp", 
  color="continent", line_group="country"
)
```
1
The document options define the title and author for the navigation bar as well as specifying the use of the dashboard format.
2
Rows and columns are defined using headings. In this example we define two rows and specify their relative sizes using the height option.
3
Computational cells become cards that live within rows or columns. Cards can have an optional title (which here we specify using the title option).
4
The second row includes two computational cells, which are automatically split into two side by side cards.

Getting Started

Step 1: Install Quarto

Dashboards are a feature in the Quarto v1.4. Before you get started, make sure you install the latest release version of Quarto.

_

Highlights

Quarto 1.11 includes a security update and improvements to accessibility, Typst documents, and Julia notebooks.

The bundled Deno runtime is updated to 2.9.8, which rejects certificates from the compromised eMudhra / emSign certificate authorities. Earlier versions trusted these certificates, allowing an attacker on the network to impersonate HTTPS sites to commands such as quarto publish, quarto add, and quarto use template, and to TypeScript scripts run by Quarto. See quarto-dev/quarto-cli#15152 for details.

Accessibility improvements include:

  • Keyboard navigation: Bootstrap-themed HTML output adds a Skip to main content link, keyboard-operable website sidebar sections, and keyboard scrolling for overflowing code and cell output. A two-tone focus ring makes keyboard focus easier to follow.
  • Figures and diagrams: fig-alt is now honored for Mermaid and Graphviz diagrams in html, revealjs, docx, and typst output, and for images and computational figures in docx. Alternative text and visible captions remain separate.
  • Presentations: In normal slide view, keyboard focus stays on the current slide of a revealjs presentation. Screen readers no longer announce incremental content before it is revealed, and switching back to the presentation’s browser tab preserves keyboard focus.

Authoring improvements include:

  • Typst: Add lists of figures and tables with lof: true and lot: true. Proof, remark, and solution blocks now use theorem styling, and labeled blocks can be cross-referenced.
  • Definition lists: Write definition lists as a .definition-list div containing a nested bullet list, the definition-list syntax used by Quarto 2.
  • Julia notebooks: The julia engine supports keep-ipynb: true to save the executed notebook alongside its source. It also includes fixes for notebook execution hangs and metadata changes not invalidating cached cell outputs.

When upgrading:

  • On macOS, the bundled Deno 2.9.8 runtime requires macOS 12 or later. Update older macOS systems before upgrading to Quarto 1.11; rendering engines and formats may have additional requirements.
  • Shared metadata now reaches Pandoc templates and Lua filters as merged values. Inherited lists such as keywords combine with document values; a document list no longer replaces an inherited list in that metadata.
  • Custom HTML themes should use the Quarto focus-ring variables. Quarto no longer uses Bootstrap’s $focus-ring-color, $focus-ring-box-shadow, $btn-focus-width, or $btn-focus-box-shadow for its focus styling.
  • Page-level open-graph and twitter-card options are now validated. Unknown keys within these options in document front matter or _metadata.yml produce an error instead of being silently ignored.

Release Notes

You can find release notes and installers for all platforms in the download page.

Step 2: Learn the Basics

Start by learning how to lay out your dashboard and populate it with content:

Dashboard Layout shows you how to control the navigation bar, and how to arrange your content across pages, rows, columns, tabsets, and cards.

Data Display shows you how to display data in your dashboard as plots, tables, value boxes, and text.

Step 3: Explore Further

Once you’ve mastered the basics, check out these additional articles to learn more.

Examples provides a gallery of example dashboards you can use as inspiration for your own.

Inputs demonstrates various ways to layout inputs for interactive dashboards (sidebars, toolbars, attaching inputs directly to cards, etc.)

Theming describes the various way to customize the fonts, colors, layout and other aspects of dashboard appearance.

Parameters explains how to create dashboard variants by defining parameters and providing distinct values for them on the command line.

Deployment covers how to deploy both static dashboards (which require only a web host, but not a server) and Shiny dashboards (which require a Shiny Server).

Interactivity explores the various ways to create interactive dashboards that enable more flexible data exploration.

External servers

Quarto is designed to minimize external dependencies. However, on occasion, Quarto documents might need resources hosted in external servers. See our page on External Sources for a full list.