diff --git a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
index 3f062a374..2d8a03ac0 100644
--- a/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
+++ b/libs/ui/src/lib/portfolio-proportion-chart/portfolio-proportion-chart.component.ts
@@ -31,6 +31,7 @@ import ChartDataLabels from 'chartjs-plugin-datalabels';
 import { isUUID } from 'class-validator';
 import Color from 'color';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import OpenColor from 'open-color';
 
 import { translate } from '../i18n';
 
@@ -47,7 +48,7 @@ const {
   teal,
   violet,
   yellow
-} = require('open-color');
+} = OpenColor;
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
index 4e06d49cc..6ae958b83 100644
--- a/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
+++ b/libs/ui/src/lib/treemap-chart/treemap-chart.component.ts
@@ -33,10 +33,11 @@ import { isUUID } from 'class-validator';
 import { differenceInDays, max } from 'date-fns';
 import { orderBy } from 'lodash';
 import { NgxSkeletonLoaderModule } from 'ngx-skeleton-loader';
+import OpenColor from 'open-color';
 
 import { GetColorParams } from './interfaces/interfaces';
 
-const { gray, green, red } = require('open-color');
+const { gray, green, red } = OpenColor;
 
 @Component({
   changeDetection: ChangeDetectionStrategy.OnPush,