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
12
votes
4 answers

Recharts set Y-axis value base of number displayed

Hi I'm trying to use Recharts to display some data but I have ran into a problem. The numbers I'm tying to display are too big and my Y-axis gets cut off by the webpage. Is their a way to set or customize the Y-axis values to display 10K, 10M and…
CSstudent
  • 669
  • 2
  • 7
  • 27
10
votes
2 answers

Recharts - add commas to number on tooltip on bar chart

Is it possible to add a comma to large numbers on the tooltip? for example 57,574 instead of 57574 Thanks!
Gearóid
  • 179
  • 1
  • 3
  • 11
10
votes
3 answers

Rechartd: Vertical bar chart - set bar thickness

How to set the bars thickness?
MichaelS
  • 7,023
  • 10
  • 51
  • 75
10
votes
3 answers

ReCharts: Donut Chart w/two labels in center

I have a donut chart in which i need to add two stacked labels in center which I have done. What i can't figure out is how to add a little vertical space between. ReCharts renders both these lines as SVG The chart is in a responsive container so no…
johnsontroye
  • 281
  • 1
  • 3
  • 20
10
votes
6 answers

Recharts component to PNG

I currently have a Recharts component that I would like to export as a PNG file. (this.currentChart = chart)} width={this.state.width} height={this.state.height} data={this.testData} margin={{…
Cole
  • 2,641
  • 1
  • 16
  • 34
9
votes
2 answers

Remove Y Axis line but keep the values in recharts

So I have created this chart using recharts: Is there a way to remove the YAxis line but keep the values visible? Like remove the line but keep 135, 190, etc.

Body Weight

…
user12872040
9
votes
2 answers

ReCharts with multiple lines

I want to create A ReChart component, which has multiple lines. SO far i have this dummy code.
Kristoffer Tølbøll
  • 3,157
  • 5
  • 34
  • 69
9
votes
0 answers

React.Js - rechart zoom IN/OUT and Brush issue

I am using Rechart library and using AreaChartFillByValue. I am facing following issues 1) When I zoom in the chart goes outside the x-axis and when I zoom out it just reset to where it started for example: suppose the current starting point is 1…
contact dummy
  • 571
  • 9
  • 25
8
votes
1 answer

React Recharts render blocking with a lot of data

I have a use case for Recharts where I'm rendering more than 20,000 data points, which results in a blocking render: (The CodeSandbox has a small pulse animation, so it's easier to see the blocking render when creating new chart data.) When…
Bennett Dams
  • 6,463
  • 5
  • 25
  • 45
8
votes
2 answers

Recharts - How to force chart to start at x=0?

I'm using Recharts to draw some charts. Depending on the length of the data array, the chart doesn't start at x = 0 (not at the intersection of x and y) and doesn't finish at the max value of x: How can I force it to always begin at x = 0 and…
Otavio Bonder
  • 1,789
  • 4
  • 17
  • 35
8
votes
2 answers

How to show different stroke in same line in rechart?

I am using recharts with react, and I need suggestion as to how I can use different strokes in the same Line in a LineChart. For example, it can show a solid line till current date, and a dashed line for a future date (think as the prediction of…
xploreraj
  • 3,792
  • 12
  • 33
  • 51
8
votes
1 answer

Recharts.js ResponsiveContainer showing padding-like whitespace

While using in Recharts, it renders padding-like whitespace which appear around the chart inside it. This issue is reproducible here: https://codesandbox.io/s/ykq2q0z871 [Please note the space between the red border of the…
Rahul Desai
  • 15,242
  • 19
  • 83
  • 138
8
votes
3 answers

Recharts - Tooltip for each Bar in a Bar Chart composed of three bars

I have in my bar chart three different bars. I would like to have a tooltip for each bar in the bar chart and not just one for the three. import React from 'react'; import { BarChart, Bar, XAxis, YAxis, CartesianGrid, Tooltip, …
Emna REGAIEG
  • 81
  • 1
  • 1
  • 8
8
votes
1 answer

recharts pie chart w/ value labels inside

using the recharts library, i'd love to create a donut chart like this: https://apexcharts.com/javascript-chart-demos/pie-charts/simple-donut/ specifically, the value labels are inside the pie chart segments. the only example i can find in the docs…
jonnie
  • 745
  • 1
  • 13
  • 22
8
votes
3 answers

Recharts custom dot

I have an StackedAreaChart and after I show areas on graph I want to add a custom dot. Currently my code look like this but I want to draw a dot depend on XAxis and YAxis data. Does exist any way to pass x and y coordinates to a CustomizedDot…
user9430503
1
2
3
…
51 52