## Sparklines

In order to use the sparkline functions within {reactablefmtr}, one must first download the {dataui} package from GitHub.

Once installed, users of the development version of {reactablefmtr} will have the ability to create highly customizable interactive sparkline line charts and bar charts.

In order to download the development version, please use remotes::install_github("kcuilla/reactablefmtr").

We will start off with an example of the sparkline line charts using data from the {palmerpenguins} package.

The first thing we need to do is convert the flipper_length_mm column to a list format:

# Load packages
library(reactablefmtr)
library(tidyverse)
library(palmerpenguins)
df <- penguins %>%
filter(!is.na(sex)) %>%
group_by(species, sex) %>%
summarize(flipper_length = list(flipper_length_mm))

Then, we can call react_sparkline() within the cell of {reactable}:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
flipper_length = colDef(
cell = react_sparkline(df)
)
)
)

By default, react_sparkline() is interactive and displays the value when we hover over them, but there is an option to turn this off by setting tooltip to FALSE.

## Line Options

Options to change the appearance of the sparkline:

We can change the color of the line with line_color and the width of the line by adjusting the line_width:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
flipper_length = colDef(
cell = react_sparkline(
df,
line_color = "red",
line_width = 3
)
)
)
)

If we want to assign line colors to specific groups, we can do so by creating a columns with the color assignments and calling that column name within line_color_ref:

# Assign colors to each species of penguins
df <- df %>%
mutate(
cols = case_when(
species == "Adelie" ~ "#f5a24b",
species == "Chinstrap" ~ "#af52d5",
species == "Gentoo" ~ "#4c9b9b",
TRUE ~ "grey"
)
)

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkline(
df,
line_color_ref = "cols"
)
)
)
)

Note that the color of the tooltip will automatically match the color of the line.

By default, the curvature of the line is of type “cardinal”, but we have the option to change it to “linear” as well as “monotoneX”, or “basis” within line_curve:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkline(
df,
line_curve = "linear",
line_color_ref = "cols"
)
)
)
)

## Area Charts

Options to change the appearance of the area beneath the sparkline:

By setting show_area to TRUE, we can show the filled area beneath the line, and by default, the color of the area will automatically be inherited from the line_color.

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkline(
df,
height = 80,
show_area = TRUE
)
)
)
)

We can use the “cols” column we used earlier to conditionally assign colors to each of the penguin species and the color of the area will automatically be inherited from those color assignments:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkline(
df,
height = 80,
show_area = TRUE,
line_color_ref = "cols"
)
)
)
)

The color of the filled area is 90% transparent, but we are able to darken the colors by increasing the opacity within area_opacity:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkline(
df,
height = 80,
show_area = TRUE,
area_opacity = 1,
line_color_ref = "cols"
)
)
)
)

Alternatively, we can conditionally assign colors to just the area using area_color_ref.

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkline(
df,
height = 80,
show_area = TRUE,
line_width = 2,
area_color_ref = "cols"
)
)
)
)

## Points and Labels

Options to change the appearance of the points and labels of the sparkline:

If we wanted to add points to particular data points on the sparkline, we could do so using highlight_points. Within highlight_points, we can call a helper function, which is also called highlight_points, and assign colors to either the min, max, first, last, and/or all data points.

Below, we are assigning the color red to the minimum values on the sparkline and the color blue to the maximum values:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkline(
df,
highlight_points = highlight_points(min = "red", max = "blue")
)
)
)
)

We may also apply the labels directly to the sparkline by specifying which values we would like to display with labels. The label options are the same as highlight_points where we can label either the first, last, min, max, or all values. Note that the labels option will work with or without the highlight_points option:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkline(
df,
labels = c("first", "last"),
highlight_points = highlight_points(first = "green", last = "purple")
)
)
)
)

## Statlines

Options to change the appearance of the statlines:

We may want to display summary statistics about each sparkline series and can do this by using the statline option. The statistical summary options that are available are mean, median, min, or max.

The example below adds a mean reference line to each of the sparklines and displays the mean value to the right of each line:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
minWidth = 200,
cell = react_sparkline(
df,
height = 80,
statline = "mean"
)
)
)
)

There are additional options to control the appearance of the dotted line and label as well:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkline(
df,
height = 80,
statline_color = "orange",
statline_label_color = "orange",
statline_label_size = "1.1em",
statline = "mean"
)
)
)
)

## Bandlines

Options to change the appearance of the bandlines:

To add a bandline to each of the sparklines, we can use the bandline option as shown below. The options within bandline are “innerquartiles” which shows the inner-quartile range of each series, and “range” which will show the full range of the sparkline from the minimum value to the maximum value.

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkline(
df,
height = 80,
line_width = 1,
line_color_ref = "cols",
bandline = "innerquartiles"
)
)
)
)

The color and opacity of the bandline can also be adjusted as shown below:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkline(
df,
height = 80,
line_color_ref = "cols",
bandline = "innerquartiles",
bandline_color = "green",
bandline_opacity = 0.4
)
)
)
)

We may also stack multiple elements together, such as showing the bandline with a mean statline:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkline(
df,
height = 80,
line_color_ref = "cols",
highlight_points = highlight_points(min = "red", max = "blue"),
labels = c("min", "max"),
statline = "mean",
bandline = "innerquartiles"
)
)
)
)

Additional options to change the appearance of the sparklines not outlined in the sections above:

## Bar Charts

To display the sparkline chart as a bar chart rather than a line chart, we can use react_sparkbar():

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkbar(df)
)
)
)

## Bar Color and Outline Options

Options to change the appearance of the fill and outline of the bars:

Many of the options that are available within react_sparkline() are also available within react_sparkbar() with some few minor differences. For example, if we wanted to assign custom colors to each of the bars, we could use fill_color_ref:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkbar(
df,
fill_color_ref = "cols")
)
)
)

By default, the line color around each of the bars is transparent, but we can also assign custom colors to the outlines with outline_color_ref:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkbar(
df,
fill_color = "transparent",
outline_width = 2,
outline_color_ref = "cols"
)
)
)
)

## Highlight Bars and Labels

Options to change the appearance of the highlighted bars and labels:

Another difference in react_sparkbar is if we want to highlight particular data points, we would use highlight_bars instead of highlight_points. The options in which data points to highlight are the same (first, last, min, max, or all).

Note: the height of the bars auto-starts at the minimum value in each series. Therefore, if we assign a color to the minimum value within highlight_bars, we will be unable to see it unless we declare the minimum value as a number less than the minimum value present in the dataset:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkbar(
df,
height = 80,
min_value = 160,
fill_color = "lightgrey",
highlight_bars =  highlight_bars(min = "red", max = "blue")
)
)
)
)

We can also assign labels using the same method we did with react_sparkline() above:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkbar(
df,
height = 80,
fill_color = "lightgrey",
labels = c("first", "last"),
label_size = "1em",
highlight_bars = highlight_bars(first = "green", last = "purple")
)
)
)
)

## Statlines and Bandlines

Just like with react_sparkline(), statlines and bandlines can be layered onto react_sparkbar using the same options outlined above:

reactable(
df,
columns = list(
species = colDef(maxWidth = 85),
sex = colDef(maxWidth = 85),
cols = colDef(show = FALSE),
flipper_length = colDef(
cell = react_sparkbar(
df,
height = 80,
fill_color_ref = "cols",
bandline = "innerquartiles",
statline = "mean"
)
)
)
)