NgxD3Graphs

Interactive and highly customizable D3 charts for designers & developers.
This is a project for creating D3 graphs using Angular CLI version 8.0.3 and D3.js Library.

• Sample application is hosted at - NgxD3Graphs

Install

npm i ngx-d3-graphs

Why ngx-d3-graphs

Unlike other D3 angular chart wrapper libraries, NgxD3Graphs is designed to be very interactive, responsive and dynamic data visualization library with the following features-

Supported Graphs-

• Line graph

  
  

• Bar graph

  
  

• Scatter plot graph

  
  

• Combination of line, bar and scatter plot graph.

  
  

Features

• Multiple instances of D3 Graph is supported.

  
  

• X-axis is a timeline and Y-axis is number by default.

  
  

• Graph type, color, font size, legend and axis text is configurable.

  
  

• Left and right y-axis

  
  

• Tooltip

  
  

• Zoom

  
  

• Combination of line/bar/scatter plot graph can be drawn with different y-axis

  
  

• Graphs are responsive and suitable for web and mobile applications

  
  

Future Enhancements-

• Support for including more graphs like stacked area, donut, pie charts.

  
  

• Support for Simpl framework

  
  

• Performance improvement for high volume of input data

  
  

• Multiple Y-Axis

  
  

Documentation

Ngxd3Graphs can be used by importing

• import {NgxD3GraphsModule} from "ngx-d3-graphs" in the 'app.module.ts'

"NgxD3GraphsModule" module should be imported. *Add the following selector in your app component html.

<ndg-ngx-d3-graphs [graphId]=id2 [jsonInput]="jsonInput"></ndg-ngx-d3-graphs> where-

• graphId- unique string
• jsonInput- provides json input to ngxd3graphs component e.g.,

id: string= 'graph1';

json input should be given in the following format-

jsonInput = Sample json is available at- multiGraphs.json

where "type" defines the type of the graph you want to draw for instance bar,dot or line graphs.

Contributing

Coming Soon

License

NgxD3Graphs is available under the MIT license.