3D Pie chart in Angular 5
Posted By : Damandeep Singh | 28-Apr-2018
What happens when you are working with Angular 5 and you want to add a functionality of 3d pie chart found several solutions to this problem, and many seem a bit intimidation for a beginner while tackling this problem I found a plugin named Animated 3d pie chart provided by
here is a single basic command to add animated 3d pie-chart to your project
i.e,
Using this command the package name will be automatically added to our package.json or in node_modules
Now import the package into an app.module file
here is the basic syntax of animated-3d-piechart
<div id="piechart"></div>
and add script
import Dounat3D from 'animated-3d-pie';
var chartId = 'piechart';
var data = [10, 20, 30];
piechart3D.draw(chartId, data);
piechart3d.draw(charted,data,config')
- chart - string, an id of HTML that was chart should be placed
- data- array of number or object
- config - object with chart config
Animated 3d pie-chart provides some Parameter :
- is - used to define Inner Radius(it should be in percentage)
- h - used to define a height of walls(it should be in px)
- angle - used to define an angle of charts in degrees.
- size - used to define a size of the chart in inner HTML tag.
- animation duration - used to define time in ms of drawing the chart.
- font size - used to define label and tooltip font-size in px (default is 12px)
- animatedSlices - used to define the Boolean value for clickable or not.
- links color & labelColor - used to define the color of the line.
- onSliceSelect - used to define Function on slice click.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Damandeep Singh
Damandeep Singh is a Front-end Developer having Good knowledge of HTML, CSS3/CSS, Bootstrap, Angular, Ionic. He likes to listen to Music in Free time.