diff --git a/src/app/view/graph-view/graph-detail/graph-detail.component.html b/src/app/view/graph-view/graph-detail/graph-detail.component.html
index 24c8ddd..287988e 100644
--- a/src/app/view/graph-view/graph-detail/graph-detail.component.html
+++ b/src/app/view/graph-view/graph-detail/graph-detail.component.html
@@ -66,6 +66,8 @@
           <li class="mb-1" *ngIf="this.title!='HashRate Growth Chart'"><a routerLink="/chart/hashrate-growth-chart">{{'home.HASHRATE_GROWTH_CHART' | translate}}</a></li>
           <li class="mb-1" *ngIf="this.title!='Transactions by time'"><a routerLink="/chart/block-interval">{{'home.BLOCK_INTERVAL' | translate}}</a></li>
           <li class="mb-1" *ngIf="this.title!='Transactions Vs Date'"><a routerLink="/chart/transactions-vs-date">{{'home.TRANSACTIONS_VS_DATE' | translate}}</a></li>
+          <li class="mb-1" *ngIf="this.title!='Stackbar Chart'"><a routerLink="/chart/stackchart">Stackbar Chart</a></li>
+          <li class="mb-1" *ngIf="this.title!='Pie Chart'"><a routerLink="/chart/piechart">Pie Chart</a></li>
         </ul>
        </div>
       </div>
diff --git a/src/app/view/graph-view/graph-detail/graph-detail.component.ts b/src/app/view/graph-view/graph-detail/graph-detail.component.ts
index 6512a6d..e4f02cc 100644
--- a/src/app/view/graph-view/graph-detail/graph-detail.component.ts
+++ b/src/app/view/graph-view/graph-detail/graph-detail.component.ts
@@ -145,6 +145,26 @@ export class GraphDetailComponent implements OnInit {
             );
           });
           break;
+        case 'stackchart':
+        this.comp.stackchartreq().then(res => {
+          this.hashdata = this.comp.stackGraphData;
+          this.hashdata.layout.height = 500;
+          this.title = 'Stackbar Chart';
+          this.titleService.setTitle(
+            this.route.snapshot.data.title + ' - ' + this.title,
+          );
+        });
+        break;
+        case 'piechart':
+        this.comp.piechartreq().then(res => {
+          this.hashdata = this.comp.pieGraphData;
+          this.hashdata.layout.height = 500;
+          this.title = 'Pie Chart';
+          this.titleService.setTitle(
+            this.route.snapshot.data.title + ' - ' + this.title,
+          );
+        });
+        break;
         case 'transactions-vs-date':
           this.comp.Transactionlinechartreq().then(res => {
             this.hashdata = this.comp.feeGraphData;
@@ -235,6 +255,24 @@ export class GraphDetailComponent implements OnInit {
           this.title = 'Block Interval';
         });
         break;
+      case 'stackchart':
+        this.comp.stackchartreq(p1, p2, p3).then(res => {
+          this.hashdata = this.comp.stackGraphData;
+          this.hashdata.layout.height = 500;
+          // this.hashdata.layout.width =
+          //   window.innerWidth - window.innerWidth / 2.8;
+          this.title = 'Stackbar Chart';
+        });
+        break;
+      case 'piechart':
+        this.comp.piechartreq(p1, p2, p3).then(res => {
+          this.hashdata = this.comp.pieGraphData;
+          this.hashdata.layout.height = 500;
+          // this.hashdata.layout.width =
+          //   window.innerWidth - window.innerWidth / 2.8;
+          this.title = 'Pie Chart';
+        });
+        break;
       case 'transactions-vs-date':
         this.comp.Transactionlinechartreq(p1, p2, p3).then(res => {
           this.hashdata = this.comp.feeGraphData;