How to target axis with ReferenceLine if underlying data type is not number or string?

[tomashaddad]

Hi,

I'm using Recharts 2.12.3. I have data of shape:

type RechartsDataFormat = {
  date: Date | null;
  // other 
};

and display it on a Composed chart:

<ComposedChart
  data={rechartsData}
>
  <CartesianGrid />
  <XAxis
    dataKey="date"
    tickFormatter={(date) => moment(date).format("DD/MM/YY")}
  >
    <Label value="Date" position="insideBottom" />
  </XAxis>
// rest of code

I'd like to draw a vertical reference line on click:

<ReferenceLine yAxisId="left" stroke="dimgray" x={row?.date} />

But this throws an error because x?: number | string;. I thought Recharts might be targeting the formatted tick labels, but after messing with the LineChartWithReferenceLines example on your website it seems like it ignores the formatting and only searches for matching values in the original data object.

AFAIK the only way around this is to change the data I pass to Recharts to not have a raw date (i.e., preformat it), but this introduces a number of downstream changes that complicate my code.

Am I doing something wrong?

[ckifer]

You have to be getting your data from somewhere and since Date isn't serializable it has to come in a different form than Date correct?

Date isn't supported right now, mostly for that reason (and legacy reasons that I wasn't around for).

So you're not doing anything wrong per se, but recharts won't behave unless you use string or number data.

Usually one would get dates as a string or a number and then format them using Date (or a library) in tickFormatter on the axis