CODEWITHSUNDEEP
react-nativevictory-chartsvictory-native
Adam
Adam

Reputation: 133

Rounded Radar Chart in Victory Native

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:

Text

while I need to make it look like this:

Text

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!!

Upvotes: 1

Views: 2125

Answers (1)

Nostromo
Nostromo

Reputation: 1053

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" />

Upvotes: 1

Related Questions