title: How to show labels as a tooltip in a pie chart using d3js and reactjs
body: <p>I was trying to create a pie chart using d3js and so far have been able to display it on my webapp. However, only the values are shown on the slices of the pie chart, I would also like to add label to those slice so that the users know what each slice means with either a tooltip or just with an arrow pointing to each slice and depicting what each of them slices mean. </p>
  
  <p>I send a object to the pie component from my app.js file where I get the data after calling an api. the object looks like this:</p>
  
  <pre><code>[{"emotion":"Positive","value":81},{"emotion":"Neutral","value":18},{"emotion":"Negative","value":0}]
  </code></pre>
  
  <p>So now only 81, 18 and 0 are showing on the slices in my pie chart. I want to show the emotions as labels for them too. How do I do that?</p>
  
  <p>this is the pie component so far:</p>
  
  <pre><code>import React, { useEffect, useRef } from "react";
  import * as d3 from "d3";
  
  const Pie = props =&gt; {
    const ref = useRef(null);
    const createPie = d3
      .pie()
      .value(d =&gt; d.value)
      .sort(null);
    const createArc = d3
      .arc()
      .innerRadius(props.innerRadius)
      .outerRadius(props.outerRadius);
    const colors = d3.scaleOrdinal(d3.schemeCategory10);
    const format = d3.format(".2f");
  
    useEffect(
      () =&gt; {
        const data = createPie(props.data);
        const group = d3.select(ref.current);
        const groupWithData = group.selectAll("g.arc").data(data);
  
        groupWithData.exit().remove();
  
        const groupWithUpdate = groupWithData
          .enter()
          .append("g")
          .attr("class", "arc");
  
        const path = groupWithUpdate
          .append("path")
          .merge(groupWithData.select("path.arc"));
  
        path
          .attr("class", "arc")
          .attr("d", createArc)
          .attr("fill", (d, i) =&gt; colors(i));
  
        const text = groupWithUpdate
          .append("text")
          .merge(groupWithData.select("text"));
  
        text
          .attr("text-anchor", "middle")
          .attr("alignment-baseline", "middle")
          .attr("transform", d =&gt; `translate(${createArc.centroid(d)})`)
          .style("fill", "white")
          .style("font-size", 10)
          .text(d =&gt; format(d.value));
      },
      [props.data]
    );
  
    return (
      &lt;svg width={props.width} height={props.height}&gt;
        &lt;g
          ref={ref}
          transform={`translate(${props.outerRadius} ${props.outerRadius})`}
        /&gt;
      &lt;/svg&gt;
    );
  };
  
  export default Pie;
  </code></pre>
  
  <p>this is how I send the data in app.js</p>
  
  <pre><code> &lt;Pie
            data={this.state.analysis.sentiments}
            width={200}
            height={200}
            innerRadius={0}
            outerRadius={100}
          /&gt;
  </code></pre>
  
  <p>this is just a demo codesandbox and the values are shown in the slices. But I also want the labels when you hover the slices
  <a href="https://codesandbox.io/s/react-d3-pie-chart-djx8y" rel="nofollow noreferrer">https://codesandbox.io/s/react-d3-pie-chart-djx8y</a></p>