diff --git a/src/views/uikit/chartdoc.ts b/src/views/uikit/chartdoc.ts
new file mode 100644
index 0000000..fcc781c
--- /dev/null
+++ b/src/views/uikit/chartdoc.ts
@@ -0,0 +1,311 @@
+import { Component } from '@angular/core';
+import { ChartModule } from 'primeng/chart';
+import { CommonModule } from '@angular/common';
+import { debounceTime, Subscription } from 'rxjs';
+import { LayoutService } from '@/src/app/layout/service/app.layout.service';
+
+@Component({
+    standalone:true,
+    imports: [
+        CommonModule,
+        ChartModule
+    ],
+    template: `<div class="grid p-fluid">
+        <div class="col-12 lg:col-6">
+            <div class="card">
+                <h5>Linear Chart</h5>
+                <p-chart type="line" [data]="lineData" [options]="lineOptions"></p-chart>
+            </div>
+
+            <div class="card flex flex-column align-items-center">
+                <h5 class="text-left w-full">Pie Chart</h5>
+                <p-chart type="pie" [data]="pieData" [options]="pieOptions"></p-chart>
+            </div>
+
+            <div class="card flex flex-column align-items-center">
+                <h5 class="text-left w-full">Polar Area Chart</h5>
+                <p-chart type="polarArea" [data]="polarData" [options]="polarOptions"></p-chart>
+            </div>
+        </div>
+        <div class="col-12 lg:col-6">
+            <div class="card">
+                <h5>Bar Chart</h5>
+                <p-chart type="bar" [data]="barData" [options]="barOptions"></p-chart>
+            </div>
+
+            <div class="card flex flex-column align-items-center">
+                <h5 class="text-left w-full">Doughnut Chart</h5>
+                <p-chart type="doughnut" [data]="pieData" [options]="pieOptions"></p-chart>
+            </div>
+
+            <div class="card flex flex-column align-items-center">
+                <h5 class="text-left w-full">Radar Chart</h5>
+                <p-chart type="radar" [data]="radarData" [options]="radarOptions"></p-chart>
+            </div>
+        </div>
+    </div>
+    `,
+})
+export class ChartDoc {
+
+    lineData: any;
+
+    barData: any;
+
+    pieData: any;
+
+    polarData: any;
+
+    radarData: any;
+
+    lineOptions: any;
+
+    barOptions: any;
+
+    pieOptions: any;
+
+    polarOptions: any;
+
+    radarOptions: any;
+
+    subscription: Subscription;
+    constructor(private layoutService: LayoutService) {
+        this.subscription = this.layoutService.configUpdate$
+            .pipe(debounceTime(25))
+            .subscribe((config) => {
+                this.initCharts();
+            });
+    }
+
+    ngOnInit() {
+        this.initCharts();
+    }
+
+    initCharts() {
+        const documentStyle = getComputedStyle(document.documentElement);
+        const textColor = documentStyle.getPropertyValue('--text-color');
+        const textColorSecondary = documentStyle.getPropertyValue('--text-color-secondary');
+        const surfaceBorder = documentStyle.getPropertyValue('--surface-border');
+
+        this.barData = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--primary-500'),
+                    borderColor: documentStyle.getPropertyValue('--primary-500'),
+                    data: [65, 59, 80, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    backgroundColor: documentStyle.getPropertyValue('--primary-200'),
+                    borderColor: documentStyle.getPropertyValue('--primary-200'),
+                    data: [28, 48, 40, 19, 86, 27, 90]
+                }
+            ]
+        };
+
+        this.barOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        fontColor: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary,
+                        font: {
+                            weight: 500
+                        }
+                    },
+                    grid: {
+                        display: false,
+                        drawBorder: false
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                        drawBorder: false
+                    }
+                },
+            }
+        };
+
+        this.pieData = {
+            labels: ['A', 'B', 'C'],
+            datasets: [
+                {
+                    data: [540, 325, 702],
+                    backgroundColor: [
+                        documentStyle.getPropertyValue('--indigo-500'),
+                        documentStyle.getPropertyValue('--purple-500'),
+                        documentStyle.getPropertyValue('--teal-500')
+                    ],
+                    hoverBackgroundColor: [
+                        documentStyle.getPropertyValue('--indigo-400'),
+                        documentStyle.getPropertyValue('--purple-400'),
+                        documentStyle.getPropertyValue('--teal-400')
+                    ]
+                }]
+        };
+
+        this.pieOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        usePointStyle: true,
+                        color: textColor
+                    }
+                }
+            }
+        };
+
+        this.lineData = {
+            labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+            datasets: [
+                {
+                    label: 'First Dataset',
+                    data: [65, 59, 80, 81, 56, 55, 40],
+                    fill: false,
+                    backgroundColor: documentStyle.getPropertyValue('--primary-500'),
+                    borderColor: documentStyle.getPropertyValue('--primary-500'),
+                    tension: .4
+                },
+                {
+                    label: 'Second Dataset',
+                    data: [28, 48, 40, 19, 86, 27, 90],
+                    fill: false,
+                    backgroundColor: documentStyle.getPropertyValue('--primary-200'),
+                    borderColor: documentStyle.getPropertyValue('--primary-200'),
+                    tension: .4
+                }
+            ]
+        };
+
+        this.lineOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        fontColor: textColor
+                    }
+                }
+            },
+            scales: {
+                x: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                        drawBorder: false
+                    }
+                },
+                y: {
+                    ticks: {
+                        color: textColorSecondary
+                    },
+                    grid: {
+                        color: surfaceBorder,
+                        drawBorder: false
+                    }
+                },
+            }
+        };
+
+        this.polarData = {
+            datasets: [{
+                data: [
+                    11,
+                    16,
+                    7,
+                    3
+                ],
+                backgroundColor: [
+                    documentStyle.getPropertyValue('--indigo-500'),
+                    documentStyle.getPropertyValue('--purple-500'),
+                    documentStyle.getPropertyValue('--teal-500'),
+                    documentStyle.getPropertyValue('--orange-500')
+                ],
+                label: 'My dataset'
+            }],
+            labels: [
+                'Indigo',
+                'Purple',
+                'Teal',
+                'Orange'
+            ]
+        };
+
+        this.polarOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        color: textColor
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: surfaceBorder
+                    }
+                }
+            }
+        };
+
+        this.radarData = {
+            labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
+            datasets: [
+                {
+                    label: 'My First dataset',
+                    borderColor: documentStyle.getPropertyValue('--indigo-400'),
+                    pointBackgroundColor: documentStyle.getPropertyValue('--indigo-400'),
+                    pointBorderColor: documentStyle.getPropertyValue('--indigo-400'),
+                    pointHoverBackgroundColor: textColor,
+                    pointHoverBorderColor: documentStyle.getPropertyValue('--indigo-400'),
+                    data: [65, 59, 90, 81, 56, 55, 40]
+                },
+                {
+                    label: 'My Second dataset',
+                    borderColor: documentStyle.getPropertyValue('--purple-400'),
+                    pointBackgroundColor: documentStyle.getPropertyValue('--purple-400'),
+                    pointBorderColor: documentStyle.getPropertyValue('--purple-400'),
+                    pointHoverBackgroundColor: textColor,
+                    pointHoverBorderColor: documentStyle.getPropertyValue('--purple-400'),
+                    data: [28, 48, 40, 19, 96, 27, 100]
+                }
+            ]
+        };
+
+        this.radarOptions = {
+            plugins: {
+                legend: {
+                    labels: {
+                        fontColor: textColor
+                    }
+                }
+            },
+            scales: {
+                r: {
+                    grid: {
+                        color: textColorSecondary
+                    }
+                }
+            }
+        };
+    }
+
+    ngOnDestroy() {
+        if (this.subscription) {
+            this.subscription.unsubscribe();
+        }
+    }
+
+}