recharts: Labels shomtimes not show

I am still using

isAnimationActive={false}

Which allows my labels to be rendered. I left myself this comment:

//should be able to remove this prop, I think there is a bug in Pie stopping labels from rendering. This is a temp fix.

So it looks like I made a note of the issue, and moved onto something else!

Hit the same issue, have some additional data points.

• If the data is defined in a constant at the top of the file, the label method is called and the labels are displayed
• If the data value is passed as a prop value, the label method is never called and the labels are not displayed.

Edit: Since it works when the data is defined as a variable at the top of the file, one work around is to define an empty variable and mutate it based on the passed props:

const data = []

const MyChart = ({ passedData }) => {
  while (data.length > 0) {
    data.pop()
  }

  passedData.each((item) => (
    data.push(item)
  )

  return (
    <PieChart>
      <Pie data={data} />
    </PieChart>
  )
}

it still persists on v1.8.5, not sure why it was closed

This is still an issue why this is closed?

What do you mean outside of the render function?

I think it was something like this…

inside render function (doesn’t work)

class Test extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    let graphData = [];
    
    for (let i = 0; i < this.props.data.arr.length; i++) {
      graphData.push({data1: this.props.data.data1[i], data2: this.props.data.data2[i]});
    }

    return (
      <BarChart width={graphWidth} height={400} data={graphData}>
        <XAxis allowDecimals={false} dataKey="data1"/>
        <YAxis allowDecimals={false} hide={true}/>
        <Bar maxBarSize={50} label={{position: "top"}} fill="#8884d8" dataKey="data2"/>
      </BarChart>
    );
  }
}

outside render function (does work)

class Test extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      graphData: []
    };
  }

  componentWillMount() {
    this.setState((state) => {
      let newGraphData = [];
      for (let i = 0; i < this.props.data.arr.length; i++) {
        graphData.push({data1: this.props.data.data1[i], data2: this.props.data.data2[i]});
      }
      return {
        graphData: newGraphData
      };
    });
  }

  render() {
    return (
      <BarChart width={graphWidth} height={400} data={this.state.graphData}>
        <XAxis allowDecimals={false} dataKey="data1"/>
        <YAxis allowDecimals={false} hide={true}/>
        <Bar maxBarSize={50} label={{position: "top"}} fill="#8884d8" dataKey="data2"/>
      </BarChart>
    );
  }
}

When the graph data is in the state of the component before render it seems to work.

@totaki I can’t reproduce the bug that you’re saying in the jsfiddle, I can see the label all the time. If you load data via ajax try set prop of isAnimationActiveBoolean to false.

Hi, has there been a fix to the labels other than having isAnimationActive false? I am currently using recharts 1.1.0 and it still fails to display the labels if I hover to quickly over the chart on initial load

In React 16.9.0 Label works well when wrapped with React.memo e.g: const chart = Rect.memo((props) => <MyBarchart {...props}>, (prevProps, nextProps) => Immutable.is(Immutable.fromJS(nextProps.data), Immutable.fromJS(prevProps.data)) )

This issue continues to happen, I’m currently in the latest version, version 2.0.4. To make the labels always show I need to pass the prop isAnimationActive={false} to the Pie component. It would be nice to re-open this issue.

I only found a workaround that you always rerender no mattter what by adding key="makeid()" to the ResponsiveContainer. That solved my problem until it’s fixed.

Have the same issue, why this issue is closed?

rechart-‘2.1.14’ version, bug still there. when use data for chart is work well, but if fetch data from API labels of chart not show

The animation problems have been discussed across various issues.

It stems from recharts/react-smooth: https://github.com/recharts/react-smooth/issues/44

I am also facing the same issue. Labels do not render on initial render. It works fine when animation is disabled but I would like to have both animation and labels.

Hi, I have same issue. I used hooks like this and it works well.

const [isAnimation, setIsAnimation] = useState(true);

const [activeIndex, setActiveIndex ] = useState(-1);

return (
      <PieChart margin={{ top: 0, bottom: 20 }} width={ 300 } height={ 180 }>
        <Pie
          data={ sortedDataByValue }
          innerRadius={ 40 }
          outerRadius={ 80 }
          startAngle={ 90 }
          endAngle={ -360 }
          isAnimationActive={ isAnimation }
          onAnimationEnd={ () => setIsAnimation(false) }
          dataKey='value'
          stroke=''
          labelLine={ false }
          label={ ({
            cx,
            cy,
            midAngle,
            innerRadius,
            outerRadius,
            value,
            index,
          }: PieLabelRenderProps) => {
            /* some logics */
           const isActive = activeIndex === index;

            return (
              isActive
                ? (
                  <CustomTooltip
                    position={{ x, y }}
                    color={ fillColor }
                    value={ value }
                  />
                )
                : <></>
            );
          } }
        >
          { sortedDataByValue.map((data, index) => renderCell(data, index, setActiveIndex)) }
        </Pie>
      </PieChart>
)

The JS filddle doesnt work, nothing is rendered, nevermind the labels. I have intermittent display issues. When my home page loads, there is no animation and no labels. When I change state, unrelated to the pie chart (not passing the changing state as props to the chart), the chart seems to reanimate and display the labels. It seems its only the initial render where the animation has stopped working and the labels are not shown.

I am using react 16.2.0, recharts 1.0.0-beta.6

It used to work on react 15.6.2 and recharts 0.22.4

I am using a function to return my label

<Pie
   data={this.props.mostActiveApps.apps}
   cx="50%"
   cy="50%"
   labelLine={false}
   label={PieChartLabel} //THIS IS A FUNCTION
   outerRadius={this.state.drawWidth / 2}
   nameKey="productName"
   dataKey="reportsSubmitted"
   fill="#8884d8">
   {
      this.props.mostActiveApps.apps.map((entry, index) => <Cell key={index} fill={chartColours[index % chartColours.length]
   }
 />)}
</Pie>

The function is not called on the initial render…

The animation problems have been discussed across various issues.

It stems from recharts/react-smooth: recharts/react-smooth#44

In case you did not read the forementioned issue like me, try to check if you are not in this situation :

Ensure your parent component does not rerender during the animation if possible. For me, I found that a parent component issue was causing my chart to rerender too often. That fix is not shown here.

Fixing the parent rerender during the animation worked for me 🥳

I found a good workaround for this problem. You can render the bar label directly in the Bar component of the chart. and chart labels will be rendered along with the columns. And yes, in the rendering of the columns you can get their values from props with passed in CustomBar key. in my example it is a barDataKey

here is code example

custom bar:

const CustomBar = ({
  x,
  y,
  width,
  height,
  className,
  barDataKey,
  ...props
}) => {
  const yAxisShift = -4;
  const xAxisShift = 3.5;
  return (
    <g>
      <text
        styleName={className}
        x={x}
        y={y}
        dy={yAxisShift}
        dx={xAxisShift}
        textAnchor="middle"
      >
        {props[barDataKey]}
      </text>
      <rect styleName={className} x={x} y={y} width={width} height={height} />
    </g>
  );
};

bars config:

const barsConfig = [{
  dataKey: 'first_key',
  label: "label text",
  className: 'first-key-bar',
},
{
  dataKey: 'second_key',
   label: "label text",
  className: 'second-key-bar',
}];

method for rendering bars:

const renderBars = () =>
    barsConfig &&
    barsConfig.map(item => (
      <Bar
        shape={
          <CustomBar className={item.className} barDataKey={item.dataKey} />
        }
        barSize={DEFAULT_BAR_SIZE}
        key={item.dataKey}
        dataKey={item.dataKey}
      />
    ));

onAnimationEnd={()=>{this.setState({});}} this seems to have done the trick !

Ensure your parent component does not rerender during the animation if possible. For me, I found that a parent component issue was causing my chart to rerender too often.

A solution/workaround I came up with is to protect the chart component from unnecessary rerenders by memomising the props, where that upstream rerender is unavoidable. This avoids the need to disable or override animation props.

const Chart = React.memo(
  (props: Props): JSX.Element => <ChartyGoodness /* props */ />,
  (prevProps, nextProps) => myFavouriteDeepEquals(prevProps, nextProps)
);

or more succinctly;

const Chart = React.memo(
  (props: Props): JSX.Element => <ChartyGoodness /* props */ />,
  myFavouriteDeepEquals
);

If you only need a shallow compare you can omit the second argument,

I found out for me, in my components, although the Labels seems to not be rendered, actually when I check the Component-Tree, the LabelList and Labels exist. But the size of the LabelList is 0px 0px, so I can’t see them. Maybe there is a chance to add a check to the LabelList-Component.

doesn’t work when adding legend along with tooltip.

isAnimationActive={false} works for <Bar />, Recharts 2.0.8

Hit something similar here today

Also having a weird issue with this for barchart. At first I had my constant graph data defined in the render function itself, the labels didn’t show up unless I disabled animation. Moved my graph data outside of the render function and it started to work.