From 285821678d71504523251d691d9ee1b094865d09 Mon Sep 17 00:00:00 2001
From: sumeyye <sum.the.developer@gmail.com>
Date: Thu, 10 Jul 2025 16:10:16 +0300
Subject: [PATCH] update: chart component page

---
 .../framework/ui/angular/chart-component.md   | 36 +++++++------------
 1 file changed, 12 insertions(+), 24 deletions(-)

diff --git a/docs/en/framework/ui/angular/chart-component.md b/docs/en/framework/ui/angular/chart-component.md
index e2bf2c2e1e..44007eef5b 100644
--- a/docs/en/framework/ui/angular/chart-component.md
+++ b/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