ngx-graphs
Overview
The aim of ngx-charts
is to provide highly composable charting components. For example, to build a step area chart with an X and Y axis, you would use 2 graph-axis
components and one step-area-chart
component. Breaking down charts into small, composable components has many benefits. To name a few:
- It gives you as much control as possible over layout
- You can swap out bits of the chart for your own implementation - if you don't like the provided
chart-legend
, just make your own. - You can use each component individually, perhaps even not for their intended purpose 🤔
ngx-charts
isn't opinionated about what you use for the overall layout, but css grid is the recommended option. You could also use absolute positioning, or a Javascript layout engine.
Note: ngx-charts
relies heavily on flexbox internally, it will not work in browsers that do not support flexbox.
Documentation
The documentation is available at https://DaveWM.github.io/ngx-graphs/doc
Demo
View all the directives in action at https://DaveWM.github.io/ngx-graphs
Dependencies
- Angular (requires Angular 4 or higher, tested with 5.0.3)
Installation
Install above dependencies via npm.
Now install ngx-graphs
via:
npm install --save ngx-graphs
SystemJS
Note:If you are using
SystemJS
, you should adjust your configuration to point to the UMD bundle. In your systemjs config file,map
needs to tell the System loader where to look forngx-graphs
:
map: 'ngx-graphs': 'node_modules/ngx-graphs/bundles/ngx-graphs.umd.js'
Once installed you need to import the main module:
;
The only remaining part is to list the imported module in your application module. The exact method will be slightly
different for the root (top-level) module for which you should end up with the code similar to (notice NgxGraphsModule .forRoot()
):
; @
Other modules in your application can simply import NgxGraphsModule
:
; @
License
Copyright (c) 2017 David Martin. Licensed under the MIT License (MIT)