时间戳

首页 > 解决方案 > Rechart - adding labels to charts

reactjs - Rechart - adding labels to charts

问题描述

I'm trying to learn how to use Rechart. The documentation says you can put labels on chart elements, and gives an example of how to do it using 'name' as the label data key.

I've tried to do that in my chart, but it doesn't work.

If i remove the 'label' from the field, then no labels appear. If I keep it, then the only labels that display are the values on the pie chart wedges.

I have a Label with a data key of 'name' (per the docs) but it doesn't render on the chart.

import React, { PureComponent } from 'react';
import {
  ResponsiveContainer, PieChart, Pie, Legend, Label, LabelList
} from 'recharts';

const data = [
  { name: 'Group A', value: 400 }, { name: 'Group B', value: 300 },
  { name: 'Group C', value: 300 }, { name: 'Group D', value: 200 },
];

export default class Example extends PureComponent {
  static jsfiddleUrl = '//jsfiddle.net/alidingling/6okmehja/';

  render() {
    return (
      <div style={{ width: '100%', height: 300 }}>
        <ResponsiveContainer>
          <PieChart>
            <Pie dataKey="value" 
            data={data} 
            fill="#8884d8" 
            Label dataKey="name"    
            />
          </PieChart>
        </ResponsiveContainer>
      </div>
    );
  }
}

How do you add labels to pie charts?

标签： reactjsrecharts

解决方案

对于其他寻找答案的人，这有效：

定义一个函数以您想要的方式呈现标签，例如：

let renderLabel = function(entry) {
    return entry.name;
}

将 label 属性设置为指向您的函数：

<Pie label={renderLabel} [ you other properties ]>
[ your content ]
</Pie>

推荐阅读