Core Concepts

/

Axes and Scales

Axes and Scales

Add x_axis() and y_axis() children to label and constrain a chart. XY infers linear, time, and categorical scales from the bound columns. Datetime-like values select the time scale automatically, or you can make the contract explicit.

Scale type and domain

type_ accepts "linear", "time", "log", or "symlog". Leave it as None to infer the scale. The explicit token is "time", not "datetime". domain=(low, high) pins a data-space window; reverse=True flips its display direction without changing the source values.

Log domains must be positive. Date and datetime values use XY's canonical milliseconds-since-epoch coordinate system while their ticks render as time. String categories preserve a stable category order and receive categorical positions.

Tick controls

Use tick_count as a target, or provide exact tick_values with optional tick_labels:

format controls numeric labels. For crowded labels, use tick_label_angle, tick_label_min_gap, and tick_label_strategy. label_position, label_offset, and label_angle position the axis title.

On fluid browser charts, categorical y-axis labels that exceed the space between their tick and the chart edge are ellipsized. Their full value remains available through native hover and accessibility metadata; set --chart-tick-label-max-width on the chart or a host element to choose a stricter cap. Fixed-size SVG, PNG, and PDF exports use their explicit canvas width and padding instead, so increase padding when an export needs more room.

Axis style= uses a strict cross-renderer vocabulary for grid, axis, tick, and label paint/geometry. See Customize Each Part for the supported keys.

Named and opposite-side axes

Marks bind to axis identifiers through x_axis= and y_axis=. Define a matching id on the axis component, and use side="right" or side="top" for an opposite-side axis:

Named axes share the panel but keep their own scale and tick contract. Bindings that name an undefined axis fail at chart build time.

Zero-inclusive long tails

Use a symmetric logarithmic scale when a long-tailed measure contains zero (or negative values). Values remain in their original data units throughout hover, selection, pan/zoom callbacks, and linked views:

The positive constant controls the width of the near-zero linear region and defaults to 1. Outside that region, both positive and negative tails are compressed logarithmically. Unlike a log axis, symlog represents zero.

Built with Reflex