Skip to main content
Live example: app/demo/axis-auto-hide.tsx in the example app.
axisAutoHide keeps the chart uncluttered at rest: its X and Y axes — grid, ticks, and labels — are faded to an idle opacity. They fade back in when a user scrubs, time-scrolls, flings, or pinch-zooms, then return to their idle opacity after interaction has settled.
The feature is opt-in and experimental. It currently applies to LiveChart, not LiveChartSeries; it has no effect on an axis already disabled with xAxis={false} or yAxis={false}.

​
Configure the idle state

Pass an AxisAutoHideConfig to tune the transition. All durations are in milliseconds. These are the defaults used by axisAutoHide:
  • fadeInMs — duration to reveal the axes when interaction begins.
  • fadeOutMs — duration to return to the idle state.
  • idleOpacity — resting opacity from 0 (hidden) to 1 (fully visible).
  • hideAfterMs — delay after interaction settles before the fade-out begins.
The axes continue to calculate their latest values while hidden, so the labels are current the instant they reappear. Toggle the feature at runtime if needed: passing false immediately restores fully visible axes; enabling it starts at the configured idle opacity.

​
Time scroll and zoom

Time-scroll momentum and pinch zoom count as interaction even after no finger is held down. Pair the feature with these optional gestures for a compact brokerage-style chart that exposes its scale exactly when a user needs it: