Browse Source

update: chart component page

pull/23285/head
sumeyye 1 year ago
parent
commit
285821678d
  1. 36
      docs/en/framework/ui/angular/chart-component.md

36
docs/en/framework/ui/angular/chart-component.md

@ -6,34 +6,16 @@ ABP Chart component exposed by `@abp/ng.components/chart.js` is based on [`chart
## How to Use
First of all, need to import the `ChartModule` to your feature module as follows:
```ts
// your-feature.module.ts
import { ChartModule } from "@abp/ng.components/chart.js";
import { ChartDemoComponent } from "./chart-demo.component";
@NgModule({
imports: [
ChartModule,
// ...
],
declarations: [ChartDemoComponent],
// ...
})
export class YourFeatureModule {}
```
Then, `abp-chart` component can be used. See an example:
First of all, need to import the `ChartComponent` to your component. Then, `abp-chart` component can be used. See an example:
```ts
// chart-demo.component.ts
import { Component } from "@angular/core";
import { ChartComponent } from "@abp/ng.components/chart.js";
@Component({
selector: "app-chart-demo",
imports: [ChartComponent],
template: ` <abp-chart type="pie" [data]="data"></abp-chart> `,
})
export class ChartDemoComponent {
@ -62,9 +44,11 @@ See the result:
```ts
import { Component } from "@angular/core";
import { ChartComponent } from "@abp/ng.components/chart.js";
@Component({
selector: "app-chart-demo",
imports: [ChartComponent],
template: `
<abp-chart
type="doughnut"
@ -73,7 +57,7 @@ import { Component } from "@angular/core";
width="400px"
height="400px"
[plugins]="myPlugin"
></abp-chart>
/>
`,
})
export class ChartDemoComponent {
@ -119,16 +103,18 @@ Result:
```ts
import { Component } from "@angular/core";
import { ChartComponent } from "@abp/ng.components/chart.js";
@Component({
selector: "app-chart-demo",
imports: [ChartComponent]
template: `
<abp-chart
type="bar"
[data]="data"
width="400px"
height="400px"
></abp-chart>
/>
`,
})
export class ChartDemoComponent {
@ -158,16 +144,18 @@ Result:
```ts
import { Component } from "@angular/core";
import { ChartComponent } from "@abp/ng.components/chart.js";
@Component({
selector: "app-chart-demo",
imports: [ChartComponent]
template: `
<abp-chart
type="radar"
[data]="data"
width="400px"
height="400px"
></abp-chart>
/>
<button class="btn btn-primary-outline mt-4" (click)="addDataset()">
Add dataset

Loading…
Cancel
Save