Search code examples
javascripthighchartsr-highcharter

How to get different chart types in same plot


Is there any way to combine various chart-type like line+area in the highchart js package for R? I found a function as hc_add_series() but failed to understand how should I use this. Below are my codes -

   library(highcharter)
library(dplyr)

Data = data.frame(date = seq(Sys.Date(), Sys.Date()-20, by = '-1 day'), value1 = 10:30, variable = "A") %>% mutate(value2 = cumsum(value1))

hchart(Data, 
        "column", 
        hcaes(x = date, y = value1, group = variable)) %>%        
        hc_add_series(data = Data, hcaes(x = date, y = value2), type = 'area', yAxis = 1)

This actually plots nothing. Why exactly? I wanted to plot value2 as area plot w.r.t. a secondary axis however that axis should remain invisible.

Any pointer will be highly appreciated.


Solution

  • You had an error 18 in the developer console which says that you connected the series to the axis that doesn't exist. And it's true - you connected series to the axis with index 1 by yAxis: 1 but you haven't created that axis.

    Generally, you don't need to create another axis. You can just remove this yAxis: 1 and both series will be displayed:

    library(highcharter)
    library(dplyr)
    
    Data = data.frame(date = seq(Sys.Date(), Sys.Date()-20, by = '-1 day'), value1 = 10:30, variable = "A") %>% mutate(value2 = cumsum(value1))
    
    hchart(Data, 
           "column", 
           hcaes(x = date, y = value1, group = variable)) %>%        
      hc_add_series(data = Data, hcaes(x = date, y = value2), type = 'area')
    

    However, if that was intended and you do want to create separate axis for each series and display them separately, then let me know and I'll help you with that.

    edit: here I created a second axis using hc_yAxis_multiple, I connected the area series to it and hid this axis:

    library(highcharter)
    library(dplyr)
    
    Data = data.frame(date = seq(Sys.Date(), Sys.Date()-20, by = '-1 day'), value1 = 10:30, variable = "A") %>% mutate(value2 = cumsum(value1))
    
    hchart(Data, 
           "column", 
           hcaes(x = date, y = value1, group = variable)) %>%    
      hc_yAxis_multiples(
        list(), # first yAxis
        list(visible = FALSE) # second yAxis
      ) %>% 
      hc_add_series(data = Data, hcaes(x = date, y = value2), type = 'area', yAxis = 1)
    

    edit 2: here is an updated code adjusted to your new requirements. I set tooltip.shared: true (hc_tooltip(shared = TRUE) %>%) and set zIndex for a series:

    library(highcharter)
    library(dplyr)
    
    Data = data.frame(date = seq(Sys.Date(), Sys.Date()-20, by = '-1 day'), value1 = 10:30, variable = "Column") %>% mutate(value2 = cumsum(value1))
    
    hchart(Data, 
           "column", 
           hcaes(x = date, y = value1, group = variable), zIndex = 1, opacity = 0.9) %>%  
      hc_tooltip(shared = TRUE) %>%
      hc_yAxis_multiples(
        list(), # first yAxis
        list(visible = FALSE) # second yAxis
      ) %>% 
      hc_add_series(data = Data, hcaes(x = date, y = value2), type = 'area', name = 'Area', yAxis = 1, zIndex = 0)
    

    I additionally set opacity 0.9 on a column series, but you can remove it.