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

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

These templates will create for you the following files;

data.csv

A good place to start is from the data. The data is just some random animals and a number that can represent the animal count;

/public/data/data.csv

name,value
Dog,15
Cat,25
Horse,30
Monkey,5
Mouse,12
Zebra,8
Elephant,13
Snake,12
Cow,14