fix: stop abbreviating 500-999 as 0.5k/0.8k on chart axes (#3434)

## Summary

With "Large number format" off, the time chart's Y-axis mixed abbreviated and plain labels (`0, 250, 0.5k, 0.8k, 1k`). Some labels were also wrong: 750 rendered as `0.8k`.

The axis always formats ticks in compact form (deliberate since #171 and #3030, to fit the gutter). numbro's `lowPrecision` option, on by default, adds the `k` suffix to any value that *rounds* to 1000, which is everything ≥ 500. This PR changes `formatNumber` so that, whenever `average` is applied, abbreviation starts at 1000.

| value | before (Decimals 1) | after |
|---|---|---|
| 400 | `400` | `400` |
| 500 | `0.5k` | `500` |
| 750 | `0.8k` | `750` |
| 1000 | `1k` | `1k` |

Because the fix is in `formatNumber`, it also covers heatmap axis labels, plus tooltips, number tiles, and tables when "Large number format" is on (750 used to show as `0.8k` or `1k` there). The CLI's mirrored `formatNumber` gets the same change. Byte output is excluded: it forces `average: false`, and numbro rejects `lowPrecision` without `average`.

Turning `lowPrecision` off on its own makes numbro pick the unit before rounding (999,700 → `1000k`). So the unit is now chosen from the value rounded at the configured decimals and passed to numbro as `forceAverage`: 999,700 → `1m`, 999.6 → `1k`.

### Screenshots or video

Screenshots to be added by the author.

| Before | After |
| :----- | :---- |
|   <img width="1457" height="766" alt="Screenshot 2026-10-21 at 2 47 49 PM" src="https://github.com/user-attachments/assets/7f95b81c-e15d-4c6b-aadb-cede5a61948f" /> |    <img width="1465" height="808" alt="Screenshot 2026-10-21 at 2 47 33 PM" src="https://github.com/user-attachments/assets/018ee738-3d38-456b-aca9-31c88d5023cb" />    |

### How to reproduce

**Starting point:** `yarn app:dev:local` connected to the demo server, or the Vercel preview.

**On `main`:**

1. Open **Chart Explorer**, pick the demo **Logs** source, and choose **Time Series**.
2. Set the aggregation to **Average** and the value to `500 + rand() % 400`.
3. Open display settings and set Output format **Number**, Decimals **1**, with **Large number format** off. Click **Apply**.
4. The Y-axis shows ticks like `0, 250, 0.5k, 0.8k`.

**On this branch:**

1. Repeat the steps above. The Y-axis shows `0, 250, 500, 750`, and `k` appears only from 1000.

### How to test on Vercel preview

**Preview routes:** /chart

**Steps:**

1. Select the "Logs" source and the "Time Series" chart type.
2. Set the aggregation to "Average" and the value expression to `500 + rand() % 400`, then run the query.
3. Open display settings, set Output format to "Number" and Decimals to 1, leave "Large number format" unchecked, and click "Apply".
4. Verify that no Y-axis tick label below 1000 ends in "k" (for example, "500" and "750", not "0.5k" and "0.8k").

### References

- Linear Issue: HDX-5781
- Related PRs: #3030, #3162, #3172

Author: brandon-pereira

.changeset/axis-no-sub-thousand-abbreviation.md

@@ -0,0 +1,6 @@
+---
+'@hyperdx/app': patch
+'@hyperdx/cli': patch
+---
+
+fix: Stop abbreviating values between 500 and 999 as "0.5k"/"0.8k" on chart axes and in large number format

packages/app/src/__tests__/HDXMultiSeriesTimeChart.test.ts

@@ -86,6 +86,16 @@ describe('formatAxisTick', () => {
     );
   });
 
+  it('does not abbreviate values between 500 and 999', () => {
+    // Regression: numbro's default lowPrecision rendered 750 as "0.8k" next
+    // to an unabbreviated "250" on the same axis.
+    const format = { output: 'number' as const, mantissa: 1 };
+    expect(
+      [0, 250, 500, 750, 1000].map(v => formatAxisTick(v, format)),
+    ).toEqual(['0', '250', '500', '750', '1k']);
+    expect(formatAxisTick(800, { output: 'number' })).toBe('800');
+  });
+
   it('always renders exactly 0 as a bare integer', () => {
     // 0 needs no decimal rescue - it's already unambiguous - and the search
     // naturally produces this by trimming "0.00"/"0.0 B" down to "0"/"0 B".
@@ -320,7 +330,7 @@ describe('getNiceYAxisTicks', () => {
     const result = getExpandableYAxisTicks(0, 2100, 5, { output: 'number' });
     expect(result.ticks.map(t => result.tickFormatter!(t))).toEqual([
       '0',
-      '0.5k',
+      '500',
       '1k',
       '1.5k',
       '2k',

packages/app/src/__tests__/utils.test.ts

@@ -508,6 +508,36 @@ describe('formatNumber', () => {
       };
       expect(formatNumber(1234567, format)).toBe('1m');
     });
+
+    it('only abbreviates from 1000, not from 500', () => {
+      const format: NumberFormat = {
+        output: 'number',
+        average: true,
+        mantissa: 1,
+      };
+      expect(formatNumber(750, format)).toBe('750.0');
+      expect(formatNumber(1500, format)).toBe('1.5k');
+      expect(formatNumber(600000, format)).toBe('600.0k');
+    });
+
+    it('moves to the next unit when rounding reaches 1000 of the current one', () => {
+      const format: NumberFormat = { output: 'number', average: true };
+      expect(formatNumber(999700, format)).toBe('1m');
+      expect(formatNumber(-999700, format)).toBe('-1m');
+      expect(formatNumber(999.6e6, format)).toBe('1b');
+      expect(formatNumber(999.6, format)).toBe('1k');
+      expect(formatNumber(999960, { ...format, mantissa: 1 })).toBe('1.0m');
+      expect(formatNumber(999940, { ...format, mantissa: 1 })).toBe('999.9k');
+      expect(formatNumber(9.9999, { output: 'percent', average: true })).toBe(
+        '1k%',
+      );
+    });
+
+    it('still formats byte output when average is set', () => {
+      expect(
+        formatNumber(268435456, { output: 'byte', average: true, mantissa: 1 }),
+      ).toBe('256.0 MB');
+    });
   });
 
   describe('numericUnit with data output (byte)', () => {

packages/app/src/utils.ts

@@ -1001,6 +1001,32 @@ const formatAutoScaleData = (
   return `${scaledValue.toFixed(mantissa)} ${units[i]}${rateSuffix}`;
 };
 
+const AVERAGE_UNITS = [
+  [1e3, 'thousand'],
+  [1e6, 'million'],
+  [1e9, 'billion'],
+  [1e12, 'trillion'],
+] as const;
+
+// numbro's default lowPrecision abbreviates anything that rounds to the next
+// unit (750 -> "0.8k"), while turning it off picks the unit before rounding
+// (999,700 -> "1000k"). Pick the unit from the rounded value instead.
+function averageUnitOptions(
+  displayed: number,
+  mantissa: number,
+): Pick<numbro.Format, 'forceAverage' | 'lowPrecision'> {
+  const abs = Math.abs(displayed);
+  const round = (v: number) => Math.round(v * 10 ** mantissa) / 10 ** mantissa;
+  let scaled = abs;
+  let unit: numbro.Format['forceAverage'];
+  for (const [power, name] of AVERAGE_UNITS) {
+    if (round(scaled) < 1000) break;
+    unit = name;
+    scaled = abs / power;
+  }
+  return unit ? { forceAverage: unit } : { lowPrecision: false };
+}
+
 export const formatNumber = (
   value?: string | number,
   options?: NumberFormat,
@@ -1057,11 +1083,20 @@ export const formatNumber = (
     return formatDurationMs(ms);
   }
 
+  // Factor is only currently available for the time output
+  const factor = options.output === 'time' ? (options.factor ?? 1) : 1;
+
   const numbroFormat: numbro.Format = {
     output: options.output || 'number',
     mantissa: mantissa,
     thousandSeparated: options.thousandSeparated || false,
     average: options.average || false,
+    ...(options.average &&
+      options.output !== 'byte' &&
+      averageUnitOptions(
+        value * factor * (options.output === 'percent' ? 100 : 1),
+        mantissa,
+      )),
     ...(options.output === 'byte' && {
       base: options.decimalBytes ? 'decimal' : 'general',
       spaceSeparated: true,
@@ -1072,9 +1107,6 @@ export const formatNumber = (
     }),
   };
 
-  // Factor is only currently available for the time output
-  const factor = options.output === 'time' ? (options.factor ?? 1) : 1;
-
   return (
     numbro(value * factor).format(numbroFormat) +
     (options.unit ? ` ${options.unit}` : '')

packages/cli/src/__tests__/formatNumber.test.ts

@@ -2,7 +2,16 @@ import { describe, expect, it } from '@jest/globals';
 
 import { NumericUnit } from '@hyperdx/common-utils/dist/types';
 
-import { axisTickFormatter } from '@/shared/formatNumber';
+import { axisTickFormatter, formatNumber } from '@/shared/formatNumber';
+
+describe('formatNumber average', () => {
+  it('moves to the next unit when rounding reaches 1000 of the current one', () => {
+    const format = { output: 'number' as const, average: true };
+    expect(formatNumber(750, format)).toBe('750');
+    expect(formatNumber(999700, format)).toBe('1m');
+    expect(formatNumber(999.6e6, format)).toBe('1b');
+  });
+});
 
 // Mirrors packages/app/src/__tests__/HDXMultiSeriesTimeChart.test.ts's
 // formatAxisTick suite - this file is a documented @source port of that
@@ -18,6 +27,16 @@ describe('axisTickFormatter', () => {
     expect(format?.(1234)).toBe('1k');
   });
 
+  it('does not abbreviate values between 500 and 999', () => {
+    const format = axisTickFormatter({ output: 'number', mantissa: 1 });
+    expect([250, 500, 750, 1000].map(v => format?.(v))).toEqual([
+      '250',
+      '500',
+      '750',
+      '1k',
+    ]);
+  });
+
   it('honors an explicit mantissa instead of always rounding to 0', () => {
     const format = axisTickFormatter({ output: 'number', mantissa: 2 });
     expect(format?.(0.14)).toBe('0.14');

packages/cli/src/shared/formatNumber.ts

@@ -165,6 +165,32 @@ const formatAutoScaleData = (
   return `${scaledValue.toFixed(mantissa)} ${units[i]}${rateSuffix}`;
 };
 
+const AVERAGE_UNITS = [
+  [1e3, 'thousand'],
+  [1e6, 'million'],
+  [1e9, 'billion'],
+  [1e12, 'trillion'],
+] as const;
+
+// numbro's default lowPrecision abbreviates anything that rounds to the next
+// unit (750 -> "0.8k"), while turning it off picks the unit before rounding
+// (999,700 -> "1000k"). Pick the unit from the rounded value instead.
+function averageUnitOptions(
+  displayed: number,
+  mantissa: number,
+): Pick<numbro.Format, 'forceAverage' | 'lowPrecision'> {
+  const abs = Math.abs(displayed);
+  const round = (v: number) => Math.round(v * 10 ** mantissa) / 10 ** mantissa;
+  let scaled = abs;
+  let unit: numbro.Format['forceAverage'];
+  for (const [power, name] of AVERAGE_UNITS) {
+    if (round(scaled) < 1000) break;
+    unit = name;
+    scaled = abs / power;
+  }
+  return unit ? { forceAverage: unit } : { lowPrecision: false };
+}
+
 export const formatNumber = (
   value?: string | number,
   options?: NumberFormat,
@@ -221,11 +247,20 @@ export const formatNumber = (
     return formatDurationMs(ms);
   }
 
+  // Factor is only currently available for the time output
+  const factor = options.output === 'time' ? (options.factor ?? 1) : 1;
+
   const numbroFormat: numbro.Format = {
     output: options.output || 'number',
     mantissa: mantissa,
     thousandSeparated: options.thousandSeparated || false,
     average: options.average || false,
+    ...(options.average &&
+      options.output !== 'byte' &&
+      averageUnitOptions(
+        value * factor * (options.output === 'percent' ? 100 : 1),
+        mantissa,
+      )),
     ...(options.output === 'byte' && {
       base: options.decimalBytes ? 'decimal' : 'general',
       spaceSeparated: true,
@@ -236,9 +271,6 @@ export const formatNumber = (
     }),
   };
 
-  // Factor is only currently available for the time output
-  const factor = options.output === 'time' ? (options.factor ?? 1) : 1;
-
   return (
     numbro(value * factor).format(numbroFormat) +
     (options.unit ? ` ${options.unit}` : '')