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
6
votes
2 answers

Recharts X-Axis auto not showing most values in ticks for times?

I've just converted my project from using react vis over to recharts. I'm currently looking into why the ticks aren't showing as expected. There are 96 datapoints that should be showing up and the cartesian grid shows them, but no tick labels appear…
CustardBun
  • 3,457
  • 8
  • 39
  • 65
6
votes
2 answers

How to position tooltip on the top of a barchart in rechart?

Problem: I have created a bar chart with a custom tooltip. Now What I need is to position tooltip on top of the bar not within the area of the chart. Like in this picture. This is how It looks like now. Here I am providing how I organize my…
dwp
  • 908
  • 4
  • 24
  • 42
6
votes
3 answers

Recharts - Tooltip Formatter on Biaxial Line Charts?

I'm using a Biaxial Line Chart, and I'm trying to figure out how to format the content of the Tooltip using the formatter function. What I want is for my output to read: 2019-01-13 Price: $17.99 Sales Rank: 326,518 I'm currently using the below…
K20GH
  • 6,032
  • 20
  • 78
  • 118
6
votes
5 answers

How to change font family for React Recharts library X-axis / Y-axis ticks?

My task is fairly simple: all I want to do is change the font-family to Roboto, sans-serif for the x-axis and y-axis "ticks" (ie. the values along both axes). I can change the font size of the x-axis tick with:
neo5_50
  • 466
  • 1
  • 5
  • 19
6
votes
2 answers

Is there any way that I can only show the hovered line in tooltip (Recharts)?

I have tried using customized tooltip but my problem was I don't know how to get the index of the payload that is hovered. What I want is to show only the value of the hovered line in the tooltip. For example, I hovered over the value 1 line so I…
Danielle Mae Tugare
  • 93
  • 1
  • 2
  • 5
5
votes
2 answers

React, sorting X-axis label in Rechart in from different data sources

I need help figuring how to sort X-Axis label values in ascending order in Rechart graphs. currently, the data for the chart is gotten from two sources. Below is the code presented. const series = [ { name: 'SourceA: ', data: reportsFromSourceA…
wokoro douye samuel
  • 2,194
  • 3
  • 15
  • 29
5
votes
1 answer

CSS Styling Pie Chart / Doughnut chart

I'm using Recharts to try to accomplish a doughnut chart with rounded segments, which should end by looking more or less like this: This is the closest I can achieve, but as you can see I'm running into some problems: First, the first segment is…
Poro
  • 61
  • 1
  • 7
5
votes
2 answers

Recharts value at pointer to show in tooltip?

Is it possible in Recharts to show a Horizontal line at the Y location where the user has their mouse over and retrieve that Y value so we can display it on the Tooltip? https://meridian.a2z.com/components/tooltip/?platform=react-web I've been…
CustardBun
  • 3,457
  • 8
  • 39
  • 65
5
votes
0 answers

Rechart Scrollable bar chart, In a simple bar chart with large data how to implement scroll when Bar is dragged left or right( without Brush or Pan)

Hi I want to implement bar chart in rechart react. it should scroll when user clicks and drags Bar to Left or Right. I have already tried Brush and Panning but not suitable for me. requirement is no external slider to be used chart itself should be…
Pushpak
  • 86
  • 2
  • 9
5
votes
1 answer

Recharts - bar chart dynamic label position

How can I have dynamic label positions of Bars like is showing in the picture? Here is my code till now const data = [ { currency: 'CHF', amount: 3, amountLabel: 3023.00 }, { currency: 'GBP', amount: 6, amountLabel: 6275.00 }, …
user08
  • 695
  • 3
  • 8
  • 25
5
votes
1 answer

Recharts: Hide Bar where value is undefined

I have a Recharts BarChart component with 3 different values for each day of the week: primary, secondary, and tertiary. In some cases secondary and tertiary have no data. If there is no data, I'd like for the specific Bar components mapped to those…
James Donnelly
  • 126,410
  • 34
  • 208
  • 218
5
votes
0 answers

Tooltip for individual stacked bars in recharts?

In Recharts is there any way of displaying separate tooltips for bars in a stacked bar chart? Currently it displays data for all the stacked bars but this can get unwieldy if there are a lot of bars! A screenshot of how the graph looks in the…
Ben Smith
  • 19,589
  • 6
  • 65
  • 93
5
votes
0 answers

Recharts import fail

When I use recharts with react import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts'; and then "npm run-script build" I got this error Creating an optimized production build... Failed to compile. Failed to minify…
wulala
  • 51
  • 1
5
votes
2 answers

Recharts XAxis is not showing the date value from tickFormatter

I'm using recharts to show formatted date value is the x axis label but it' not working i have tried using the tickFormatter but it is not showing the converted date. import React from "react"; import { render } from "react-dom"; import { BarChart,…
ida
  • 545
  • 2
  • 5
  • 20
5
votes
4 answers

How to join after cornerRadius is provided for piecharts in recharts

I am using recharts and I am trying to create a pie chart with only the radius at the edges of the chart. What I get is the following. Similar to that in this fiddle.
Sagar Acharya
  • 1,763
  • 2
  • 19
  • 38
1 2 3
…
51 52