Book Image

Hands-On Dashboard Development with Shiny

By : Chris Beeley
Book Image

Hands-On Dashboard Development with Shiny

By: Chris Beeley

Overview of this book

Although vanilla Shiny applications look attractive with some layout flexibility, you may still want to have more control over how the interface is laid out to produce a dashboard. Hands-On Dashboard Development with Shiny helps you incorporate this in your applications. The book starts by guiding you in producing an application based on the diamonds dataset included in the ggplot2 package. You’ll create a single application, but the interface will be reskinned and rebuilt throughout using different methods to illustrate their uses and functions using HTML, CSS, and JavaScript. You will also learn to develop an application that creates documents and reports using R Markdown. Furthermore, the book demonstrates the use of HTML templates and the Bootstrap framework. Moving along, you will learn how to produce dashboards using the Shiny command and dashboard package. Finally, you will learn how to lay out applications using a wide range of built-in functions. By the end of the book, you will have an understanding of the principles that underpin layout in Shiny applications, including sections of HTML added to a vanilla Shiny application, HTML interfaces written from scratch, dashboards, navigation bars, and interfaces.
Table of Contents (5 chapters)

Using CSS

We are done with the basics of the HTML tags and now we will be changing the styles of the application using CSS and a stylesheet. The following screenshot shows the final output that we will be creating using CSS and a style sheet:

If you have noticed, the font and color of the title of the UI panel, paragraph text size, and formatting of the subheading has changed as compared to the previous application that we used in the Creating a UI using HTML section. Let's get started.

The best way to include CSS is by inserting the style with the element that you require. For example, for the heading style in the Control panel, we have the h1 tag defined inline with the following tag:

h1("Control panel", style = "color:red; font-family:Impact, Charcoal, sans-serif;") 

When using CSS in Shiny, basic CSS rules are applied; for example, a semicolon (;) is used to separate elements. The next method for using CSS is to include it in the head section using the tags command:

tags$style(HTML("h3 { 
color: blue;font-family:courier; 
text-decoration: underline; 

You must have noticed that the entire piece of CSS code is included in the head and style tag. The use of the HTML command is to tell Shiny that the command is formatted in HTML and should not be rendered.

The last method of using CSS in Shiny is to use a separate style sheet. For this, we will be using the include command, as follows:


You can use this command anywhere in the code block, but it is advisable to add this command at the top of the UI definition. The style.css file should be present in the same directory that your ui.r file is placed in and not in the www folder.

Writing CSS is quite simple, but the method used depends on the amount of styling used aligned to the application. Your choice depends on where you want to add your CSS. If you are defining a lot of code in a line a number of times, it is advisable to use a proper style sheet. We will be creating an application to download reports in a Word document using R Markdown.