Highcharts R: Treemap grouping wrong

Question

Im trying to create a treetop with the following data:

library(highcharter)

df=
structure(list(Costcenter = c("N1", "N1", "N1", "N1", "N1", "N1", 
"N1", "N1", "N2", "N2", "N2", "N2", "N2", "N2", "N3", "N3", "N4", 
"N5", "N5", "N6"), Vendor = c("L2", "L2", "L2", "L2", "L2", "L2", 
"L2", "L2", "L1", "L2", "L2", "L2", "L3", "L3", "L2", "L2", "L2", 
"L2", "L2", "L2"), absDiff = c(103.0776, 37.9086, 269.7629, 6.0888, 
515.388, 27.2604, 27.2604, 6.3608, 4.5434, 88.5966, 982.2193, 
139.4249, 0.5452, 722.9811, 130.3381, 147.8434, 271.8786, 88.5966, 
327.4065, 366.564), value = c(103.0776, 37.9086, 269.7629, 6.0888, 
515.388, 27.2604, 27.2604, 6.3608, 4.5434, 88.5966, 982.2193, 
139.4249, 0.5452, 722.9811, 130.3381, 147.8434, 271.8786, 88.5966, 
327.4065, 366.564), Tool = c("M1", "M2", "M4", "M5", "M6", "M9", 
"M10", "M11", "M8", "M5", "M9", "M10", "M3", "M7", "M4", "M5", 
"M5", "M5", "M10", "M5")), .Names = c("Costcenter", "Vendor", 
"absDiff", "value", "Tool"), row.names = c(NA, -20L), class = "data.frame")

When I try to create a treemap with function hctreemap2, this happens

hctreemap2(df, c("Costcenter", "Vendor", "Tool"), size_var = "absDiff", color_var = "value")

There's two N2s, being the idea that it should be grouped in one box. There's any way to solve this problem?

Answer 1

The functions hctreemap and hctreemap2 are deprecated. To make treemaps in Highcharter, you need to use the helper function data_to_hierarchical.

Here's how it works. You won't assign a color to a numeric variable. You could assign it to a level (that's your grouping vars). However, you don't have to assign a color to anything for Highcharter to take the initiative.

d2 <- data_to_hierarchical(df, c("Costcenter", "Vendor", "Tool"),
                           size_var = "absDiff")

The most simple version of this plot would be to render it as this.

hchart(type = "treemap", d2)

In this plot, you only see labels for the lowest level, the colors are by the highest level. It's overwhelmingly underwhelming....

There are a massive amount of ways to customize anything in highcharter. If you wanted to at least be able to drilldown, and nothing else, you need to add one argument.

hchart(type = "treemap", d2, allowTraversingTree = T)

If you wanted to make the labels stand out a bit more, but change nothing else about them, you could do this.

hchart(type = "treemap", d2, allowTraversingTree = T, 
       dataLabels = list(backgroundColor = "black", padding = .5, 
                         style = list(color = "white")))

In my next plot, there are a ton of options incorporated, just so you can see some more of what you can do with this and, really, any type of Highcharter plot (or Highcharts as it's called in JS).

Here's a brief explanation of some of these options that may not be very self-explanatory.

• allowTraversingTree - make the plot drillable
• levels - set plot characteristics by each level (i.e., parent, child, child of child, etc.)
• connectorAllowed - if the label runs off the plot, but space is available in the container, draw the label and connect it to the plot with a line
• dataLabels.format - what you want to appear within the printed label
• data.labels.enabled - whether you want the labels visible
• shadow - add shadow, or 3d effect, to the box (in this case, the label box)
• colorVariation - gradient coloring within the level (only an option on sunburst and treemaps)

You can learn more by reading about the treemap here.

highchart() %>% 
  hc_add_series(data = d2, type = "treemap", crisp = T,
                allowTraversingTree = T,
                dataLabels = list(backgroundColor = "white", padding = .5,
                                  style = list(color = "black")),
                levels = list(
                  list(level = 1, borderWidth = 10,  # border of the cluster
                       dataLabels = list(
                         enabled = T, 
                         format = "Cost Center: {point.name}",
                         connectorAllowed = T, align = "left",
                         verticalAlign = "top")),
                  list(level = 2, borderWidth = 5,   # border of the cluster
                       dataLabels = list(
                         enabled = T,
                         format = "Vendor: {point.name}",
                         connectorAllowed = T, align = "center",
                         verticalAlign = "top")),
                  list(level = 3, 
                                   # add within parent gradient
                       colorVariation = list(key = "brightness", to = -.5),
                       dataLabels = list(
                         backgroundColor = "indigo",
                         shadow = T,
                         style = list(color = "greenyellow"),
                         enabled = T,
                         format = "Tool: {point.name}"))
                )
  )

It's UGLY!