Plotbands in Highcharter - When x axis is date

Question

I have the following dataset:

xdata <- seq(as.Date("2020-11-01"),as.Date("2020-11-10"), "days")
ydata <- c(1:10)
datamipo <- data.frame(xdata,ydata)

And I want to make a chart using highcharter library. I want to highlight the days 2020-11-01 to 2020-11-05 with a plot band. This is what I tried:

datamipo %>% 
  hchart(type = "line",
         hcaes(x = xdata, y = ydata),
         color = "#25af7b") %>%
  hc_xAxis(plotBands = list(
    list(
      from = 1,
      to = 5,
      label = list(text = "This is a plotBand"),
      color = hex_to_rgba("red", 0.1),
      zIndex = 1
    )
  ))

But the plotband is not visible. Please, do you know how I can accomplish this?

Instead of 1 and 5 for `from` and `to` you need to provide dates, and transform using `datetime_to_timestamp` as discussed in [this answer](https://stackoverflow.com/a/41575501/3460670) — Ben, Dec 02 '20 at 20:53
Hi @Ben, thanks for the guiding. It seems that highcharter doesn't take relative numbers in xAxis when the axis refers to dates. — Manu, Dec 02 '20 at 21:12
Do you feel you can still obtain the chart you want given this requirement? Does your situation require more data manipulation to make this work? — Ben, Dec 02 '20 at 21:23
Hello @Ben, this is the change I made to the code and worked fine: `from = datamipo$xdata[1] %>% datetime_to_timestamp(), to = datamipo$xdata[5] %>% datetime_to_timestamp()` but the catch is that data must be formatted as "yyyy-mm-dd". Thank you! — Manu, Dec 03 '20 at 15:23

madepiet · Answer 1 · 2020-12-03T12:18:19.867

Maybe you could try using Highchart JavaScript API syntax in R? https://api.highcharts.com/highcharts/xAxis.plotBands https://api.highcharts.com/highcharts/chart.events.load

You can find an article on how to do this here: https://www.highcharts.com/blog/tutorials/working-with-highcharts-javascript-syntax-in-r/

Code example:

library('highcharter')
highchart() %>%
  hc_add_series(
    type = "line",
    data = list(5, 4, 3, 5)
  ) %>%
  hc_chart(events = list(load = JS("function() {
        const chart = this;
        chart.update({
          xAxis: {
            plotBands: [{
              color: '#FCFFC5',
              from: 0.5,
              to: 2.5
            }]
          }
        });
    }
    ")
  ))

Plotbands in Highcharter - When x axis is date

1 Answers1