Recharts Legend Scrollable is an addon library for recharts that adds custom legend element
The purpose of this library is to prevent overflowing legend with elements so it always fits the chart size
<LineChart
width={400}
height={400}
data={data}
margin={{ top: 5, right: 20, left: 10, bottom: 5 }}
>
<XAxis dataKey="name" />
<Tooltip />
<CartesianGrid stroke="#f5f5f5" />
<Line type="monotone" dataKey="uv" stroke="#ff7300" yAxisId={0} />
<Line type="monotone" dataKey="pv" stroke="#387908" yAxisId={1} />
<LegendScrollable />
</LineChart>
To add Recharts Legend Scrollable into your project, execute
$ npm install recharts recharts-legend-scrollable
Storybook demo available here https://recharts-legend-scrollable.vercel.app/
To run it locally, execute
$ npm run[-script] storybook
and then browse to http://localhost:6006.