Stack Overflow
Stack Overflow

Questions tagged [recharts]

Recharts is a composable charting library built on React components and D3

Rechart's website, Rechart on GitHub

773 questions
57
votes
6 answers

Recharts set Y-axis range

Can't figure out how to set the range of Y-axis using http://recharts.org/ Want the Y-axis to display 100 in it's range instead of current 60. Belive code example is not needed or fill purpose in this specific case
Mathias Asberg
  • 3,562
  • 6
  • 30
  • 46
47
votes
5 answers

Set height and width for responsive chart using recharts ( Barchart )

I am trying to use recharts to implement a BarChart. But the width={600} and height={300} causes the Barchart to be absolute, not responsive. How to make the Barchart a responsive one? I tried using percentage as width={'50%"} height={"40%"} but did…
Shrawan BK
  • 531
  • 1
  • 6
  • 13
31
votes
3 answers

Custom legend labels in my rechart chart

I have a pretty straight forward data array for my recharts component : {name: '12.1.2011', series1: 4000, series2: 2400, series3: 2400}, {name: '12.2.2011', series1: 3000, series2: 1398, series3: 2210}, {name: '12.3.2011', series1: 2000, series2:…
Oliver Watkins
  • 12,575
  • 33
  • 119
  • 225
26
votes
2 answers

Recharts: Turn off background hover for bar charts

Is there a way to turn off this gray background that appears on hover for bar charts in Recharts? Using version 1.4.1. Code (simplified) looks like this: import React from "react" // Recharts import { Bar, BarChart, CartesianGrid,…
David Yeiser
  • 1,438
  • 5
  • 22
  • 33
21
votes
1 answer

Creating a Rechart barchart with rounded edges

I'm trying to create a barchart like this, where the bar is X length, and each segment of the bar is proportional in length to the % of the data it contains. I've gotten pretty close by creating a vertical layout stacked barchart, but can't figure…
Weston
  • 1,291
  • 3
  • 12
  • 25
21
votes
1 answer

How to remove points from line chart in ReCharts?

I want to render just the line without the points. I'm using: http://recharts.org/#/en-US/api/LineChart Here is the JSFiddle: http://jsfiddle.net/gw7v4br8/87/ const {LineChart, Line} = Recharts; const data = [ {name: 'Page A', uv: 4000, pv:…
Leon Gaban
  • 36,509
  • 115
  • 332
  • 529
20
votes
3 answers

Rechart - adding labels to charts

I'm trying to learn how to use Rechart. The documentation says you can put labels on chart elements, and gives an example of how to do it using 'name' as the label data key. I've tried to do that in my chart, but it doesn't work. If i remove the…
Mel
  • 2,481
  • 26
  • 113
  • 273
14
votes
6 answers

Recharts Responsive Container does not resize correctly in flexbox

I'm trying to create a custom collapsable legend for my data visualization app. It uses react and recharts. the component renders nicely the first time. But when I collapse the legend and reopen it, the responsive container doesn't shrink to fit.…
Lucas D
  • 460
  • 1
  • 4
  • 15
13
votes
7 answers

Typescript Interface for Recharts Custom Tooltip

Being not well-versed with Typescript yet, I am trying to create a custom Tooltip content for my Recharts chart in my React app with Typescript. @types/recharts has already been installed as one of the a devDependencies. However, when I define the…
Athena Wisdom
  • 6,101
  • 9
  • 36
  • 60
13
votes
1 answer

Prevent Recharts Tick Marks from Overlapping

I am developing an application which allows a user to select dynamically queried data which can then be used in Recharts visualizations. There are certain edge cases where the default formatting / rendering within recharts produces an ugly result.…
Torc
  • 1,148
  • 6
  • 20
  • 43
13
votes
1 answer

Recharts ComposedChart with multiple datasets?

I want to plot data points on a composed chart, consisting of Bars and Lines, each having their own datasets, respectively. For instance, I want each Bar to get a value from data.points, but Lines to get their value from an array of objects,…
eightonrose
  • 688
  • 3
  • 14
  • 24
13
votes
2 answers

Recharts custom label

Custom label for React Recharts not working with Bar chart. http://jsfiddle.net/xpko4e7e/ } /> Expected to see the 'Label' text over of all bars. Update For example, if I have a chart in…
Rodion
  • 233
  • 1
  • 3
  • 7
12
votes
3 answers

Error: require() of ES module is no supported when using recharts with next.js (and typescript)

I see some questions of this kind, but none of them really gets my problem. I'm developing a webapp using next.js (working with typescript). In my app uses recharts, but the compilation fails with this error: Error: Must use import to load ES…
Michael Rabinovich
  • 121
  • 1
  • 6
12
votes
1 answer

How to disable animation for LineChart in recharts?

I was trying to disable animation in this way: …
Gregory Orlov
  • 517
  • 1
  • 6
  • 15
12
votes
1 answer

Recharts issue with gaps between Bars

I am using BarChart from the Recharts library, however I am facing the issue while adding the space between bars. I have tried to use the attribute barGap={20} barCategoryGap={20}, however it doesn't seem to be working.
OmkarS1109
  • 183
  • 1
  • 2
  • 8
1
2 3
…
51 52