Gradient For Victory Area and shadow for Victory Chart Polar - Help Wanted

[basitmir]

So I have 2 things which I want to achieve

1. I want shadow over the circles like this
   

2. I want a gradient over the Victory Area such that the area falling under the particular range will have a gradient accordingly
   (Gradient is according to the inner circle's rings).
   Lower the area in a radius less the gradient color and vice-versa. Here is a snapshot

Also, the victory scatter points has color matching the gradient

Please help me to achieve this. I have come this far. Please have a look
https://snack.expo.dev/@basitmir/victory-graph-2view

[tgalfin]

Regarding 1: Your chart already looks like it has a shadow outside the grid rings. Are you trying to make this into a gradient so it looks smoother? Try playing with the circularGridComponent prop on your VictoryPolarAxis (https://formidable.com/open-source/victory/docs/victory-polar-axis#circulargridcomponent). You could render a circle with a gradient for the circularGridComponent.

Regarding 2: You basically have a working gradient fill but commented it out. I used your grad123 with slight modifications in the screenshot below. What did you want that was different from what you had?

<VictoryArea
  style={{
    data: {
      fill: "url(#grad123)",
    }
  }}
  . . .
>

For the points to match your fill, you can use the a callback to render point color based on y value. It looks like you were already on your way to that in your code. For the attached screenshot, I changed your grad123 to go from rgb(10,10,10) @ 0% to rgb(240, 255, 220) @ 100%. That way you can calculate the color of the point easily. The colors of the points look a bit off because the area fill has an opacity below 1 and the points are solid.

<VictoryScatter
   style={{
     data: {
       fill: ({datum}) => `rgb(${10 + 230*datum.y}, ${10 + 245*datum.y}, ${10 + 210*datum.y}`,
     },
   }}
/>