Skip to main content
Live example: app/demo/axes-and-grid.tsx in the example app.

Grid lines, axis spacing, and edge labels

​
Grid & axes

Pass yAxis={false} or xAxis={false} to hide an axis. gridStyle.intervals of [] renders solid grid lines.

​
Fixed Y-axis price count

By default the Y axis picks a dynamic number of “nice”-value grid lines from minGap. Pass yAxis={{ count }} to instead show a fixed number of prices, spaced evenly down the plot — top label = current high, bottom = current low. The count stays constant as data streams in; the values track the live range each frame (they aren’t rounded to nice numbers).
minGap still acts as a floor: if count labels won’t fit at least minGap px apart, the count drops to what fits. The count is clamped to at most 15.

​
Nice intervals in display units

Use intervalScale when stored values and displayed values differ by a constant multiplier. The chart keeps every point in its original units, but chooses dynamic grid intervals after applying the multiplier. Apply the same multiplier in formatValue:
This can turn labels such as $9,876,543 and $10,864,198 into round $10,000,000 and $11,000,000 intervals. The chart geometry, markers, reference lines, and scrub values stay in their original units. The multiplier must be positive and finite; invalid values behave as 1. If applying it would overflow or underflow the current live range, interval selection safely falls back to source units. Fixed-count mode ignores it because { count } tracks the exact visible range instead of choosing nice intervals.

​
Right-anchored price label column

Set labelRightMargin to place every Y-axis label at the same left X in a column whose right edge is measured from the canvas edge. Add gridEndGap to keep a fixed gap between the grid-line end and that column:
Without labelRightMargin, labels keep their default centered-gutter placement and gridEndGap has no effect. When combined with yAxis.float, labelRightMargin overrides the floating axis’s default edge margin. Plain horizontal referenceLines stop at the same X as the grid, keeping the gap consistent. fullWidth reference lines and value/time bands keep their existing extents.

​
Axis edge labels

topLabel and bottomLabel float a value at the top / bottom edge of the plot — the Robinhood-style high/low readout. Pass true for the batteries-included label: the chart shows its current top (topLabel) and bottom (bottomLabel) Y-axis bound, formatted with the chart’s formatValue and updated each frame on the UI thread.
Both default off. Pass an AxisLabelConfig to tune the built-in label — format, color, position ("left" | "right", default "right"), and the text fontSize / fontWeight / fontFamily:
For full control, the render escape hatch floats any element at the edge (it overrides the built-in value):
To pin the label to the actual high / low data point instead of the edge — position: "extrema" / "extrema-edge" — see Extrema labels.

​
Spacing

Adjust the drawing area with insets (top, right, bottom, left) and soften the left edge with leftEdgeFade.