ngx-g2
TypeScript icon, indicating that this package has built-in type declarations

0.1.0 • Public • Published

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

Package Sidebar

Install

npm i ngx-g2

Weekly Downloads

2

Version

0.1.0

License

MIT

Last publish

Collaborators

  • vadimdez