VS NGX Chart JS

A simple Angular component wrapper for Chart JS.

Requirements

Chart.js is required and you will have to install it manually by running this command.

npm install -S chart.js

Usage

After installing the package, import the component module in your any application module file

import { VsNgxChartJsModule } from 'vs-ngx-chart-js';


@NgMpdule({
  ...
  imports: [
    ...,
    VsNgxChartJsModule.forRoot()
  ]
})
export class YourAngularModule {
  ...
}

Then, to use the component, simply put the directive in your template along with some parameters like this.

<vngx-chart-js [config]="CHART_JS_CONFIG"></vngx-chart-js>

Supported Input

config (Object, required) = This is where you can config your initialized option in your Chart JS, see Chart JS Configuration for more information about config. And also, you can obtain Chart JS instance after the chart has been initialized by using an output event name afterChartInit. See it all in example code below. In your Angular component file, you have

donutChartConfig = {
  type: 'pie',
  data: {
    datasets: [{
      data: [10, 20, 30],
      backgroundColor: [
        '#4286f4', '#f44141', '#20b54f'
      ]
    }],
    labels: [
      'Pending',
      'Disabled',
      'Active'
    ]
  },
  options: {
    cutoutPercentage: 70
  }
};

private myChartInstance;

...

afterChartCreated(e) {
  this.myChartInstance = e;
}

And in your template

<vngx-chart-js [config]="donutChartConfig" (afterChartInit)="afterChartCreated($event)"></vngx-chart-js>

You can also set the default global setting of the Chart.js library via the exposed service name VsNgxChartJsService that also available in the same module. To use the service, simply import it in your component after you have the module imported like this.

import { VsNgxChartJsService } from 'vs-ngx-chart-js';

...

export class YourAngularComponent implements OnInit {

  globalChartConfig = {
    animation: {
      duration: 600,
      easing: 'easeOutQuart'
    },
    ...
  };

  constructor(private vngxChartJsService: VsNgxChartJsService) {}

  ...

  ngOnInit() {
    this.vngxChartJsService.setGlobalOptions(this.globalChartConfig);
  }
}

Note

If you see an error while you are setting up the global settings of Chart.js, that means you have some incorrect configuration of Chart.js. For example, if you set the animation duration but didn't also assign the easing name, there will be an error.