Diverging Bar 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 gauge chart using angular & d3. 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 diverging bar chart is a bar chart that has the marks for some dimension members pointing up or right, and the marks for other dimension members pointing in the opposite direction (down or left, respectively).

Input dataset provides the name, their corresponding numeric value, position, and Color(optional to customize bars colors).

Component inputs :

• data: It is an array of objects (dataset), each object contains the name, their corresponding numeric value, position, and Color(optional to customize bars colors)( name: string; value: string; position: number; color?: string )
• legendTitle: It is the title of the chart
• legendSubtitle: It is the subtitle of the chart

https://stackblitz.com/edit/angular-d3-js-bar-diverging-bar

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.