I am using recharts library for pie charts.
I want to load pie chart for two values always.The chart is loading horizantally as you can see here starting from angle 0. But i want it to be starting from angle 90 looking as below.
PS: Tried changing startAngle and endAngle values.
To create Pie Chart using Recharts, we create a dataset which contains actual data. Then we define the slices using pie element with data property which will have the data of the dataset created and with datakey property which is the property name with a value for the slices.
What is Recharts? Recharts is a component-based charting library, which is exclusively built for React applications. Library provided easy to use and reusable chart components build using D3 library-based submodules. These are created by using the SVG vector elements in the HTML dom.
For creating a chart using Recharts we need to import the required components from 'recharts'. Here we are creating a Line chart to compare the sales of two products in a single chart.
Charts come in multiple forms like Line, Bar, Column, Pie, Scatter, Dot, Area, or sometimes the combination of multiple types. With the popularity of application development to React, it is the requirement of time to represent our data to convert it into a nice-looking graphical unit with coll animations.
Well I guess it's still related with props startAngle
and endAngle
It starts counting at degree 90. (It may be kind of counterintuitive)
If you try another value as below, it would become a vertical start pie
startAngle={-270}
Notice according to the document, the default value:
The diff equals 360 would show a full circle pie. You can try out other pairs, like
[-270, 90], [90, -270], [45, 405]
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With