4

I'm trying to add a custom label with a circular border to the right of a ReferenceLine as shown here https://i.stack.imgur.com/b20eD.jpg 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/

J Rhodes
  • 81
  • 5
  • it would help if you'd show the custom component, maybe there is some error – rebecca Jun 26 '19 at 14:26
  • 1
    The Recharts docs I linked don't specify either, that's where my issue stems from. I've tried various elements there including divs and SVG elements. I've edited the JsFiddle to show what happens when you try to render a simple div. https://jsfiddle.net/f5jo62ax/9/ – J Rhodes Jun 26 '19 at 14:54
  • just found this question & answer, maybe it helps: https://stackoverflow.com/questions/42012019/recharts-custom-label – rebecca Jun 26 '19 at 15:09
  • 2
    Yes, I found that answer too however the JSFiddle it links to is broken and reimplementing the code as shown there doesn't render the label. I've applied it to my Js fiddle here https://jsfiddle.net/rbyztucn/1/ – J Rhodes Jun 26 '19 at 15:26
  • yeah i tried around and couldn't get it to work either. only with a – rebecca Jun 26 '19 at 15:32

2 Answers2

4

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.

J Rhodes
  • 81
  • 5
2

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.

sgtbrunner
  • 31
  • 5