G2 Component for Angular >= 2

Demo

Install

npm install ngx-g2 --save

Usage

Import G2Module to your Module

import { G2Module } from 'ngx-g2';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    G2Module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Your component

export class AppComponent {
  data: any = [
    {genre: 'Sports', sold: 275},
    {genre: 'Strategy', sold: 115},
    {genre: 'Action', sold: 120},
    {genre: 'Shooter', sold: 350},
    {genre: 'Other', sold: 150},
  ];
  
  width: number = 700;
  height: number = 400;

  configure(chart: any) {
    chart.interval().position('genre*sold').color('genre');
  }
}

Then use it in html

<g2 [data]="data" 
    [width]="width"
    [height]="height"
    (configure)="configure($event)"
></g2>

Attributes

| Name | Type | Description | | --- | --- | --- | | [data] | Array | chart data | | [titles]| Object | chart titles | | [width]| number | chart width | | [height]| number | chart height | | [plotCfg]| Object | chart config | | [forceFit]| boolean | fit width to parent element | | (configure)| Function | callback to configure chart |

License

MIT © Vadym Yatsyuk