ngz-charts
A simple angular 4+ charting library powered by d3!
Author
- Mike Tung - Main Developer / Author
About the Project
ngz-charts is an Angular 2/4+ charting library powered by Mike Bostock's D3. The hope is that Angular developers who want high quality yet simple charts can worry about the data and not the implementation of the chart to present the data.
Status of Project
Currently ngz-charts is in alpha and thus will be a work in progress. For the 1.0.0 release a handful of components will be readily available and contributions are welcome.
Live Demo
You can play with a demo here
Status of Components
Component | Status | Release |
---|---|---|
Bar Chart | WIP | 1.0.0 |
Histogram | Not Started | TBD |
Horizontal Bar Chart | Not Started | 1.0.0 |
Stacked Bar Chart | Not Started | TBD |
Horizontal Stacked Bar Chart | Not Started | TBD |
Scatter Plot | WIP | 1.0.0 |
Pie Chart | Not Started | TBD |
Line Chart | Not Started | TBD |
Time Line | Not Started | 1.0.0 |
The Components
Bar Chart
To use the bar chart component, simply import the BarchartModule
into your app.module.ts
file.
The component requires the user to property bind the following:
<ngz-charts-barchart
[data] - array of objects.
[x] - key of object to plot on x axis.
[y] - key of object to plot on y axis.
>
</ngz-charts-barchart>
Additionally users can change the following properties:
<ngz-charts-barchart
[width] - width of the chart in px
[height] - height of the chart in px
[margins] - an object representing padding with css margin properties (top,right,etc)
></ngz-charts-barchart>
Horizontal Bar Chart
To use the horizontal bar chart component, simply import the HorizontalBarChartModule
into your
app.module.ts
file.
The component requires the user to property bind the following:
<ngz-charts-horizontal-bar-chart
[data] - array of objects.
[x] - key of object to plot on x axis.
[y] - key of object to plot on y axis.
>
</ngz-charts-horizontal-bar-chart>
Additionally users can change the following properties:
<ngz-charts-horizontal-bar-chart
[width] - width of the chart in px
[height] - height of the chart in px
[margins] - an object representing padding with css margin properties (top,right,etc)
></ngz-charts-horizontal-bar-chart>
Scatter Plot
To use the scatter plot component, simply import the ScatterplotModule
into your app.module.ts
file.
The component requires the user to property bind the following:
<ngz-charts-scatterplot
[data] - array of objects.
[x] - key of object to plot on x axis.
[y] - key of object to plot on y axis.
[dotShape] - shape to represent datum (circle)
></ngz-charts-scatterplot>
Additionally users can change the following properties:
<ngz-chart-scatterplot
[width] - width of the chart in px.
[height] - height of the chart in px.
[margins] - an object representing padding with css margin properties.
[dotSize] - size of data point.
></ngz-chart-scatterplot>
Timeline
To use the time line component, import TimelineModule
into your app.module.ts
file.
The component requires the user to property bind the following:
<ngz-charts-timeline
[data] - this is an array of objects with at least one property of date type.
[dateLabel] - this is the key that points to a date to plot on time line.
[dateEvent] - this is the key that provides the event name on that date.
></ngz-charts-timeline>
Additionally users can change the following:
<ngz-charts-timeline
[width] - width of the chart in px
[height] - height of the chart in px
[margins] - an object representing the padding using css margin properties.
></ngz-charts-timeline>
Contributing
If you would like to contribute, please adhere to the following rules.
- Show respect and courtesy to everyone.
- For every Pull Request (PR) please link to corresponding git issue and assign to proper reviewer.
- Code must follow the Google Angular Coding Standards.
- Code Reviews will happen with each PR between the author and the reviewer.
Feature Request and Support
For features and support please file a git issue
Browser Support
Currently ngz-charts supports Chrome, Firefox, Safari.