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 tick prop
- 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 markers prop on XAxis/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 tick callback - 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.
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:
<ReferenceLine>with a custom label componentXAxis tickprop<Customized>component for fully custom SVG renderingThese 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 stylingAn
<AxisMarker>component - Child of XAxis/YAxis for declarative markersEnhanced
tickcallback - Allow returning special styling/labels for specific tick valuesDescribe alternatives you've considered
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.