diff --git a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts b/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts index ff3a5169a..f87e83a7a 100644 --- a/apps/client/src/app/components/benchmark-comparator/benchmark-comparator.component.ts +++ b/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: { diff --git a/apps/client/src/app/components/investment-chart/investment-chart.component.ts b/apps/client/src/app/components/investment-chart/investment-chart.component.ts index dd969eccd..249b9cdb6 100644 --- a/apps/client/src/app/components/investment-chart/investment-chart.component.ts +++ b/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: { diff --git a/libs/ui/src/lib/line-chart/line-chart.component.ts b/libs/ui/src/lib/line-chart/line-chart.component.ts index dc984314d..4fdeddbc7 100644 --- a/libs/ui/src/lib/line-chart/line-chart.component.ts +++ b/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 },