Set the currency in the y-axis for liability and account overview pages.

Author: gjong

src/account/liability/liability-graph.tsx

@@ -4,8 +4,9 @@ import { Account } from "../../core/types";
 import { BalanceSeries } from "../../core/graphs/balance-series";
 import { Range } from "../../core/Dates";
 import { Chart } from "react-chartjs-2";
-import { DefaultChartConfig } from "../../config/global-chart-config";
+import { DefaultChartConfig, Service } from "../../config/global-chart-config";
 import { Loading } from "../../core/layout";
+import { CurrencyRepository } from "../../core/RestAPI";
 
 type LiabilityGraphProps = {
     range: Range,
@@ -29,12 +30,23 @@ function LiabilityGraph(props: LiabilityGraphProps) {
         }
     }, [range, account])
 
+    const currencySymbol = CurrencyRepository.cached(account.account.currency)?.symbol
     if (!balanceSeries) return <Loading />
     return <>
         <Chart height={ 100 }
                type={ 'line' }
                id='liability-balance-graph'
-               options={ { ...DefaultChartConfig.line, maintainAspectRatio: true } }
+               options={ Service.mergeOptions({
+                   scales: {
+                       y: {
+                           reverse: true,
+                           ticks: {
+                               callback: (value: any) => `${currencySymbol}${value}`
+                           }
+                       }
+                   },
+                   maintainAspectRatio: true
+               }, DefaultChartConfig.line) }
                data={ balanceSeries } />
     </>
 }

src/core/graphs/balance-chart.tsx

@@ -5,7 +5,10 @@ import { Loading } from "../layout";
 import { BalanceSeries } from "./balance-series";
 import { Chart } from "react-chartjs-2";
 import { ChartData } from "chart.js";
-import { DefaultChartConfig } from "../../config/global-chart-config";
+import { DefaultChartConfig, Service } from "../../config/global-chart-config";
+import RestAPI from "../repositories/rest-api";
+import { CurrencyRepository } from "../RestAPI";
+import { isArray } from "chart.js/helpers";
 
 type BalanceChartProps = {
     id: string
@@ -34,12 +37,25 @@ const BalanceChart: FC<BalanceChartProps> = ({ id, allMoney, accounts, height =
         }
     }, [range, allMoney, accounts]);
 
+    let currencySymbol = (RestAPI.user() as any).defaultCurrency?.symbol
+    if (!isArray(accounts) && accounts)
+        currencySymbol = CurrencyRepository.cached(accounts.account.currency).symbol
+
     if (!balanceSeries) return <Loading />
     return <>
         <Chart height={ height }
                type={ 'line' }
                id={ id }
-               options={ DefaultChartConfig.line }
+               options={ Service.mergeOptions({
+                   scales: {
+                       y: {
+                           ticks: {
+                               callback: (value: any) => `${currencySymbol}${value}`
+                           }
+                       }
+                   }
+
+               }, DefaultChartConfig.line) }
                data={ balanceSeries } />
     </>
 }