diff --git a/src/feature/line-chart/chart.ts b/src/feature/line-chart/chart.ts
index 0c90642c..9d7c65a9 100644
--- a/src/feature/line-chart/chart.ts
+++ b/src/feature/line-chart/chart.ts
@@ -36,6 +36,7 @@ export class Chart extends EventEmitter {
private _data: Data = { cols: [], rows: [] };
private priceFormat: (price: number) => string;
+ private yAxisTickFormat: string | undefined;
private xFormat: (x: number) => string;
private _colors: Colors;
@@ -46,12 +47,14 @@ export class Chart extends EventEmitter {
width: number;
height: number;
priceFormat: (price: number) => string;
+ yAxisTickFormat?: string;
xFormat: (x: number) => string;
colors: Colors;
}) {
super();
this.priceFormat = options.priceFormat;
+ this.yAxisTickFormat = options.yAxisTickFormat;
this.xFormat = options.xFormat;
this._colors = options.colors;
@@ -144,7 +147,14 @@ export class Chart extends EventEmitter {
this.ui.colors = this._colors;
- this.ui.update(this._data, xr, this.xFormat, yr, this.priceFormat);
+ this.ui.update(
+ this._data,
+ xr,
+ this.xFormat,
+ yr,
+ this.priceFormat,
+ this.yAxisTickFormat,
+ );
}
private onZoomStart = (t: ZoomTransform) => {
diff --git a/src/feature/line-chart/line-chart.tsx b/src/feature/line-chart/line-chart.tsx
index 42bbcc41..4da56073 100644
--- a/src/feature/line-chart/line-chart.tsx
+++ b/src/feature/line-chart/line-chart.tsx
@@ -59,6 +59,11 @@ export type LineChartProps = {
*/
priceFormat?: (price: number) => string;
+ /**
+ * Specifier for y axis tick format
+ */
+ yAxisTickFormat?: string;
+
/**
* Light or dark theme.
*/
@@ -87,6 +92,7 @@ export const LineChart = ({
theme = "dark",
tooltip,
xFormat = defaultNumberFormat,
+ yAxisTickFormat,
}: LineChartProps) => {
/**
* Where to render chart contents, e.g. line series.
@@ -136,6 +142,7 @@ export const LineChart = ({
width: 300,
height: 300,
priceFormat,
+ yAxisTickFormat,
xFormat,
colors,
});
@@ -199,7 +206,7 @@ export const LineChart = ({
return () => {
chartRef.current.destroy();
};
- }, [annotations, data.cols, priceFormat, xFormat]);
+ }, [annotations, data.cols, priceFormat, xFormat, yAxisTickFormat]);
// Update chart when dimensions or data change
useEffect(() => {
diff --git a/src/feature/line-chart/ui.ts b/src/feature/line-chart/ui.ts
index a6f6342a..ec3930eb 100644
--- a/src/feature/line-chart/ui.ts
+++ b/src/feature/line-chart/ui.ts
@@ -173,6 +173,7 @@ export class UI extends EventEmitter {
xFormat: (x: number) => string,
priceScale: ScaleLinear,
priceFormat: (price: number) => string,
+ yAxisTickFormat?: string,
): void {
this.data = data;
this.xScale = xScale;
@@ -219,6 +220,7 @@ export class UI extends EventEmitter {
height - resolution * AXIS_HEIGHT,
resolution,
this.colors,
+ yAxisTickFormat,
);
// TODO: Abstract the vertical axis separator functionality
diff --git a/src/ui/display-objects/vertical-axis.ts b/src/ui/display-objects/vertical-axis.ts
index 50f990da..dc5fd3b2 100644
--- a/src/ui/display-objects/vertical-axis.ts
+++ b/src/ui/display-objects/vertical-axis.ts
@@ -60,6 +60,7 @@ export class VerticalAxis extends Container {
height: number,
resolution: number = 1,
colors: VerticalAxisColors,
+ tickFormatSpecifier?: string,
) {
this.overlay.clear();
this.overlay.beginFill(colors.backgroundSurface, 0.7);
@@ -75,7 +76,7 @@ export class VerticalAxis extends Container {
const numTicks = height / resolution / 50;
const ticks = scale.ticks(numTicks);
- const tickFormat = scale.tickFormat(numTicks);
+ const tickFormat = scale.tickFormat(numTicks, tickFormatSpecifier);
const enter = ticks.filter(
(tick) => !this.nodeByKeyValue.has(tickFormat(tick)),