Design Responsive Charts

Use trigger → inspect → decide → build → verify. Adapt to the chart container and information priority; do not equate responsive design with stretching geometry.

Setup

Omit host width, choose height deliberately, and use the responsive definition only for surface-dependent decisions:

import { barX, defineChart, mountChart } from '@tanstack/charts'
import { scaleBand } from '@tanstack/charts/scales/band'
import { scaleLinear } from '@tanstack/charts/scales/linear'

const rows = [
  { feature: 'Account recovery', requests: 128 },
  { feature: 'Saved searches', requests: 95 },
  { feature: 'Audit export', requests: 72 },
]