diff --git a/internal/site/src/components/charts/area-chart.tsx b/internal/site/src/components/charts/area-chart.tsx
index 2a1e1d69..4838402b 100644
--- a/internal/site/src/components/charts/area-chart.tsx
+++ b/internal/site/src/components/charts/area-chart.tsx
@@ -11,6 +11,7 @@ import {
import { chartMargin, cn, formatShortDate } from "@/lib/utils"
import type { ChartData, SystemStatsRecord } from "@/types"
import { useYAxisWidth } from "./hooks"
+import { AxisDomain } from "recharts/types/util/types"
export type DataPoint = {
label: string
@@ -41,7 +42,7 @@ export default function AreaChartDefault({
tickFormatter: (value: number, index: number) => string
contentFormatter: ({ value, payload }: { value: number; payload: SystemStatsRecord }) => string
dataPoints?: DataPoint[]
- domain?: [number, number]
+ domain?: AxisDomain
legend?: boolean
showTotal?: boolean
itemSorter?: (a: any, b: any) => number
diff --git a/internal/site/src/components/charts/container-chart.tsx b/internal/site/src/components/charts/container-chart.tsx
index 2d0e5072..f3b99271 100644
--- a/internal/site/src/components/charts/container-chart.tsx
+++ b/internal/site/src/components/charts/container-chart.tsx
@@ -2,7 +2,7 @@
import { useStore } from "@nanostores/react"
import { memo, useMemo } from "react"
import { Area, AreaChart, CartesianGrid, YAxis } from "recharts"
-import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, xAxis } from "@/components/ui/chart"
+import { type ChartConfig, ChartContainer, ChartTooltip, ChartTooltipContent, pinnedAxisDomain, xAxis } from "@/components/ui/chart"
import { ChartType, Unit } from "@/lib/enums"
import { $containerFilter, $userSettings } from "@/lib/stores"
import { chartMargin, cn, decimalString, formatBytes, formatShortDate, toFixedFloat } from "@/lib/utils"
@@ -124,7 +124,7 @@ export default memo(function ContainerChart({
`${toFixedFloat(val, 2)}%`}
contentFormatter={({ value }) => `${decimalString(value)}%`}
+ domain={pinnedAxisDomain()}
/>
diff --git a/internal/site/src/components/ui/chart.tsx b/internal/site/src/components/ui/chart.tsx
index 3e3d120e..f0ac885a 100644
--- a/internal/site/src/components/ui/chart.tsx
+++ b/internal/site/src/components/ui/chart.tsx
@@ -5,6 +5,7 @@ import * as RechartsPrimitive from "recharts"
import { chartTimeData, cn } from "@/lib/utils"
import type { ChartData } from "@/types"
import { Separator } from "./separator"
+import { AxisDomain } from "recharts/types/util/types"
// Format: { THEME_NAME: CSS_SELECTOR }
const THEMES = { light: "", dark: ".dark" } as const
@@ -454,3 +455,15 @@ export {
xAxis,
// ChartStyle,
}
+
+export function pinnedAxisDomain(): AxisDomain {
+ return [0, (dataMax: number) => {
+ if (dataMax > 10) {
+ return Math.round(dataMax)
+ }
+ if (dataMax > 1) {
+ return Math.round(dataMax / 0.1) * 0.1
+ }
+ return dataMax
+ }]
+}
\ No newline at end of file