Recharts custom label

a 夏天 提交于 2020-01-03 16:47:35

问题


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.


回答1:


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/



来源:https://stackoverflow.com/questions/42012019/recharts-custom-label

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!