Migrate border attributes

apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts

@@ -159,10 +159,12 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
             responsive: true,
             scales: {
               x: {
+                border: {
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
+                  width: 1
+                },
                 display: true,
                 grid: {
-                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
-                  borderWidth: 1,
                   color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                   display: false
                 },
@@ -173,12 +175,14 @@ export class BenchmarkComparatorComponent implements OnChanges, OnDestroy {
                 }
               },
               y: {
+                border: {
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
+                  display: false
+                },
                 display: true,
                 grid: {
-                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
                   color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
-                  display: false,
-                  drawBorder: false
+                  display: false
                 },
                 position: 'right',
                 ticks: {

apps/client/src/app/components/investment-chart/investment-chart.component.ts

@@ -261,10 +261,12 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
             responsive: true,
             scales: {
               x: {
+                border: {
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
+                  width: this.groupBy ? 0 : 1
+                },
                 display: true,
                 grid: {
-                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
-                  borderWidth: this.groupBy ? 0 : 1,
                   color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                   display: false
                 },
@@ -279,12 +281,14 @@ export class InvestmentChartComponent implements OnChanges, OnDestroy {
                 }
               },
               y: {
+                border: {
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
+                  display: false
+                },
                 display: !this.isInPercent,
                 grid: {
-                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
                   color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
-                  display: false,
-                  drawBorder: false
+                  display: false
                 },
                 position: 'right',
                 ticks: {

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

@@ -212,9 +212,11 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
             },
             scales: {
               x: {
+                border: {
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
+                },
                 display: this.showXAxis,
                 grid: {
-                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
                   color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                   display: false
                 },
@@ -225,9 +227,11 @@ export class LineChartComponent implements AfterViewInit, OnChanges, OnDestroy {
                 type: 'time'
               },
               y: {
+                border: {
+                  color: `rgba(${getTextColor(this.colorScheme)}, 0.1)`
+                },
                 display: this.showYAxis,
                 grid: {
-                  borderColor: `rgba(${getTextColor(this.colorScheme)}, 0.1)`,
                   color: `rgba(${getTextColor(this.colorScheme)}, 0.8)`,
                   display: false
                 },