Skip to content

Add built-in support for "Today" marker on time-based charts #6889

@PaulRBerg

Description

@PaulRBerg

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:

  1. 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" } }]}
    />
  2. An <AxisMarker> component - Child of XAxis/YAxis for declarative markers

    <XAxis dataKey="date">
      <AxisMarker value={Date.now()} label="Today" />
    </XAxis>
  3. 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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions