echarts4r add multiple x with one xAxis label having duplicated values

Question

I want to plot a line chart using echarts4r, and the xAxis's label need to have the duplicated values. My packageVersion of echarts4r is 0.3.2.

And my codes as the follows:

library(echarts4r)
library(magrittr)
library(data.table)

dt <- data.table(
  x_label = c('A', 'A', 'A', 'D', 'D', 'M', 'A'),
  x_value = c('a', 'b', 'c', 'd', 'e', 'f', 'g'),
  y = 8:14
)

p <- e_chart(dt, x_value)
p <- e_x_axis(p, show = FALSE, index = 0, position = 'top', data = purrr::map(seq_len(nrow(dt)), ~{
  list(value = dt[.x, x_value])
}))   # The show argument FALSE can not be worked 

p <- e_line_(p, 'y', x_index = 0)

p <- e_x_axis(p, show = TRUE, position = 'bottom', data = purrr::map(seq_len(nrow(dt)), ~{
  list(value = dt[.x, x_label])
}), index = 1)
p <- e_line_(p, 'y', x_index = 1)
p

But the top xAxis label can not be hide, I don't know why. Does anybody tell me how to custom the xAxis's label in a line chart with duplicated values ？

Or I don't know how to convert this options to R code:

option = {
  title: {
    text: 'ECharts entry example'
  },
  tooltip: {},
  legend: {
    data:['Sales']
  },
  xAxis: [
    {
        position: "bottom",
        data: ["shirt","cardign","chiffon shirt","pants","heels","socks"]
    },
    {
        position: "bottom",
        data: ["group1", "", "", "group2", "", ""],
      interval: 1,
      axisLine: {
        show: false
      },
      axisTick: {
        alignWithLabel: false,
        length: 40,
        align: "left",
        interval: function(index, value) {
          return value ? true : false;
        }
      },
      axisLabel: {
        margin: 30
      },
      splitLine: {
        show: true,
        interval: function(index, value) {
          return value ? true : false;
        }
      }
    }
  ],
  yAxis: {},
  series: [{
    name: 'Sales',
    type: 'bar',
    data: [5, 20, 36, 10, 10, 20]
  }]
};

Answer 1

I just found your question, you may no longer need this answer, but perhaps someone else will benefit from it.

You were looking for the function e_list() from echarts4r. This method does not sort or aggregate for you. However, you can use R or JS functions.

In the code, I've only sorted by x_label since all of x_value is unique.

library(echarts4r)
library(data.table)

dt <- data.table(
  x_label = c('A', 'A', 'A', 'D', 'D', 'M', 'A'),
  x_value = c('a', 'b', 'c', 'd', 'e', 'f', 'g'),
  y = 8:14
)

opts <- list(
  xAxis = list(
    list(data = as.list(dt[order(x_label)][, x_value]), position = "bottom"),
    list(data = list("A", "", "", "", "D", "", "M"), position = "bottom",
         axisLine = list(show = F), axisLabel = list(margin = 30),
         axisTick = list(
           show = T, alignWithLabel = F, length = 40, align = "left",
           interval = htmlwidgets::JS(
             "function(index, value) {return value ? true : false;}")),
         splitLine = list(show = T,
           interval = htmlwidgets::JS(
             "function(index, value) {return value ? true : false;}")
         ))),
  yAxis = list(type = "value"),
  series = list(list(type = "line", name = "Y", # data has to be sorted
                     data = as.list(dt[order(x_label)][, y])))
)

e_charts() %>% e_list(opts)

If you want to see the JS plot you provided in R code, there are only a few steps to take.

• don't name the list of lists option (that's a keyword in R)
• replace JS functions with values or encapsulated in htmlwidgets::JS()
• for everything outside of htmlwidgets::JS():
• remove any semi-colons
• replace : with =
• replace {}, [], (), with list()
• replace true, false with T, F (or TRUE, FALSE)

Here's the code. I kept the same spacing as in the JSON you provided. There are two notable editions to make this work, for both axes, I added the type. (You'll see comments in the code about the changes from the JSON.)

opts2 = list(
  title = list(
    text = 'ECharts entry example'
  ),
  tooltip = list(),
  legend = list(
    data = list('Sales')
  ),
  xAxis = list(
    list(
      position = "bottom", type = "category",  # <--- added this (and fixed spelling of cardigan)
      data = list("shirt","cardigan","chiffon shirt","pants","heels","socks"),
    ),
    list(
      position = "bottom", 
      data = list("group1", "", "", "group2", "", ""),
      interval = 1,
      axisLine = list(
        show = F
      ),
      axisTick = list(
        alignWithLabel = F,
        length = 40,
        align = "left",
        interval = htmlwidgets::JS("function(index, value) {return value ? true : false;}")
      ),
      axisLabel = list(
        margin = 30
      ),
      splitLine = list(
        show = T,
        interval = htmlwidgets::JS("function(index, value) {return value ? true : false;}")
      )
    )
  ),
  yAxis = list(type = "value"),    # <--- like the xaxis, type added here
  series = list(list(
    name = 'Sales',
    type = 'bar',
    data = list(5, 20, 36, 10, 10, 20)
  ))
)

e_charts() |> e_list(opts2)

Keep in mind that if your view (i.e., RStudio viewer pane, browser, etc.) is too narrow, in which the labels in the plot would overlap, some of the labels are hidden. When in doubt, change the size of your view.

This is an example of what you might see if the view is too narrow.