No component displayed when adding a custom label to a ReferenceLine in Recharts

user_11703583 0
Viewed 1025

I'm trying to add a custom label with a circular border to the right of a ReferenceLine as shown here https://imgur.com/a/svCsNVZ and as it says you can do in the docs here http://recharts.org/en-US/api/ReferenceLine#label .

The issue we’re having is that whenever we try to pass a component in here <ReferenceLine {...props} label={<CustomizedLabel />} /> nothing ever gets rendered, no matter what I try.

I can’t find any examples where they have specifically done this to a reference line label, but have managed to get the component passing functionality working for the data points, so I’m not sure where we’re going wrong here.

Currently, we can customise the label using an object but when passing our own element in nothing is rendered.

<ReferenceLine
                  y={dataLimits.lL}
                  stroke={Colors.red.hex}
                  strokeDasharray="3 3"
                  label={{
                    position: "right",
                    value: dataLimits.lL,
                    fill: "#595959",
                    fontSize: "0.75rem"
                  }}
                  ifOverflow="extendDomain"
                />

We want to convert this to

<ReferenceLine
                  y={dataLimits.lL}
                  stroke={Colors.red.hex}
                  strokeDasharray="3 3"
                  label={<LimitLabel />}
                  ifOverflow="extendDomain"
                />

where LimitLabel has the properties above but with a circular border.

No error messages appear on the console, and no components appear in the DOM where it should be.

This is a jsfiddle with our current implementation without the custom component, if that helps demonstrate https://jsfiddle.net/rbyztucn/1/

recharts reactjs
2 Answers

The docs on recharts are really limited on this, but from my experiments and the idea from @rebecca on using SVG elements, I realised that the label prop on these ReferenceLine components expects an SVG element, not a React DOM element.

I will update this comment when I find out more on positioning these elements; I have a feeling I can use Recharts inbuilt locating utils to make this fairly easy.

A nice side effect of this is that you can pass SVG icons to these labels easily too.

user_117035830

This is probably late, but I ran into the same problem recently and managed do find a solution.

Like J Rhodes mentioned, the documentation is very vague on how to create customized labels using Recharts. The lib is great but the documentation does need some improvement.

As far as I've noticed, any label prop or even the <Label /> component itself can only render SVG elements by default. One way to overcome this limitation is by declaring a customized SVG element using <foreignObject> and a rendered React element as children, like this example:

const renderCustomLabel  = ({ viewBox }) => (
    <g>
        <foreignObject x={0} y={0} width={100} height={100}>
            <div>Your custom content goes here...</div>
        </foreignObject>
    </g>
)}

On the component (<ReferenceLine /> and <ReferenceDot /> as label prop and <Label /> as content prop) call, all you need is to pass the function reference like this:

<ReferenceLine label={renderCustomLabel} />

Ps: The viewBox prop gives dynamic access to the parent component position.

user_114647500
Related