Overview
This page includes a variety of sample layouts which you can use as a starting point for your own dashboards.
When creating a layout, it’s important to decide up front whether you want your charts to fill the web page vertically (changing in height as the browser changes) or if you want the charts to maintain their original height (with the page scrolling as necessary to display all of the charts).
This behavior is controlled via the vertical_layout
output option, which defaults to vertical_layout: fill.
Filling the page is generally a good choice when you have only one or
two charts vertically stacked. Alternatively you can use
vertical_layout: scroll to specify a scrolling layout,
which is generally a better choice for three or more charts vertically
stacked.
Chart Stack (Fill)
This layout is a simple stack of two charts. Note that one chart or
the other could be made vertically taller by specifying the
data-height attribute.
Chart Stack (Scrolling)
This layout is a simple stack of three charts. To provide enough room
to display all the charts a scrolling layout is used
(vertical_layout: scroll). Note that because of its ability
to scroll this layout could easily accommodate many more charts
(although for large numbers of charts you might consider organizing them
into Multiple Pages).
Focal Chart (Top)
This layout fills the page completely and gives prominence to a
single chart at the top (with two secondary charts included below). To
achieve this layout it uses orientation: rows and specifies
data-height attributes on each row to establish their
relative sizes.
Focal Chart (Left)
This layout fills the page completely and gives prominence to a
single chart on the left (with two secondary charts included to the
right). Note that data-width attributes are specified on
each column to establish their relative sizes.
Chart Grid (2x2)
This layout is a 2x2 grid of charts. This layout uses the default
vertical_scroll: fill behavior however depending on the
ideal display size for the charts it might be preferable to allow the
page to scroll (vertical_layout: scroll). Note also that
orientation: rows is used to ensure that the chart
baselines line up horizontally.
Tabset Column
This layout displays the right column as a set of two tabs. Tabs are especially useful when you have a large number of components to display and prefer not to require the user to scroll to access everything.
Tabset Row
This layout displays the bottom row as a set of two tabs. Note that
the {.tabset-fade} attribute is also used to enable a fade
in/out effect when switching tabs.
Multiple Pages
This layout defines multiple pages using a level 1 markdown header
(==================). Each page has its own top-level
navigation tab. Further, the second page uses a distinct orientation via
the data-orientation attribute. The use of multiple columns
and rows with custom data-width and
data-height attributes is also demonstrated.
Storyboard
This layout provides an alternative to the row and column based layout schemes described above that is well suited to presenting a sequence of data visualizations and related commentary.
Note that the storyboard: true option is specified and
that additional commentary is included alongside the storyboard frames
(the content after the *** separator in each section).
Input Sidebar
This layout demonstrates how to add a sidebar to a flexdashboard page
(Shiny-based dashboards will often present user input controls in a
sidebar). To include a sidebar you add the .sidebar class
to a level 2 header (-------------------):
Input Sidebar (Global)
If you have a layout that uses Multiple
Pages you may want the sidebar to be global (i.e. present for all
pages). To include a global sidebar you add the .sidebar
class to a level 1 header (======================):
Mobile Specific
To customize your dashboard for display on small mobile screens you
can either exclude selected components entirely or create
mobile-specific variations of components. To exclude components you
apply the {.no-mobile} class attribute. To use a
mobile-specific rendering you create two identically titled components
and apply the {.mobile} attribute to one of them.
For example, the following dashboard has a “Chart 1” that is included in mobile and desktop layouts, a “Chart 2” that is excluded from mobile layouts, and a “Chart 3” that has a custom variation for mobile: