I am using React Recharts for my visualization, however, I am having a challenge displaying a simple bar chart with different corresponding object contents.  [   {     "month": "2017-07",     "commodities": [       { "name...

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...

I am actually new here. And new in ReactJS too :(    What I'm trying to do is when I hover over the value 1 line, only the value 1 data will be shown inside the tooltip. So as you can see that's not the case with this tooltip.  Please help I...

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 to...

I currently have a Recharts component that I would like to export as a PNG file.                       <LineChart                         id="currentChart"                         ref={(chart) => this.currentChart = chart}...

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...

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 class?...

When I'm using recharts to render a chart in in a wrapper which is RTL (for Arabic or Hebrew), the UI gets messed up. Does the library provide an API for RTL rendering?   <div className="right-to-left">      <PieChart width={400}...

I want to create A ReChart component, which has multiple lines.  SO far i have this dummy code.   <LineChart   data={data}   margin={{     top: 16,     right: 16,     bottom: 0,     left: 24   }} >   <XAxis dataKey="time" />   <...

I'm trying to implement opacity changes when hovering over the legend in React recharts: https://jsfiddle.net/alidingling/1p40zzfe/  However, I'm always getting the error: TypeError: Cannot read property 'opacity' of null. Is there a...