fix: add compact formatting to Y axis numbers in db charts (#43170)

In the db charts, numbers in the Y axis are not formatted, sometimes
these get too big and get cut-off.

## before
(in this example it is not cutoff because the number is not big enough)
<img width="1020" height="634" alt="CleanShot 2026-02-25 at 11 20 35@2x"
src="https://github.com/user-attachments/assets/bc29edcc-331f-44d1-934f-1553b895c338"
/>

## after
<img width="936" height="676" alt="CleanShot 2026-02-25 at 11 21 07@2x"
src="https://github.com/user-attachments/assets/eae4ea4c-b8cd-4fe4-a361-9b029955217b"
/>

apps/studio/components/ui/Charts/Charts.utils.tsx

@@ -58,6 +58,21 @@ export const precisionFormatter = (num: number, precision: number): string => {
   }
 }
 
+/**
+ * Formats a number compactly for Y-axis ticks by abbreviating large values.
+ * Prevents long numbers like 1,000,000 from overflowing the Y-axis width.
+ *
+ * @example
+ * compactNumberFormatter(999)        // "999"
+ * compactNumberFormatter(1000)       // "1K"
+ * compactNumberFormatter(1500)       // "1.5K"
+ * compactNumberFormatter(1000000)    // "1M"
+ * compactNumberFormatter(2500000)    // "2.5M"
+ */
+export const compactNumberFormatter = (num: number): string => {
+  return new Intl.NumberFormat('en', { notation: 'compact', maximumFractionDigits: 1 }).format(num)
+}
+
 /**
  * Formats a percentage, trimming decimals at 100.
  *

apps/studio/data/reports/database-charts.ts

@@ -1,8 +1,9 @@
-import { numberFormatter } from 'components/ui/Charts/Charts.utils'
+import { compactNumberFormatter, numberFormatter } from 'components/ui/Charts/Charts.utils'
 import { ReportAttributes } from 'components/ui/Charts/ComposedChart.utils'
 import { DOCS_URL } from 'lib/constants'
 import { formatBytes } from 'lib/helpers'
 import type { Organization } from 'types'
+
 import { DiskAttributesData } from '../config/disk-attributes-query'
 import { MaxConnectionsData } from '../database/max-connections-query'
 import { Project } from '../projects/project-detail-query'
@@ -148,8 +149,8 @@ export const getReportAttributesV2: (
       showGrid: true,
       showMaxValue: true,
       YAxisProps: {
-        width: 35,
-        tickFormatter: (value: any) => numberFormatter(value, 0),
+        width: 50,
+        tickFormatter: (value: any) => compactNumberFormatter(value),
       },
       defaultChartStyle: 'bar',
       attributes: [

apps/studio/tests/components/ui/Charts/Charts.utils.test.ts

@@ -1,5 +1,6 @@
 import { renderHook } from '@testing-library/react'
 import {
+  compactNumberFormatter,
   formatPercentage,
   isFloat,
   numberFormatter,
@@ -105,6 +106,37 @@ describe('formatPercentage', () => {
   })
 })
 
+describe('compactNumberFormatter', () => {
+  it('returns the number as-is below 1000', () => {
+    expect(compactNumberFormatter(0)).toBe('0')
+    expect(compactNumberFormatter(1)).toBe('1')
+    expect(compactNumberFormatter(999)).toBe('999')
+  })
+
+  it('formats thousands with K suffix', () => {
+    expect(compactNumberFormatter(1000)).toBe('1K')
+    expect(compactNumberFormatter(1500)).toBe('1.5K')
+    expect(compactNumberFormatter(64000)).toBe('64K')
+    expect(compactNumberFormatter(999999)).toBe('1M') // rounds up
+  })
+
+  it('formats millions with M suffix', () => {
+    expect(compactNumberFormatter(1_000_000)).toBe('1M')
+    expect(compactNumberFormatter(1_500_000)).toBe('1.5M')
+    expect(compactNumberFormatter(2_500_000)).toBe('2.5M')
+  })
+
+  it('formats billions with B suffix', () => {
+    expect(compactNumberFormatter(1_000_000_000)).toBe('1B')
+    expect(compactNumberFormatter(2_500_000_000)).toBe('2.5B')
+  })
+
+  it('handles negative numbers', () => {
+    expect(compactNumberFormatter(-1000)).toBe('-1K')
+    expect(compactNumberFormatter(-1_500_000)).toBe('-1.5M')
+  })
+})
+
 test('useStacked', () => {
   const { result } = renderHook(() =>
     useStacked({