Search code examples
rhighchartstooltippercentagetreemap

Percentage in hctreemap2 of Highcharter using tooltip?


I made a treemap with Highcharter. As the map is interactive I want it to show both the total quantity and the percentage that each group represents of the total. I have the following 2 codes that I made based on other questions here but both ways it shows the percentage at 0.00%. How can I add percentage information to the highcarter treemap tooltip?

#Way 1
hctreemap2(data =Objeto,
           group_vars = c("objeto_contratar"),
           size_var = "total",
           color_var = "total",
           layoutAlgorithm = "squarified",
           levelIsConstant = FALSE) %>% 
  hc_colorAxis(minColor = brewer.pal(7, "Blues")[2],
               maxColor = brewer.pal(7, "Blues")[7]) %>%
               hc_tooltip(pointFormat = "Objeto: {point.name} <br>
                            Contratos: {point.value:,.0f} <br>
                            Porcentaje: {point.percentage:.2f} %")  %>% 
  hc_exporting(enabled = TRUE)

#Way 2
hctreemap2(data =Objeto,
           group_vars = c("objeto_contratar"),
           size_var = "total",
           color_var = "total",
           layoutAlgorithm = "squarified",
           levelIsConstant = FALSE) %>% 
  hc_colorAxis(minColor = brewer.pal(7, "Blues")[2],
               maxColor = brewer.pal(7, "Blues")[7]) %>%
  hc_tooltip(formatter = JS("function(){
                                return  '</b>'  + this.point.name + ': <br> Contratos: ' +this.point.value+' <br> Porcentage: '+Highcharts.numberFormat(this.point.percentage)+'%'
  }"),useHTML = FALSE)  %>% 
  hc_exporting(enabled = TRUE)

Could someone tell me how do I get it to display both data (the amount and percentage it represents) on the same graph when I hover over it?

Solution

  • Someone helped me. This is what he did and it works. I hope this helps someone else.

    hctreemap2(data =Objeto,
                   group_vars = c("objeto_contratar"),
                   size_var = "total",
                   color_var = "total",
                   layoutAlgorithm = "squarified",
                   levelIsConstant = FALSE) %>% 
          hc_colorAxis(minColor = pal_azul(7)[1],
                       maxColor = pal_azul(7)[7]) %>% 
          hc_tooltip(formatter = JS('function () {
                                var total = 0;
                                for (var i = 0; i < this.series.data.length; i++)
                                {
                                if (this.series.data[i].node.children.length == 0)
                                total+=this.series.data[i].node.val;
                                }
                                var value;
                                if (this.point.node.children.length == 0)
                                {
                                value = this.point.options.value;
                                }
                                else
                                {
                                value = this.point.node.childrenTotal;
                                }
                                var porcentage = (value / total) *100;
                                return  "</b>"  + this.point.name + ": <br> Contratos: " +this.point.value+" <br> Porcentage: "+Highcharts.numberFormat(porcentage)+"%"
                                }'),useHTML = FALSE)  %>% 
          hc_exporting(enabled = TRUE)