Multiple y axis

src/app/view/graph-view/graph-detail/graph-detail.component.html

@@ -67,7 +67,7 @@
 
               <h2 class="chart_heading text-uppercase d-inline-block">
                 {{chartType | translate}}</h2>
-                <div class="day_filter" *ngIf="this.title=='Target Difficulty'">
+                <!-- <div class="day_filter" *ngIf="this.title=='Target Difficulty'">
                     <a href="JavaScript:void(0);" (click)="
                     ChartFromView('', '', comp.difficultyRange,'all'); selectedItem12 = 4
                   " id="4" #item124 [ngClass]="{ active: selectedItem12 == item124.id, txt_primay: true }">All</a>
@@ -93,7 +93,7 @@
                       <a href="JavaScript:void(0);" (click)="
                 ChartFromView('', '', comp.TdifficultyRange,'randomx'); selectedItem12 = 3
                 " id="3" #item123 [ngClass]="{ active: selectedItem12 == item123.id, txt_primay: true }">RandomX</a>
-                    </div>
+                    </div> -->
               <epic-explorer-plotly *ngIf="hashdata.data" [data]="hashdata.data" [layout]="hashdata.layout">
               </epic-explorer-plotly>
               <div class="day_filter" *ngIf="this.title!='Transactions over time'">

src/app/view/home/graph-list/graph-list.component.html

@@ -8,7 +8,7 @@
           }}</span> -->
           
           <div class="chart_show">
-              <div class="difficulty_filter day_filter p-0 bg-transparent mt-2">
+              <!-- <div class="difficulty_filter day_filter p-0 bg-transparent mt-2">
                   <a href="JavaScript:void(0);" (click)="
                   Difficultyreq('total', '', '', TdifficultyRange,'all'); selectedTarget12 = 4
                 " id="4" #itemtarget124
@@ -25,7 +25,7 @@
                 Difficultyreq('total', '', '', TdifficultyRange,'randomx'); selectedTarget12 = 3
                 " id="3" #itemtarget123
                           [ngClass]="{ active: selectedTarget12 == itemtarget123.id, txt_primay: true }">RandomX</a>
-            </div>
+            </div> -->
               <epic-explorer-plotly *ngIf="linearTotalGraphData.data" [data]="linearTotalGraphData.data"
               [layout]="linearTotalGraphData.layout">
             </epic-explorer-plotly>
@@ -43,7 +43,7 @@
             </div>
           </div>
         </div>
-        <div class="day_filter diff_margin">
+        <div class="day_filter">
             <a href="JavaScript:void(0);" (click)="
       Difficultyreq('total', '', '', '1 day',''); selectedTarget = 6; TdifficultyRange = '1 day'
     " id="6" #itemtarget6 [ngClass]="{ active: selectedTarget == itemtarget6.id, txt_primay: true }">1 day</a>
@@ -530,7 +530,7 @@
         }}</span> -->
         
         <div class="chart_show">
-            <div class="difficulty_filter day_filter p-0 bg-transparent mt-2">
+            <!-- <div class="difficulty_filter day_filter p-0 bg-transparent mt-2">
                 <a href="JavaScript:void(0);" (click)="
                 Difficultyreq('target', '', '', difficultyRange,'all'); selectedItem12 = 4
               " id="4" #item124 [ngClass]="{ active: selectedItem12 == item124.id, txt_primay: true }">All</a>
@@ -543,7 +543,7 @@
               <a href="JavaScript:void(0);" (click)="
                 Difficultyreq('target', '', '', difficultyRange,'randomx'); selectedItem12 = 3
               " id="3" #item123 [ngClass]="{ active: selectedItem12 == item123.id, txt_primay: true }">RandomX</a>
-          </div>
+          </div> -->
           <epic-explorer-plotly *ngIf="linearGraphData.data" [data]="linearGraphData.data" [layout]="linearGraphData.layout">
           </epic-explorer-plotly>
           <div *ngIf="!linearGraphData.data" class="feedback_div news_desc text-center">
@@ -560,7 +560,7 @@
           </div>
         </div>
       </div>
-      <div class="day_filter diff_margin">
+      <div class="day_filter">
         <a href="JavaScript:void(0);" (click)="
           Difficultyreq('target', '', '', '1 day',''); selectedItem = 6; difficultyRange = '1 day'
         " id="6" #item6 [ngClass]="{ active: selectedItem == item6.id, txt_primay: true }">1 day</a>

src/app/view/home/graph-list/graph-list.component.ts

@@ -412,30 +412,32 @@ export class GraphListComponent implements OnInit {
                         x: DifficultychartDate,
                         y: DifficultyCuckatoo,
                         text: DifficultychartDate,
-                        mode: 'lines+markers',
+                        // mode: 'lines+markers',
                         type: 'scatter',
                         name: '',
-                        line: { color: '#ac3333' },
+                        // line: { color: '#ac3333' },
                         hovertemplate: '%{text}<br> Cuckoo : %{y:,}',
                       },
                       {
                         x: DifficultychartDate,
                         y: DifficultyProgpow,
                         text: DifficultychartDate,
-                        mode: 'lines+markers',
+                        // mode: 'lines+markers',
                         type: 'scatter',
                         name: '',
-                        line: { color: '#ac3333' },
+                        yaxis: 'y2',
+                        // line: { color: '#ac3333' },
                         hovertemplate: '%{text}<br> Progpow : %{y:,}',
                       },
                       {
                         x: DifficultychartDate,
                         y: DifficultyRandomx,
                         text: DifficultychartDate,
-                        mode: 'lines+markers',
+                        // mode: 'lines+markers',
                         type: 'scatter',
                         name: '',
-                        line: { color: '#ac3333' },
+                        yaxis: 'y3',
+                        // line: { color: '#ac3333' },
                         hovertemplate: '%{text}<br> RandomX : %{y:,}',
                       },
                     ];
@@ -523,21 +525,40 @@ export class GraphListComponent implements OnInit {
     this.linearGraphData = {
       data: data,
       layout: {
-        hovermode: 'closest',
+        // hovermode: 'closest',
         height: 250,
         autosize: true,
         showlegend: false,
         xaxis: {
           tickangle: -45,
           tickformat: tickformat,
-          showgrid: true,
+          fixedrange: true,
-          fixedrange: true
+          // showgrid: true
         },
         yaxis: {
-          title: 'Diff',
+          title: 'Cuckoo',
-          showgrid: true,
           fixedrange: true,
-          range: range
+          // showgrid: true,
+          // range: range
+        },
+        yaxis2: {
+          title: 'Progpow',
+          fixedrange: true,
+          // showgrid: true,
+          // range: range,
+          overlaying: 'y',
+          side: 'left',
+          position: 0.25
+        },
+        yaxis3: {
+          title: 'RandomX',
+          fixedrange: true,
+          // showgrid: true,
+          // range: range,
+          anchor: 'x',
+          overlaying: 'y',
+          side: 'right'
+
         },
         margin: {
           l: 50,
@@ -1109,7 +1130,7 @@ export class GraphListComponent implements OnInit {
     this.linearTotalGraphData = {
       data: data,
       layout: {
-        hovermode: 'closest',
+        // hovermode: 'closest',
         height: 250,
         autosize: true,
         showlegend: false,
@@ -1117,13 +1138,32 @@ export class GraphListComponent implements OnInit {
           tickangle: -45,
           tickformat: tickformat,
           fixedrange: true,
-          showgrid: true
+          // showgrid: true
         },
         yaxis: {
-          title: 'Diff',
+          title: 'Cuckoo',
           fixedrange: true,
-          showgrid: true,
+          // showgrid: true,
-          range: range
+          // range: range
+        },
+        yaxis2: {
+          title: 'Progpow',
+          fixedrange: true,
+          // showgrid: true,
+          // range: range,
+          overlaying: 'y',
+          side: 'left',
+          position: 0.25
+        },
+        yaxis3: {
+          title: 'RandomX',
+          fixedrange: true,
+          // showgrid: true,
+          // range: range,
+          anchor: 'x',
+          overlaying: 'y',
+          side: 'right'
+
         },
         margin: {
           l: 50,