dreamRs / apexcharter

:bar_chart: R Htmlwidget for ApexCharts.js
https://dreamrs.github.io/apexcharter
Other
138 stars 15 forks source link

points and line #42

Closed meersel closed 2 years ago

meersel commented 3 years ago

Hi,

I want to create a plot (line and pionts) where the color of a point depends on a categorical variable and the line has a fixed color for example black.

In ggplot the code would be something like this: ggplot(aes(x=date, y=value)) + geom_point(aes(color = category)) + geom_line(color = "black")

I have tried a similar approach using apexcharter but the ggplot approach does not work. See example below apex(type = "scatter", mapping = aes(x=date, y= value, fill = category) %>% add_line(mapping = aes(x=date, y= value))

Output: No line is displayed., only the points.

Please advice how to create a plot similar like ggplot using apexcharter

Question: How can you set the color of a line independent/separately from the color of points ?

Looking forward receiving advice.

Regards,

Miguel

pvictor commented 3 years ago

Hi,

Can you share a reproducible example please ? I'll look into it.

Victor

meersel commented 3 years ago

HI Victor,

Once again thank you for the quick response,

Pease find attached a reproducible example

Looking forward receiving your feedback with a solution.

Kind regards,

Miguel Eersel e-mail: m.eersel@outlook.com

Sent from Mailhttps://go.microsoft.com/fwlink/?LinkId=550986 for Windows 10

From: Victor Perriermailto:notifications@github.com Sent: Thursday, February 11, 2021 12:35 PM To: dreamRs/apexchartermailto:apexcharter@noreply.github.com Cc: Miguel Eerselmailto:m.eersel@outlook.com; Authormailto:author@noreply.github.com Subject: Re: [dreamRs/apexcharter] points and line (#42)

Hi,

Can you share a reproducible example please ? I'll look into it.

Victor

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2FdreamRs%2Fapexcharter%2Fissues%2F42%23issuecomment-777582369&data=04%7C01%7C%7C751450cd64334289a1a108d8cea2b6f1%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637486545558503829%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=YIJFxi%2B83skwgpRxfgu%2FZNLuIkJn8ZNzfpnYWClsvGc%3D&reserved=0, or unsubscribehttps://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgithub.com%2Fnotifications%2Funsubscribe-auth%2FAHGET46NHRME5MRHI6JS4JTS6P2NPANCNFSM4XNP7GKQ&data=04%7C01%7C%7C751450cd64334289a1a108d8cea2b6f1%7C84df9e7fe9f640afb435aaaaaaaaaaaa%7C1%7C0%7C637486545558503829%7CUnknown%7CTWFpbGZsb3d8eyJWIjoiMC4wLjAwMDAiLCJQIjoiV2luMzIiLCJBTiI6Ik1haWwiLCJXVCI6Mn0%3D%7C1000&sdata=%2BOHI5VHB9tyCDA4%2B2KYHpWm9F96eeoRwoB7oPyYUJ5Y%3D&reserved=0.

meersel commented 3 years ago

Hi Victor,

Please find below reproducible examples:

title: "Apex markers" author: "Miguel Eersel" date: "2/11/2021" output: html_document

knitr::opts_chunk$set(echo = TRUE, fig.width = 15, fig.height = 8.5)

library(tidyverse)
library(apexcharter)

x <- seq(0,2*pi, 0.4)

test_tbl <-  tribble( ~x, ~y,
                      x, sin(x)) %>%  
                   unnest() %>% 
             mutate(level = case_when(
               y > 0.8 ~ "high",
               y < -0.8 ~ "low",
               TRUE ~ "normal"
             ))

test_tbl

test_tbl %>% 

  ggplot(aes(x=x, y = y)) + 
  geom_point(aes(col = level), size = 6) +
  geom_line(color = "black") +
  theme_minimal(base_size = 15)

image

I want to reproduce the above ggplot using apexcharter.


1st try-out


test_tbl %>% 
  apexcharter::apex(mapping = aes(x=x,y=y, fill = level),type = "scatter") %>% 
  apexcharter::add_line(mapping = aes(x=x, y =y)) %>% 
  ax_stroke(width = 2)

image


2nd try-out


test_tbl %>% 
  apexcharter::apex(mapping = aes(x=x,y=y, fill = level),type = "scatter") %>% 
  apexcharter::add_line(mapping = aes(x=x, y =y)) %>% 
  ax_stroke(width = 2, colors = "#000000")

EMPTY NO CHART


3rd try-out


test_tbl %>% 
  apexcharter::apex(mapping = aes(x=x,y=y, fill = level),type = "scatter") %>% 
  apexcharter::add_line(mapping = aes(x=x, y =y)) %>% 
  ax_colors("black")

image


4th try-out


test_tbl %>% 
  apexcharter::apex(mapping = aes(x=x,y=y),type = "line") %>% 
  ax_stroke(width = 2,colors = "#000000") %>% 
  ax_markers(size = 6) 

image

pvictor commented 3 years ago

Thanks for the detailed example and the different tries.

There's a little bug in add_line causing incorrect markers size. You can obtain a correct a chart by specifying explicit markers size (three for the scatter, one for the line):

test_tbl %>% 
  apex(mapping = aes(x = x, y = y, fill = level),type = "scatter") %>% 
  add_line(mapping = aes(x = x, y = y)) %>% 
  ax_markers(size = c(6, 6, 6, 0))

image

For coloring the line, you can use ax_colors_manual like this:

test_tbl %>% 
  apex(mapping = aes(x = x, y = y, fill = level),type = "scatter") %>% 
  add_line(mapping = aes(x = x, y = y)) %>% 
  ax_markers(size = c(6, 6, 6, 0)) %>% 
  ax_colors_manual(
    list(
      normal = "#01DFD7",
      high = "#F7D358",
      low = "#FA58F4",
      y = "#848484"
    )
  )

image

You can change the name "y" using serie_name in add_line().

Or use ax_stroke, but putting the color in a list because JavaScript expect an array and in JS character and vector of length one are not the same thing.. :

test_tbl %>% 
  apex(mapping = aes(x = x, y = y, fill = level),type = "scatter") %>% 
  add_line(mapping = aes(x = x, y = y)) %>% 
  ax_markers(size = c(6, 6, 6, 0)) %>% 
  ax_stroke(width = 2, colors = list("#000000"))

image

But note that it doesn't affect the legend..

Hope it helps,

Victor