diff --git a/app/components/ChartTooltip.tsx b/app/components/ChartTooltip.tsx
new file mode 100644
index 000000000..e11ac0d58
--- /dev/null
+++ b/app/components/ChartTooltip.tsx
@@ -0,0 +1,66 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { format } from 'date-fns'
+import type { ReactNode } from 'react'
+import { match } from 'ts-pattern'
+
+const longDateTime = (ts: number) => format(new Date(ts), 'MMM d, yyyy HH:mm:ss zz')
+
+type ChartTooltipProps = {
+  timestamp: number
+  left: number
+  top: number
+  offset: [LeftRight, TopBottom]
+  children: ReactNode
+}
+
+/** Offset the box into the quadrant away from the point so it never overflows an edge */
+export type LeftRight = 'left' | 'right'
+export type TopBottom = 'top' | 'bottom'
+
+const TOOLTIP_GAP = 12
+function tooltipTransform(leftRight: LeftRight, topBottom: TopBottom): string {
+  const tx = match(leftRight)
+    .with('left', () => `calc(-100% - ${TOOLTIP_GAP}px)`)
+    .with('right', () => `${TOOLTIP_GAP}px`)
+    .exhaustive()
+  const ty = match(topBottom)
+    .with('top', () => `calc(-100% - ${TOOLTIP_GAP}px)`)
+    .with('bottom', () => `${TOOLTIP_GAP}px`)
+    .exhaustive()
+  return `translate(${tx}, ${ty})`
+}
+
+export function ChartTooltip({
+  timestamp,
+  left,
+  top,
+  offset,
+  children,
+}: ChartTooltipProps) {
+  return (
+    <div
+      className="pointer-events-none absolute z-10 w-max"
+      style={{
+        left: left,
+        top: top,
+        transform: tooltipTransform(...offset),
+      }}
+    >
+      <div
+        role="tooltip"
+        className="text-sans-md text-secondary bg-raise shadow-tooltip rounded-md outline-0"
+      >
+        <div className="border-secondary border-b px-3 py-2 pr-6">
+          {longDateTime(timestamp)}
+        </div>
+        <div className="px-3 py-2">{children}</div>
+      </div>
+    </div>
+  )
+}
diff --git a/app/components/FramedChart.tsx b/app/components/FramedChart.tsx
new file mode 100644
index 000000000..f62105488
--- /dev/null
+++ b/app/components/FramedChart.tsx
@@ -0,0 +1,78 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { useMemo, type ReactNode, type RefObject } from 'react'
+import type uPlot from 'uplot'
+import UplotReact from 'uplot-react'
+
+import { useElementSize } from '~/hooks/use-element-size'
+
+// The intended left padding (px-5) is taken from the container and given to
+// uPlot instead, so the plot sits flush left while x-tick labels can bleed into
+// the gutter without clipping.
+const CHART_LEFT_PAD = 20
+
+export type UPlotOptions = Omit<uPlot.Options, 'width' | 'height' | 'padding'>
+
+type Props = {
+  title: string
+  height: number
+  chartOptions: UPlotOptions
+  data: uPlot.AlignedData
+  uRef: RefObject<uPlot | null>
+  children?: ReactNode
+  legend?: ReactNode
+}
+
+export function FramedChart({
+  title,
+  height,
+  chartOptions,
+  data,
+  uRef,
+  children,
+  legend,
+}: Props) {
+  const [size, sizeRef] = useElementSize()
+
+  // Width/height changes cause a cheaper "update" path for uplot, instead of
+  // "create", so it gets its own layer of memoization
+  const options = useMemo(
+    () =>
+      ({
+        ...chartOptions,
+        padding: [null, null, null, CHART_LEFT_PAD],
+        width: size?.width ?? 0,
+        height,
+      }) satisfies uPlot.Options,
+    [chartOptions, size?.width, height]
+  )
+
+  return (
+    <figure
+      aria-label={title}
+      className="m-0 pt-8 pb-5 pl-0"
+      style={{ paddingRight: CHART_LEFT_PAD }}
+    >
+      {/* The actual chart is absolutely positioned so its fixed pixel width
+          doesn't influence layout and block future resizing. That in turn makes
+          its container need an explicit height */}
+      <div ref={sizeRef} className="relative" style={{ height }}>
+        {size && (
+          <UplotReact
+            className="absolute top-0 left-0"
+            options={options}
+            data={data}
+            onCreate={(u) => (uRef.current = u)}
+          />
+        )}
+        {children}
+      </div>
+      {legend}
+    </figure>
+  )
+}
diff --git a/app/components/Heatmap.tsx b/app/components/Heatmap.tsx
new file mode 100644
index 000000000..6156200e2
--- /dev/null
+++ b/app/components/Heatmap.tsx
@@ -0,0 +1,364 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { useMemo, useState } from 'react'
+import * as R from 'remeda'
+import type uPlot from 'uplot'
+
+import { ChartTooltip, type TopBottom, type LeftRight } from '~/components/ChartTooltip'
+import { type UPlotOptions, FramedChart } from '~/components/FramedChart'
+import {
+  timeFormatterForRange,
+  useChartTheme,
+  useLiveAxisFormatter,
+  xTimeAxis,
+  yValueAxis,
+} from '~/util/charts'
+
+export type HeatmapDistribution = { bins: number[]; counts: number[] }
+
+const CHART_HEIGHT = 300
+
+// TODO: If you don't like seams between adjacent cells, you can bleed over the
+// edges a little to hide them. Too much and you can see cells not abide by
+// their grid. I honestly like it at 0, but up to 0.5 can get a smoother look
+// without screwing up the grid too much
+const CELL_OVERFLOW = 0
+
+type ColorRamp = {
+  stops: string[]
+}
+
+// [CSS variable, fallback] pairs. Fallbacks cover the unlikely case the theme
+// variables are missing.
+const RAMP_STOPS = [
+  ['--surface-accent', 'oklch(0.24 0.0722 183.7)'],
+  ['--content-accent', 'oklch(0.77 0.1919 163.7)'],
+] as const
+
+// Interpolates the color between the two closest stops, for 0 <= t <= 1.
+const rampColor = ({ stops }: ColorRamp, t: number): string => {
+  const clamped = R.clamp(t, { min: 0, max: 1 })
+  const lastIndex = stops.length - 1
+  const progress = clamped * lastIndex
+  const start = R.clamp(Math.floor(progress), { max: lastIndex - 1 })
+  const lerp = progress - start
+  const from = stops[start]
+  const to = stops[start + 1]
+  return `color-mix(in oklch, ${from} ${(1 - lerp) * 100}%, ${to})`
+}
+
+// grabbing style from the chart root instead of document body
+// that way it can be themed e.g. `yellow-theme`
+const getColorRamp = (el: Element): ColorRamp => {
+  const style = getComputedStyle(el)
+  return {
+    stops: RAMP_STOPS.map(
+      ([name, fallback]) => style.getPropertyValue(name).trim() || fallback
+    ),
+  }
+}
+
+// count -> ramp position. Doing a square root or a log makes for some different
+// smoothing. Nothing is truly intuitive, but linearly showing the fraction is
+// most easily compared to the legend at the bottom
+const rampT = (count: number, maxCount: number) => {
+  const fraction = count / maxCount
+  // TODO: pick!
+  return fraction
+  // return Math.log10(lerp(1, 10, fraction))
+  // return Math.sqrt(fraction)
+}
+
+type Hover = {
+  col: number
+  row: number
+  left: number
+  top: number
+  leftRight: LeftRight
+  topBottom: TopBottom
+  cell: { left: number; top: number; width: number; height: number }
+}
+
+type HeatmapProps = {
+  title: string
+  timestamps: number[]
+  startTimes: number[]
+  distributions: (HeatmapDistribution | null)[]
+  yAxisTickFormatter?: (val: number) => string
+  unit?: string
+}
+
+const defaultYAxisTickFormatter = (val: number) => val.toLocaleString()
+
+export function Heatmap({
+  title,
+  timestamps,
+  startTimes,
+  distributions,
+  yAxisTickFormatter = defaultYAxisTickFormatter,
+  unit,
+}: HeatmapProps) {
+  const theme = useChartTheme()
+  const [hover, setHover] = useState<Hover | null>(null)
+
+  // All distributions in a timeseries share the same bucket definition, so we
+  // take the bins from the first present sample as the y-axis.
+  const bins = useMemo(
+    () => distributions.find((d) => d !== null)?.bins ?? [],
+    [distributions]
+  )
+  const binCount = bins.length
+  const colCount = distributions.length
+
+  const maxSampleCount = useMemo(
+    () => distributions.reduce((max, d) => (d ? Math.max(max, ...d.counts) : max), 0),
+    [distributions]
+  )
+
+  // uPlot's time scale wants seconds; metrics timestamps are milliseconds
+  const rightEdges = useMemo(() => timestamps.map((t) => t / 1000), [timestamps])
+  const leftEdges = useMemo(() => startTimes.map((t) => t / 1000), [startTimes])
+
+  // uPlot doesn't actually have heatmap support, but we can use its position
+  // functions to make this (somewhat) easy
+  const drawCells = useMemo(
+    () => (u: uPlot) => {
+      if (binCount === 0 || colCount === 0) return
+      const colorRamp = getColorRamp(u.root)
+      const ctx = u.ctx
+      ctx.save()
+      ctx.beginPath()
+      ctx.rect(u.bbox.left, u.bbox.top, u.bbox.width, u.bbox.height)
+      ctx.clip()
+      distributions.forEach((distribution, colIndex) => {
+        if (!distribution) return
+
+        const leftEdge = u.valToPos(leftEdges[colIndex], 'x', true)
+        const rightEdge = u.valToPos(rightEdges[colIndex], 'x', true)
+        distribution.counts.forEach((count, rowIndex) => {
+          // leave empty cells blank instead of the "bottom" color
+          if (count === 0) return
+
+          const topEdge = u.valToPos(rowIndex + 1, 'y', true)
+          const bottomEdge = u.valToPos(rowIndex, 'y', true)
+          ctx.fillStyle = rampColor(colorRamp, rampT(count, maxSampleCount))
+          ctx.fillRect(
+            leftEdge - CELL_OVERFLOW,
+            topEdge - CELL_OVERFLOW,
+            rightEdge - leftEdge + CELL_OVERFLOW,
+            bottomEdge - topEdge + CELL_OVERFLOW
+          )
+        })
+      })
+      ctx.restore()
+    },
+    [distributions, leftEdges, rightEdges, colCount, binCount, maxSampleCount]
+  )
+
+  const tooltipPlugin = useMemo<uPlot.Plugin>(
+    () => ({
+      hooks: {
+        setCursor: (u) => {
+          const { left, top } = u.cursor
+          if (left == null || top == null || left < 0 || top < 0) {
+            setHover(null)
+            return
+          }
+
+          const xVal = u.posToVal(left, 'x')
+          const col = R.findIndex(
+            leftEdges,
+            (leftEdge, i) => xVal >= leftEdge && xVal <= rightEdges[i]
+          )
+          if (col === -1) {
+            setHover(null)
+            return
+          }
+
+          const row = Math.min(binCount - 1, Math.max(0, Math.floor(u.posToVal(top, 'y'))))
+          // cursor coords are relative to the plot area, so we add in the diff between the plot
+          // and the whole container
+          const plotRect = u.over.getBoundingClientRect()
+          const chartRect = u.root.getBoundingClientRect()
+          const containerLeft = plotRect.left - chartRect.left
+          const containerTop = plotRect.top - chartRect.top
+
+          const clampWidth = R.clamp({ min: 0, max: plotRect.width })
+          const clampHeight = R.clamp({ min: 0, max: plotRect.height })
+          const cellLeft = clampWidth(u.valToPos(leftEdges[col], 'x'))
+          const cellRight = clampWidth(u.valToPos(rightEdges[col], 'x'))
+          const cellTop = clampHeight(u.valToPos(row + 1, 'y'))
+          const cellBottom = clampHeight(u.valToPos(row, 'y'))
+
+          // anchor the tooltip at the timestamp (the cell's right edge / identity)
+          const x = u.valToPos(rightEdges[col], 'x')
+          setHover({
+            col,
+            row,
+            left: containerLeft + x,
+            top: containerTop + top,
+            leftRight: x > plotRect.width / 2 ? 'left' : 'right',
+            topBottom: top > plotRect.height / 2 ? 'top' : 'bottom',
+            cell: {
+              left: containerLeft + cellLeft,
+              top: containerTop + cellTop,
+              width: cellRight - cellLeft,
+              height: cellBottom - cellTop,
+            },
+          })
+        },
+        init: (u) => {
+          u.over.addEventListener('mouseleave', () => setHover(null))
+        },
+      },
+    }),
+    [binCount, rightEdges, leftEdges]
+  )
+
+  const startTime = timestamps.length ? new Date(Math.min(...timestamps)) : new Date()
+  const endTime = timestamps.length ? new Date(Math.max(...timestamps)) : new Date()
+  const formatTime = timeFormatterForRange(startTime, endTime)
+
+  const { uRef, formatterRef } = useLiveAxisFormatter(yAxisTickFormatter)
+
+  const chartOptions = useMemo(() => {
+    const highestFilledBin = Math.max(
+      -1,
+      ...distributions
+        .filter((d) => d !== null)
+        .map(({ counts }) => R.findLastIndex(counts, (n) => n > 0))
+    )
+
+    const xRange: uPlot.Range.MinMax =
+      colCount > 0 ? [leftEdges[0], rightEdges[colCount - 1]] : [0, 1]
+
+    return {
+      scales: {
+        x: { range: xRange },
+        y: {
+          range: [
+            0,
+            highestFilledBin === -1 ? binCount : highestFilledBin + 1,
+          ] as uPlot.Range.MinMax,
+        },
+      },
+      // include an invisible series just to get uPlot drawing
+      series: [{}, { show: false }],
+      axes: [
+        xTimeAxis({ theme, formatTime }),
+        yValueAxis({
+          theme,
+          grid: { show: false },
+          values: (_u, splits) =>
+            splits.map((v) => {
+              const i = R.clamp(Math.round(v), { min: 0, max: binCount - 1 })
+              return formatterRef.current(bins[i])
+            }),
+        }),
+      ],
+      cursor: { x: false, y: false, drag: { x: false } },
+      legend: { show: false },
+      plugins: [{ hooks: { draw: [drawCells] } }, tooltipPlugin],
+    } satisfies UPlotOptions
+  }, [
+    distributions,
+    rightEdges,
+    leftEdges,
+    colCount,
+    theme,
+    formatTime,
+    bins,
+    binCount,
+    drawCells,
+    tooltipPlugin,
+    formatterRef,
+  ])
+
+  const data = useMemo<uPlot.AlignedData>(
+    () => [rightEdges, Array(colCount).fill(null)],
+    [rightEdges, colCount]
+  )
+
+  if (binCount === 0 || colCount === 0) {
+    return (
+      <div
+        className="text-secondary flex items-center justify-center"
+        style={{ height: CHART_HEIGHT }}
+      >
+        No distribution data for this time period.
+      </div>
+    )
+  }
+
+  return (
+    <FramedChart
+      title={title}
+      height={CHART_HEIGHT}
+      chartOptions={chartOptions}
+      data={data}
+      uRef={uRef}
+      legend={<HeatmapLegend maxSampleCount={maxSampleCount} axisText={theme.axisText} />}
+    >
+      {hover && (
+        <>
+          <div
+            className="pointer-events-none absolute"
+            style={{
+              ...hover.cell,
+              boxShadow: 'inset 0 0 0 1.5px var(--content-default)',
+            }}
+          />
+          <ChartTooltip
+            left={hover.left}
+            top={hover.top}
+            offset={[hover.leftRight, hover.topBottom]}
+            timestamp={timestamps[hover.col]}
+          >
+            <div className="text-secondary">
+              {formatterRef.current(bins[hover.row])}
+              {bins[hover.row + 1] === undefined
+                ? `+`
+                : `\u2013${formatterRef.current(bins[hover.row + 1])}`}
+              {unit && <span className="text-secondary ml-1">{unit}</span>}
+            </div>
+            <div className="text-raise">
+              {(distributions[hover.col]?.counts[hover.row] ?? 0).toLocaleString()} samples
+            </div>
+          </ChartTooltip>
+        </>
+      )}
+    </FramedChart>
+  )
+}
+
+function HeatmapLegend({
+  maxSampleCount,
+  axisText,
+}: {
+  maxSampleCount: number
+  axisText: string
+}) {
+  return (
+    <div className="mt-3 flex items-center gap-2 pl-5">
+      <span className="text-mono-xs" style={{ color: axisText }}>
+        0
+      </span>
+      <div
+        className="h-3 w-32 rounded-sm"
+        style={{
+          backgroundImage: `linear-gradient(in oklch to right, ${RAMP_STOPS.map(
+            ([name, fallback]) => `var(${name}, ${fallback})`
+          ).join(', ')})`,
+        }}
+      ></div>
+      <span className="text-mono-xs" style={{ color: axisText }}>
+        {maxSampleCount.toLocaleString()}
+      </span>
+    </div>
+  )
+}
diff --git a/app/components/TimeSeriesChart.tsx b/app/components/TimeSeriesChart.tsx
index d1da5ddcb..b97ecbdd6 100644
--- a/app/components/TimeSeriesChart.tsx
+++ b/app/components/TimeSeriesChart.tsx
@@ -6,153 +6,28 @@
  * Copyright Oxide Computer Company
  */
 import cn from 'classnames'
-import { format } from 'date-fns'
-import { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
+import { useMemo, useState, type ReactNode } from 'react'
 import * as R from 'remeda'
 import { match } from 'ts-pattern'
 import uPlot from 'uplot'
-import UplotReact from 'uplot-react'
 
 import type { ChartDatum } from '@oxide/api'
 import { Error12Icon } from '@oxide/design-system/icons/react'
 
-import { useElementSize } from '~/hooks/use-element-size'
-import { subscribeToTheme } from '~/stores/theme'
+import { ChartTooltip, type LeftRight, type TopBottom } from '~/components/ChartTooltip'
+import { FramedChart, type UPlotOptions } from '~/components/FramedChart'
+import {
+  type ChartTheme,
+  seriesColor,
+  timeFormatterForRange,
+  useChartTheme,
+  useLiveAxisFormatter,
+  xTimeAxis,
+  yValueAxis,
+} from '~/util/charts'
 import { classed } from '~/util/classed'
 
-/**
- * Check if the start and end time are on the same day
- * If they are we can omit the day/month in the date time format
- */
-function isSameDay(d1: Date, d2: Date) {
-  return (
-    d1.getFullYear() === d2.getFullYear() &&
-    d1.getMonth() === d2.getMonth() &&
-    d1.getDate() === d2.getDate()
-  )
-}
-
-const shortDateTime = (ts: number) => {
-  const date = new Date(ts)
-  return format(
-    date,
-    date.getHours() === 0 && date.getMinutes() === 0 ? 'M/d' : 'M/d HH:mm'
-  )
-}
-const shortTime = (ts: number) => format(new Date(ts), 'HH:mm')
-const longDateTime = (ts: number) => format(new Date(ts), 'MMM d, yyyy HH:mm:ss zz')
-
-const remToPx = (rem: number) =>
-  rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
-// We measure axis label widths on a detached canvas instead of uPlot's to avoid overwriting its
-// own font setting.
-const measureCtx = document.createElement('canvas').getContext('2d')
-const measureTextWidth = (text: string, font: string) => {
-  // getContext('2d') is only null if '2d' is unsupported, which, hey, you're not getting a graph
-  if (!measureCtx) return 0
-  measureCtx.font = font
-  return measureCtx.measureText(text).width
-}
-
-const AXIS_FONT_REM_XS = 0.6875
-const AXIS_TICK_LENGTH = 6
-const AXIS_TICK_GAP = 8
-// Left padding (px-5) is taken from the container and given to uPlot instead, so the plot sits
-// flush left while x-tick labels can bleed into the gutter without clipping.
-const CHART_LEFT_PAD = 20
 const CHART_HEIGHT = 300
-const TOOLTIP_GAP = 12
-
-type ChartTheme = {
-  fontFamily: string
-  stroke: string
-  fill: string
-  hoverPoint: string
-  axisLine: string
-  axisText: string
-  lineColors: string[]
-}
-
-// Append an alpha channel to a resolved color, e.g. `oklch(l c h)` -> `oklch(l c h / 0.6)`. Assumes
-// our colors are set in oklch!
-const withAlpha = (color: string, alpha: number) => color.replace(/\)\s*$/, ` / ${alpha})`)
-
-// uPlot draws to a canvas, so it can't consume CSS custom properties directly. We subscribe to the
-// theme instead.
-function getChartTheme(): ChartTheme {
-  const style = getComputedStyle(document.body)
-  const v = (name: string) => style.getPropertyValue(name)
-  return {
-    fontFamily: v('--font-mono'),
-    stroke: v('--stroke-accent-secondary'),
-    fill: withAlpha(v('--surface-accent-secondary'), 0.6),
-    hoverPoint: v('--content-accent'),
-    axisLine: v('--stroke-secondary'),
-    axisText: v('--content-quaternary'),
-    lineColors: [
-      '--color-green-800',
-      '--color-blue-800',
-      '--color-purple-800',
-      '--color-yellow-800',
-      '--color-red-800',
-    ].map(v),
-  }
-}
-
-const seriesColor = (i: number, theme: ChartTheme): string =>
-  theme.lineColors[i] ||
-  `oklch(0.77 0.175 ${((163.7 + (i - theme.lineColors.length) * 137.508) % 360).toFixed(1)})`
-
-function useChartTheme(): ChartTheme {
-  const [colors, setColors] = useState(getChartTheme)
-  useEffect(() => subscribeToTheme(() => setColors(getChartTheme())), [])
-  return colors
-}
-
-/** Offset the box into the quadrant away from the point so it never overflows an edge */
-type LeftRight = 'left' | 'right'
-type TopBottom = 'top' | 'bottom'
-function tooltipTransform(leftRight: LeftRight, topBottom: TopBottom): string {
-  const tx = match(leftRight)
-    .with('left', () => `calc(-100% - ${TOOLTIP_GAP}px)`)
-    .with('right', () => `${TOOLTIP_GAP}px`)
-    .exhaustive()
-  const ty = match(topBottom)
-    .with('top', () => `calc(-100% - ${TOOLTIP_GAP}px)`)
-    .with('bottom', () => `${TOOLTIP_GAP}px`)
-    .exhaustive()
-  return `translate(${tx}, ${ty})`
-}
-
-function ChartTooltip({
-  timestamp,
-  value,
-  seriesName,
-  unit,
-}: {
-  timestamp: number
-  value: number
-  seriesName: string
-  unit?: string
-}) {
-  return (
-    <div
-      role="tooltip"
-      className="text-sans-md text-secondary bg-raise shadow-tooltip rounded-md outline-0"
-    >
-      <div className="border-secondary border-b px-3 py-2 pr-6">
-        {longDateTime(timestamp)}
-      </div>
-      <div className="px-3 py-2">
-        <div className="text-secondary">{seriesName}</div>
-        <div className="text-raise">
-          {value.toLocaleString()}
-          {unit && <span className="text-secondary ml-1">{unit}</span>}
-        </div>
-      </div>
-    </div>
-  )
-}
 
 type TimeSeriesChartProps = {
   timestamps: number[] | undefined
@@ -169,7 +44,7 @@ type TimeSeriesChartProps = {
 }
 
 // this top margin is also in the chart, probably want a way of unifying the sizing between the two
-const SkeletonMetric = ({
+export const SkeletonMetric = ({
   children,
   shimmer = false,
   className,
@@ -234,12 +109,8 @@ export function TimeSeriesChart({
   seriesLabels,
 }: TimeSeriesChartProps) {
   const theme = useChartTheme()
-  const fontPx = remToPx(AXIS_FONT_REM_XS)
-  const axisFont = `${fontPx}px ${theme.fontFamily}`
-
-  const [size, sizeRef] = useElementSize()
 
-  const formatTime = isSameDay(startTime, endTime) ? shortTime : shortDateTime
+  const formatTime = timeFormatterForRange(startTime, endTime)
 
   const dataLength = data?.length ?? 0
 
@@ -304,20 +175,7 @@ export function TimeSeriesChart({
     []
   )
 
-  const uRef = useRef<uPlot | null>(null)
-  const yAxisTickFormatterRef = useRef<(val: number) => string>(yAxisTickFormatter)
-  yAxisTickFormatterRef.current = yAxisTickFormatter
-  useEffect(() => {
-    uRef.current?.redraw(
-      // Setting the `rebuildPaths` argument to true causes uPlot to reapply the _current_ x bounds,
-      // which in the right conditions (e.g., initial render) can leave the chart blank. We only
-      // need the axes recalculated anyways!
-      //
-      // See https://github.com/leeoniya/uPlot/issues/1099
-      false, // rebuildPaths
-      true // recalcAxes
-    )
-  }, [yAxisTickFormatter])
+  const { uRef, formatterRef } = useLiveAxisFormatter(yAxisTickFormatter)
 
   // uplot-react rebuilds the whole chart (they call this the "create" path) when any top-level
   // option (other than width or height) changes by reference.
@@ -344,47 +202,14 @@ export function TimeSeriesChart({
           })),
         ],
         axes: [
-          {
-            stroke: theme.axisText,
-            font: axisFont,
-            space: (_u, _axisIdx, _min, _max, plotDim) => plotDim / 5,
-            values: (_u, times) => times.map((t) => formatTime(t * 1000)),
-            border: { show: true, stroke: theme.axisLine, width: 1 },
-            gap: AXIS_TICK_GAP,
-            grid: { show: false },
-            size: fontPx + AXIS_TICK_GAP + AXIS_TICK_LENGTH,
-            ticks: {
-              show: true,
-              stroke: theme.axisLine,
-              width: 1,
-              size: AXIS_TICK_LENGTH,
-            },
-          },
-          {
-            stroke: theme.axisText,
-            font: axisFont,
-            side: 1,
-            border: { show: true, stroke: theme.axisLine, width: 1 },
-            gap: AXIS_TICK_GAP,
-            ticks: {
-              show: true,
-              stroke: theme.axisLine,
-              width: 1,
-              size: AXIS_TICK_LENGTH,
-              filter: (_u, yValues) => yValues.map((v) => (v === 0 ? null : v)),
-            },
-            values: (_u, yValues) =>
-              yValues.map((v) => (v === 0 ? '' : yAxisTickFormatterRef.current(v))),
+          xTimeAxis({ theme, formatTime }),
+          yValueAxis({
+            theme,
             grid: { show: true, stroke: theme.axisLine, width: 1 },
-            size: (_self, values) => {
-              const axisBase = AXIS_TICK_LENGTH + AXIS_TICK_GAP
-              // given the monospace font, longest by char count is longest by rendered width
-              const longestVal = R.firstBy(values ?? [], (s) => -s.length) || ''
-              return axisBase + measureTextWidth(longestVal, axisFont)
-            },
-          },
+            values: (_u, yValues) =>
+              yValues.map((v) => (v === 0 ? '' : formatterRef.current(v))),
+          }),
         ],
-        padding: [null, null, null, CHART_LEFT_PAD],
         focus: { alpha: 0.5 },
         cursor: {
           // setting this property causes non-focused series to dim on hover.
@@ -402,20 +227,8 @@ export function TimeSeriesChart({
         },
         legend: { show: false },
         plugins: [tooltipPlugin],
-      }) satisfies Omit<uPlot.Options, 'width' | 'height'>,
-    [dataLength, formatTime, tooltipPlugin, interpolation, theme, axisFont, fontPx]
-  )
-
-  // Width/height changes cause a cheaper "update" path for uplot, instead of "create", so it gets
-  // its own layer of memo
-  const options = useMemo(
-    () =>
-      ({
-        ...chartOptions,
-        width: size?.width ?? 0,
-        height: CHART_HEIGHT,
-      }) satisfies uPlot.Options,
-    [chartOptions, size?.width]
+      }) satisfies UPlotOptions,
+    [dataLength, formatTime, tooltipPlugin, interpolation, theme, formatterRef]
   )
 
   const aligned = useMemo<uPlot.AlignedData>(() => {
@@ -464,55 +277,42 @@ export function TimeSeriesChart({
       : undefined
 
   return (
-    <figure aria-label={title} className="m-0 pt-8 pr-5 pb-5 pl-0">
-      {/* The chart is absolutely positioned so its fixed pixel width doesn't feed back into the
-          container's min-content width — otherwise the chart props the container open and it can
-          grow but never shrink. The wrapper needs an explicit height because the absolute child
-          contributes none, so it gets the same fixed height passed to uPlot. */}
-      <div ref={sizeRef} className="relative" style={{ height: CHART_HEIGHT }}>
-        {/* Wait for the container measurement rather than creating a zero-width chart and
-            immediately resizing it. The chart may appear a frame after the container, but the
-            zero-width version had the same gap: an invisible chart until the measurement
-            arrived through the same ResizeObserver → setState path. */}
-        {size && (
-          <UplotReact
-            className="absolute top-0 left-0"
-            options={options}
-            data={aligned}
-            onCreate={(u) => (uRef.current = u)}
+    <FramedChart
+      title={title}
+      height={CHART_HEIGHT}
+      chartOptions={chartOptions}
+      data={aligned}
+      uRef={uRef}
+      legend={
+        seriesLabels && (
+          <ChartLegend
+            title={title}
+            count={data.length}
+            seriesLabels={seriesLabels}
+            theme={theme}
           />
-        )}
-        {tooltip && hovered && (
-          <div
-            className="pointer-events-none absolute z-10 w-max"
-            style={{
-              left: tooltip.left,
-              top: tooltip.top,
-              transform: tooltipTransform(tooltip.leftRight, tooltip.topBottom),
-            }}
-          >
-            <ChartTooltip
-              timestamp={hovered.timestamp}
-              value={hovered.value}
-              seriesName={
-                seriesLabels
-                  ? seriesLabel(title, tooltip.hoveredSeriesIndex, seriesLabels)
-                  : title
-              }
-              unit={unit}
-            />
+        )
+      }
+    >
+      {tooltip && hovered && (
+        <ChartTooltip
+          timestamp={hovered.timestamp}
+          left={tooltip.left}
+          top={tooltip.top}
+          offset={[tooltip.leftRight, tooltip.topBottom]}
+        >
+          <div className="text-secondary">
+            {seriesLabels
+              ? seriesLabel(title, tooltip.hoveredSeriesIndex, seriesLabels)
+              : title}
           </div>
-        )}
-      </div>
-      {seriesLabels && (
-        <ChartLegend
-          title={title}
-          count={data.length}
-          seriesLabels={seriesLabels}
-          theme={theme}
-        />
+          <div className="text-raise">
+            {hovered.value.toLocaleString()}
+            {unit && <span className="text-secondary ml-1">{unit}</span>}
+          </div>
+        </ChartTooltip>
       )}
-    </figure>
+    </FramedChart>
   )
 }
 
@@ -564,7 +364,7 @@ const MetricsError = () => (
   />
 )
 
-const MetricsEmpty = () => (
+export const MetricsEmpty = () => (
   <MetricsMessage
     // mt-3 is a shameful hack to get it vertically centered in the chart
     title={<div className="mt-3">No data</div>}
diff --git a/app/pages/system/OxqlPage.tsx b/app/pages/system/OxqlPage.tsx
index 1d1f1426d..f82a68de5 100644
--- a/app/pages/system/OxqlPage.tsx
+++ b/app/pages/system/OxqlPage.tsx
@@ -16,17 +16,26 @@ import {
   api,
   useApiMutation,
   camelToSnake,
-  type Timeseries,
-  type Points,
+  type Distributiondouble,
+  type MetricType,
   type OxqlTable,
+  type Points,
+  type Timeseries,
   type TimeseriesQuery,
-  type Values,
+  type ValueArray,
 } from '@oxide/api'
 import { Monitoring16Icon, Monitoring24Icon } from '@oxide/design-system/icons/react'
 
 import { DocsPopover } from '~/components/DocsPopover'
 import { OxqlField } from '~/components/form/fields/OxqlField'
-import { ChartContainer, ChartHeader, TimeSeriesChart } from '~/components/TimeSeriesChart'
+import { Heatmap } from '~/components/Heatmap'
+import {
+  ChartContainer,
+  ChartHeader,
+  SkeletonMetric,
+  MetricsEmpty,
+  TimeSeriesChart,
+} from '~/components/TimeSeriesChart'
 import { useElementSize } from '~/hooks/use-element-size'
 import { Button } from '~/ui/lib/Button'
 import { Divider } from '~/ui/lib/Divider'
@@ -63,6 +72,12 @@ const exampleItems: { label: string; value: string }[] = [
   | filter timestamp > @now() - 10m
   | join`,
   },
+  {
+    label: 'Virtual disk write latencies',
+    value: `get virtual_disk:io_latency
+  | filter timestamp > @now() - 10m
+  | filter io_kind == 'write'`,
+  },
 ]
 
 const defaultValues: TimeseriesQuery = {
@@ -71,8 +86,8 @@ const defaultValues: TimeseriesQuery = {
 
 export const handle = { crumb: 'OxQL Explorer' }
 
-const narrowToNumbers = (vs: Values): (number | null)[] =>
-  match(vs.values)
+const narrowToNumbers = (vs: ValueArray): (number | null)[] =>
+  match(vs)
     .with({ type: 'integer' }, ({ values }) => values)
     .with({ type: 'double' }, ({ values }) => values)
     .with({ type: 'boolean' }, ({ values }) =>
@@ -85,10 +100,21 @@ const narrowToNumbers = (vs: Values): (number | null)[] =>
       )
     )
     .with({ type: 'string' }, () => []) // these don't exist in practice
-    .with({ type: 'integer_distribution' }, () => []) // by only calling this on aligned/joined tables, we know this is unreachable
+    // by only calling this on non-distribution tables (distributions can't be
+    // aligned/joined), we know this is unreachable
+    .with({ type: 'integer_distribution' }, () => [])
     .with({ type: 'double_distribution' }, () => []) // these don't exist in practice, and are also unreachable per above
     .exhaustive()
 
+const narrowToDistributions = (vs: ValueArray): (Distributiondouble | null)[] =>
+  match(vs)
+    .with(
+      { type: 'integer_distribution' },
+      { type: 'double_distribution' },
+      ({ values }) => values
+    )
+    .otherwise(() => [])
+
 const leftPad = <T,>(items: T[], length: number): (T | null)[] =>
   items.length >= length ? items : [...Array(length - items.length).fill(null), ...items]
 
@@ -98,6 +124,15 @@ type OxqlTimestamp = Points['timestamps'][number]
 const parseTs = (ts: OxqlTimestamp): number => new Date(ts).getTime()
 const toPosix = (timestamps: OxqlTimestamp[]): number[] => timestamps.map(parseTs)
 
+// Distributions always carry start_times in practice, but this isn't a
+// guaranteed invariant. But start times are generally "the timestamp
+// preceding the current one", so we can derive that ourselves.
+const fakeStartTimes = (timestamps: number[]): number[] => {
+  if (timestamps.length === 0) return []
+  const interval = timestamps.length > 1 ? timestamps[1] - timestamps[0] : 0
+  return [timestamps[0] - interval, ...timestamps.slice(0, -1)]
+}
+
 type TimeseriesKind = 'joined' | 'aligned' | 'unaligned'
 
 /**
@@ -157,11 +192,17 @@ type Chart<Data> = {
 }
 
 type Multiline = Chart<{ label: string; values: (number | null)[] }[]>
+type Line = Chart<(number | null)[]> & { metricType: MetricType }
+type Heatmap = Chart<(Distributiondouble | null)[]> & {
+  metricType: MetricType
+  startTimes: number[]
+}
 
 type ChartGroup =
   | 'empty-timeseries'
   | ({ startTime: Date; endTime: Date } & (
-      | { kind: 'unaligned'; charts: Chart<Values>[] }
+      | { kind: 'unaligned'; charts: Line[] }
+      | { kind: 'distributions'; charts: Heatmap[] }
       | { kind: 'aligned'; charts: Multiline[] }
       | { kind: 'joined'; charts: Multiline[] }
     ))
@@ -212,7 +253,7 @@ const tableToGroup = (table: OxqlTable): ChartGroup => {
               metricNames[i] ||
               // should be unreachable
               `${getFormattedFields(series)} #${i + 1}`,
-            values: narrowToNumbers(v),
+            values: narrowToNumbers(v.values),
           })),
         })),
       }
@@ -227,22 +268,52 @@ const tableToGroup = (table: OxqlTable): ChartGroup => {
             .filter((s) => s.points.values.length > 0)
             .map((series) => ({
               label: getFormattedFields(series),
-              values: leftPad(narrowToNumbers(series.points.values[0]), timestamps.length),
+              values: leftPad(
+                narrowToNumbers(series.points.values[0].values),
+                timestamps.length
+              ),
             })),
         },
       ],
     }))
-    .with('unaligned', (kind) => ({
-      kind,
-      charts: timeseries
-        .filter((s) => s.points.values.length > 0)
-        .map((series) => ({
-          name,
-          description: getFormattedFields(series),
-          timestamps: toPosix(series.points.timestamps),
-          data: series.points.values[0],
-        })),
-    }))
+    .with('unaligned', () => {
+      const seriesList = timeseries.filter((s) => s.points.values.length > 0)
+      // all schemas in a table are the same, so we can just check the first
+      // https://github.com/oxidecomputer/omicron/blob/3de7e909b196c07811025bbf41aaa8a35e6fa3cf/oximeter/oxql-types/src/table.rs#L280
+      const valueType = seriesList[0]?.points.values[0]?.values.type
+      // if no series had any values, there's nothing to chart
+      if (valueType === undefined) return { kind: 'unaligned' as const, charts: [] }
+
+      return match(valueType)
+        .with('integer_distribution', 'double_distribution', () => ({
+          kind: 'distributions' as const,
+          charts: seriesList.map((series): Heatmap => {
+            const timestamps = toPosix(series.points.timestamps)
+            return {
+              name,
+              description: getFormattedFields(series),
+              timestamps,
+              metricType: series.points.values[0].metricType,
+              startTimes:
+                series.points.startTimes?.map(parseTs) ?? fakeStartTimes(timestamps),
+              data: narrowToDistributions(series.points.values[0].values),
+            }
+          }),
+        }))
+        .with('integer', 'double', 'boolean', 'string', () => ({
+          kind: 'unaligned' as const,
+          charts: seriesList.map(
+            (series): Line => ({
+              name,
+              description: getFormattedFields(series),
+              timestamps: toPosix(series.points.timestamps),
+              metricType: series.points.values[0].metricType,
+              data: narrowToNumbers(series.points.values[0].values),
+            })
+          ),
+        }))
+        .exhaustive()
+    })
     .exhaustive()
   const timestamps = chart.charts.flatMap(({ timestamps }) => timestamps)
   const min = R.firstBy(timestamps, (t) => t)
@@ -270,16 +341,31 @@ const formatTick = (n: number): string => {
   return (n / divisor).toLocaleString() + suffix
 }
 
-// Drops (or keeps, without copying) the first sample of a series. We trim timestamps and values at
-// the same time to be confident they're in sync.
-type TimeAndData = { timestamps: number[]; data: (number | null)[][] }
-type Trim = (t: TimeAndData) => TimeAndData
-const firstPointDropper =
-  (drop: boolean): Trim =>
-  ({ timestamps, data }) =>
-    drop
-      ? { timestamps: timestamps.slice(1), data: data.map((d) => d.slice(1)) }
-      : { timestamps, data }
+// Drops (or keeps, without copying) the first sample of a series.
+const dropFirst =
+  (drop: boolean) =>
+  <T,>(xs: T[]): T[] =>
+    drop ? xs.slice(1) : xs
+
+// We trim timestamps and data at the same time to be confident they're in sync.
+const trimSeries = <T,>(
+  trim: boolean,
+  { timestamps, data }: { timestamps: number[]; data: T[][] }
+) => {
+  const d = dropFirst(trim)
+  return { timestamps: d(timestamps), data: data.map(d) }
+}
+const trimHeatmap = <T,>(
+  trim: boolean,
+  {
+    timestamps,
+    startTimes,
+    data,
+  }: { timestamps: number[]; startTimes: number[]; data: T[] }
+) => {
+  const d = dropFirst(trim)
+  return { timestamps: d(timestamps), startTimes: d(startTimes), data: d(data) }
+}
 
 // The first aligned point of a cumulative counter is diffed against the counter's start_time,
 // collapsing all pre-window history into one giant bucket. It's not "erroneous" but it's usually
@@ -290,16 +376,17 @@ const groupHasPointWorthDropping = (g: ChartGroup): boolean =>
     // Aligned/joined tables may be derived from cumulatives, so we assume it's worth offering
     .with({ kind: 'joined' }, { kind: 'aligned' }, () => true)
     // Gauges are, by definition, not cumulative, so you'll never see a giant first point
-    .with({ kind: 'unaligned' }, ({ charts }) =>
-      charts.some((c) => c.data.metricType !== 'gauge')
+    .with({ kind: 'unaligned' }, { kind: 'distributions' }, ({ charts }) =>
+      charts.some((c) => c.metricType !== 'gauge')
     )
     .exhaustive()
 
-// A simplified representation of a single chart.
+// A flattened representation of a single chart.
 type ChartDisplay = { key: string; showDivider: boolean } & (
   | { kind: 'empty' }
   | { kind: 'multiline'; startTime: Date; endTime: Date; chart: Multiline }
-  | { kind: 'line'; startTime: Date; endTime: Date; chart: Chart<Values> }
+  | { kind: 'line'; startTime: Date; endTime: Date; chart: Line }
+  | { kind: 'heatmap'; chart: Heatmap }
 )
 
 // Virtualization relies on a list of near-same-size items, so we flatten out all the groups
@@ -309,6 +396,16 @@ const toDisplays = (groups: ChartGroup[]): ChartDisplay[] =>
       return [{ kind: 'empty', key: `t${t}`, showDivider: true }]
     const { startTime, endTime } = g
     return match(g)
+      .with({ kind: 'distributions' }, ({ charts }) =>
+        charts.map(
+          (chart, i): ChartDisplay => ({
+            kind: 'heatmap',
+            key: `t${t}.${i}`,
+            showDivider: i === 0,
+            chart,
+          })
+        )
+      )
       .with({ kind: 'unaligned' }, ({ charts }) =>
         charts.map(
           (chart, i): ChartDisplay => ({
@@ -341,10 +438,10 @@ function MultilineChart({
   trim,
 }: {
   display: Extract<ChartDisplay, { kind: 'multiline' }>
-  trim: Trim
+  trim: boolean
 }) {
   const { chart, startTime, endTime } = display
-  const trimmed = trim({
+  const trimmed = trimSeries(trim, {
     timestamps: chart.timestamps,
     data: chart.data.map((d) => d.values),
   })
@@ -373,25 +470,10 @@ function LineChart({
   trim,
 }: {
   display: Extract<ChartDisplay, { kind: 'line' }>
-  trim: Trim
+  trim: boolean
 }) {
   const { chart, startTime, endTime } = display
-  const data = match(chart.data.values)
-    .with({ type: 'integer' }, ({ values }) => values)
-    .with({ type: 'double' }, ({ values }) => values)
-    .with({ type: 'boolean' }, ({ values }) =>
-      values.map((b) =>
-        match(b)
-          .with(true, () => 1)
-          .with(false, () => 0)
-          .with(null, () => null)
-          .exhaustive()
-      )
-    )
-    .with({ type: 'string' }, () => []) // these don't exist in practice
-    .with({ type: 'integer_distribution' }, { type: 'double_distribution' }, () => []) // heatmaps!
-    .exhaustive()
-  const trimmed = trim({ data: [data], timestamps: chart.timestamps })
+  const trimmed = trimSeries(trim, { data: [chart.data], timestamps: chart.timestamps })
   return (
     <ChartContainer>
       <ChartHeader title={chart.name} label="" description={chart.description} />
@@ -410,7 +492,34 @@ function LineChart({
   )
 }
 
-function ChartEntry({ display, trim }: { display: ChartDisplay; trim: Trim }) {
+function HeatmapChart({
+  display,
+  trim,
+}: {
+  display: Extract<ChartDisplay, { kind: 'heatmap' }>
+  trim: boolean
+}) {
+  const { chart } = display
+  const trimmed = trimHeatmap(trim, {
+    timestamps: chart.timestamps,
+    startTimes: chart.startTimes,
+    data: chart.data,
+  })
+  return (
+    <ChartContainer>
+      <ChartHeader title={chart.name} label="" description={chart.description} />
+      <Heatmap
+        title={chart.name}
+        timestamps={trimmed.timestamps}
+        startTimes={trimmed.startTimes}
+        distributions={trimmed.data}
+        yAxisTickFormatter={formatTick}
+      />
+    </ChartContainer>
+  )
+}
+
+function ChartEntry({ display, trim }: { display: ChartDisplay; trim: boolean }) {
   return (
     <>
       {display.showDivider ? (
@@ -422,9 +531,14 @@ function ChartEntry({ display, trim }: { display: ChartDisplay; trim: Trim }) {
         <div className="pt-8" />
       )}
       {match(display)
-        .with({ kind: 'empty' }, () => <p className="text-secondary">No results</p>)
+        .with({ kind: 'empty' }, () => (
+          <SkeletonMetric>
+            <MetricsEmpty />
+          </SkeletonMetric>
+        ))
         .with({ kind: 'multiline' }, (r) => <MultilineChart display={r} trim={trim} />)
         .with({ kind: 'line' }, (r) => <LineChart display={r} trim={trim} />)
+        .with({ kind: 'heatmap' }, (r) => <HeatmapChart display={r} trim={trim} />)
         .exhaustive()}
     </>
   )
@@ -473,7 +587,7 @@ export default function OxqlPage() {
   )
 
   const hasTrimmableCharts = chartGroups?.some(groupHasPointWorthDropping) ?? false
-  const trim = firstPointDropper(dropFirstPoint && hasTrimmableCharts)
+  const trim = dropFirstPoint && hasTrimmableCharts
 
   const charts = useMemo(() => (chartGroups ? toDisplays(chartGroups) : []), [chartGroups])
 
diff --git a/app/util/charts.ts b/app/util/charts.ts
new file mode 100644
index 000000000..4db17fc85
--- /dev/null
+++ b/app/util/charts.ts
@@ -0,0 +1,206 @@
+/*
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, you can obtain one at https://mozilla.org/MPL/2.0/.
+ *
+ * Copyright Oxide Computer Company
+ */
+import { format } from 'date-fns'
+import { useEffect, useRef, useState } from 'react'
+import * as R from 'remeda'
+import type uPlot from 'uplot'
+
+import { subscribeToTheme } from '~/stores/theme'
+
+/**
+ * Shared plumbing for our uPlot-based charts (`TimeSeriesChart`, `Heatmap`).
+ */
+
+/**
+ * Check if the start and end time are on the same day. If they are we can omit
+ * the day/month in the date time format.
+ */
+function isSameDay(d1: Date, d2: Date) {
+  return (
+    d1.getFullYear() === d2.getFullYear() &&
+    d1.getMonth() === d2.getMonth() &&
+    d1.getDate() === d2.getDate()
+  )
+}
+
+const shortDateTime = (ts: number) => {
+  const date = new Date(ts)
+  return format(
+    date,
+    date.getHours() === 0 && date.getMinutes() === 0 ? 'M/d' : 'M/d HH:mm'
+  )
+}
+const shortTime = (ts: number) => format(new Date(ts), 'HH:mm')
+/** Pick the x-axis time formatter based on whether the window spans a day. */
+export const timeFormatterForRange = (startTime: Date, endTime: Date) =>
+  isSameDay(startTime, endTime) ? shortTime : shortDateTime
+
+export const remToPx = (rem: number) =>
+  rem * parseFloat(getComputedStyle(document.documentElement).fontSize)
+
+// We measure axis label widths on a detached canvas instead of uPlot's to avoid
+// overwriting its own font setting.
+const measureCtx = document.createElement('canvas').getContext('2d')
+export const measureTextWidth = (text: string, font: string) => {
+  // getContext('2d') is only null if '2d' is unsupported, which, hey, you're not getting a graph
+  if (!measureCtx) return 0
+  measureCtx.font = font
+  return measureCtx.measureText(text).width
+}
+
+export const AXIS_FONT_REM_XS = 0.6875
+export const AXIS_TICK_LENGTH = 6
+export const AXIS_TICK_GAP = 8
+
+export type ChartTheme = {
+  fontFamily: string
+  stroke: string
+  hoverPoint: string
+  fill: string
+  axisLine: string
+  axisText: string
+  lineColors: string[]
+}
+
+// Append an alpha channel to a resolved color, e.g. `oklch(l c h)` -> `oklch(l c h / 0.6)`. Assumes
+// our colors are set in oklch!
+export const withAlpha = (color: string, alpha: number) =>
+  color.replace(/\)\s*$/, ` / ${alpha})`)
+
+// uPlot draws to a canvas, so it can't consume CSS custom properties directly. We subscribe to the
+// theme instead.
+export function getChartTheme(): ChartTheme {
+  const style = getComputedStyle(document.body)
+  const v = (name: string) => style.getPropertyValue(name)
+  return {
+    fontFamily: v('--font-mono'),
+    stroke: v('--stroke-accent-secondary'),
+    hoverPoint: v('--content-accent'),
+    fill: withAlpha(v('--surface-accent-secondary'), 0.6),
+    axisLine: v('--stroke-secondary'),
+    axisText: v('--content-quaternary'),
+    lineColors: [
+      '--color-green-800',
+      '--color-blue-800',
+      '--color-purple-800',
+      '--color-yellow-800',
+      '--color-red-800',
+    ].map(v),
+  }
+}
+
+export const seriesColor = (i: number, theme: ChartTheme): string =>
+  theme.lineColors[i] ||
+  `oklch(0.77 0.175 ${((163.7 + (i - theme.lineColors.length) * 137.508) % 360).toFixed(1)})`
+
+export function useChartTheme(): ChartTheme {
+  const [colors, setColors] = useState(getChartTheme)
+  useEffect(() => subscribeToTheme(() => setColors(getChartTheme())), [])
+  return colors
+}
+
+/** The monospace axis font at our standard axis size, plus its pixel size. */
+export function chartAxisFont(theme: ChartTheme): { fontPx: number; axisFont: string } {
+  const fontPx = remToPx(AXIS_FONT_REM_XS)
+  return { fontPx, axisFont: `${fontPx}px ${theme.fontFamily}` }
+}
+
+/**
+ * Keeps a chart's y-axis labels in sync with a `yAxisTickFormatter` whose
+ * identity may change across renders. Returns two refs:
+ *
+ * - `formatterRef`: `.current` points to the yAxisTickFormatter so you can
+ *   reference it without it being a memo dependency.
+ * - `uRef`: assign in `<UplotReact onCreate>`. Needed to call for axis
+ *   recalculation.
+ */
+export function useLiveAxisFormatter(yAxisTickFormatter: (val: number) => string) {
+  const uRef = useRef<uPlot | null>(null)
+  const formatterRef = useRef(yAxisTickFormatter)
+  formatterRef.current = yAxisTickFormatter
+  useEffect(() => {
+    // Setting the `rebuildPaths` argument to true causes uPlot to reapply the
+    // _current_ x bounds, which in the right conditions (e.g., initial render)
+    // can leave the chart blank. We only need the axes recalculated anyways!
+    //
+    // See https://github.com/leeoniya/uPlot/issues/1099
+    uRef.current?.redraw(
+      false, // rebuildPaths
+      true // recalcAxes
+    )
+  }, [yAxisTickFormatter])
+  return { uRef, formatterRef }
+}
+
+/**
+ * The bottom time axis, shared so every chart gets the same uPlot tick
+ * calculation, formatting, and styling.
+ */
+export function xTimeAxis({
+  theme,
+  formatTime,
+}: {
+  theme: ChartTheme
+  formatTime: (ts: number) => string
+}): uPlot.Axis {
+  const { fontPx, axisFont } = chartAxisFont(theme)
+  return {
+    stroke: theme.axisText,
+    font: axisFont,
+    space: (_u, _axisIdx, _min, _max, plotDim) => plotDim / 5,
+    values: (_u, times) => times.map((t) => formatTime(t * 1000)),
+    border: { show: true, stroke: theme.axisLine, width: 1 },
+    gap: AXIS_TICK_GAP,
+    grid: { show: false },
+    size: fontPx + AXIS_TICK_GAP + AXIS_TICK_LENGTH,
+    ticks: {
+      show: true,
+      stroke: theme.axisLine,
+      width: 1,
+      size: AXIS_TICK_LENGTH,
+    },
+  }
+}
+
+/**
+ * The right value axis, shared so every chart gets the same uPlot tick
+ * calculation, formatting, and styling.
+ */
+export function yValueAxis({
+  theme,
+  grid,
+  values,
+}: {
+  theme: ChartTheme
+  grid: uPlot.Axis.Grid
+  values: uPlot.Axis.Values
+}): uPlot.Axis {
+  const { axisFont } = chartAxisFont(theme)
+  return {
+    stroke: theme.axisText,
+    font: axisFont,
+    side: 1,
+    border: { show: true, stroke: theme.axisLine, width: 1 },
+    gap: AXIS_TICK_GAP,
+    grid,
+    size: (_self, values) => {
+      const axisBase = AXIS_TICK_LENGTH + AXIS_TICK_GAP
+      // given the monospace font, longest by char count is longest by rendered width
+      const longestVal = R.firstBy(values ?? [], (s) => -s.length) || ''
+      return axisBase + measureTextWidth(longestVal, axisFont)
+    },
+    ticks: {
+      show: true,
+      stroke: theme.axisLine,
+      width: 1,
+      size: AXIS_TICK_LENGTH,
+      filter: (_u, yValues) => yValues.map((v) => (v === 0 ? null : v)),
+    },
+    values,
+  }
+}
diff --git a/mock-api/msw/util.ts b/mock-api/msw/util.ts
index 1be94c53a..de0698ef4 100644
--- a/mock-api/msw/util.ts
+++ b/mock-api/msw/util.ts
@@ -52,6 +52,7 @@ import {
   timeseriesFrom,
   resultFrom,
   getMockValues,
+  getHistoPoints,
 } from '../oxql-metrics'
 import { db, lookupById } from './db'
 import { Rando } from './rando'
@@ -675,9 +676,24 @@ function getMultipleTables(vibe: OxqlVibe) {
     .exhaustive()
 }
 
+const histogramTables = new Set([
+  'virtual_disk:io_latency',
+  'virtual_disk:io_size',
+  'http_service:request_latency_histogram',
+  'oximeter_collector:database_queue_depth',
+])
+
 export function handleOxqlMetrics({ query }: TimeseriesQuery): Json<OxqlQueryResult> {
   const vibe = getVibe(query)
 
+  if (histogramTables.has(vibe.firstTable))
+    return resultFrom([
+      {
+        name: vibe.firstTable,
+        timeseries: [timeseriesFrom(instances[0].id, getHistoPoints())],
+      },
+    ])
+
   if (vibe.moreTables.length > 0) return getMultipleTables(vibe)
 
   const stateValue = getCpuStateFromQuery(query)
diff --git a/mock-api/oxql-metrics.ts b/mock-api/oxql-metrics.ts
index 84649a09d..02d2745f7 100644
--- a/mock-api/oxql-metrics.ts
+++ b/mock-api/oxql-metrics.ts
@@ -5,6 +5,8 @@
  *
  * Copyright Oxide Computer Company
  */
+import * as R from 'remeda'
+
 import type { Timeseries, Points, OxqlQueryResult } from '~/api'
 import type { OxqlMetricName, OxqlVcpuState } from '~/components/oxql-metrics/util'
 
@@ -336,3 +338,50 @@ const mockOxqlVcpuStateValues: Record<OxqlVcpuState, number[]> = {
     5131885.651897, 5188225.092888, 4388460.254213, 4075678.463765, 3943427.938256,
   ],
 }
+
+const histogramBins = Array.from({ length: 30 }, (_, i) => i * 250_000)
+
+export const getHistoPoints = (): Json<Points> => {
+  const rando = new Rando(0)
+  const binCount = histogramBins.length
+
+  const timeline = getJitteredTimestamps(0)
+  const startTimes = timeline.slice(0, -1)
+  const timestamps = timeline.slice(1)
+
+  const distributions = timestamps.map(() => {
+    const center = (binCount / 4) * 1.5
+    const spread = 2.5
+    const counts = histogramBins.map((_, binIndex) => {
+      const MAX_VALUE = 400
+      const count = MAX_VALUE * Math.exp(-((binIndex - center) ** 2) / (2 * spread ** 2))
+      const randomSubtraction = rando.next() * 30
+      const randomDivision = 1 + rando.next() * 0.1
+      const nearFinal = Math.round(Math.max(0, count / randomDivision - randomSubtraction))
+      return nearFinal < MAX_VALUE / 10 && rando.next() > 0.75 ? 0 : nearFinal
+    })
+
+    return {
+      bins: histogramBins,
+      counts,
+      min: 0,
+      max: histogramBins[binCount - 1],
+      sum_of_samples: R.sum(counts),
+      squared_mean: 0,
+      p50: histogramBins[Math.round(center)] ?? 0,
+      p90: histogramBins[Math.min(binCount - 1, Math.round(center + spread))] ?? 0,
+      p99: histogramBins[Math.min(binCount - 1, Math.round(center + 2 * spread))] ?? 0,
+    }
+  })
+
+  return {
+    start_times: startTimes,
+    timestamps,
+    values: [
+      {
+        values: { type: 'integer_distribution', values: distributions },
+        metric_type: 'delta',
+      },
+    ],
+  }
+}