Recharts Legend Scrollable

Introduction

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

Examples

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

Installation

npm

To add Recharts Legend Scrollable into your project, execute

$ npm install recharts recharts-legend-scrollable

Demo

Storybook demo available here https://recharts-legend-scrollable.vercel.app/

Storybook

To run it locally, execute

$ npm run[-script] storybook

and then browse to http://localhost:6006.

License

MIT