How to plot multiple values of each country on worldmap with Highchart for R

I have a data of co2 emissions as below and am pasting a sample of it:

test_data<-structure(
  list(
    name = c("Afghanistan", "Albania", "Algeria"),
    total = c(217.993073, 293.838988, 4862.566823),
    coal = c(57.676473,
             66.78178, 117.54147),
    oil = c(131.577257, 185.838389, 1653.701878),
    gas = c(20.266629, 16.707287, 2154.349422),
    cement = c(2.516676,
               24.375176, 243.216837),
    flaring = c(5.956043, 0.136357, 693.757211),
    other = c(0, 0, 0),
    coal_percent = c(26.46, 22.73, 2.42),
    oil_percent = c(60.36, 63.24, 34.01),
    gas_percent = c(9.3,
                    5.69, 44.3),
    cement_percent = c(1.15, 8.3, 5),
    flaring_percent = c(2.73,
                        0.05, 14.27),
    other_percent = c(0, 0, 0)
  ),
  class = c("grouped_df",
            "tbl_df", "tbl", "data.frame"),
  row.names = c(NA,-3L),
  groups = structure(
    list(
      name = c("Afghanistan", "Albania", "Algeria"),
      .rows = structure(
        list(1L, 2L, 3L),
        ptype = integer(0),
        class = c("vctrs_list_of",
                  "vctrs_vctr", "list")
      )
    ),
    class = c("tbl_df", "tbl", "data.frame"),
    row.names = c(NA,-3L),
    .drop = TRUE
  )
)

I am trying to show each emission's percent for each country on worldmap with highchart for R.

I tried:

highchart() %>% 
  hc_add_series_map(worldgeojson, df=all_emissions_percent, value="coal_percent",
                    name="Coal Emissions", joinBy = "name") %>% 
  hc_add_series_map(worldgeojson, df=all_emissions_percent, value="oil_percent",
                    name="Oil Emissions", joinBy = "name") %>% 
  hc_add_series_map(worldgeojson, df=all_emissions_percent, value="gas_percent",
                    name="Gas Emissions", joinBy = "name") %>% 
  hc_add_series_map(worldgeojson, df=all_emissions_percent, value="cement_percent",
                    name="Cement Emissions", joinBy = "name") %>% 
  hc_add_series_map(worldgeojson, df=all_emissions_percent, value="flaring_percent",
                    name="Flaring Emissions", joinBy = "name") %>% 
  hc_add_series_map(worldgeojson, df=all_emissions_percent, value="other_percent",
                    name="Other Emissions", joinBy = "name") %>% 
  hc_colorAxis(stops=stops) %>% 
  hc_title(text="Total  Emissions")

The world map is showing the last emission value only i.e., other emissions. Is there any other way to plot all values for individual countries and show as the below examples:

Example

I figured it out myself. First I need to create a new column with all percentages separated by line break '<br>

test_data <- test_data %>%
  mutate(percentages = paste0("Coal: ", round(coal_percent, 2), "%", "<br>",
                              "Oil: ", round(oil_percent, 2), "%", "<br>",
                              "Gas: ", round(gas_percent, 2), "%", "<br>",
                              "Cement: ", round(cement_percent, 2), "%", "<br>",
                              "Flaring: ", round(flaring_percent, 2), "%", "<br>",
                              "Other: ", round(other_percent, 2), "%"))

Then plot this new column on world map using highcharts

highchart() %>%
  hc_add_series_map(worldgeojson, df = test_data, value = "percentages", 
                    name="All Emissions Percentage",joinBy = "name") %>%
  hc_colorAxis(dataClasses = list(
    list(from = 0, to = 5, color = "#74c476"),
    list(from = 5, to = 10, color = "#1e2761"),
    list(from = 10, to = 20, color = "#fdae6b"),
    list(from = 20, to = 30, color = "#7a2048"),
    list(from = 30, to = 40, color = "#e6550d"),
    list(from = 40, to = 50, color = "#a63603"),
    list(from = 50, to = 100, color = "#FF0000")
  )) %>%
  hc_title(text = "All Emissions") %>%
  hc_tooltip(
    useHTML = TRUE,
    formatter = JS(
      "function() {
        var s = '<b><span style=\"font-size:14px;font-weight:bold;text-decoration:underline;\">' + this.point.name + '</span></b><br/>';
        var values = this.point.value.split('<br>');
        $.each(values, function(i, value) {
          var color;
          var percent = value.replace(/[^0-9.]/g, '');
          if (percent <= 5) {
            color = '#74c476';
          } else if (percent <= 10) {
            color = '#1e2761';
          } else if (percent <= 20) {
            color = '#fdae6b';
          } else if (percent <= 30) {
            color = '#7a2048';
          } else if (percent <= 40) {
            color = '#e6550d';
          } else if (percent <= 50) {
            color = '#a63603';
          } else {
            color = '#FF0000';
          }
          s += '<span style=\"color: ' + color + '; font-weight: bold;\">' + value + '</span><br/>';
        });
        return s;
      }"
    )
  )

Note that the color_axis and hc_tooltip formatter are completely optional. I have customized it for aesthetic appearance: