Creating Interactive Drilldown Charts in R Highcharts

by jsendak | Apr 18, 2024 | DS Articles

You have the fundamentals of R Highcharts under your belt by now. The next logical step is to introduce a bit more complexity in the code, but for the greater good. And that good is implementing drilldown charts straight in R! This will allow you to click on individual chart elements to open up yet another visualization that displays the data for a selected segment. Think sales for a country (overall) vs sales for a city (drilled down).

And sure, working with R Highcharts drilldown involves more code, as you have to prepare two datasets and link them, but the overall benefits outweigh the costs. You’ll see why in a bit. But first, let’s answer the question – What’s wrong with plain visualizations in the first place?

Sick of tradional filter menus on websites and applications? Replace them with natural text – Introducing Human Readable Fitlers.

Table of contents:

• What’s the Problem with Plain Highcharts Visualizations?
• Your First R Highcharts Drilldown Visualization
• Styling R Highcharts Drilldown Plots
• Exploring Other Chart Types for Drilldowns
• Summing Up R Highcharts Drilldown

What’s the Problem with Plain Highcharts Visualizations?

Unlike many R packages, Highcharts (through highcharter) is animated and interactive out of the box. There’s nothing wrong with it, and you’re likely to get better-looking results than with almost any other alternative.

That doesn’t mean you can’t take the whole thing a step further. The “problem” is – when users see interactive elements, they want to click on them. It’s an issue because nothing happens on click by default. This section will demonstrate it.

To start, install the following R packages if you don’t have them already:

install.packages(c("dplyr", "purrr", "highcharter"))

Then, create a new R script and paste the following imports at the top.

library(dplyr)
library(purrr)
library(highcharter)

We’ll use a custom dataset for this article, so let’s go over it next.

Our Dataset

Opting for a custom dataset means we’ll spend the least amount of time possible cleaning and aggregating data, which is great, because we want to focus on visualization.

Copy the following snippet into a data.csv file – it contains a made-up total sales for cities in three countries:

country,city,sales
Germany,Berlin,505
Germany,München,902
Germany,Köln,755
Germany,Frankfurt,307
France,Paris,955
France,Lyon,802
France,Marseille,504
Spain,Madrid,777
Spain,Barcelona,1024
Spain,Sevilla,550
Spain,Valencia,304
Spain,Bilbao,601

In R, you can load this dataset with the read.csv() function:

sales <- read.csv("data.csv")
sales

Image 1 – Made-up sales dataset

Dataset covered! Let’s visualize it with R Highcharts to see what’s wrong.

The Problem: Users Want to Click on Interactive Elements

Assume you want to see the total amount of sales per country and per city. Easy enough, but it will require two charts. Let’s cover country-level first.

You can use the dplyr package to group the data by country and sum the sales:

sales_by_country <- sales %>%
  group_by(country) %>%
  summarise(
    sales = sum(sales)
  )
sales_by_country

Image 2 – Sales by country data

Using your R Highcharts knowledge from the previous article, it’s easy to construct an interactive column chart:

hchart(sales_by_country, "column", hcaes(x = country, y = sales), color = "#0198f9") |>
  hc_title(text = "Total sales by country")

Image 3 – Sales by country plot

The thing is interactive and you immediately want to click on individual columns – but nothing happens when you do so.

On click, you should see a per-city sales distribution for a country you’ve clicked on, as shown below:

sales_spain <- sales %>%
  filter(country == "Spain") %>%
  select(-country)
sales_spain

Image 4 – Sales by city in Spain data

Or visually:

hchart(sales_spain, "column", hcaes(x = city, y = sales), color = "#0198f9") |>
  hc_title(text = "Sales in Spain by city")

Image 5 – Sales by city in Spain plot

These two charts should be connected somehow. You should be able to click on a column for a given country to see drilled-down sales distribution per city. You should also be able to go back from the second visualization to the first.

R Highcharts drilldown visualizations are the way to go!

Your First R Highcharts Drilldown Visualization

As mentioned earlier, drilldown charts are nothing but a connected set of two charts. For you, this means you’ll have to prepare two datasets – one responsible for each chart. Preparing the second one is a bit tricky, but we’ll cross that bridge when we get to it.

The dataset for the first chart is nothing you haven’t seen before – a summation of sales on a country basis:

base_chart_data <- sales %>%
  group_by(country) %>%
  summarise(
    sales = sum(sales)
  ) %>%
  arrange(desc(sales))
base_chart_data

Image 6 – Data for the base chart

This is where things get interesting. We’ll now use a new group_nest() function to group the sales data by country column and nest the data within each group. You’ll end up with a list-like column in the end.

Then, we apply the map() function to iterate over each nested data frame, and use mutate() to add two new columns.

The final call to map() is used to convert the data frame to a format that’s suitable for charts, all using the list_parse() function.

Here’s how it looks in the code:

drilldown_chart_data <- sales %>%
  group_nest(country) %>%
  mutate(
    id = country,
    type = "column",
    data = map(data, mutate, name = city, y = sales),
    data = map(data, list_parse)
  )
drilldown_chart_data

You end up with a data frame that has one column of type list:

Image 7 – Data for the drilldown chart (1)

Upon further inspection, you can see that the list column contains the data that should be made visible in the drilled-down visualization:

Image 8 – Data for the drilldown chart (2)

It’s just a way of organizing data frames that you’ll have to get used to.

The best part? You now have everything needed to create a drilldown visualization using R Highcharts. The only new function is hc_drilldown() which will add drilldown functionality to the chart. The first parameter allows the user to click on individual columns to get into a drilled-down version of the chart, and the second specifies the drilldown series for the chart.

Note: If you want all columns to be colored identically, set colorByPoint = FALSE.

hchart(
  base_chart_data,
  "column",
  hcaes(x = country, y = sales, drilldown = country),
  name = "Sales",
  colorByPoint = TRUE
) |>
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list_parse(drilldown_chart_data)
  )

Image 9 – Your first drilldown chart

And that’s your first R Highcharts drilldown chart! It’s a bit rough around the edges, but it gets the basics done pretty well. Let’s style it a bit next.

Styling R Highcharts Drilldown Plots

This section will show you how to tweak the looks of tooltips and how to add common chart elements to your visualizations to make them production-ready.

Changing Colors and Adding Chart Elements

We have three columns on the first chart, which means you can pass in a vector of three hex colors to hc_colors(). That will change the individual bar coloring immediately.

As for the title, subtitle, axis labels, and the overall theme – everything remains the same as explained in our introductory article.

hchart(
  base_chart_data,
  "column",
  hcaes(x = country, y = sales, drilldown = country),
  name = "Sales",
  colorByPoint = TRUE
) |>
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list_parse(drilldown_chart_data)
  ) |>
  hc_colors(c("#004c5f", "#0099bf", "#00ccff")) |>
  hc_title(text = "Company sales report") |>
  hc_subtitle(text = "Source: Internal") |>
  hc_xAxis(title = list(text = "Location")) |>
  hc_yAxis(title = list(text = "Sales in $000")) |>
  hc_add_theme(hc_theme_smpl())

Image 10 – Changing colors and adding chart elements

You can view more themes by visiting the official documentation.

There really isn’t much to tweaking the basic aesthetics of your Highcharts visualizations. Everything you already know from the previous article still holds, as demonstrated in the above example.

Tooltip Customization

There are two ways to customize a tooltip in R Highcharts. The first leverages tooltip_table() which expects two vectors of corresponding X and Y values.

With this approach, you need to construct the tooltip_table first and then pass it as pointFormat to hc_tooltip() function.

The rest of the code remains unchanged:

x <- c("Sales (000):")
y <- c("${point.sales}")

tt <- tooltip_table(x, y)

hchart(
  base_chart_data,
  "column",
  hcaes(x = country, y = sales, drilldown = country),
  name = "Sales",
  colorByPoint = TRUE
) |>
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list_parse(drilldown_chart_data)
  ) |>
  hc_tooltip(
    pointFormat = tt,
    useHTML = TRUE,
    valueDecimals = 0
  ) |>
  hc_colors(c("#004c5f", "#0099bf", "#00ccff")) |>
  hc_title(text = "Company sales report") |>
  hc_subtitle(text = "Source: Internal") |>
  hc_xAxis(title = list(text = "Location")) |>
  hc_yAxis(title = list(text = "Sales in $000")) |>
  hc_add_theme(hc_theme_smpl())

Image 11 – Tooltip customization (1)

The second approach is more manual but allows you to take the ultimate control over the contents of the tooltip, how they’re arranged, and what they look like.

It still uses the same hc_tooltip() function, but this time, you need to pass in a JavaScript function that returns an HTML-formatted string, as shown below:

hchart(
  base_chart_data,
  "column",
  hcaes(x = country, y = sales, drilldown = country),
  name = "Sales",
  colorByPoint = TRUE
) |>
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list_parse(drilldown_chart_data)
  ) |>
  hc_tooltip(
    formatter = JS("function(){return '<i>Sales in 000:</i><br>' + '$ ' + this.point.sales;}")
  ) |>
  hc_colors(c("#004c5f", "#0099bf", "#00ccff")) |>
  hc_title(text = "Company sales report") |>
  hc_subtitle(text = "Source: Internal") |>
  hc_xAxis(title = list(text = "Location")) |>
  hc_yAxis(title = list(text = "Sales in $000")) |>
  hc_add_theme(hc_theme_smpl())

Image 12 – Tooltip customization (2)

The string can get quite messy if you want to display multiple fields, but it’s highly flexible.

Whichever you opt for, you won’t go wrong.

Exploring Other Chart Types for Drilldowns

It’s important to address that column charts aren’t the only type of chart suitable for drill-downs. The concept is chart-type-agnostic, but column charts made the most sense in our use case.

The other type that could make sense is a pie chart, so let’s see how to go about it.

From the previous code snippet, you only need to change "column" into "pie" – it’s that easy. We’ve also removed some other parts of the code responsible for styling, as they don’t make much sense for pie charts:

hchart(
  base_chart_data,
  "pie",
  hcaes(x = country, y = sales, drilldown = country),
  name = "Sales",
  colorByPoint = TRUE
) |>
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list_parse(drilldown_chart_data)
  ) |>
  hc_title(text = "Company sales report") |>
  hc_subtitle(text = "Source: Internal")

Image 13 – Pie chart with a column chart in drill down mode

The only problem is, that you get a pie chart as a default one, and a column chart is still used in the drilled-down version. Maybe that’s what you want, but it probably isn’t.

The reason why this happens boils down to the logic behind drilldown_chart_data. We explicitly said we wanted a column chart, and Highcharts has no trouble working with different chart types in a drilldown.

To fix this, we’ll have to redeclare drilldown_chart_data and specify type = "pie". Everything else remains unchanged:

drilldown_chart_data <- sales %>%
  group_nest(country) %>%
  mutate(
    id = country,
    type = "pie",
    data = map(data, mutate, name = city, y = sales),
    data = map(data, list_parse)
  )

hchart(
  base_chart_data,
  "pie",
  hcaes(x = country, y = sales, drilldown = country),
  name = "Sales",
  colorByPoint = TRUE
) |>
  hc_drilldown(
    allowPointDrilldown = TRUE,
    series = list_parse(drilldown_chart_data)
  ) |>
  hc_title(text = "Company sales report") |>
  hc_subtitle(text = "Source: Internal")

Image 14 – Fixing the pie chart drilldown mode

You now have a pie chart both in the default view and in the drilled-down view. Neat!

It’s worth noting that you can easily turn this visualization into a line chart (the same changes are required), but it doesn’t make much sense visually. Some chart types will require different parameter names in hcaes(), so make sure to keep that in mind.

Summing Up R Highcharts Drilldown

To conclude, look no further than adding drill-downs to existing charts if you want to take your applications and websites to the next level. They won’t change the user interface at all, but will significantly improve the user experience because users want to click on interactive elements.

Speaking of applications, Highcharts is fully compatible with R Shiny, which will be a topic for an upcoming article on the Appsilon blog. Make sure to stay tuned because we’ll build a modern dashboard will plain interactive charts and drilldowns from scratch!

Level up your R/Shiny Team Skills – Download our new Ebook for 2024 and beyond.

The post appeared first on appsilon.com/blog/.

Continue reading: R Highcharts Drilldown – How to Create Animated and Interactive Drilldown Charts in R

Deeper Insight into Data with R Highcharts Drilldown

The article discusses an enhancement to existing Highcharts in R – the implementation of drilldown charts. Drilldowns allow users to “dive” into specific parts of the data by clicking on chart elements to display additional information about the selected segment. The implementation of these charts involves writing a more complex code and preparing double datasets, comparing to average chart creation, but the resulting interactivity and detail level makes it well worth the effort.

The Future Data Analysis Framework

Drilldown charts are an advanced means of data representation that offers greater details about each segment. It enables users to delve deeper into data visualizations with the click of a button, marking an improvement in user experience, particularly in the interactive and dynamic dimension of data analysis. In this method, plain Highcharts emerge as animated, interactive visualizations which encourage users to interact with the visual elements. The advancements in R Highcharts, particularly with drilldown functionalities, have developed an expectation for interactive elements in visualizations which operate efficiently and effectively.

Implications and Possible Developments

R Highcharts, with its drilldown capabilities, are set to influence the future of data visualisation in various ways:

• Increased User Interaction: The trend of user interactivity in visualizations will continue to rise. Users will naturally expect visual elements to be interactive,
• More Complex Codes: Data analysts will need to increase their coding skills as creating interactive visualizations requires a more complex code and double datasets. It will require getting comfortable with mutating and mapping functions within the data frame to construct the desired interactive visualization.
• Flexible Drilldown Charts: Not limited to column charts, drilldown functionalities also apply to pie charts and line charts. This dual-functionality provides a broader view in the default setting while offering a detailed view in the drilldown.
• Growth in the Use of R Shiny: With Highcharts fully compatible with R Shiny, this application is poised to become increasingly popular.

Actionable Advice

Considering the potentials of R Highcharts and its drilldown functionalities, here are some recommendations for future steps:

1. Learn More Complex Coding: With the increased demand for complex and interactive visualizations, it would be beneficial for data analysts and visualisation specialists to master the skill of writing complex codes.
2. Invest in Interactive Visualizations: Companies should invest in creating interactive and detailed visualizations to improve user experience and maximise user interaction.
3. Leverage R Shiny: Given the compatible potential with Highcharts, leveraging R Shiny could further improve the visualization experience.
4. Stay tuned for Industry Developments: With ongoing advancements in visualization capabilities, it is recommended that industry professionals keep abreast with the new developments in R Highcharts and other visualization tools.

Advancements in R Highcharts, particularly in the context of drilldown functionalities, signify significant potential in the realm of data visualization that is sure to influence the future of the data science industry.

Read the original article