How to use native tooltip in Nivo Pie Charts

Question

I need to show two informations on a tooltip in Nivo Pie chart (ID, Value) but the props that a configure are not effective. Probably I don't need a custom tooltip, just a native tooltip solve my problem

Parcial JSX File

export default function ResponseStatusChart() {

  return (
    <Container>
      <Pie
        data={response}
        width={700}
        height={700}
        tooltip: (t) => ${t.response.id} - ${t.response.value},
        borderWidth={0.5}
        innerRadius={0.5}
        padAngle={3}
        cornerRadius={40}
        colors={{ scheme: "blues" }}
        enableArcLabels={false}
        isInteractive={true}
        enableArcLinkLabels={false}
        legends={legendsProps}
        borderColor={"#c2d9ff"}
      />
    </Container>
  );
}

score 0 · Answer 1 · answered Jun 11 '23 at 09:21

Try:

<Container>
  <Pie
    data={response}
    width={700}
    height={700}
    tooltip={ point => {
        return <div style={ {
        fontSize: '12px',
        }}>{point.datum.label} ({point.datum.value})</div>;
    }}
    borderWidth={0.5}
    innerRadius={0.5}
    padAngle={3}
    cornerRadius={40}
    colors={{ scheme: "blues" }}
    enableArcLabels={false}
    isInteractive={true}
    enableArcLinkLabels={false}
    legends={legendsProps}
    borderColor={"#c2d9ff"}
  />
</Container>

How to use native tooltip in Nivo Pie Charts

1 Answers1