Move y axis to the right

libs/ui/src/lib/fire-calculator/fire-calculator.component.ts

@@ -51,8 +51,6 @@ export class FireCalculatorComponent
 
   @ViewChild('chartCanvas') chartCanvas;
 
-  private readonly CONTRIBUTION_PERIOD = 12;
-
   public calculatorForm = this.formBuilder.group({
     annualInterestRate: new FormControl<number>(undefined),
     paymentPerPeriod: new FormControl<number>(undefined),
@@ -63,6 +61,7 @@ export class FireCalculatorComponent
   public isLoading = true;
   public projectedTotalAmount: number;
 
+  private readonly CONTRIBUTION_PERIOD = 12;
   private unsubscribeSubject = new Subject<void>();
 
   public constructor(
@@ -235,6 +234,7 @@ export class FireCalculatorComponent
                 grid: {
                   display: false
                 },
+                position: 'right',
                 stacked: true,
                 ticks: {
                   callback: (value: number) => {

libs/ui/src/lib/line-chart/line-chart.component.ts

@@ -231,8 +231,8 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
                 },
                 max: this.yMax,
                 min: this.yMin,
+                position: 'right',
                 ticks: {
-                  display: this.showYAxis,
                   callback: (tickValue, index, ticks) => {
                     if (index === 0 || index === ticks.length - 1) {
                       // Only print last and first legend entry
@@ -254,6 +254,7 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
 
                     return '';
                   },
+                  display: this.showYAxis,
                   mirror: true,
                   z: 1
                 },