Questions tagged [recharts]
Recharts is a composable charting library built on React components and D3
785
questions
0
votes
0
answers
16
views
How to build Stacked Area chart for data with "type" via Recharts
I've got a React app where I'm using Recharts to display data. The app is something like an online order form, where every data point will have price and amount, but the data points have different ...
0
votes
0
answers
24
views
Conditionally render label line in Recharts
Im trying to render a label line conditionally in a Piechart in Recharts library.
Currently, the label line is being render absolutely for all sections of the Piechart.
My goal is to set a condition ...
-1
votes
1
answer
24
views
label-line Not deleted recharts
hi i am try to give just to part of the pie label and when i no give label the label-line no deletei give example:
<Pie data={dataPie} label={renderLabel} cx="55%" cy="52%" ...
-1
votes
0
answers
15
views
Is there any chart packages in React JS that provide period selector?
Im planning to build a dashboard to visualize household energy. Currently using Nivo Line Graph to visualize the consumption of a household electricity. Is it possible to have a period selector such ...
0
votes
0
answers
49
views
How to customize Recharts Pie Chart?
I have a pie chart that i want to show two things, the store name and the percentage. Currently, my chart looks like this
In the outer label, the Loja part, how can I change the font color to be just ...
0
votes
0
answers
20
views
Sync Brush with multiple ScatterCharts in Recharts?
I have a series of ScatterCharts, each one made with different pieces of data that all span the same date range.
I want to synchronize all of these with a Brush that also spans the same date range.
...
0
votes
0
answers
11
views
Recharts Pie Chart - Calculate Max Width of Text Label in a Given Slice
I've been trying to find a react chart library that is flexible (feature-wise) as well as responsive, but it's been difficult, as most libraries I've come across don't handle responsiveness very well (...
0
votes
0
answers
30
views
Render Errors thrown when using Recharts with Expo React Native
I want to use Recharts Chart Library (https://recharts.org/en-US) for my Expo React Native Application.
When Implementing Recharts LineChart like this:
import {Line, LineChart, XAxis, YAxis} from &...
0
votes
1
answer
26
views
How to create a Rechart barchart with rounded edges
I am using Rechart in React app.
I'm trying to create a barchart like this. But when value = 1 bar not rounded.
my problem
Here's my code
<BarChart
data={data}
...
0
votes
0
answers
32
views
Rechart's radar charts is not displaying properly
I have 3 charts.
Motivational Interview
Tech Interview
Coding Assignment
I am using Rechart in React app. I am rendering 3 charts with two sets of data(fetching from an api). But one chart (Coding ...
0
votes
0
answers
13
views
How can I configure a Recharts X-axis to display age values in the format '⩽17', '20', '25', '30', and so on,
I'm working on a project where I'm using Recharts to create a bar chart to display data related to different age groups. I want the X-axis to show the age values in a specific format. For ages less ...
0
votes
0
answers
50
views
Unable to resolve path to module 'recharts/types/util/types'
I am trying to import this recharts v2.8 type via
import { StackOffsetType } from 'recharts/types/util/types';
However, I get the error Unable to resolve path to module 'recharts/types/util/types' ...
0
votes
0
answers
26
views
How to define a variable in react and reassign without it being reset to undefined
I have large datasets that I need to re-assign based on changing companies and then use in recharts for charting. I would imagine large datasets are not suitable for saving via useState. But when I ...
0
votes
0
answers
15
views
How to add separate width to the each bar in barchart in recharts?
I am trying to plot a barchart using recharts and reactjs where I want each bar to have different width and same height. I have tried different solution but none of them worked. Please provide ...
0
votes
1
answer
58
views
How to get only hovered line item instead of all line items of y axis in recharts?
There are two lines in the graph(Attendance & Video Watched). When I hover on Attendance line, in payload variable of CustomTooltip is getting two entries (i.e one entry for each line in the graph)...
0
votes
0
answers
23
views
ReactJS Recharts: Graph Rendering Issues in Grayed-Out Areas
I want to generate a graph in reactJS like this:-
But my below code is generating the graph like this:-
Link to my code - https://codeshare.io/YLD7Pn
<div>
<ResponsiveContainer width={...
0
votes
0
answers
25
views
Recharts.js passing trying to pass API data
the following cose, d3Data is a promise being returned which I can map to a table or another component.
I am facing issue when tryind to pass this data to a charts library like recharts or d3.js.
...
0
votes
0
answers
25
views
ReCharts vertical axis single title but multiple data
I am attempting to create a barchart in rechart like below, where there is a single title on the left side and a multiple data as a vertical bar but cannot seems to get it to work.
Here is my code so ...
0
votes
0
answers
21
views
How do I remove the gap between two bars when using Rectangle shape in recharts
In following code I have added some sample objects in data variable that can be used to give widths to the bars. But this works in a way that each bar have the same width and the color is only applied ...
0
votes
0
answers
17
views
Difficulties with displaying graphs in ReactJS
I have a problem creating a horizontal segmented bar chart. I must create N bars according to the data I bring from some services and I have a series of problems.
The bars start at the end of the X ...
0
votes
1
answer
43
views
How do I add width to the bars in barchart. I am using recharts library with reactjs
In this code I have one sample json where I have provided name, value and width for the barchart.
import React from "react";
import { Bar, BarChart, ResponsiveContainer, Tooltip } from "...
3
votes
1
answer
45
views
Recharts custom reference line when hovering axis
I'm using Recharts lib, and I need to create this effect on the hovered X Axis:
but I only get neither the gray background or the dotted line, because the only way to do it is within the Tooltip's ...
0
votes
0
answers
39
views
recharts tooltip cursor - dashed line
I'm currently developing a chart, and one of the asks is that the "hover line" for the tooltip (the one that gets turned on/off with the cursor property on Tooltip should be dashed, not ...
0
votes
1
answer
32
views
How to create a different colors per bar stack in ReChart
I am attempting to create a Stacked BarChart with diffrent fill colors below is my code so far, based on some answers here i can access the data array using data[0].color, so i tried to map the data ...
0
votes
0
answers
15
views
React Charts (recharts) Bar Chart bars greyed at upper range selection of data even with a narrow date range
even when the data range is very small, at the upper end of the scale the bars are greyed out. I understand this happens when a large range is selected but that is not the case here - it's happening ...
0
votes
1
answer
26
views
Change the positive negative breakpoint (default 0)
I would like to create the following visual with Recharts:
Ignore the colors or the orientation, only focus on the breakpoint for a positive or a negative bar. Which in my case is 100.
Below 100 the ...
0
votes
1
answer
91
views
Rechart custom tooltip for X-axis labels on a PositiveAndNegativeBarChart
I'm trying to build a bar chart using recharts. The labels text on the x-axis are long, more than 100 characters.
I want to display, item 1, item 2, item 3. And when i hover the mouse around it, i ...
0
votes
0
answers
35
views
How to alter SVG elements in React js and use Recharts at the same time?
I'm using recharts line chart along with a brush element. I've managed to set a fixed width (length) to the brush traveller by accessing it's SVG element and removing the edges which users use to ...
0
votes
0
answers
55
views
Recharts: How can I add arrow head to a line in scatter to indicate direction
I'm using Recharts and I have a composed chart with Scatter inside. I'm using the line prop to connect the scatters, but I would like the lines to indicate the direction of the line like the lines ...
0
votes
0
answers
26
views
Recharts scatter plot with axis lines through 0
I am trying to create a scatter plot chart that looks like this:
Scatter plot
I have tried playing around with the XAxis and YAxis components but can't find any props or examples where the axis lines ...
0
votes
1
answer
220
views
How to highlight line chart area on hover (using recharts)
I have a react application (typescript) which has a LineChart (using “recharts” library) as following:
There are different events. Each event is a line. And all lines are shown together in a single ...
0
votes
2
answers
158
views
How to add spaces between bars in recharts vertical bar chart?
I have this code
import "./styles.css";
import React from "react";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
...
0
votes
0
answers
40
views
Recharts graph components positioning over other components
I am working on creating a dashboard and used Rechart to create graph but now as I am working on making a popup my Rechart components are overlapping over the popup component. Main problem is ...
0
votes
1
answer
26
views
Recharts - 2 Pies, disabled Tooltip for one? Or: How to style ResponsiveContainer
I have a React component where I'm trying to (currently) render 2 pie charts. I have a custom Label Text that is working well, that works on the activeIndex of which pie is selected for the chart on ...
0
votes
0
answers
21
views
I'm trying to make a chart with logarithmic x-axis using Recharts
I'm trying to make a chart with logarithmic x-axis using Recharts
<div className="chart">
<ResponsiveContainer width="100%" height={400}>
<...
0
votes
0
answers
90
views
text not shown in rechart react js with bar chart
I am using the Recharts library to create an admin dashboard, and I need to create a horizontal bar chart similar to the one shown in the screenshot. I have attempted to implement the example provided ...
0
votes
0
answers
24
views
Line Chart of Recharts showing tooltip at wrong place with wrong coordinates. I hover at some place but it shows data of other coordinates
I am using recharts to implement line graphs in my project but the tooltip behaves abnormally. Lets say i need the data on the tooltip for the coordinate x1,y1 and when i hover over x1,y1 the tooltip ...
0
votes
1
answer
104
views
Recharts: How do I label only the last point on a line chart?
I'm working with the following code written by someone else:
const calculateLabel = (line, chartData, trendLabel) => {
return ({
x, y, stroke, value
}) => {
const ...
1
vote
0
answers
37
views
Error: Hydration failed because the initial UI does not match what was rendered on the server. in Recharts Component
The following error occurs when I use the Barchart in Recharts.
Error: Hydration failed because the initial UI does not match what was rendered on the server.
But I don't know which code is causing ...
0
votes
0
answers
40
views
How to add data points as tooltip labels in Rechart even if they aren't plotted
I have a simple line chart using Recharts where I plot the dBm for a cellular device. This is currently fine but we also have additional data that I want to display when you hover over the points in ...
0
votes
0
answers
19
views
Recharts - "point" scale makes BarChart XAxis overflow
I am trying to use XAxis with scale="point" but I noticed that there are two issues:
The bars overflow
On hover, the vertical line is missing
Here is my code:
<BarChart
width={500}
...
0
votes
0
answers
17
views
Rechats Cartesian Grid - gridlines as electrocardiogram
What I would like to achieve is this:
The ECG Grid
How do I configure the CartesianGrid to have a grid as expected to a electrocardiogram (ECG)?
One small box is 0.02 seconds and 1 large box is 0.1 ...
1
vote
1
answer
42
views
Recharts Different Size Bar Groups (in React)
In the bar chart of Recharts, it seems that groups must always have the same number of spaces. Whether or not bars are shown in a particular group, it will always have the same number of spaces as the ...
0
votes
0
answers
48
views
recharts LabelList not working when isAnimationActive set to true
I'd like to add value label on each bar but is not working even though it's simple Bar chart.
I tried isAnimationActive set to false but it came this error: [Error handled by React Router default ...
0
votes
1
answer
46
views
ResponsiveContainer does not make the chart responsive
Wrap any chart in a ResponsiveContainer component. We should expect the chart to be responsive. The chart's dimensions are static and do not change when resizing the window. We are using Recharts v2.7....
0
votes
0
answers
70
views
How do i access the bar chart value from data.count in my recharts Bar label prop?
I need to access the value of each individual rechart Bar inside of the component to create a custom label which appends a custom text string after the value. I have found examples online but it looks ...
1
vote
0
answers
87
views
Recharts Bar Charts: Brush label is hiding when responsive containers end
Preview image
The label/text of brush (date) is hiding due to responsive container end. I just want the label/text of brush overlaps everything so user can read it
<Brush
dataKey=&...
0
votes
0
answers
51
views
Recharts Stacked BarChart: Can't overlap rounded bar
I need a stacked bar chart, whose bars have rounded edges and appear to be on top of each other. My only issue is to overlap the bars somehow, or to add a background with the color of the next bar.
...
0
votes
0
answers
17
views
How to assign individual background colors for progress circles in RadialBarChart using Recharts?
I am currently working on a data visualization project using React and the Recharts library. I am utilizing the RadialBarChart component to display multiple progress circles, each representing a ...
0
votes
1
answer
52
views
Recharts styling with scss
I need to remove recharts horizontal grid last line, here is the scss:
.hideLastLine {
.recharts-wrapper {
.recharts-surface {
.recharts-cartesian-grid {
.recharts-cartesian-grid-...