add y-axis on right-hand side (but without ticks)

second-slip · Aug 2, 2024 · 829795c · 829795c
1 parent ea20f75
commit 829795c
Show file tree

Hide file tree

Showing 5 changed files with 120 additions and 3 deletions.
diff --git a/src/app/age-analysis-line/age-analysis-line.component.ts b/src/app/age-analysis-line/age-analysis-line.component.ts
@@ -104,6 +104,25 @@ export class AgeAnalysisLineComponent {
       //   display: true,
       //   text: 'JM Anderson',
       // }
+    },
+    scales: {
+      y: {
+        type: 'linear',
+        display: true,
+        position: 'left',
+      },
+      y1: {
+        type: 'linear',
+        display: true,
+        position: 'right',
+        ticks: {
+          display: false
+        },
+        // grid line settings
+        grid: {
+          drawOnChartArea: false, // only want the grid lines for one axis to show up
+        },
+      }
     }
   };
 }
diff --git a/src/app/cumulative-ave-line/cumulative-ave-line.component.ts b/src/app/cumulative-ave-line/cumulative-ave-line.component.ts
@@ -72,6 +72,25 @@ export class CumulativeAveLineComponent {
       //   display: true,
       //   text: 'JM Anderson',
       // }
+    },
+    scales: {
+      y: {
+        type: 'linear',
+        display: true,
+        position: 'left',
+      },
+      y1: {
+        type: 'linear',
+        display: true,
+        position: 'right',
+        ticks: {
+          display: false
+        },
+        // grid line settings
+        grid: {
+          drawOnChartArea: false, // only want the grid lines for one axis to show up
+        },
+      }
     }
   };
 }
diff --git a/src/app/economy-rate/economy-rate.component.ts b/src/app/economy-rate/economy-rate.component.ts
@@ -18,7 +18,7 @@ export class EconomyRateComponent {
   onResize() {
     this.chart?.chart?.resize();
   }
-  
+
   public loaded = signal(false);
 
   public bowlingEconomyData: ChartData<'line'> = {
@@ -59,6 +59,25 @@ export class EconomyRateComponent {
       legend: {
         position: 'bottom'
       }
+    },
+    scales: {
+      y: {
+        type: 'linear',
+        display: true,
+        position: 'left',
+      },
+      y1: {
+        type: 'linear',
+        display: true,
+        position: 'right',
+        ticks: {
+          display: false
+        },
+        // grid line settings
+        grid: {
+          drawOnChartArea: false, // only want the grid lines for one axis to show up
+        },
+      }
     }
   };
 }
diff --git a/src/app/format-analysis-line/format-analysis-line.component.ts b/src/app/format-analysis-line/format-analysis-line.component.ts
@@ -87,6 +87,25 @@ export class FormatAnalysisLineComponent {
       //   display: true,
       //   text: 'JM Anderson',
       // }
+    },
+    scales: {
+      y: {
+        type: 'linear',
+        display: true,
+        position: 'left',
+      },
+      y1: {
+        type: 'linear',
+        display: true,
+        position: 'right',
+        ticks: {
+          display: false
+        },
+        // grid line settings
+        grid: {
+          drawOnChartArea: false, // only want the grid lines for one axis to show up
+        },
+      }
     }
   };
 }
diff --git a/src/app/strike-rate/strike-rate.component.ts b/src/app/strike-rate/strike-rate.component.ts
@@ -34,7 +34,8 @@ export class StrikeRateComponent implements OnInit {
     datasets: [
       {
         data: [],
-        label: 'cumulative strike rate'
+        label: 'cumulative strike rate',
+        yAxisID: 'y'
       }
     ]
   };
@@ -68,9 +69,30 @@ export class StrikeRateComponent implements OnInit {
       this.btnText.set('Reset axis');
     }
     this.lineChartOptions = {
+      // scales: {
+      //   y: {
+      //     min: this.axis()
+      //   }
+      // },
       scales: {
         y: {
-          min: this.axis()
+          min: this.axis(),
+          type: 'linear',
+          display: true,
+          position: 'left',
+        },
+        y1: {
+          min: this.axis(),
+          type: 'linear',
+          display: true,
+          position: 'right',
+          ticks: {
+            display: false
+          },
+          // grid line settings
+          grid: {
+            drawOnChartArea: false, // only want the grid lines for one axis to show up
+          },
         }
       },
       responsive: true, maintainAspectRatio: false,
@@ -110,6 +132,25 @@ export class StrikeRateComponent implements OnInit {
     //   alert('k')
     //   this.chart?.chart?.resize();//.update();
     // },
+    scales: {
+      y: {
+        type: 'linear',
+        display: true,
+        position: 'left',
+      },
+      y1: {
+        type: 'linear',
+        display: true,
+        position: 'right',
+        ticks: {
+          display: false
+        },
+        // grid line settings
+        grid: {
+          drawOnChartArea: false, // only want the grid lines for one axis to show up
+        },
+      },
+    },
     maintainAspectRatio: false,
     devicePixelRatio: 4,
     responsive: true,