Search code examples
rhighchartsr-highcharter

Fill area for different series in highcharter for opposite directions

So I have 5 series all between -1 and 1, 4 of those series are boundries. I want to plot the bottom two series (i.e the two that are between 0 and -1) with their area filled down to the x-axis foot. Then exactly the opposite for the two series (between 0 an +1) filled up to the x-axis head. While the last series is just a line that ossilates between them.

I tried splitting the 4 area series in to two opposite y-axis in order to change the plotoption. However, the last plot option adjustment keeps overriding the first one. Any help or suggestion would be appreciated.

Target output:

Target output

Current output:

Current output

library(tidyverse)
library(timetk)
library(kableExtra)
library(highcharter)

datetime<-seq(
  from = floor_date(as.Date("2021-07-01"), unit = "month"),
  to = ceiling_date(Sys.Date(), "month") - 1,
  by = "month"
)

mascore<- runif(12, -1, 1)

mod_over<- runif(12, 0.25,1)
str_over<- runif(12, 0.1, 0.25)
mod_under<- runif(12, -1, -0.25)
str_under<- runif(12, -0.25, -0.1)


highcharter::highchart() %>%
  highcharter::hc_xAxis(categories = datetime) %>% 
  highcharter::hc_yAxis_multiples(
  list(reversed= FALSE,max=1,min=-1,startOnTick= FALSE, endOnTick= FALSE ),
  list(opposite=TRUE,max=1,min=-1,startOnTick= FALSE, endOnTick= FALSE )
  ) %>%
  highcharter::hc_add_series(mod_over,
                             name = "Moderate Overweight",
                             type="spline",
                             color='#47648E',
                             yAxis=1) %>%
  highcharter::hc_add_series(str_over,
                             name = "Strong Overweight",
                             type="areaspline",
                             color='#002855',
                             yAxis=1) %>%
  highcharter::hc_plotOptions(
                            areaspline = list(
                              fillOpacity= 0.5,
                              threshold= 1,
                              yAxis=1
                            )
  ) %>% 
  
  highcharter::hc_add_series(mod_under,
                             name = "Moderate Underweight",
                             type="areaspline",
                             color='#D1948A',
                             yAxis=0) %>%
  highcharter::hc_add_series(str_under,
                             name = "Strong Underweight",
                             type="areaspline",
                             color='#C26E60',
                             yAxis=0) %>%
  
  highcharter::hc_plotOptions(
                        areaspline = list(
                          fillOpacity= 0.5,
                          threshold= -1,
                          yAxis=1
                            )
                          ) %>% 
  
  highcharter::hc_add_series(mascore,
                             name = "MAScore",
                             type="spline",
                             color="black",
                             lineWidth=5,
                             yAxis=0) %>%
  
  highcharter::hc_exporting(enabled = TRUE)
Solution

  • try to use the threshold option, which set the fill area between its value and the graph

    API Reference: https://api.highcharts.com/highcharts/series.area.threshold

      series: [{
      type: 'area',
      data: [-1, -0.2, -0.2, -1],
      threshold: -Infinity
    }, {
      type: 'area',
      data: [1, 0.2, 0.2, 1],
      threshold: Infinity
    }
  ]

    Simplified demo in JS: https://jsfiddle.net/BlackLabel/yswLnf1c/