diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts
index 1a2a604d8..e00aa9ceb 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-2d.component.ts
@@ -88,6 +88,7 @@ import { BarOrientation } from '../common/types/bar-orientation.enum';
               ngx-charts-series-horizontal
               [xScale]="valueScale"
               [activeEntries]="activeEntries"
+              [ngStyle]="getStyle(chartTransparency)"
               [yScale]="innerScale"
               [colors]="colors"
               [series]="group.series"
@@ -117,6 +118,7 @@ import { BarOrientation } from '../common/types/bar-orientation.enum';
               ngx-charts-series-horizontal
               [xScale]="valueScale"
               [activeEntries]="activeEntries"
+              [ngStyle]="getStyle(chartTransparency)"
               [yScale]="innerScale"
               [colors]="colors"
               [series]="group.series"
@@ -156,6 +158,7 @@ import { BarOrientation } from '../common/types/bar-orientation.enum';
   ]
 })
 export class BarHorizontal2DComponent extends BaseChartComponent {
+  @Input() chartTransparency: number = 0;
   @Input() legend: boolean = false;
   @Input() legendTitle: string = 'Legend';
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
@@ -293,6 +296,12 @@ export class BarHorizontal2DComponent extends BaseChartComponent {
     return domain;
   }
 
+  getStyle(transparency: number): object {
+    return {
+      opacity: 1 - transparency / 100
+    };
+  }
+
   getInnerDomain(): string[] {
     const domain = [];
 
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts
index ee86e60d0..3f8927bbb 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-normalized.component.ts
@@ -80,6 +80,7 @@ import { isPlatformServer } from '@angular/common';
               [xScale]="xScale"
               [yScale]="yScale"
               [activeEntries]="activeEntries"
+              [ngStyle]="getStyle(chartTransparency)"
               [colors]="colors"
               [series]="group.series"
               [dims]="dims"
@@ -137,6 +138,7 @@ import { isPlatformServer } from '@angular/common';
   ]
 })
 export class BarHorizontalNormalizedComponent extends BaseChartComponent {
+  @Input() chartTransparency: number = 0;
   @Input() legend: boolean = false;
   @Input() legendTitle: string = 'Legend';
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
@@ -249,6 +251,12 @@ export class BarHorizontalNormalizedComponent extends BaseChartComponent {
     return domain;
   }
 
+  getStyle(transparency: number): object {
+    return {
+      opacity: 1 - transparency / 100
+    };
+  }
+
   getYScale(): any {
     const spacing = this.groupDomain.length / (this.dims.height / this.barPadding + 1);
 
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts
index ab1350940..d9d21bd45 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal-stacked.component.ts
@@ -80,6 +80,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
               [xScale]="xScale"
               [yScale]="yScale"
               [colors]="colors"
+              [ngStyle]="getStyle(chartTransparency)"
               [series]="group.series"
               [activeEntries]="activeEntries"
               [dims]="dims"
@@ -146,6 +147,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
   ]
 })
 export class BarHorizontalStackedComponent extends BaseChartComponent {
+  @Input() chartTransparency = 0;
   @Input() legend: boolean = false;
   @Input() legendTitle: string = 'Legend';
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
@@ -270,6 +272,12 @@ export class BarHorizontalStackedComponent extends BaseChartComponent {
     return domain;
   }
 
+  getStyle(transparency: number): object {
+    return {
+      opacity: 1 - transparency / 100
+    };
+  }
+
   getValueDomain(): [number, number] {
     const domain = [];
     let smallest = 0;
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts
index 9b398f410..6eaed913a 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-horizontal.component.ts
@@ -67,6 +67,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
           [xScale]="xScale"
           [yScale]="yScale"
           [colors]="colors"
+          [ngStyle]="getStyle(chartTransparency)"
           [series]="results"
           [dims]="dims"
           [gradient]="gradient"
@@ -91,6 +92,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
   encapsulation: ViewEncapsulation.None
 })
 export class BarHorizontalComponent extends BaseChartComponent {
+  @Input() chartTransparency: number = 0;
   @Input() legend = false;
   @Input() legendTitle: string = 'Legend';
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
@@ -219,6 +221,12 @@ export class BarHorizontalComponent extends BaseChartComponent {
     this.colors = new ColorHelper(this.scheme, this.schemeType, domain, this.customColors);
   }
 
+  getStyle(transparency: number): object {
+    return {
+      opacity: 1 - transparency / 100
+    };
+  }
+
   getLegendOptions(): LegendOptions {
     const opts = {
       scaleType: this.schemeType as any,
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts
index 56fddd87c..14477b2ee 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-2d.component.ts
@@ -83,6 +83,7 @@ import { isPlatformServer } from '@angular/common';
             [@animationState]="'active'"
             [attr.transform]="groupTransform(group)"
             [activeEntries]="activeEntries"
+            [ngStyle]="getStyle(chartTransparency)"
             [xScale]="innerScale"
             [yScale]="valueScale"
             [colors]="colors"
@@ -148,6 +149,7 @@ import { isPlatformServer } from '@angular/common';
   ]
 })
 export class BarVertical2DComponent extends BaseChartComponent {
+  @Input() chartTransparency: number = 0;
   @Input() legend: boolean = false;
   @Input() legendTitle: string = 'Legend';
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
@@ -264,6 +266,12 @@ export class BarVertical2DComponent extends BaseChartComponent {
     }
   }
 
+  getStyle(transparency: number): object {
+    return {
+      opacity: 1 - transparency / 100
+    };
+  }
+
   getGroupScale(): any {
     const spacing = this.groupDomain.length / (this.dims.height / this.groupPadding + 1);
 
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts
index d1e9e1b2f..e362c3193 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-normalized.component.ts
@@ -78,6 +78,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
               [xScale]="xScale"
               [yScale]="yScale"
               [activeEntries]="activeEntries"
+              [ngStyle]="getStyle(chartTransparency)"
               [colors]="colors"
               [series]="group.series"
               [dims]="dims"
@@ -135,6 +136,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
   ]
 })
 export class BarVerticalNormalizedComponent extends BaseChartComponent {
+  @Input() chartTransparency: number = 0;
   @Input() legend: boolean = false;
   @Input() legendTitle: string = 'Legend';
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
@@ -233,6 +235,12 @@ export class BarVerticalNormalizedComponent extends BaseChartComponent {
     return domain;
   }
 
+  getStyle(transparency: number): object {
+    return {
+      opacity: 1 - transparency / 100
+    };
+  }
+  
   getInnerDomain(): string[] {
     const domain = [];
     for (const group of this.results) {
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts
index c13c0b50b..3e21a1e44 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical-stacked.component.ts
@@ -80,6 +80,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
               [yScale]="yScale"
               [activeEntries]="activeEntries"
               [colors]="colors"
+              [ngStyle]="getStyle(chartTransparency)"
               [series]="group.series"
               [dims]="dims"
               [gradient]="gradient"
@@ -145,6 +146,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
   ]
 })
 export class BarVerticalStackedComponent extends BaseChartComponent {
+  @Input() chartTransparency: number = 0;
   @Input() legend: boolean = false;
   @Input() legendTitle: string = 'Legend';
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
@@ -269,6 +271,12 @@ export class BarVerticalStackedComponent extends BaseChartComponent {
     return domain;
   }
 
+  getStyle(transparency: number): object {
+    return {
+      opacity: 1 - transparency / 100
+    };
+  }
+
   getValueDomain(): [number, number] {
     const domain = [];
     let smallest = 0;
diff --git a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts
index cf2e9e353..63c105097 100644
--- a/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/bar-chart/bar-vertical.component.ts
@@ -80,6 +80,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
           [roundEdges]="roundEdges"
           [animations]="animations"
           [noBarWhenZero]="noBarWhenZero"
+          [ngStyle]="getStyle(chartTransparency)"
           (activate)="onActivate($event)"
           (deactivate)="onDeactivate($event)"
           (select)="onClick($event)"
@@ -93,6 +94,7 @@ import { ViewDimensions } from '../common/types/view-dimension.interface';
   encapsulation: ViewEncapsulation.None
 })
 export class BarVerticalComponent extends BaseChartComponent {
+  @Input() chartTransparency : number = 0;
   @Input() legend = false;
   @Input() legendTitle: string = 'Legend';
   @Input() legendPosition: LegendPosition = LegendPosition.Right;
@@ -212,6 +214,12 @@ export class BarVerticalComponent extends BaseChartComponent {
     return [min, max];
   }
 
+  getStyle(transparency: number): object {
+    return {
+      opacity: 1 - transparency / 100
+    };
+  }
+
   onClick(data: DataItem | string) {
     this.select.emit(data);
   }
diff --git a/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts b/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts
index 3d714c233..8737c3e7b 100644
--- a/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts
+++ b/projects/swimlane/ngx-charts/src/lib/line-chart/line-chart.component.ts
@@ -89,6 +89,7 @@ import { isPlatformServer } from '@angular/common';
                 [xScale]="xScale"
                 [yScale]="yScale"
                 [colors]="colors"
+                [ngStyle]="getStyle(lineTransparency)"
                 [data]="series"
                 [activeEntries]="activeEntries"
                 [scaleType]="scaleType"
@@ -207,6 +208,7 @@ export class LineChartComponent extends BaseChartComponent implements OnInit {
   @Input() yAxis: boolean;
   @Input() showXAxisLabel: boolean;
   @Input() showYAxisLabel: boolean;
+  @Input() lineTransparency: number;
   @Input() xAxisLabel: string;
   @Input() yAxisLabel: string;
   @Input() autoScale: boolean;
@@ -333,6 +335,12 @@ export class LineChartComponent extends BaseChartComponent implements OnInit {
     }
   }
 
+  getStyle(transparency: number): object {
+    return {
+      opacity: 1 - transparency / 100
+    };
+  }
+
   getXDomain(): any[] {
     let values = getUniqueXDomainValues(this.results);
 
diff --git a/src/app/app.component.html b/src/app/app.component.html
index a68efd1e8..e5f0287d6 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -13,6 +13,7 @@
         [gradient]="gradient"
         [xAxis]="showXAxis"
         [yAxis]="showYAxis"
+        [chartTransparency]="chartTransparency"
         [legend]="showLegend"
         [legendTitle]="legendTitle"
         [legendPosition]="legendPosition"
@@ -50,6 +51,7 @@
         [gradient]="gradient"
         [xAxis]="showXAxis"
         [yAxis]="showYAxis"
+        [chartTransparency]="chartTransparency"
         [legend]="showLegend"
         [legendTitle]="legendTitle"
         [legendPosition]="legendPosition"
@@ -87,6 +89,7 @@
         [gradient]="gradient"
         [xAxis]="showXAxis"
         [yAxis]="showYAxis"
+        [chartTransparency]="chartTransparency"
         [legend]="showLegend"
         [legendTitle]="legendTitle"
         [legendPosition]="legendPosition"
@@ -126,6 +129,7 @@
         [tooltipDisabled]="tooltipDisabled"
         [xAxis]="showXAxis"
         [yAxis]="showYAxis"
+        [chartTransparency]="chartTransparency"
         [legend]="showLegend"
         [legendTitle]="legendTitle"
         [legendPosition]="legendPosition"
@@ -164,6 +168,7 @@
         [tooltipDisabled]="tooltipDisabled"
         [xAxis]="showXAxis"
         [yAxis]="showYAxis"
+        [chartTransparency]="chartTransparency"
         [legend]="showLegend"
         [legendTitle]="legendTitle"
         [legendPosition]="legendPosition"
@@ -200,6 +205,7 @@
         [tooltipDisabled]="tooltipDisabled"
         [xAxis]="showXAxis"
         [yAxis]="showYAxis"
+        [chartTransparency]="chartTransparency"
         [legend]="showLegend"
         [legendTitle]="legendTitle"
         [legendPosition]="legendPosition"
@@ -236,6 +242,7 @@
         [tooltipDisabled]="tooltipDisabled"
         [xAxis]="showXAxis"
         [yAxis]="showYAxis"
+        [chartTransparency]="chartTransparency"
         [legend]="showLegend"
         [legendTitle]="legendTitle"
         [legendPosition]="legendPosition"
@@ -270,6 +277,7 @@
         [tooltipDisabled]="tooltipDisabled"
         [xAxis]="showXAxis"
         [yAxis]="showYAxis"
+        [chartTransparency]="chartTransparency"
         [legend]="showLegend"
         [legendTitle]="legendTitle"
         [legendPosition]="legendPosition"
@@ -353,6 +361,7 @@
         [schemeType]="schemeType"
         [results]="dateDataWithOrWithoutRange"
         [animations]="animations"
+        [lineTransparency]="lineTransparency"
         [legend]="showLegend"
         [legendTitle]="legendTitle"
         [legendPosition]="legendPosition"
@@ -582,6 +591,9 @@
         [gradient]="gradient"
         [xAxis]="showXAxis"
         [yAxis]="showYAxis"
+        [lineTransparency]="lineTransparency"
+        [chartTransparency]="chartTransparency"
+        [flag]="flag"
         [legend]="showLegend"
         [legendTitle]="legendTitle"
         [legendPosition]="legendPosition"
@@ -820,6 +832,7 @@
           [schemeType]="schemeType"
           [results]="plotData"
           [animations]="animations"
+          [lineTransparency]="lineTransparency"
           [legend]="false"
           [legendTitle]="legendTitle"
           [legendPosition]="legendPosition"
@@ -1334,6 +1347,21 @@ <h3 (click)="optsVisible = !optsVisible" style="cursor: pointer">
           </label>
           <br />
         </div>
+        <div *ngIf="chart.options.includes('lineTransparency')" style="display: flex; align-items: center;">
+          <label>Line Transparency:</label>
+          <input type="range" min="0" max="100" [(ngModel)]="lineTransparency" />
+          {{ lineTransparency }}<br /> 
+        </div>
+        <div *ngIf="chart.options.includes('chartTransparency')" style="display: flex; align-items: center;">
+          <label>Chart Transparency:</label>
+          <input type="range" min="0" max="100" [(ngModel)]="chartTransparency" />
+          {{ chartTransparency }}<br />
+        </div>
+        <div *ngIf="chart.options.includes('flag')" style="display: flex; align-items: center;">
+          <label>Line</label>
+          <input  type="range" min="0" max="1" step="1" style="width: 30px;margin-left: 15px;margin-right: 15px;" [(ngModel)]="flag" />
+          <label>Chart</label>
+        </div>
         <div *ngIf="chart.options.includes('legendTitle')">
           <label>Legend Title:</label><br />
           <input type="text" [(ngModel)]="legendTitle" /><br />
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 3d06e3ff6..19a5826b2 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -87,6 +87,9 @@ export class AppComponent implements OnInit {
   gradient = false;
   showLegend = true;
   legendTitle = 'Legend';
+  lineTransparency = 0;
+  chartTransparency = 0;
+  flag = 0;
   legendPosition = LegendPosition.Right;
   showXAxisLabel = true;
   tooltipDisabled = false;
@@ -509,6 +512,8 @@ export class AppComponent implements OnInit {
 
     this.width = 700;
     this.height = 300;
+    this.lineTransparency = 0;
+    this.chartTransparency = 0;
 
     Object.assign(this, this.chart.defaults);
 
diff --git a/src/app/chartTypes.ts b/src/app/chartTypes.ts
index 6806edf3d..2e33ee148 100644
--- a/src/app/chartTypes.ts
+++ b/src/app/chartTypes.ts
@@ -33,7 +33,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'chartTransparency'
         ]
       },
       {
@@ -67,7 +68,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'chartTransparency'
         ],
         defaults: {
           yAxisLabel: 'Country',
@@ -106,7 +108,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'chartTransparency'
         ]
       },
       {
@@ -141,7 +144,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'chartTransparency'
         ],
         defaults: {
           yAxisLabel: 'Country',
@@ -178,7 +182,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'chartTransparency'
         ]
       },
       {
@@ -211,7 +216,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'chartTransparency'
         ],
         defaults: {
           yAxisLabel: 'Country',
@@ -246,7 +252,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'chartTransparency'
         ],
         defaults: {
           yAxisLabel: 'Normalized GDP Per Capita',
@@ -281,7 +288,8 @@ const chartGroups = [
           'rotateXAxisTicks',
           'maxXAxisTickLength',
           'maxYAxisTickLength',
-          'wrapTicks'
+          'wrapTicks',
+          'chartTransparency'
         ],
         defaults: {
           yAxisLabel: 'Country',
@@ -339,6 +347,7 @@ const chartGroups = [
           'showXAxis',
           'showYAxis',
           'gradient',
+          'lineTransparency',
           'showLegend',
           'legendTitle',
           'legendPosition',
@@ -700,6 +709,9 @@ const chartGroups = [
           'gradient',
           'showLegend',
           'noBarWhenZero',
+          'lineTransparency',
+          'chartTransparency',
+          'flag',
           'legendTitle',
           'legendPosition',
           'showXAxisLabel',
diff --git a/src/app/custom-charts/combo-chart/combo-chart.component.html b/src/app/custom-charts/combo-chart/combo-chart.component.html
index 7e5732575..e78a79e3e 100644
--- a/src/app/custom-charts/combo-chart/combo-chart.component.html
+++ b/src/app/custom-charts/combo-chart/combo-chart.component.html
@@ -51,6 +51,7 @@
       [xScale]="xScale"
       [yScale]="yScale"
       [colors]="colors"
+      [ngStyle]="getStyle(chartTransparency)"
       [series]="results"
       [seriesLine]="lineChart"
       [dims]="dims"
@@ -73,6 +74,7 @@
           [xScale]="xScaleLine"
           [yScale]="yScaleLine"
           [colors]="colorsLine"
+          [ngStyle]="getStyle(lineTransparency)"
           [data]="series"
           [activeEntries]="activeEntries"
           [scaleType]="scaleType"
diff --git a/src/app/custom-charts/combo-chart/combo-chart.component.ts b/src/app/custom-charts/combo-chart/combo-chart.component.ts
index 03e24d2b9..13ca1a2bb 100644
--- a/src/app/custom-charts/combo-chart/combo-chart.component.ts
+++ b/src/app/custom-charts/combo-chart/combo-chart.component.ts
@@ -35,6 +35,9 @@ export class ComboChartComponent extends BaseChartComponent {
   @Input() legend = false;
   @Input() legendTitle: string = 'Legend';
   @Input() legendPosition: string = 'right';
+  @Input() lineTransparency: number = 0;
+  @Input() chartTransparency: number = 0;
+  @Input() flag: number = 0;
   @Input() xAxis;
   @Input() yAxis;
   @Input() showXAxisLabel;
@@ -145,6 +148,8 @@ export class ComboChartComponent extends BaseChartComponent {
     this.legendOptions = this.getLegendOptions();
 
     this.transform = `translate(${this.dims.xOffset} , ${this.margin[0]})`;
+
+    this.toggleLayerOrder();
   }
 
   deactivateAll() {
@@ -355,6 +360,12 @@ export class ComboChartComponent extends BaseChartComponent {
     this.colorsLine = new ColorHelper(this.colorSchemeLine, this.schemeType, domain, this.customColors);
   }
 
+  getStyle(transparency: number): object {
+    return {
+      opacity: 1 - transparency / 100
+    };
+  }
+
   getLegendOptions() {
     const opts = {
       scaleType: this.schemeType,
@@ -411,4 +422,22 @@ export class ComboChartComponent extends BaseChartComponent {
 
     this.deactivate.emit({ value: item, entries: this.activeEntries });
   }
+
+  toggleLayerOrder(): void{
+    const chartContainer = document.querySelector('.ngx-charts-outer');
+    const lineChartElement = chartContainer?.querySelector('.line-chart');
+    const barChartElement = chartContainer?.querySelector('.bar-chart');
+    if (lineChartElement && barChartElement && lineChartElement.parentNode === barChartElement.parentNode) {
+      const lineparent = lineChartElement.parentNode;
+      const chartparent = barChartElement.parentNode;
+      if (this.flag) {
+        lineparent.removeChild(lineChartElement);
+        lineparent.insertBefore(lineChartElement, barChartElement);
+      } else {
+        chartparent.removeChild(barChartElement);
+        chartparent.insertBefore(barChartElement, lineChartElement);
+      }
+    }
+    this.flag === 0 ? 0 : 1;
+  }
 }