recharts4r

echarts4r e_mark_area() different fill colours


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.


Solution

  • 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%")
    

    enter image description here