2

I've tried to create a radial gradient radar chart similar to this:

radar chart with radial gradient

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:

radar chart echarts

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.

Robin Lindström
  • 622
  • 4
  • 15

0 Answers0