Questions tagged [recharts]

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

Filter by
Sorted by
Tagged with
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 ...
Cappyccino's user avatar
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 ...
Coni Wright's user avatar
-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%" ...
Lin BM's user avatar
  • 1
-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 ...
Chew Yu Han's user avatar
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 ...
José Carlos's user avatar
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. ...
Aaron Parisi's user avatar
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 (...
jbyrd's user avatar
  • 5,377
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 &...
Artus 8's user avatar
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} ...
Iljimae's user avatar
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 ...
user9419317's user avatar
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 ...
Nikhil Karnwal's user avatar
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' ...
Kevin Huynh's user avatar
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 ...
MillturnK's user avatar
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 ...
Shridhar's user avatar
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)...
Algorithm Unlock's user avatar
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={...
poynting-dev's user avatar
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. ...
Sandeep P.'s user avatar
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 ...
Sarotobi's user avatar
  • 749
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 ...
Shridhar's user avatar
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 ...
Felipe Levinir's user avatar
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 "...
Shridhar's user avatar
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 ...
Igor Souza Andrade's user avatar
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 ...
Aaron Friedman's user avatar
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 ...
Sarotobi's user avatar
  • 749
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 ...
MillturnK's user avatar
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 ...
Simke Nys's user avatar
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 ...
Ashwin R's user avatar
  • 754
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 ...
PRATYUSH MANNA's user avatar
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 ...
Cocada's user avatar
  • 1
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 ...
David's user avatar
  • 1
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 ...
Abdul Jabbar's user avatar
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, ...
geckos's user avatar
  • 5,909
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 ...
Mihir's user avatar
  • 11
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 ...
Lauren Boland's user avatar
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}> <...
Alperen Karslı's user avatar
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 ...
Karamjeet's user avatar
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 ...
yogesh's user avatar
  • 5
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 ...
ArcPie_22's user avatar
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 ...
Tio's user avatar
  • 952
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 ...
dokgu's user avatar
  • 5,266
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} ...
Or Nakash's user avatar
  • 2,095
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 ...
NMAR92's user avatar
  • 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 ...
Cjmaret's user avatar
  • 151
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 ...
user22280578's user avatar
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....
GeorgeMet's user avatar
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 ...
Ian Goodman's user avatar
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=&...
Talha Iqbal's user avatar
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. ...
Rodrigo's user avatar
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 ...
David's user avatar
  • 1
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-...
Ivan Komarnytskiy's user avatar

1
2 3 4 5
16