Problem: I am trying to force highcharter to always use only a particular color for each series.
Example: Lets use hc_colors
pallette, and colorIndex
. I have two charts, one with colorIndex
'es numbered 2, 3 and 5, and one with colorIndex
'es 1, 2 and 4. The only common colorIndex
number is 2, and I would like only this metric to share the same color on both charts. However, the result is that both charts have the same colors, even is their metrics numbers are mostly different.
Code: My example problem can be achieved by running the following code:
library(dplyr)
library(highcharter)
library(viridisLite)
n <- 6
df <- data.frame(date = Sys.Date() - (n*10):1,
metric = rep(letters[1:n], 10),
index = rep((n+1):(n*2), 10),
value = runif((n*10), 0, 1))
highchart() %>%
hc_title(text = 'Views') %>%
hc_xAxis(type = "datetime") %>%
hc_add_series(data = df,
type = 'spline',
hcaes(x = date, y = value, group = metric, colorIndex = index)) %>%
hc_colors(viridis(n*2))
The result is, even though the hc_colors
contains twice as many colors as there are series in the dataset, and indexes used as colorIndex
contain only the second half of hc_colors
spectrum, the first half is used: as can be seen in the chart.
However, if I change last line to:
hc_colors(viridis(n*2)[(n+1):(n*2)])
So it forces only second halt of hc_colors used, the image looks different. As can be seen in the chart. This is the expected result, if highcharter used respective colors.
I have also tried setting colors manually to "#RRGGBB" values, but the result is even more unexpected - markers colors are only changed
and lines colors are kept default: chart.
The last chart can be achieved by adding color = rep(viridis(n), 10)
to dataframe, and instead of setting colorIndex, in hceas, setting color = color
. From highcharts documentation it seems that setting lineColor in markers' options might help but I am not sure if I was able to set it, or if it did not change anything.
I would ask for details in comment, but I have some code I want to share so I create an answer.
I don't know how exactly viridis works. I found that, instead of setting the color only for series, the Highcharter sets it for points too. If you don't get the full answer here on StackOverflow, I suggest contacting the Highcharter author here: https://github.com/jbkunst/highcharter/issues
I don't know what exactly you want to achieve, but you can set your colors manually in JavaScript using R JS("...") function and chart.events.load event
Depending on what you want to achieve, you can change the colors of the markers to fit the series color:
library(dplyr)
library(highcharter)
library(viridisLite)
n <- 6
df <- data.frame(date = Sys.Date() - (n*10):1,
metric = rep(letters[1:n], 10),
index = rep((n+1):(n*2), 10),
value = runif((n*10), 0, 1),
color = rep(viridis(n), 10))
highchart() %>%
hc_title(text = 'Views') %>%
hc_chart(events = list(load = JS("function () {
this.series.forEach(function (series) {
series.data.forEach(function (point) {
point.update({
color: series.color
}, false);
});
});
this.redraw();
}"))) %>%
hc_xAxis(type = "datetime") %>%
hc_add_series(data = df,
type = 'spline',
hcaes(x = date, y = value, group = metric, color = color)) %>%
hc_colors(viridis(n*2))
Or you can change the series colors to fit markers:
library(dplyr)
library(highcharter)
library(viridisLite)
n <- 6
df <- data.frame(date = Sys.Date() - (n*10):1,
metric = rep(letters[1:n], 10),
index = rep((n+1):(n*2), 10),
value = runif((n*10), 0, 1),
color = rep(viridis(n), 10))
highchart() %>%
hc_title(text = 'Views') %>%
hc_chart(events = list(load = JS("function () {
this.series.forEach(function (series) {
series.update({
color: series.data[0].color
}, false);
});
this.redraw();
}"))) %>%
hc_xAxis(type = "datetime") %>%
hc_add_series(data = df,
type = 'spline',
hcaes(x = date, y = value, group = metric, color = color)) %>%
hc_colors(viridis(n*2))
I hope I helped you a little. Feel free to share your thought, maybe I will find another solution.