Overlay text on top of a Recharts chart

Question

I'm trying to add static a piece of text (not related to the data being displayed) in the lower-right corner of a Recharts chart.

I could hack together some CSS & HTML to get the text there from a neighboring DOM element, but I'd rather do it using the recharts API.

Any idea? Thanks!

Answer 1

The <XAxis> component can take a prop called label.

<XAxis 
   dataKey="name" 
   label={{ value: 'random text', position: 'insideBottomRight', offset: -20 }} 
/>

The combination of position and offset would lead to a solution you want. Check the docs and a working example.