svg element can't by styled with chartStyle Prop

[oleh-andriiv]

Describe the bug

I'm using recharts BarChart and its svg element has .recharts-surface class, which I need to style through chartStyle prop. I looked into source code and it seems like svg tag doesn't consume getElementStyle(attribs, chartStyle, additionalStyle) function, which maps recharts classNames to a stylesheet.

Is there any workaround to that for now (because it kind of urgent) or it can be only resolved in the new version? (in case my assumption is correct)

Thanks in advance!

Reproduction

Try to apply any stylesheet to the ReactPDFChart that wraps BarChart (which has recharts-surface as className for svg and recharts-text for text and see that text one has worked and svg has not)

import { Document, PDFViewer, Page, StyleSheet } from '@react-pdf/renderer';
import ReactPDFChart from 'react-pdf-charts';
import { Bar, BarChart, CartesianGrid, XAxis, YAxis } from 'recharts';

const data = [
  { name: 'A', uv: 4000, pv: 2400, amt: 2400 },
  { name: 'B', uv: 3000, pv: 1398, amt: 2210 },
  { name: 'C', uv: 2000, pv: 9800, amt: 2290 },
  { name: 'D', uv: 2780, pv: 3908, amt: 2000 },
  { name: 'E', uv: 1890, pv: 4800, amt: 2181 },
  { name: 'F', uv: 2390, pv: 3800, amt: 2500 },
  { name: 'G', uv: 3490, pv: 4300, amt: 2100 },
];

const styles = StyleSheet.create({
  'recharts-surface': {
    marginTop: '300px',
    overflow: 'visible',
  },
  'recharts-text': {
    fontSize: '5px',
  },
});

const MyDocument = () => (
  <Document>
    <Page size="A4">
      <ReactPDFChart chartStyle={styles}>
        <BarChart data={data} width={500} height={300}>
          <XAxis dataKey="name" />
          <YAxis />
          <CartesianGrid stroke="#ccc" strokeDasharray="3 3" />
          <Bar dataKey="uv" fill="#8884d8" isAnimationActive={false} />
          <Bar dataKey="pv" fill="#82ca9d" isAnimationActive={false} />
        </BarChart>
      </ReactPDFChart>
    </Page>
  </Document>
);

const App = () => (
  <div>
    <h1>React PDF Sample</h1>
    <PDFViewer height="600" width="800">
      <MyDocument />
    </PDFViewer>
  </div>
);

export default App;

Validations

• Check that there isn't already an issue that reports the same bug to avoid creating a duplicate.
• Check that you're confident that this is a legitimate bug. To ask a question open a GitHub Discussion.
• The provided reproduction is a minimal reproducible example of the bug.

[EvHaus]

Thanks for the bug report. This has been fixed. Can you try again in v0.2.5?

[oleh-andriiv]

Yes, thanks, now it works for <svg>!

Btw I think that it make sense to apply this fix to all svg elements (such as <g>, <line>, etc. ), because they usually have some className, that could be mapped and customised.

[EvHaus]

Sure. I'll do a pass on some of the other elements and see what's missing.