diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/chart/chart.component.html b/npm/ng-packs/packages/theme-shared/src/lib/components/chart/chart.component.html
deleted file mode 100644
index 211614c90d..0000000000
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/chart/chart.component.html
+++ /dev/null
@@ -1,11 +0,0 @@
-
-
-
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/chart/chart.component.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/chart/chart.component.ts
deleted file mode 100644
index 16fe78d661..0000000000
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/chart/chart.component.ts
+++ /dev/null
@@ -1,141 +0,0 @@
-import {
- AfterViewInit,
- ChangeDetectorRef,
- Component,
- ElementRef,
- EventEmitter,
- Input,
- OnDestroy,
- Output,
-} from '@angular/core';
-import { BehaviorSubject } from 'rxjs';
-import { chartJsLoaded$ } from '../../utils/widget-utils';
-declare const Chart: any;
-
-@Component({
- selector: 'abp-chart',
- templateUrl: './chart.component.html',
-})
-export class ChartComponent implements AfterViewInit, OnDestroy {
- @Input() type: string;
-
- @Input() options: any = {};
-
- @Input() plugins: any[] = [];
-
- @Input() width: string;
-
- @Input() height: string;
-
- @Input() responsive = true;
-
- // eslint-disable-next-line @angular-eslint/no-output-on-prefix
- @Output() readonly onDataSelect: EventEmitter = new EventEmitter();
-
- @Output() readonly initialized = new BehaviorSubject(this);
-
- private _initialized: boolean;
-
- _data: any;
-
- chart: any;
-
- constructor(public el: ElementRef, private cdRef: ChangeDetectorRef) {}
-
- @Input() get data(): any {
- return this._data;
- }
-
- set data(val: any) {
- this._data = val;
- this.reinit();
- }
-
- get canvas() {
- return this.el.nativeElement.children[0].children[0];
- }
-
- get base64Image() {
- return this.chart.toBase64Image();
- }
-
- ngAfterViewInit() {
- chartJsLoaded$.subscribe(() => {
- this.testChartJs();
-
- this.initChart();
- this._initialized = true;
- });
- }
-
- testChartJs() {
- try {
- Chart;
- } catch (error) {
- throw new Error(`Chart is not found. Import the Chart from app.module like shown below:
- import('chart.js');
- `);
- }
- }
-
- onCanvasClick = event => {
- if (this.chart) {
- const element = this.chart.getElementAtEvent(event);
- const dataset = this.chart.getDatasetAtEvent(event);
- if (element && element.length && dataset) {
- this.onDataSelect.emit({
- originalEvent: event,
- element: element[0],
- dataset,
- });
- }
- }
- };
-
- initChart = () => {
- const opts = this.options || {};
- opts.responsive = this.responsive;
-
- // allows chart to resize in responsive mode
- if (opts.responsive && (this.height || this.width)) {
- opts.maintainAspectRatio = false;
- }
-
- this.chart = new Chart(this.canvas, {
- type: this.type,
- data: this.data,
- options: this.options,
- plugins: this.plugins,
- });
-
- this.cdRef.detectChanges();
- };
-
- generateLegend = () => {
- if (this.chart) {
- return this.chart.generateLegend();
- }
- };
-
- refresh = () => {
- if (this.chart) {
- this.chart.update();
- this.cdRef.detectChanges();
- }
- };
-
- reinit = () => {
- if (this.chart) {
- this.chart.destroy();
- this.initChart();
- }
- };
-
- ngOnDestroy() {
- if (this.chart) {
- this.chart.destroy();
- this._initialized = false;
- this.chart = null;
- }
- }
-}
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts
index 45036680be..5fe1fbb572 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/components/index.ts
@@ -1,13 +1,12 @@
export * from './breadcrumb/breadcrumb.component';
export * from './button/button.component';
-export * from './chart/chart.component';
export * from './confirmation/confirmation.component';
export * from './http-error-wrapper/http-error-wrapper.component';
export * from './loader-bar/loader-bar.component';
export * from './loading/loading.component';
-export * from './modal/modal.component';
export * from './modal/modal-close.directive';
export * from './modal/modal-ref.service';
+export * from './modal/modal.component';
export * from './sort-order-icon/sort-order-icon.component';
export * from './table-empty-message/table-empty-message.component';
export * from './table/table.component';
diff --git a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
index 11a2ce3493..8a9b6ed201 100644
--- a/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
+++ b/npm/ng-packs/packages/theme-shared/src/lib/theme-shared.module.ts
@@ -12,7 +12,6 @@ import {
import { NgxDatatableModule } from '@swimlane/ngx-datatable';
import { BreadcrumbComponent } from './components/breadcrumb/breadcrumb.component';
import { ButtonComponent } from './components/button/button.component';
-import { ChartComponent } from './components/chart/chart.component';
import { ConfirmationComponent } from './components/confirmation/confirmation.component';
import { HttpErrorWrapperComponent } from './components/http-error-wrapper/http-error-wrapper.component';
import { LoaderBarComponent } from './components/loader-bar/loader-bar.component';
@@ -43,7 +42,6 @@ import { DateParserFormatter } from './utils/date-parser-formatter';
const declarationsWithExports = [
BreadcrumbComponent,
ButtonComponent,
- ChartComponent,
ConfirmationComponent,
LoaderBarComponent,
LoadingComponent,