0

In nextjs application, I am trying to add recharts https://recharts.org/en-US/examples/SimpleLineChart. Now I want to add filter option for the charts like 1 day, 1 week, 1 month, etc. How can I customise the graph? Or can I use different plugin which supports my requirement? please suggest me. Also how can I add time and date 02:30pm 10 01, 2021 to data? and that should display in when mouseHover on the graph(edges).

Right now I have tried sample graph with static data like

const data = [
 {
  name: 'Page A',
  uv: 4000,
  pv: 2400,
  amt: 2400,
 },
 {
  name: 'Page B',
  uv: 3000,
  pv: 1398,
  amt: 2210,
 },
 {
  name: 'Page C',
  uv: 2000,
  pv: 9800,
  amt: 2290,
 },
]
return(
  <LineChart
      width={900}
      height={250}
      data={data}
      margin={{
        top: 35,
        right: 30,
        left: 20,
        bottom: 5,
      }}
    >
      <Tooltip />
      <Legend />
      <Line type="monotone" dataKey="uv" stroke="#4ec6f4" activeDot={{ r: 8 }} />
   </LineChart>
 )

Also how to add custom content for Tooltip?

Shruthi R
  • 1,863
  • 4
  • 39
  • 77

2 Answers2

1

For your question regarding Tooltip, <Tooltip formatter={(n) => ${n} months}/>

Adrian Angkajaya
  • 21
  • 1
  • 2
1

As far as I am aware, Recharts does not provide a way to filter your data. I would recommend writing a function that filters your data before you pass it to the chart. You can actually just add a date property to all of your data items. I would do some research to find a date string format that suits your needs and is understood by the Javascript Date class.

browse here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Then you can work with your dates as Date objectsand perform logic on them: How to check if one DateTime is later than another in javascript

megakeegman
  • 134
  • 4