one tooltip for connected charts

[RKonstantinR]

Is there any way to make one tooltip for two connected charts? For example: https://echarts.apache.org/examples/en/editor.html?c=candlestick-touch

[rdatasculptor]

I guess there is. Just let it show the tooltip of only one of your connected charts, and alter the content of this tooltip the way you want (e.g. with information of both charts combined).

Can you make an reproducible example for us with two connected charts? I would be happy to help.

[RKonstantinR]

Thank you for reply!

I partially solved the problem using the grid, but I would like to have one tooltip when adding a second chart to the group.

Also I use the tooltip option "alwaysShowContent = TRUE" and I expect the tooltip to appear right after opening the chart, but I have to click on the axisPointer handle button. My goal is to automatically display a tooltip for the last day when opening a chart. Is there a way to do this?

I encountered incorrect display of opening and closing prices on the chart. Instead of opening prices, the closing price is displayed and vice versa. Input data:

Output chart:

My quarto RepEx:

---
title: "reprex_echarts-Ex"
format:
  html:
    embed-resources: true
    grid:
      body-width: 500px
      margin-width: 500px
    page-layout: full
editor: visual
---

```{r, echo=FALSE, warning=FALSE, message=FALSE}
library(quantmod)
library(TTR)
library(dplyr)
library(tibble)
library(xts)
library(lubridate)
library(echarts4r)
library(glue)
library(stringr)

# price
period_start <- today() - years(1)

AAPL <- getSymbols("AAPL", src="yahoo", auto.assign=FALSE)

ticker_df <- AAPL %>% 
    fortify.zoo %>% 
    as.tibble %>% 
    select(tradedate = 1, open = 2, high = 3, low = 4, close = 5, volume = 6) %>% 
    # rename_with(tolower) %>% 
    # rename(tradedate = index) %>% 
    # rename_with(~str_replace(., "aapl.", "")) %>% 
    filter(tradedate >= period_start) %>% 
    mutate(color = case_when(open > close ~ "#ff6b6b",
                             TRUE ~ "#60d394")) %>% 
    mutate(across(where(is.numeric), round, 2))
# macd
nFast <- 15
nSlow <- 30
nSig <- 11

macd <- MACD(Cl(AAPL), nFast=nFast, nSlow=nSlow, nSig=nSig, percent=FALSE)

macd_df <- macd %>% 
    fortify.zoo %>% 
    as_tibble(.name_repair = "minimal") %>% 
    rename_with(tolower) %>% 
    rename(tradedate = index) %>% 
    filter(tradedate >= period_start) %>% 
    mutate(tradedate = as.Date(tradedate),
           diff = macd - signal,
           color = case_when(diff < 0 ~ "#ff6b6b",
                             TRUE ~ "#60d394")) %>% 
    mutate(across(where(is.numeric), round, 4))

candle_plot <- ticker_df %>% 
    mutate(tradedate = as.character(tradedate)) %>%
    e_charts(tradedate, height = "250px") %>%  
    e_legend(FALSE) %>%
    e_candle(opening = open, closing = close, low = low, high = high, name = "AAPL",
             itemStyle = list(
                 color = "#60d394", # bull
                 color0 = "#ff6b6b", # bear
                 borderColor = NA,
                 borderColor0 =  NA)) %>% 
    e_bar(volume, x_index = 1, y_index = 1, itemStyle = list(color = "#73c0de"),
          name = "volume") %>% 
    # e_add_nested("itemStyle", color) %>%
    e_grid(height = '15%', bottom = "10%") %>% 
    e_grid(height = '50%') %>%
    e_datazoom(type = "slider",
               xAxisIndex = c(0, 1),
               realtime = FALSE,
               start = 80,
               end = 100,
               top = 0,
               height = 20,
               handleIcon = 'path://M10.7,11.9H9.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4h1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
               handleSize = '120%') %>%
    e_x_axis(type = 'category', 
             index = 1,
             min = 'dataMin', 
             max = 'dataMax',
             boundaryGap = TRUE,
             splitLine = list(show = FALSE),
             axisTick = list(show = FALSE),
             axisLine = list(
                 lineStyle = list(
                     color = '#777')),
             axisPointer = list(
                show = TRUE),
             axisLabel = list(
                 formatter = htmlwidgets::JS("function (value) {
                     return echarts.format.formatTime('dd-MM', value);
                     }")
                 )
             ) %>%
    e_x_axis(type = "category", 
             min = 'dataMin', 
             max = 'dataMax',
             gridIndex = 1,
             boundaryGap = TRUE,
             axisLabel = list(show = FALSE),
             axisLine = list(show = FALSE),
             axisTick = list(show = FALSE),
             axisPointer = list(
                 show = TRUE, 
                 label = list(
                     show = FALSE)
                 )
             ) %>%
    e_y_axis(
        min = 'dataMin', 
        max = 'dataMax',
        gridIndex = 1,
        scale = TRUE,
        splitNumber = 2,
        axisLine = list(
            lineStyle = list(
                color = '#777')),
        splitLine = list(show = TRUE),
        axisTicklist = list(show = FALSE),
        axisLabel = list(
            inside = FALSE,
            formatter = '{value}\n')
        ) %>% 
     e_y_axis(scale = TRUE, 
              index = 1,
              splitNumber = 2,
              axisLabel = list(show = FALSE),
              axisLine = list(show = FALSE),
              axisTick = list(show = FALSE),
              splitLine = list(show = FALSE)
              ) %>%
    e_toolbox(
        feature = list(
            dataZoom = list(
                show = FALSE
                )
            )
        ) %>% 
    e_tooltip(triggerOn = 'none',
              transitionDuration = 0,
              show = TRUE,
              showContent = TRUE,
              alwaysShowContent = TRUE,
              confine = TRUE,
              order = 'seriesDesc',
              borderRadius = 4,
              borderWidth = 1,
              borderColor = '#333',
              backgroundColor = 'rgba(255,255,255,0.9)',
              textStyle = list(
                  fontSize = 12,
                  color = '#333'),
              position = htmlwidgets::JS("function (pos, params, el, elRect, size) {
                  const obj = {
                      top: 50
                      };
                  obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5; 
                  return obj;
                  }")
              ) %>% 
    e_axis_pointer(
        # type = 'shadow',
        link = list(
            xAxisIndex = c(0, 1)
            )
        ) %>% 
    e_group("4charts") %>%
    e_connect_group("4charts")

macd_plot <- macd_df %>% 
    e_charts(tradedate) %>%
    e_bar(diff) %>% 
    e_add("itemStyle", color) %>%
    e_line(signal, symbol = 'none', lineStyle = list(color = "#06b6d4")) %>% 
    e_line(macd, symbol = 'none', lineStyle = list(color = "#f97316")) %>% 
    e_legend(FALSE) %>%
    e_datazoom(type = "inside",
               xAxisIndex = c(0, 1),
               start = 80,
               end = 100,
               top = 20,
               height = 20
               ) %>%
    e_x_axis(type = 'category', min = 'dataMin', max = 'dataMax',
             boundaryGap = TRUE,
             splitLine = list(show = FALSE),
             axisLabel = list(show = FALSE),
             axisTick = list(show = FALSE),
             axisLine = list(lineStyle = list(color = '#777')),
             axisPointer = list(
                 # type = 'shadow',
                 label = list(show = FALSE),
                 triggerTooltip = TRUE,
                 handle = list(
                     show = TRUE,
                     margin = 30,
                     color = '#B80C00')
                 )
             ) %>%
    e_y_axis(scale = TRUE, 
             splitNumber = 2,
             axisLabel = list(show = FALSE),
             axisLine = list(show = FALSE),
             axisTick = list(show = FALSE),
             splitLine = list(show = FALSE)
             ) %>% 
     e_tooltip(triggerOn = 'none',
               show = TRUE,
               showContent = TRUE,
               alwaysShowContent = TRUE,
               transitionDuration = 0,
               confine = TRUE,
               borderRadius = 4,
               borderWidth = 1,
               borderColor = '#333',
               backgroundColor = 'rgba(255,255,255,0.9)',
               textStyle = list(
                   fontSize = 12,
                   color = '#333'),
                   position = htmlwidgets::JS("function (pos, params, el, elRect, size)
                   {
                   const obj = {
                       top: 50
                       };
                   obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 5;
                   return obj;
                   }")
              ) %>% 
    e_axis_pointer(
        link = list(
            xAxisIndex = c(0, 1)
            )
        ) %>%
    e_grid(height = "40%", top = "5%") %>%
    e_toolbox(
        feature = list(
            dataZoom = list(
                show = FALSE
                )
            )
        ) %>% 
    e_group("4charts") %>%
    e_connect_group("4charts")

e_arrange(candle_plot, macd_plot)

[JohnCoene]

I believe the incorrect prices indicated were corrected recently, can you try the latest dev version?

[RKonstantinR]

I believe the incorrect prices indicated were corrected recently, can you try the latest dev version?

I install dev version (remotes::install_github("JohnCoene/echarts4r") and have same bug. I restore 0.4.4 version and everything ok.

[JohnCoene]

Ah sh@t I think we merged a PR that "fixed" it and I didn't pay enough attention to it: it broke it

@munoztd0 something somewhere to revert

[munoztd0]

556 should fix this snip snap mess once and for all