D3.js Angular Gallery

The Angular D3 graph gallery displays some of charts made with Angular and D3.js, always providing…

Follow publication

Pie chart D3.js Angular — Pie chart with annotation & percentage

Laakissi Achraf
D3.js Angular Gallery
3 min readFeb 14, 2021

Welcome to the D3.js Angular graph gallery: a collection of simple charts made with d3.js & angular created by LAAKISSI Achraf. D3.js is a JavaScript library for manipulating documents based on data. This gallery of a few graphics, always providing reproducible and editable source code. If you are new to creating graphics with Angular & D3.js, this is probably the place to start.

Pie chart

This post describes how to build a pie chart with annotation and percentage using angular & d3.js. we’ve built a component you just need to add to your project, passing the input data, specifying other options and you get your chart easily. you can find the code on our website or in stackblitz

Warning: are you sure you want to use a pie chart? Learn why it is not recommended.

  • Input dataset provides the group names, their corresponding numeric value, and Color(optional to customize pie colors).
  • The first step is to use the pie() function. It takes this input and returns the coordinates of each part of the pie.
  • Pie component inputs :
  • pieData: It is an array of objects (dataset), each object contains the name, value, and color (optional) of each piece of the chart ( name: string; value: string; color?: string )
  • textColor: It is the color of the texts
  • isPercentage : It is a boolean value, making it true it automatically adds a percentage to the labels
  • enablePolylines: It is a boolean value, this option to solve problems of displaying labels for small values

enablePolylines = false

enablePolylines = true

https://stackblitz.com/edit/angular-d3-js-pie-chart

Click here to check out some other awesome charts. Any feedback is highly encouraged. You can fill an issue on Github, drop me a message on Twitter / Linkedin, or send an email.

Sign up to discover human stories that deepen your understanding of the world.

D3.js Angular Gallery
D3.js Angular Gallery

Published in D3.js Angular Gallery

The Angular D3 graph gallery displays some of charts made with Angular and D3.js, always providing the reproducible code.

Laakissi Achraf
Laakissi Achraf

Written by Laakissi Achraf

Software Engineer AWS / MEAN Stack

No responses yet

Write a response