Recharts is a composable charting library built on React components and D3
Questions tagged [recharts]
773 questions
8
votes
1 answer
How to slow down animation time in Recharts?
I was trying to slow down the animation in recharts but i did not get any idea about it ..
I have tried in CSS part but that does not work
isAnimationActive={true} is to enable animation
isAnimationActive={false} is to disable animation
is there…
Gopinath Kaliappan
- 6,929
- 8
- 37
- 60
8
votes
3 answers
Recharts wordwrap x-axis label
I want to word-wrap long labels like in this demo.
Supposedly this PR supports it, but I couldn't get it to work with
Avery235
- 4,756
- 12
- 49
- 83
8
votes
2 answers
recharts pie chart centering using responsive container
I'm using recharts to create pie charts. When look at this example, http://recharts.org/#/en-US/examples/PieResponsiveContainer the pie chart can be centered using ResponsiveContainer component.
But my attempt failed :…
Cecilia Chan
- 679
- 2
- 8
- 17
8
votes
2 answers
Recharts LineChart dots only for certain data points
I would like to use the LineChart of Recharts to show a data set with up to 200 points. However, I would like to show the dots/tooltip/activeDot only for 5 of those data points on small screens because 200 points wouldn't be clickable anymore on…
Stefan
- 1,590
- 3
- 18
- 33
7
votes
2 answers
How to add recharts to react-pdf
I am using 'recharts' to create graphs for my project,
and 'react-pdf' for generating a report.
'Recharts' creates a svg on the DOM when using it and a graph is displayed.
Is there a way I can use these two together, and add my 'recharts' component…
Daniel Cohen
- 121
- 1
- 7
7
votes
0 answers
Recharts v2: breaking changes from v1.8x
I'm jumping into a project that uses recharts v1.8x. I would like to upgrade that to v2.x.x, but I haven't found any migration guide/breaking changes list anywhere.
Does anyone have/know of a list of breaking changes between them (IE compatibility…
Katzhuu
- 132
- 1
- 8
7
votes
3 answers
Recharts is not working for the React with typescript
I have an issue with handling chart libraries.
Step by step
Create an empty project
$ npx create-react-app chart-demo --template typescript
Add Recharts
$ yarn add @types/recharts
Run the project
$ yarn start
It shows the following…
incredever
- 231
- 1
- 2
- 11
7
votes
3 answers
How to pass fill colors to recharts Pie component
So basically i have this array of objects:
const testMeasurments = [
{
data: [
{name: "glucose", value: 6, color: '#57c0e8'},
{name: "SpO2", value: 5, color: "#FF6565"},
{name: "Blood Pressure", value: 4, color: "#FFDA83"},
…
M.I
- 379
- 3
- 18
7
votes
1 answer
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.
PS: Tried changing…
Riddhi
- 2,174
- 1
- 9
- 17
7
votes
1 answer
how to draw only straight lines using react recharts
I try to use react recharts. I need chart like this chart with straight lines
But I can't draw the straight lines. I try to use but something wrong
And…
Kley
- 93
- 1
- 1
- 8
6
votes
2 answers
Fill opacity don't work with calculate value Recharts
For each Stacked Bar element, I calculate its percentage
const valuePercent = attribute => ({payload}) => {
const keys = getKeys(chartData);
const total = keys.reduce((acc, curr) => {
return acc + payload[curr].count;
}, 0);
…
qwerty
- 205
- 2
- 10
6
votes
1 answer
Rechart area chart gradient colour change according to a variable
Reference Link
In Recharts react library, you can add gradient fills to area charts using the following method
Akila Uyanwatta
- 543
- 1
- 4
- 11
6
votes
0 answers
How to render a recharts graph in a pdf using react-pdf
I have been using the recharts library for the dashboards in a NextJs app and a new requirement came through to download tables and charts through a PDF.
On the github for the react-pdf there was an issued raised that has now been closed due to the…
Leonardo
- 183
- 2
- 6
6
votes
1 answer
Recharts: how is it possible to show only the value of ONE data point inside a Tooltip?
I am trying to implement the following example inside a Recharts LineChart: the Tooltip value is relative to the blue point, because my mouse happens to be near it, and further away from the grey point with the same x-value. If I move the mouse…
Marco Faustinelli
- 3,734
- 5
- 30
- 49
6
votes
0 answers
How to align two Y-axis around 0 in React Recharts?
I have an areachart with two areas and two Y-Axis. The first area goes from -1500 to 4500. The second goes from 0 to 100. Both areas start from the bottom so the 0 value of the second one is aligned with the -1500 value of the first one. Is it…
Thbwun
- 323
- 1
- 3
- 14