-
-
Notifications
You must be signed in to change notification settings - Fork 1.9k
Description
Is your feature request related to a problem? Please describe.
When building time-series charts (e.g., a timeline from past to future), there's no built-in way to highlight "Today" on the X-axis. Currently, users have to implement workarounds like:
- Using
<ReferenceLine>with a custom label component - Creating a custom tick renderer via
XAxis tickprop - Using the
<Customized>component for fully custom SVG rendering
These solutions work, but they require boilerplate and don't integrate cleanly with the axis label system.
Describe the solution you'd like
A first-class way to add special markers/labels to specific axis positions. This could be:
-
A
markersprop onXAxis/YAxis- Array of objects specifying value + label + optional styling<XAxis dataKey="date" markers={[{ value: Date.now(), label: "Today", style: { fill: "#ff6b6b" } }]} />
-
An
<AxisMarker>component - Child of XAxis/YAxis for declarative markers<XAxis dataKey="date"> <AxisMarker value={Date.now()} label="Today" /> </XAxis>
-
Enhanced
tickcallback - Allow returning special styling/labels for specific tick values
Describe alternatives you've considered
- ReferenceLine with label: Works but the label floats above the chart area rather than integrating with the axis
- Custom tick component: Requires reimplementing all tick logic just to highlight one value
- Customized component: Maximum flexibility but requires manual SVG positioning and doesn't adapt to chart layout changes
Additional context
This is a common pattern in financial dashboards, project timelines, and analytics tools where distinguishing "now" from historical/projected data is important. Native support would make recharts more competitive with other charting libraries that support annotations out of the box.
Related: #1678 requests general annotations support, but this is specifically about axis-integrated markers.