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)),