search

dreamRs / apexcharter

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

Colour mis-match on line markers for more than 10 series #61

Closed Eluvias closed 1 year ago

Eluvias commented 1 year ago

Issue

It seems when using a line graph with more than 10 series, the colour of line markers (tooltip) is not matched with line's colour.

Create datasets


# melted data frame with 10 series
df1 <- structure(list(index = structure(c(19282, 19283, 19284, 19285, 
19286, 19287, 19282, 19283, 19284, 19285, 19286, 19287, 19282, 
19283, 19284, 19285, 19286, 19287, 19282, 19283, 19284, 19285, 
19286, 19287, 19282, 19283, 19284, 19285, 19286, 19287, 19282, 
19283, 19284, 19285, 19286, 19287, 19282, 19283, 19284, 19285, 
19286, 19287, 19282, 19283, 19284, 19285, 19286, 19287, 19282, 
19283, 19284, 19285, 19286, 19287, 19282, 19283, 19284, 19285, 
19286, 19287), class = "Date"), series = c("X1", "X1", "X1", 
"X1", "X1", "X1", "X2", "X2", "X2", "X2", "X2", "X2", "X3", "X3", 
"X3", "X3", "X3", "X3", "X4", "X4", "X4", "X4", "X4", "X4", "X5", 
"X5", "X5", "X5", "X5", "X5", "X6", "X6", "X6", "X6", "X6", "X6", 
"X7", "X7", "X7", "X7", "X7", "X7", "X8", "X8", "X8", "X8", "X8", 
"X8", "X9", "X9", "X9", "X9", "X9", "X9", "X10", "X10", "X10", 
"X10", "X10", "X10"), value = c(100, 109.195752256872, 110.473812898249, 
111.988466907571, 114.934465715557, 114.007852661478, 100, 96.1307883304436, 
99.0590134854303, 92.5553224064565, 91.2858975257199, 96.3267630118788, 
100, 101.231742783255, 99.6585459736207, 97.0112928104384, 92.9542372487889, 
94.0775108135408, 100, 97.9794856859037, 95.9962254956384, 100.186333329661, 
98.3038254743795, 94.0011475380418, 100, 100.169979223367, 98.4203313836542, 
97.4991572826975, 99.5644495890374, 102.906716732652, 100, 102.90695820612, 
107.009116450497, 113.828333307171, 115.24092162697, 122.441432477435, 
100, 97.5932939963946, 100.978865349681, 108.74898682729, 101.119126341828, 
97.8452238286769, 100, 98.3836853451225, 92.3455036360132, 96.8254445897063, 
96.6803381437858, 103.035893746605, 100, 97.7044399879808, 105.757727190937, 
104.397544209021, 102.187212074186, 100.292494106984, 100, 105.772138498176, 
110.283434033768, 109.568142368943, 111.41246304597, 118.223866871655
)), class = c("tbl_df", "tbl", "data.frame"), row.names = c(NA, 
-60L))

# melted data frame with 11 series
df2 <- structure(list(index = structure(c(19282, 19283, 19284, 19285, 
19286, 19287, 19282, 19283, 19284, 19285, 19286, 19287, 19282, 
19283, 19284, 19285, 19286, 19287, 19282, 19283, 19284, 19285, 
19286, 19287, 19282, 19283, 19284, 19285, 19286, 19287, 19282, 
19283, 19284, 19285, 19286, 19287, 19282, 19283, 19284, 19285, 
19286, 19287, 19282, 19283, 19284, 19285, 19286, 19287, 19282, 
19283, 19284, 19285, 19286, 19287, 19282, 19283, 19284, 19285, 
19286, 19287, 19282, 19283, 19284, 19285, 19286, 19287), class = "Date"), 
    series = c("X1", "X1", "X1", "X1", "X1", "X1", "X2", "X2", 
    "X2", "X2", "X2", "X2", "X3", "X3", "X3", "X3", "X3", "X3", 
    "X4", "X4", "X4", "X4", "X4", "X4", "X5", "X5", "X5", "X5", 
    "X5", "X5", "X6", "X6", "X6", "X6", "X6", "X6", "X7", "X7", 
    "X7", "X7", "X7", "X7", "X8", "X8", "X8", "X8", "X8", "X8", 
    "X9", "X9", "X9", "X9", "X9", "X9", "X10", "X10", "X10", 
    "X10", "X10", "X10", "X11", "X11", "X11", "X11", "X11", "X11"
    ), value = c(100, 103.044724763663, 104.888717899088, 102.867475613936, 
    102.912076491541, 94.9985475902963, 100, 95.1158108638455, 
    96.1499051007505, 96.6716673433554, 98.2298331670474, 110.00344565649, 
    100, 103.800087033832, 107.12691967818, 104.514341523994, 
    103.716395150426, 99.1729197462258, 100, 100.264094785865, 
    97.2500012817381, 98.5095707105873, 90.9552086567381, 85.9899983469837, 
    100, 102.460654081268, 107.494360684831, 99.6880734291297, 
    99.004287862621, 105.318526789626, 100, 99.256460864708, 
    100.30100145692, 100.339640537917, 99.7007288235027, 113.160727069733, 
    100, 101.902603473315, 107.109287170847, 101.760754326691, 
    102.304172531002, 104.83413765834, 100, 96.7306844945543, 
    87.5630356957097, 84.6939960311119, 81.0464132185539, 78.2794721461234, 
    100, 93.556382082732, 89.2730778172997, 90.5534586602371, 
    90.2948373227581, 93.8719996475447, 100, 99.1827207994515, 
    100.607435873408, 92.2520410915712, 98.4164225848647, 102.335408429055, 
    100, 93.9680633774974, 93.2194975970365, 94.0553993210981, 
    88.5727622715686, 86.8777310668752)), class = c("tbl_df", 
"tbl", "data.frame"), row.names = c(NA, -66L))

Line markers look OK


library(apexcharter)

apexcharter::apex(df1,
                  mapping = apexcharter::aes(x = index,
                                             y = value,
                                             group = series),
                  type = "line")

Colour mis-match on the line markers

Place the cursor on plot and observer the mis-match on the line markers vs line's colour.


apexcharter::apex(df2,
                  mapping = apexcharter::aes(x = index,
                                             y = value,
                                             group =series),
                  type = "line")
Eluvias commented 1 year ago

It looks that the problem appears only in RStudio (IDE) viewer.