Rounded Radar Chart in Victory Native

Question

I'm trying to create a radar chart in Victory Native but I need the edges of the radar to be rounded.

The chart provided looks like this:

while I need to make it look like this:

Ideally I would just add lineTension in the style like so:

<VictoryGroup 
     colorScale={["gold", "orange", "tomato"]}
     style={{ data: { fillOpacity: 0.2, strokeWidth: 2, lineTension: 0.7 } }}
 >
    {this.state.data.map((data, i) => {
       return <VictoryArea key={i} data={data}/>;
    })}
</VictoryGroup>

But that doesn't do anything.

Your help is greatly appreciated!!

Answer 1

You can use interpolation prop on your VictoryArea component with these available polar chart options:

"basis", "cardinal", "catmullRom", "linear"

interpolation prop in Victory documentation

<VictoryArea key={i} data={data} interpolation="cardinal" />