Implement tooltip for PieChart

[Cloudo]

Implement tooltip for PieChart

[fatemehqasemkhani]

you can set custom tooltip or default tooltip.

const PieChart = ({
  data,
  colors,
  fill,
  dataKey,
  innerRadius,
  outerRadius,
  cx,
  cy,
  paddingAngle,
  label,
  labelLine,
  payload,
}) => {
  const CustomTooltip = ({ payload }) => {
    return (
      <div>
        <div className="ant-popover-arrow" />
        <div className={s.customTooltip}>
          <b>{payload?.[0]?.payload?.name}</b>
          <span className={s.info}>
            <p className="desc">
              <small>{payload?.[0]?.payload?.totalCurrentPrice}</small>
            </p>
            <p>{payload?.[0]?.payload?.profitInPercentage} %</p>
          </span>
        </div>
      </div>
    );
  };

  return (
    <Chart width={150} height={150}>
      <Pie
        data={data}
        cx={cx}
        cy={cy}
        innerRadius={innerRadius}
        outerRadius={outerRadius}
        fill={fill}
        paddingAngle={paddingAngle}
        dataKey={dataKey}
        labelLine={labelLine}
        label={label}
      >
        {data.map((entry, index) => (
          <Cell key={entry.key} fill={colors[index % colors.length]} />
        ))}
      </Pie>
      <Tooltip content={<CustomTooltip />} />
    </Chart>
  );
};

if you omit content props in Tooltip, rechart default tooltip will be applied.

[xile611]

Have implemented In v0.7.0
http://recharts.org/examples#TwoSimplePieChart

[Cloudo]

Awesome, thanks!

[juanigaray]

There is no tooltip in that example