I've tried to create a radial gradient radar chart similar to this:
I got some help here but realised that it was a linear gradient. Gradient color in radarchart using echarts in R
I found this code which I tried to implement below (but with three colors as in the image above) https://www.programmersought.com/article/40915626847/
library(echarts4r)
set.seed(42)
df <- data.frame(
x = LETTERS[1:10],
y = round(runif(10, 1, 5) * 2) / 2
)
radial_gradient <- htmlwidgets::JS(
"new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
offset: 0,
color: '#f7f8fa'
}, {
offset: 1,
color: '#cdd0d5'
}])"
)
color_stops <- htmlwidgets::JS(
"[{
offset: 0, color:'green' // color at 0%
}, {
offset: 0.5, color:'yellow' // color at 50%
},
{
offset: 1, color:'red' // color at 100%
}]"
)
df %>%
e_charts(x) %>%
e_radar(y,
max = 5,
itemStyle = list(
color = list(type = "radial",
x = "0.5",
y = "0.5",
r = "0.5",
backgroundColor = radial_gradient,
colorStops = color_stops,
globalCoord = "false")
),
areaStyle = list(
color = list(type = "radial",
x = "0.5",
y = "0.5",
r = "0.5",
backgroundColor = radial_gradient,
colorStops = color_stops,
globalCoord = "false")
)
)
Here is the result:
Here are some problems with my chart so far:
- The radial gradient isn't centered at 0 and I am not sure what is causing this.
- The radiant is relative to the size of the chart. I want it to be relative to the scale I use. So I want it to be green out to the value 2, yellow to 4 and red from 4 and on. Is this possible to achieve?
- The outer points doesn't seem to react to the colors and they are always the same color.
Would love some ideas on how to solve these problems.