echarts4r e_mark_area() different fill colours

Question

I am trying to highlight different periods of a timeseries plot using the echarts4r package - reprex below.

df <- data.frame(Date = seq(from = as.Date("2023-01-01"), by = "day", length.out = 100),
                 Count = sample(100:150, size = 100, replace = TRUE))

p1_sta <- as.Date("2023-01-01")
p1_end <- as.Date("2023-01-15")

p2_sta <- as.Date("2023-02-01")
p2_end <- as.Date("2023-03-01")

p3_sta <- as.Date("2023-04-01")
p3_end <- as.Date("2024-04-10")

df %>%
  group_by(Date) %>% 
  summarise(Count = sum(Count)) %>% 
  e_charts(Date, barCategoryGap = "1%") %>%
  e_line(Count, color = "grey", name = "", symbolSize = 3) %>%
  e_mark_area(
    data = list(
      list(xAxis = p1_sta, name = "A"), 
      list(xAxis = p1_end)
    ), itemStyle = list(color = "lightgreen", opacity = 0.1)) %>% 
  e_mark_area(
    data = list(
      list(xAxis = p2_sta, name = "B"), 
      list(xAxis = p2_end)
    ), itemStyle = list(color = "orange", opacity = 0.1)) %>% 
  e_mark_area(
    data = list(
      list(xAxis = p3_sta, name = "C"), 
      list(xAxis = p3_end)
    ), itemStyle = list(color = "red", opacity = 0.1)) %>% 
  e_x_axis(show = FALSE) %>% 
  e_y_axis(name = "Beds Occupied", nameLocation ="middle",
           nameTextStyle = list(padding = c(0,0,20,0))) %>%
  e_tooltip(axisPointer = list(type = "cross"),
            trigger = "axis",
            backgroundColor = "rgba(40, 40, 40, 0.75)",
            borderColor = "rgba(0, 0, 0, 0)", textStyle = list(color = "#fcfcff")) %>%
  e_legend(bottom = "1%") %>%
  e_grid(right = "1%", left = "4%", bottom = "2%", top = "10%")

This code highlights the areas, but the same "lightgreen" colour is applied to all three. My goal is to have different colours for each highlighted section.

I have been able to find someone with a similar problem here: https://github.com/JohnCoene/echarts4r/issues/99 -- and someone responding has provided what looks like a working answer, but, unfortunately, I haven't been successful in adjusting the code to apply to my example.

Any help really appreciated. Thanks.

Answer 1

One option which works for me is to move the specs for the itemStyle into the specs of the data= attribute.

library(echarts4r)
library(dplyr, warn = FALSE)

set.seed(123)

df %>%
  group_by(Date) %>%
  summarise(Count = sum(Count)) %>%
  e_charts(Date, barCategoryGap = "1%") %>%
  e_line(Count, color = "grey", name = "", symbolSize = 3) %>%
  e_mark_area(
    data = list(
      list(
        xAxis = p1_sta,
        name = "A",
        itemStyle = list(color = "lightgreen", opacity = 0.5)
      ),
      list(xAxis = p1_end)
    )
  ) %>%
  e_mark_area(
    data = list(
      list(
        xAxis = p2_sta, name = "B",
        itemStyle = list(color = "orange", opacity = 0.1)
      ),
      list(xAxis = p2_end)
    )
  ) %>%
  e_mark_area(
    data = list(
      list(
        xAxis = p3_sta, name = "C",
        itemStyle = list(color = "red", opacity = 0.1)
      ),
      list(xAxis = p3_end)
    )
  ) %>%
  e_x_axis(show = FALSE) %>%
  e_y_axis(
    name = "Beds Occupied", nameLocation = "middle",
    nameTextStyle = list(padding = c(0, 0, 20, 0))
  ) %>%
  e_tooltip(
    axisPointer = list(type = "cross"),
    trigger = "axis",
    backgroundColor = "rgba(40, 40, 40, 0.75)",
    borderColor = "rgba(0, 0, 0, 0)", textStyle = list(color = "#fcfcff")
  ) %>%
  e_legend(bottom = "1%") %>%
  e_grid(right = "1%", left = "4%", bottom = "2%", top = "10%")