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
?