Add colored points based on a variable in echarts4r

Question

I have a Candlestick plot done in echarts4r with some e_lines. I would like to add points in some candles, coloured based on a variable ("points").

This is the code

library(quantmod)
library(echarts4r)
library(magrittr)

GS |> 
  e_charts(date) |> 
  e_candle(GS.Open, GS.Close, GS.Low, GS.High, name = "Goldman Sachs",
           lineStyle = list(
             color = "#42eff5", # bull
             color0 = "#f54242", # bear
             borderColor = NA,
             borderColor0 = NA)) |> 
  e_datazoom(type = "slider") |> 
  e_title("Candlestick chart", "Quantmod data") |>
  e_line(serie = level, name = "Fib", lineStyle = list(color = "green", opacity = 0.8, type = "dotted"), legend = T) %>% 
  e_line(serie = level2, name = "Fib", lineStyle = list(color = "blue", opacity = 0.8, type = "dotted"), legend = T) %>% 
  # e_scatter(serie = GS.Close, name = "Signal", symbol_size = 10) %>% 
  # e_visual_map(serie = points) %>% 
    e_datazoom(type = "slider") %>% 
  e_tooltip(trigger = "axis")

Everything works great until I add the points colour with e_visual_map: The problems are:

The colours of the candles are affected by the e_visual_map
The points get the colour of the close price and not the colour of the variable "points"

Here is some data


GS <- structure(list(GS.Open = c(200.600006, 200.220001, 198.429993, 
199.050003, 203.539993, 203.399994, 208.339996, 210.899994, 210.850006, 
212.199997, 213.75), GS.High = c(203.320007, 200.669998, 200, 
203.949997, 204.899994, 208.440002, 213.169998, 214.220001, 215.130005, 
214.089996, 214.809998), GS.Low = c(197.820007, 198.070007, 197.899994, 
198.100006, 202, 201.5, 207.600006, 210.399994, 210.850006, 210.850006, 
209.100006), GS.Close = c(200.720001, 198.850006, 199.050003, 
203.729996, 204.080002, 208.110001, 211.880005, 213.990005, 213.589996, 
213.229996, 209.679993), GS.Volume = c(6494900, 6460200, 5892900, 
7851000, 7147100, 8025700, 9039400, 6618900, 5846600, 5306300, 
6423200), GS.Adjusted = c(162.160843, 160.65007, 160.811646, 
164.59259, 164.875336, 168.131134, 171.177002, 172.881592, 172.558426, 
172.267532, 169.399551), date = c("2007-01-03", "2007-01-04", 
"2007-01-05", "2007-01-08", "2007-01-09", "2007-01-10", "2007-01-11", 
"2007-01-12", "2007-01-16", "2007-01-17", "2007-01-18"), level = c(200, 
200, 200, 200, 200, 200, 200, 200, 200, 200, 200), level2 = c(250, 
250, 250, 250, 250, 250, 250, 250, 250, 250, 250), points = -5:5), row.names = c("2007-01-03", 
"2007-01-04", "2007-01-05", "2007-01-08", "2007-01-09", "2007-01-10", 
"2007-01-11", "2007-01-12", "2007-01-16", "2007-01-17", "2007-01-18"
), class = "data.frame")

user_14282714 · Answer

You could add a random color to each "points" value using group_by. When you add a new candle, it will get the same color because of group_by. Here is a reproducible example:

library(quantmod)
library(echarts4r)
library(dplyr)
library(randomcoloR)

# To show you the colors for each points
GS |> 
  group_by(points) %>% 
  mutate(color = randomcoloR::randomColor()) %>%
  ungroup()
#> # A tibble: 11 × 11
#>    GS.Open GS.High GS.Low GS.Close GS.Volume GS.Adju…¹ date  level level2 points
#>                               
#>  1    201.    203.   198.     201.   6494900      162. 2007…   200    250     -5
#>  2    200.    201.   198.     199.   6460200      161. 2007…   200    250     -4
#>  3    198.    200    198.     199.   5892900      161. 2007…   200    250     -3
#>  4    199.    204.   198.     204.   7851000      165. 2007…   200    250     -2
#>  5    204.    205.   202      204.   7147100      165. 2007…   200    250     -1
#>  6    203.    208.   202.     208.   8025700      168. 2007…   200    250      0
#>  7    208.    213.   208.     212.   9039400      171. 2007…   200    250      1
#>  8    211.    214.   210.     214.   6618900      173. 2007…   200    250      2
#>  9    211.    215.   211.     214.   5846600      173. 2007…   200    250      3
#> 10    212.    214.   211.     213.   5306300      172. 2007…   200    250      4
#> 11    214.    215.   209.     210.   6423200      169. 2007…   200    250      5
#> # … with 1 more variable: color , and abbreviated variable name
#> #   ¹GS.Adjusted

GS |> 
  group_by(points) %>% 
  mutate(color = randomcoloR::randomColor()) %>%
  ungroup() |>
  e_charts(date) |> 
  e_scatter(serie = GS.Close, name = "Signal", symbol_size = 10) |>
  e_add_nested("itemStyle", color) |>
  e_candle(GS.Open, GS.Close, GS.Low, GS.High, name = "Goldman Sachs",
           lineStyle = list(
             color = "#42eff5", # bull
             color0 = "#f54242", # bear
             borderColor = NA,
             borderColor0 = NA)) |> 
  e_datazoom(type = "slider") |> 
  e_title("Candlestick chart", "Quantmod data") |>
  e_line(serie = level, name = "Fib", lineStyle = list(color = "green", opacity = 0.8, type = "dotted"), legend = T) |> 
  e_line(serie = level2, name = "Fib", lineStyle = list(color = "blue", opacity = 0.8, type = "dotted"), legend = T) |>
  e_datazoom(type = "slider") |> 
  e_tooltip(trigger = "axis")

^{Created on 2022-09-10 with reprex v2.0.2}

Viridis

Here a viridis option:

library(quantmod)
library(echarts4r)
library(dplyr)
library(viridis)
numb_colors = length(unique(GS$points))

GS |> 
  mutate(color = case_when(points == -5 ~ viridis(numb_colors)[1],
                           points == -4 ~ viridis(numb_colors)[2],
                           points == -3 ~ viridis(numb_colors)[3],
                           points == -2 ~ viridis(numb_colors)[4],
                           points == -1 ~ viridis(numb_colors)[5],
                           points == 0 ~ viridis(numb_colors)[6],
                           points == 1 ~ viridis(numb_colors)[7],
                           points == 2 ~ viridis(numb_colors)[8],
                           points == 3 ~ viridis(numb_colors)[9],
                           points == 4 ~ viridis(numb_colors)[10],
                           points == 5 ~ viridis(numb_colors)[11])) |>
  e_charts(date) |> 
  e_scatter(serie = GS.Close, name = "Signal", symbol_size = 10) |>
  e_add_nested("itemStyle", color) |>
  e_candle(GS.Open, GS.Close, GS.Low, GS.High, name = "Goldman Sachs",
           lineStyle = list(
             color = "#42eff5", # bull
             color0 = "#f54242", # bear
             borderColor = NA,
             borderColor0 = NA)) |> 
  e_datazoom(type = "slider") |> 
  e_title("Candlestick chart", "Quantmod data") |>
  e_line(serie = level, name = "Fib", lineStyle = list(color = "green", opacity = 0.8, type = "dotted"), legend = T) |> 
  e_line(serie = level2, name = "Fib", lineStyle = list(color = "blue", opacity = 0.8, type = "dotted"), legend = T) |>
  e_datazoom(type = "slider") |> 
  e_tooltip(trigger = "axis")

^{Created on 2022-09-10 with reprex v2.0.2}

You could use the function e_add_nested with "itemstyle" after your e_scatter call. Make sure you have a column with the colors to represent the points. I used the rainbow colors, but you can change them to whatever you want. Here is a reproducible example:

library(quantmod)
library(echarts4r)
library(dplyr)

GS |> 
  mutate(color = rainbow(11)) |>
  e_charts(date) |> 
  e_scatter(serie = GS.Close, name = "Signal", symbol_size = 10) |>
  e_add_nested("itemStyle", color) |>
  e_candle(GS.Open, GS.Close, GS.Low, GS.High, name = "Goldman Sachs",
           lineStyle = list(
             color = "#42eff5", # bull
             color0 = "#f54242", # bear
             borderColor = NA,
             borderColor0 = NA)) |> 
  e_datazoom(type = "slider") |> 
  e_title("Candlestick chart", "Quantmod data") |>
  e_line(serie = level, name = "Fib", lineStyle = list(color = "green", opacity = 0.8, type = "dotted"), legend = T) |> 
  e_line(serie = level2, name = "Fib", lineStyle = list(color = "blue", opacity = 0.8, type = "dotted"), legend = T) |>
  e_datazoom(type = "slider") |> 
  e_tooltip(trigger = "axis")

^{Created on 2022-09-10 with reprex v2.0.2}

As you can see, each point has a different color based on your "points" column.

Add colored points based on a variable in echarts4r

1 Answers