R Shiny Dashboard Tutorial: Go From Basic Prototype to Production-Ready App

<em><strong>Updated</strong>: July 12, 2022.</em> As web dashboards have become the norm for interacting with data, looks and added functionality have taken a more prominent role. Dashboard users expect the typical look and feel and interactivity they get when surfing the web. To help fill the gap between data scientists and developers, packages that simplify and streamline the dashboard creation process has become more important as part of the dashboard creation workflow. Today we'll walk you through a simple R Shiny dashboard tutorial. We'll start with a basic shiny dashboard that uses no libraries. Then we'll show you how you can enhance it using two different approaches based on the most popular UI frameworks: Bootstrap and Semantic UI. Finally, we'll wrap up by giving you a taste of how far you can go using only R/Shiny to create a pure custom solution.  <blockquote>Prefer video over text? <a href="https://appsilon.com/video-tutorial-create-and-customize-a-simple-shiny-dashboard/">Check our video tutorial on how to build and cusomize a simple R Shiny dashboard</a>.</blockquote> Table of contents: <ul><li><a href="#shiny">R Shiny Dashboard Tutorial: Basic Dashboard with R Shiny</a></li><li><a href="#shinydashboard">Bootstrap Approach: shinydashboard Package</a></li><li><a href="#semanticui">Semantic UI Approach: shiny.semantic Package</a></li><li><a href="#custom">Custom Approach to R Shiny Dashboards: No Frameworks Whatsoever</a></li><li><a href="#summary">Summary of R Shiny Dashboard Tutorial</a></li></ul> <hr /> <h2 id="shiny">R Shiny Dashboard Tutorial: Basic Dashboard with R Shiny</h2> We will start with a proof of concept dashboard created using base shiny (This particular dashboard was created for our company’s internal tools for our hiring processes, but all data in the examples is randomly generated). <img class="size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b022a2350258d48b3c2fb9_shiny.webp" alt="Image 1 - Semantic UI dashboard" width="1920" height="981" /> Image 1 - Semantic UI dashboard A great example of the advantages of shiny for creating simple dashboards - our UI can be easily defined: <pre class="language-r"><code class="language-r" data-lang="r">fluidPage(   headerPanel("Hiring Funnel"),   sidebarPanel(...),   mainPanel(...) )</code></pre> Coupled with some server behavior for the different inputs and outputs, we end up with a complete dashboard that, while simple, will become the base for our following examples. <h2 id="shinydashboard">Bootstrap Approach: shinydashboard Package</h2> Shiny already includes bootstrap as a default framework. shinydashboard is probably the most well-known extension to shiny when it comes to styling your dashboards in a simple and quick way. In fact, enabling it is as simple as loading the library and replacing the wrappers for our main dashboard components: <pre class="language-r"><code class="language-r" data-lang="r">library(shinydashboard) <br>dashboardPage(   dashboardHeader(...),   dashboardSidebar(...),   dashboardBody(...) )</code></pre> A simple way to breathe new life into your dashboards! However, it is important to keep in mind that: <ul><li>Customization is limited (CSS is an option)</li><li>Color themes are available</li><li>You’ll be pigeonholed in the bootstrap ecosystem</li></ul> <div class="mceTemp"></div> <img class="size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b022a4df1312180459ad4c_shinydashboard.webp" alt="Image 2 - ShinyDashboard example" width="1920" height="981" /> Image 2 - ShinyDashboard example <h2 id="semanticui">Semantic UI Approach: shiny.semantic Package</h2> Another possible solution, especially if you would like more customization and would like to switch bootstrap in favor of semantic UI, is to use shiny.semantic in conjunction with semantic.dashboard. This opens a different set of UI elements that can be used, so elements such as tabs and inputs might need to be updated if you are making the switch from shiny or shinydashboard. From the main layout part, semantic.dashboard works very similarly to how shinydashboard does. A few differences exist when it comes to function arguments, but the general structure remains the same: <pre class="language-r"><code class="language-r" data-lang="r">library(semantic.dashboard) library(shiny.semantic) <br>dashboardPage(   dashboardHeader(...),   dashboardSidebar(...),   dashboardBody(...) )</code></pre> Some changes are needed for some components. Two good examples are: Date inputs. Switching from bootstrap means we no longer have access to bootstrap components. Moving from Bootstrap requires some changes: <figure class="highlight"> <pre class="language-r"><code class="language-r" data-lang="r"># Bootstrap dateInput("date_from", "Start date", value = "2019-02-01", weekstart = 1) # Semantic UI date_input("date_from", "Start date", value = "2019-02-01", icon = "") </code></pre> </figure> Tab sets. Another example of this is tab sets; Bootstrap tabsets need to be replaced by their Semantic counterpart: <pre class="language-r"><code class="language-r" data-lang="r"># Bootstrap tabsetPanel(  tabPanel("General overview", ...)  tabPanel("Channels overview", ...)  tabPanel("Days to decision", ...)  tabPanel("Funnel visualization", ...) ) <br># Semantic UI tabset(  list(menu = div("General overview"), content = div(...)),  list(menu = div("Channels overview"), content = div(...)),  list(menu = div("Days to decision"), content = div...()),  list(menu = div("Funnel visualization"), content = div(...)) )</code></pre> The semantic UI version is a bit more verbose, but it allows for more customization regarding the internal HTML structure. You also get access to all of the semantic UI library.  <img class="size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b022a53dff82577ed2e249_semantic.dashboard.webp" alt="Image 3 - Semantic Dashboard example" width="1903" height="948" /> Image 3 - Semantic Dashboard example <h2 id="custom">Custom Approach to R Shiny Dashboards: No Frameworks Whatsoever</h2> We can also go a different route and dive into a fully custom solution which allows for a much higher level of customization. However, it also requires a lot more knowledge when it comes to HTML, CSS, and JS. This solution is usually reserved for applications where the layout, theme, or overhaul experience is completely different from existing packages. As an example, our internal app using a fully custom approach ended up like this: <img class="size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b022a7d9e8a647cdc581c5_custom-shiny.webp" alt="Image 4 - A fully custom dashboard" width="1919" height="980" /> Image 4 - A fully custom dashboard Also with dark mode: <img class="size-full" src="https://webflow-prod-assets.s3.amazonaws.com/6525256482c9e9a06c7a9d3c%2F65b022a777066e9c82bec78c_custom-shiny-dark.webp" alt="Image 5 - A fully custom dashboard with dark mode" width="1919" height="981" /> Image 5 - A fully custom dashboard with dark mode Our approach included: <ul><li>Extended usage of CSS (in our case, SASS) for styling, layout, and themes</li><li>Custom HTML elements using shiny::tags</li><li>JavaScript for extra functionalities (Loading screens, custom tab behavior)</li></ul> There’s a lot going on here so I will go over it in more detail in a future post about all of the different things that went into creating this dashboard. Still, it’s good to remember: no matter the complexity, a true custom solution is always possible. <hr /> <h2 id="summary">Summary of R Shiny Dashboard Tutorial</h2> And there you have it - Simple ways to make and tweak your R Shiny dashboards ranging from existing CSS solutions to custom ones. R Shiny makes integrating any existing framework a breeze, as all you have to is install the library and tweak a function call here and there. What is your favorite package? Do you think it’s better to spend more time on custom solutions, or are the standard packages enough for you? Add your comments below. <h3>Looking for more R Shiny tutorials?</h3> We've got you covered: <ul><li><a href="https://appsilon.com/video-tutorial-create-and-customize-a-simple-shiny-dashboard/">Video Tutorial: Create and Customize a Simple Shiny Dashboard</a></li><li><a href="https://appsilon.com/how-i-built-an-interactive-shiny-dashboard-in-2-days-without-any-experience-in-r/">How I built an interactive R Shiny dashboard in 2 days without any experience in R</a></li><li><a href="https://appsilon.com/is-it-possible-to-build-a-video-game-in-r-shiny/">Tutorial: How I Built a Video Game in R Shiny</a></li><li><a href="https://appsilon.com/howto-css-and-shiny/">How to Use CSS to Style Your R Shiny Dashboards</a></li><li><a href="https://appsilon.com/how-to-make-your-css-awesome-with-sass/">How to Make Your CSS Systematically Awesome with SASS</a></li></ul> <h3>References</h3><ul><li>[shiny] (https://shiny.rstudio.com/)</li><li>[shinydashboard] (https://rstudio.github.io/shinydashboard/)</li><li>[semantic.dashboard] (https://github.com/Appsilon/semantic.dashboard/)</li><li>[shiny.semantic] (https://github.com/Appsilon/shiny.semantic/)</li><li>[Bootstrap] (https://getbootstrap.com/)</li><li>[Semantic UI] (https://semantic-ui.com/)</li></ul> <h3>Follow Appsilon on Social Media</h3><ul><li style="font-weight: 400;">Follow<a href="https://twitter.com/appsilon"> @Appsilon</a> on Twitter. Follow me @sparktuga</li><li style="font-weight: 400;">Follow us on<a href="https://www.linkedin.com/company/appsilon"> LinkedIn</a></li><li style="font-weight: 400;">Sign up for our<a href="https://appsilon.com/blog/"> newsletter</a></li><li style="font-weight: 400;">Try out our R Shiny<a href="https://appsilon.com/opensource/"> open source</a> packages</li></ul>