Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Recharts render pie chart vertically

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.

enter image description here

PS: Tried changing startAngle and endAngle values.

like image 886
Riddhi Avatar asked Mar 24 '20 13:03

Riddhi


People also ask

How to create pie chart using recharts?

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?

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.

How do I create a line chart using recharts?

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.

What are the different types of charts in react?

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.


1 Answers

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:

  • startAngle: 0
  • endAngle: 360

The diff equals 360 would show a full circle pie. You can try out other pairs, like

[-270, 90], [90, -270], [45, 405]

enter image description here

like image 85
keikai Avatar answered Oct 22 '22 19:10

keikai