Drill-down chart

An example of multi-level drill-down introduced in ECharts v5.5.0, see intro. Navigation is implemented as bar clicks and a “Back” button.
Selecting a bar will present more data for the category, with animated transition (morphing). Hit Back button to return to previous level.
This is an R adaptation of the official example, with minimal Javascript code to provide navigation without Shiny.

df <- read.csv(text ="x, y, groupId, childGroupId
Animals,3,things,animals
Fruits,3,things,fruits
Cars,2,things,cars
Dogs,3,animals,dogs
Cats,4,animals,cats
Birds,3,animals,birds
Pomes,3,fruits,pomes
Berries,4,fruits,berries
Citrus,9,fruits,citrus
SUV,5,cars,suv
Sports,3,cars,sports
Corgi,5,dogs,NA
Bulldog,6,dogs,NA
Shiba Inu,7,dogs,NA
American Shorthair,2,cats,NA
British Shorthair,9,cats,NA
Bengal,2,cats,NA
Birman,2,cats,NA
Goose,1,birds,NA
Owl,2,birds,NA
Eagle,8,birds,NA
Apple,9,pomes,NA
Pear,2,pomes,NA
Kiwi,1,pomes,NA
Blackberries,7,berries,NA
Cranberries,2,berries,NA
Strawberries,9,berries,NA
Grapes,4,berries,NA
Oranges,3,citrus,NA
Grapefruits,7,citrus,NA
Tangerines,8,citrus,NA
Lemons,7,citrus,NA
Limes,3,citrus,NA
Kumquats,2,citrus,NA
Citrons,3,citrus,NA
Tengelos,3,citrus,NA
Ugli fruit,1,citrus,NA
Mazda CX-30,7,suv,NA
BMW X2,7,suv,NA
Ford Bronco Sport,2,suv,NA
Toyota RAV4,9,suv,NA
Porsche Macan,4,suv,NA
Porsche 718 Cayman,2,sports,NA
Porsche 911 Turbo,2,sports,NA
Ferrari F8,4,sports,NA
")

jscode <- "
optionStack = []; grBtn = null;
noBtn = {shape:{height:0}, textContent:{style:{text:''}} };
goForward = function (optionId) {
  chart = get_e_charts(echwid);
  if (grBtn==null) grBtn= chart.getOption().button;
  opt = {
    id: optionId, xAxis: {type:'category'}, button:null,
    series: {datasetId: optionId, universalTransition:{enabled:true}},
    graphic: grBtn
  }
  optionStack.push(chart.getOption().id); // save current id in stack
  chart.setOption(opt);
}; "
jsGoBack = "function () {
  chart = get_e_charts(echwid);
  up1 = optionStack.pop();
  opt = { id: up1, xAxis: {type:'category'}, series: {datasetId: up1}  }
  if (optionStack.length === 0) opt.graphic= noBtn;
  chart.setOption(opt);
}"
jsGoFwd = "function(params) {
  childGroupId = params.data[3]; 
  if (childGroupId) goForward(childGroupId);
}"
initGrp <- 'things'

library(dplyr);  library(echarty) # has to be v.1.6.4.1+
p <- df |> group_by(groupId) |> ec.init(
    preset= F, js= jscode,
    id= initGrp,
    xAxis= list(type= 'category'),
    yAxis= list(minInterval= 1),
    animationDurationUpdate= 500,
    series= list(list(
      type='bar', colorBy= 'data',
      datasetId= initGrp,
      encode= list(
        itemGroupId= 'groupId',
        itemChildGroupId= 'childGroupId'
      ),
      universalTransition= list(enabled=T, divideShape= 'clone')
    )),
    button= list(ec.util(cmd='button', text='Back', js=jsGoBack ))
)
p$x$on <- list(list(
    event='click', query='series.bar', handler=ec.clmn(jsGoFwd) 
))
p