Angular 2+ with ngx-charts

Roberto K.  June 29, 2018

What is ngx-charts?

Ngx-charts is a declarative charting framework for Angular2 and beyond. It is unique since it doesn’t just wrap the d3.js javascript library, instead it uses Angular to render and animate the SVG elements and it takes the math functions, scales, axis and shape generators and other great things from d3. Link to the Github official repo : https://github.com/swimlane/ngx-charts

How to start?

Usage with Angular 2+

can hardcode our view height and width, scheme, yAxis, xAxis… in the HTML file but with this way we can just push the data from JSON or modify it as we want and show it in the graph.

Demo

The demo is hosted on https://angular-with-ngx-charts.appspot.com/ with the code available on : https://github.com/kedmenecr/cinnamon-angular5-with-ngx-charts You can clone the repo, start the app and start modifying the charts!

Documentation

Their documentation is quite detailed and with every chart there is an example and a list of all the properties that can be used.
https://swimlane.gitbook.io/ngx-charts/v/docs-test/
https://swimlane.gitbook.io/ngx-charts/v/docs-test/examples

Conclusion

It is a very simple yet a very powerful tool for handling graphs for you next Angular app! Thanks the guys from swimlane for providing these charts and making it open source!

arrow white

Previous article

Ghost buttons & skeleton screens

Get in touch

Tell us about your project, ask us any question or simply say hello.

SEND A MESSAGE