Line Chart D3.js &Angular
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.
This post describes how to build a pie line 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.
A line chart is a way of plotting data points on a line. Often, it is used to show trend data or the comparison of two data sets.
The line is drawn using a path and using the d3.line utility.
The Min & Max domain range is calculated automatically.
Input dataset provides the label, data, color, and legend.
Component inputs :
- data: It is an array of the object contained the label, data(array of numbers or values), color, and legend
- xLabels: It is an array of strings, the values that will be apart in the x like years…
- showDots: It is a boolean value(true or false)by default it’s disabled(false), by enabling it you will convert the line chart to Connected Scatter Plot.
- dateFormat: dateFormat is a string value to specify the format of year.
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.
