echarts4r create pivotchart (subgroup x axis)

Question

I want to recreate a version of a pivotchart in echarts4r with two subgroup x axis. By pivot chart I mean a chart that has two subgroups of x axis labels, like the one below.

So far I found this SO answer that answers it for an echart but I cannot translate it to echarts4r, is this possible?

Data

dd <- data.frame(
  market = rep(c("Left", "Right"), each = 6),
  gender = rep(rep(c("Female", "Male"), each = 3), 2),
  group = c("Top", "Middle", "Bottom"),
  value = c(10, 2, 4, 5, 1, 7, 7, 4, 1, 2, 5, 6)
)
library(echarts4r)
dd |> 
  group_by(gender) |> 
  e_charts(market) |> 
  e_bar(value)

Which produces the chart below which is almost there, except the second x axis (ie the group information) is missing.

echarts solution

Not a direct solution to my problem, but playing around with echarts, I found this tweak which works, but that doesnt translate to echarts4r.

option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      crossStyle: {
        color: '#999'
      }
    }
  },
  toolbox: {
    feature: {
      magicType: { show: true, type: ['line', 'bar'] },
      restore: { show: true },
      saveAsImage: { show: true }
    }
  },
  legend: {
    data: ['Female', 'Male']
  },
  xAxis: [
    {
      type: 'category',
      data: ["Bottom", "Middle", "Top", "Bottom", "Middle", "Top"],
      axisPointer: {
        type: 'shadow'
      }
    },
    {
      type: "category",
      axisTick: { show: true,
      alignWithLabel: false,
        length: 40,
        align: "left",
        interval: function(index, value) {
          return value ? true : false;
        }},
      offset: -700,
      axisLine: {
        show: false
      },
      data: ["Left", "Right"]
    }
  ],
  yAxis: [
    {
      type: 'value',
      name: 'Value',
      min: 0,
      max: 12,
      interval: 2,
      axisLabel: {
        formatter: function(value) {
          return value;
        }
      }
    }
  ],
  series: [
    {
      name: 'Male',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: [
        7, 1, 5, 6, 5, 2
      ]
    },
    {
      name: 'Female',
      type: 'bar',
      tooltip: {
        valueFormatter: function (value) {
          return value;
        }
      },
      data: [
        4, 2, 10, 1, 4, 7
      ]
    }
  ]
};

(See also this for code)

Answer 1

Your JSON version of your graph can easily be converted into R. I didn't add in all of the content you have (tooltips and all that). However, once you see how to set it up, you'll be able to customize it to your heart's content.

First, you create the plot replacing any [] or {} with list().

You'll use more of the echarts naming convention than echarts4r (i.e., xAxis versus e_x_axis).

ops <- list(
  xAxis = list(
    list(type = "category", position = "bottom", axisLine = list(show = F),
         data = as.list(rep(c("Top", "Middle", "Bottom"), 2))),
    list(type = "category", position = "bottom",
         axisTick = list(
           show = T, alignWithLabel = F, length = 40, align = "left",
           interval = 2),           # interval based on 0 start
         axisLine = list(show = F), axisLabel = list(margin = 30),
         splitLine = list(
           show = T, interval = 2), # interval based on 0 start
         data = list("", "Left", "", "", "Right", ""))),
  yAxis = list(type = "value", name = "Value", min = 0, max = 12, interval = 2),
  series = list(
    list(name = "Male", type = "bar",
         data = dd[dd$gender %in% "Male", ]$value),
    list(name = "Female", type = "bar",
         data = dd[dd$gender %in% "Female", ]$value)
  ),
  legend = list(data = list("Female", "Male"))
)

Now, create your plot:

e_charts() |> e_list(ops)