Unable to use reactelement for reference line

Do you want to request a feature or report a bug?

Bug report

What is the current behavior?

When i use plain text for the label of a reference line, everything works ok. But say i put in a react element (Ie <span>hello</span>), nothing displays.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via https://jsfiddle.net or similar (template: http://jsfiddle.net/ndLhnegs/).

<AreaChart ....>
   .....
   <ReferenceLine label={<span>hello</span>} />
</AreaChart>

The resulting HTML

<g class="recharts-layer recharts-reference-line">
  <line x="23" stroke="green" fill="none" fill-opacity="1" stroke-width="1" x1="469.15789473684214" y1="270" x2="469.15789473684214" y2="20" class="recharts-reference-line-line"></line>
  <span content="[object Object]" viewBox="[object Object]" offset="5">hello</span>
</g>

What is the expected behavior?

Should see “hello” on the reference line

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

recharts@^1.5.0

[cbarraford]

@xile611 well im actually trying to render something more complicated than “hello”, but since the simple use case doesn’t work as documented, i figured i’d start with that.

What I’m actually trying to accomplish is saying hello with a 90 degree rotation

[olelivalife]

This works (but not in IE…)

 <foreignObject x="40" y="40" width="100" height="100">
    <div xmlns="http://www.w3.org/1999/xhtml">test</div>
  </foreignObject>