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 for ngx-graphs:
map: {
  'ngx-graphs': 'node_modules/ngx-graphs/bundles/ngx-graphs.umd.js',
}

Once installed you need to import the main module:

import { NgxGraphsModule } from 'ngx-graphs';

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()):

import { NgxGraphsModule } from 'ngx-graphs';

@NgModule({
  declarations: [AppComponent, ...],
  imports: [LibModule.forRoot(), ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

Other modules in your application can simply import NgxGraphsModule:

import { NgxGraphsModule } from 'ngx-graphs';

@NgModule({
  declarations: [OtherComponent, ...],
  imports: [NgxGraphsModule, ...], 
})
export class OtherModule {
}