I'm trying to create a spider chart in Victory Native but I need the edges of the radar axis(VictoryPolarAxis) to be straight like this
The chart I expect looks like this:
Thank for your help!
I'm trying to create a spider chart in Victory Native but I need the edges of the radar axis(VictoryPolarAxis) to be straight like this
The chart I expect looks like this:
Thank for your help!
The trick here is to draw a line chart in polar coordinates and then use Victory's customization api to draw the straight lines you need.
Output of Polar Chart Image for below code
Refer to the following code
Let's dive in.
Creating a line chart in polar form is fairly easy. Just pass your data to the VictoryLine component and set the polar property to true.
For replacing the circular arc of the axis with straight lines, use the VictoryPolarAxis. In the example above, this component takes a prop called
circularAxisComponent
that allows us to customize how the axis is rendered.I created a functional component called CircularAxisComponent that draws this axis.
All this component does is render a SVG polygon. Getting the coordinates of the point requires a bit of maths and trigonometry.
In the calculation for pointX,
radius * cos(t)
gives the X coordinate and adding centerX will translate this point so that the resulting polygon appears at the correct position. Same for y coordinate.To checkout other ways you can customize the Polar Axis component, refer to the docs - Victory Docs - VictoryPolarAxis