title: Radial gradient on radar charts in R using echarts
body: <p>I've tried to create a radial gradient radar chart similar to this:</p>
  <p><a href="https://i.stack.imgur.com/PKzhI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PKzhI.png" alt="radar chart with radial gradient" /></a></p>
  <p>I got some help here but realised that it was a linear gradient.
  <a href="https://stackoverflow.com/questions/67561356/gradient-color-in-radarchart-using-echarts-in-r/67562291#67562291">Gradient color in radarchart using echarts in R</a></p>
  <p>I found this code which I tried to implement below (but with three colors as in the image above)
  <a href="https://www.programmersought.com/article/40915626847/" rel="nofollow noreferrer">https://www.programmersought.com/article/40915626847/</a></p>
  <pre><code>library(echarts4r)
  
  set.seed(42)
  
  df &lt;- data.frame(
    x = LETTERS[1:10],
    y = round(runif(10, 1, 5) * 2) / 2
  )
  
  radial_gradient &lt;- htmlwidgets::JS(
    &quot;new echarts.graphic.RadialGradient(0.3, 0.3, 0.8, [{
          offset: 0,
          color: '#f7f8fa'
      }, {
          offset: 1,
          color: '#cdd0d5'
      }])&quot;
  )
  
  color_stops &lt;- htmlwidgets::JS(
    &quot;[{
                   offset: 0, color:'green' // color at 0%
      }, {
                   offset: 0.5, color:'yellow' // color at 50%
      },
    {
                   offset: 1, color:'red' // color at 100%
    }]&quot;
  )
  
  df %&gt;%
    e_charts(x) %&gt;%
    e_radar(y,
            max = 5,
            itemStyle = list(
              color = list(type = &quot;radial&quot;,
                           x = &quot;0.5&quot;,
                           y = &quot;0.5&quot;,
                           r = &quot;0.5&quot;,
                           backgroundColor = radial_gradient,
                           colorStops = color_stops,
                           globalCoord = &quot;false&quot;)
            ),
            areaStyle = list(
              color = list(type = &quot;radial&quot;,
                           x = &quot;0.5&quot;,
                           y = &quot;0.5&quot;,
                           r = &quot;0.5&quot;,
                           backgroundColor = radial_gradient,
                           colorStops = color_stops,
                           globalCoord = &quot;false&quot;)
            )
    )
  </code></pre>
  <p>Here is the result:</p>
  <p><a href="https://i.stack.imgur.com/PYLUI.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PYLUI.jpg" alt="radar chart echarts" /></a></p>
  <p>Here are some problems with my chart so far:</p>
  <ul>
  <li>The radial gradient isn't centered at 0 and I am not sure what is causing this.</li>
  <li>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?</li>
  <li>The outer points doesn't seem to react to the colors and they are always the same color.</li>
  </ul>
  <p>Would love some ideas on how to solve these problems.</p>