Integrate a Donut Pie Chart With Polylines and Labels Utilizing d3js, Reactjs, and TypeScript.

Eli Elad Elrom
Master React
Published in
7 min readJun 15, 2021


Donut charts are often utilized to show the proportions of categorical type datasets. The size of each piece representing the proportion of each category.

A donut chart is created usually as: string field, a count of something such as features, number, rate/ratio field, etc.

A pie chart without a good legend is meaningless. A good way to display a legend is to add lines and labels to each category.

In this tutorial, I will show you how to create a simple donut chart that has polylines and labels utilizing: d3, React and TypeScript as type checkers.

Setting up your project

I will be using CRA (SPA) using the MHL template to get TS, SCSS, formatting, templates, linting, etc.

$ yarn create react-app donut-chart --template must-have-libraries

Add d3, d3-cloud and types;

$ yarn add d3 @types/d3

Creating components using my templates;

$ npx generate-react-cli component DonutChart --type=d3WidgetComponent$ npx generate-react-cli component DonutChartWidget --type=d3Widget