CODEWITHSUNDEEP
reactjschartsrecharts
Rodion
Rodion

Reputation: 253

Recharts custom label

Custom label for React Recharts not working with Bar chart.

http://jsfiddle.net/xpko4e7e/

 <Bar dataKey="pv"  fill="#8884d8"  label={<CustomLabel/>} />

Expected to see the 'Label' text over of all bars.

Update
For example, if I have a chart in which multiple lines are there and each line is having some label but at the time of render some of the values are above another. How to overcome with this issue?

Image Preview

Upvotes: 15

Views: 48694

Answers (2)

CharukaK
CharukaK

Reputation: 396

instead of returning a div try returning a text SVG element

const CustomizedLabel = React.createClass({
  render () {
    const {x, y, stroke, value} = this.props;
    return <text x={x} y={y} dy={-4} fill={stroke} fontSize={10} textAnchor="middle">{value}</text>
  }
});

and then add

<Bar dataKey="pv"  fill="#8884d8"  label={customLabel} />

like I have done here, http://jsfiddle.net/CharukaK/6u08o2oa/1/

Upvotes: 23

service-paradis
service-paradis

Reputation: 3398

I know this question is kind of old, but the issue is still there. We cannot use a HTML Element directly for a custom label. Only SVG Elements are working. But...

There is an element supported by SVG that is called <foreignObject>

So something like this will work:

const CustomLabel  = React.createClass({ 
  render() {  
        return (
          <g>
            <foreignObject x={0} y={0} width={100} height={100}>
              <div>Label</div>
            </foreignObject>
          </g>
        );
  }
});

Upvotes: 10

Related Questions