diff --git a/packages/shared/components/charts/Index.svelte b/packages/shared/components/charts/Index.svelte
index cd70ad58310..08b51b63c1b 100644
--- a/packages/shared/components/charts/Index.svelte
+++ b/packages/shared/components/charts/Index.svelte
@@ -16,10 +16,11 @@
export let yPrecision
export let beginAtZero
export let inlineStyle
+ export let formatYAxis
{#if type === ChartType.Line}
-
+
{:else if type === ChartType.Bar}
{/if}
diff --git a/packages/shared/components/charts/Line.svelte b/packages/shared/components/charts/Line.svelte
index b33c1417ba6..99efe63c34e 100644
--- a/packages/shared/components/charts/Line.svelte
+++ b/packages/shared/components/charts/Line.svelte
@@ -9,7 +9,7 @@
export let datasets = []
export let xMaxTicks = 7
export let yMaxTicks = 6
- export let yPrecision = 3
+ export let formatYAxis = (value) => Number(value.toString())
export let color = 'blue' // TODO: each profile has a different color
export let beginAtZero = false
export let inlineStyle = 'height: calc(50vh - 130px);'
@@ -111,10 +111,9 @@
ticks: {
autoSkip: true,
maxTicksLimit: yMaxTicks,
- precision: yPrecision,
beginAtZero,
callback: function (value, index, values) {
- return Number(value.toString())
+ return formatYAxis(value)
},
},
},
diff --git a/packages/shared/lib/chart.ts b/packages/shared/lib/chart.ts
index 4759f743a95..0b2af56181f 100644
--- a/packages/shared/lib/chart.ts
+++ b/packages/shared/lib/chart.ts
@@ -3,7 +3,7 @@ import { _ } from 'shared/lib/i18n'
import type { WalletAccount } from 'shared/lib/wallet'
import { date as i18nDate } from 'svelte-i18n'
import { derived, get, writable } from 'svelte/store'
-import { CurrencyTypes } from './currency'
+import { CurrencyTypes, formatCurrencyValue } from './currency'
import {
HistoryDataProps,
priceData
@@ -220,7 +220,8 @@ function formatLabel(timestamp: number): string {
}
function formatLineChartTooltip(data: (number | string), timestamp: number | string, showMiota: boolean = false): Tooltip {
- const title: string = `${showMiota ? `1 ${Unit.Mi}: ` : ''}${data} ${get(chartCurrency).toUpperCase()}`
+ const currency = get(chartCurrency).toUpperCase()
+ const title: string = `${showMiota ? `1 ${Unit.Mi}: ` : ''}${formatCurrencyValue(data, currency, 3)} ${currency}`
const label: string = get(i18nDate)(new Date(timestamp), {
year: 'numeric',
month: 'short',
diff --git a/packages/shared/lib/currency.ts b/packages/shared/lib/currency.ts
index 9a2cf2fdff6..687c380b79f 100644
--- a/packages/shared/lib/currency.ts
+++ b/packages/shared/lib/currency.ts
@@ -147,3 +147,25 @@ export const currencies = writable({} as Currencies)
export const convertToFiat = (amount: number, usdPrice: number, conversionRate: number): number => {
return +(((amount * usdPrice) / 1000000) * conversionRate).toFixed(2)
}
+
+/**
+ * Converts to appropriate decimal places for a given currency
+ *
+ * @method formatCurrencyValue
+ *
+ * @param {number | string} data
+ * @param {string} currency
+ *
+ * @returns {string}
+ */
+export const formatCurrencyValue = (data: (number | string), currency: string, fiatFixed: number = 2, btcFixed: number = 7, ethFixed: number = 6, ): string => {
+ const parsedData: number = parseFloat(data.toString())
+ switch(currency.toLowerCase()) {
+ case CurrencyTypes.BTC:
+ return parsedData.toFixed(btcFixed)
+ case CurrencyTypes.ETH:
+ return parsedData.toFixed(ethFixed)
+ default:
+ return parsedData.toFixed(fiatFixed)
+ }
+}
diff --git a/packages/shared/routes/dashboard/wallet/views/LineChart.svelte b/packages/shared/routes/dashboard/wallet/views/LineChart.svelte
index b5c4c95219e..1dfb9fc6e7b 100644
--- a/packages/shared/routes/dashboard/wallet/views/LineChart.svelte
+++ b/packages/shared/routes/dashboard/wallet/views/LineChart.svelte
@@ -11,7 +11,7 @@
getTokenData,
selectedChart,
} from 'shared/lib/chart'
- import { CurrencyTypes } from 'shared/lib/currency'
+ import { CurrencyTypes, formatCurrencyValue } from 'shared/lib/currency'
import { HistoryDataProps, TIMEFRAME_MAP } from 'shared/lib/marketData'
import { activeProfile } from 'shared/lib/profile'
import { getContext, onMount } from 'svelte'
@@ -107,6 +107,6 @@
{labels}
{color}
{xMaxTicks}
- yPrecision={7}
+ formatYAxis={(value) => formatCurrencyValue(value, $chartCurrency, undefined, undefined, 5)}
inlineStyle={$selectedAccount && 'height: calc(50vh - 150px);'} />