Add data in pie chart using D3

Question

I have an application where I use d3.

 import React, { useState } from "react"; import ReactDOM from "react-dom"; import * as d3 from "d3"; import Pie from "./PieGraph"; import "./styles.css"; function App() { const [data, setData] = useState([ { value: 25 }, { value: 59 }, { value: 77 } ]); return ( <div className="App"> <h1>Pie Chart with React & D3</h1> <div></div> <div className="piechart"> <Pie data={data} width={200} height={200} innerRadius={60} outerRadius={100} /> </div> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

I want to add additional data in chart near numbers, like:

• 25 Apples
• 59 Cherry
• 77 Cars

The code for what I have now is here

Question: How to add near numbers, inside chart, a text like I described above?

Answer 1

Supposing you can change PieGraph.js yourself, I'd do the following:

1. Change Arc to accept data with a value and a label

piegraph.js

const Arc = ({ data, index, createArc, colors, format }) => (
  <g key={index} className="arc">
    <path className="arc" d={createArc(data)} fill={colors(index)} />
    <text
      transform={`translate(${createArc.centroid(data)})`}
      textAnchor="middle"
      fill="white"
      fontSize="10"
    >
      // Here is the change
      {data.format !== undefined ? data.format : format(data.value)}
    </text>
  </g>
);

2. Change the data you pass to the Pie

index.js

const [data, setData] = useState([
    {
      value: 25,
      label: '25 apples',
    },
    {
      value: 59,
      label: '',
    },
    {
      value: 77
    }
  ]);

Now, the first one has the label '25 apples', the second one has no label and the third one has label 77.00 , as was the case already.