Replace ng2-charts with ngx-charts

[julian-christl]

Is your feature request related to a problem?

We had to downgrade from 2.4.3 to 2.3.0 because 2.3.1 ng2-charts uses lodash-es instead of lodash which slows our tests down. Mocking via Angular Testbed was not possible since it's a node module and manual mocking via Jest resulted in errors we couldn't fix.

Describe the solution you'd like

Switching to ngx-charts fixed the issue for another user: https://stackoverflow.com/questions/62331721/ng2-charts-error-while-testing-angular-app Ngx-charts could also bring some additional advantages, such as auto-scaling.

TODO

• [x] Compare ng2-charts and ngx-charts API. Check what the effort for migration would be.

[krusche]

Documentation can be found on https://swimlane.gitbook.io/ngx-charts Demos can be found on https://swimlane.github.io/ngx-charts/

Here is a code example for a vertical bar chart: https://stackblitz.com/edit/vertical-bar-chart?embed=1&file=app/app.component.ts

The API seems to be much easier. Values can be set directly in the html component or passed from the ts component class.

HTML:

<ngx-charts-bar-vertical
  [view]="view"
  [scheme]="colorScheme"
  [results]="single"
  [gradient]="gradient"
  [xAxis]="showXAxis"
  [yAxis]="showYAxis"
  [legend]="showLegend"
  [showXAxisLabel]="showXAxisLabel"
  [showYAxisLabel]="showYAxisLabel"
  [xAxisLabel]="xAxisLabel"
  [yAxisLabel]="yAxisLabel"
  (select)="onSelect($event)">
</ngx-charts-bar-vertical>

TS:

import { Component, NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxChartsModule } from '@swimlane/ngx-charts';
import { single } from './data';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  single: any[];
  multi: any[];

  view: any[] = [700, 400];

  // options
  showXAxis = true;
  showYAxis = true;
  gradient = false;
  showLegend = true;
  showXAxisLabel = true;
  xAxisLabel = 'Country';
  showYAxisLabel = true;
  yAxisLabel = 'Population';

  colorScheme = {
    domain: ['#5AA454', '#A10A28', '#C7B42C', '#AAAAAA']
  };

  constructor() {
    Object.assign(this, { single })
  }

  onSelect(event) {
    console.log(event);
  }
}

Data from external source:

export var single = [
  {
    "name": "Germany",
    "value": 8940000
  },
  {
    "name": "USA",
    "value": 5000000
  },
  {
    "name": "France",
    "value": 7200000
  }
];

[krusche]

This looks much easier and much more convenient than ng2-charts. We should replace it 👍