search

EvHaus / react-pdf-charts

Allows SVG-based React charts to be rendered in react-pdf
MIT License
41 stars 3 forks source link

Expand support for `Legend` #363

Open ajmnz opened 1 month ago

ajmnz commented 1 month ago

Clear and concise description of the problem

👋

Looks like Legend is not fully supported yet. Props like layout or styles do not seem to work properly, maybe because this component renders a ul element?

Reproduction: https://stackblitz.com/edit/react-pdf-charts-starter-7rlqyq?file=src%2FApp.tsx

Suggested solution

The ideal solution would be to support the most common legend props layout, align, etc.

Additional context

No response

EvHaus commented 1 month ago

Adding support for layout="vertical" turns out to be surprisingly difficult. This is because recharts injects those styles as inline styles and those inline styles all assume browser-based positioning (rather than flexbox). If it was a class name instead, this would be a lot easier to support natively.

Unfortunately, <Legend> also doesn't provide any way to pass in a custom class, so the only way I think of working around this is via the chartStyle prop in react-pdf-charts.

So adding this would work:

const chartStyle = {
  'recharts-default-legend': {
    flexDirection: 'column',
    margin: 'auto',
  },
};

<ReactPDFChart chartStyle={chartStyle}>...</ReactPDFChart>

Like so: https://stackblitz.com/edit/react-pdf-charts-starter-emae4v?file=src%2FApp.tsx

Yes -- this is not ideal, but hopefully this gets you unblocked on your project.