Closed julian-christl closed 2 years ago
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
}
];
This looks much easier and much more convenient than ng2-charts. We should replace it 👍
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 oflodash
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