ReferenceLine always positioned at 0 if value passed is not a string, console error thrown about recharts HOT 23 CLOSED

lol, interval 0 won't watch for collisions. Try "equidistantPreserveStart". I guess typescript in codesandbox wasn't working or else I'd have seen that need to cast.

I would just set to the length of your data personally

from recharts.

you can set allowDuplicatedCategory={false} if you want the line to show even when there are duplicates. This essentially removes the duplicate during rendering.

The problem is that when there is a categorical axis with a duplicate, the code uses serial numbers instead of the actual categories as the domain.

When duplicated categories are allowed, it would render it like so

and now the reference line does not know where to render.
Do I render at the first instance of 27/12/2023, or the second?

To be fair this shouldn't break other reference lines but it does and it looks like the serial number thing is the reason. Reference code here https://github.com/recharts/recharts/blob/3.x/src/chart/generateCategoricalChart.tsx#L384

@PavelVanecek this is interesting and a potential problem when touching these files. Just FYI

from recharts.

Can you give some code? What field are you using for your XAxis?

from recharts.

I've added an example out of frustration of a second issue https://codesandbox.io/p/sandbox/wandering-cookies-5tkqwq

So, it won't place the line at the correct position if the axis isn't a number and if the particular value isn't one of the chosen ticks.

from recharts.

Thank you 🙏🏼. Its hard to help without anything to go off of.

Apologies for the frustration.

If an axis is type of category (default), then the item used in ReferenceLine must be one of those categories. If axis type is number, then the item used in ReferenceLine must be a number.

Based on the example, it looks like your axis is being treated as if it was categorical even though its a number (sometimes you want that, sometimes you don't. I'm not sure what you need here). Changing the axis type to number and then adjusting the domain allows me to see all of the reference lines.

          <XAxis
            dataKey="label"
            strokeOpacity="0"
            tick={{ fill: 'var(--foreground)', fillOpacity: '0.6' }}
            tickLine={false}
            domain={([dataMin, dataMax]) => [dataMin, dataMax + 10000000]}
            type="number"
            // tickFormatter={(value) => new Date(value).toLocaleDateString(locale)}
          />

if the particular value isn't one of the chosen ticks

This is a bug for sure, it shouldn't matter if it is a tick or not

from recharts.

if I set ticks on XAxis to a singular datapoint on a number axis or a category axis the Reference Lines don't disappear for datapoints that are not ticks, so I don't think the ticks thing is an issue. But will keep checking

from recharts.

As for the original issue, it seems to work fine with strings

        <XAxis
            dataKey="label"
            strokeOpacity="0"
            tick={{ fill: 'var(--foreground)', fillOpacity: '0.6' }}
            tickLine={false}
          />
       <ReferenceLine x="27/11/2023" ifOverflow="extendDomain" stroke="red" strokeWidth={2} label="hello" isFront />
       <ReferenceLine x="27/10/2023" ifOverflow="extendDomain" stroke="red" strokeWidth={2} label="hello" isFront />

With data like the following (treated as categorical since it is a string):

    const data = [
      {
        id: 2114,
        date: '2024-02-13T02:15:23.000Z',
        crawled: 967531,
        assessed: 967531,
        frequency: 265996,
        value: 265996,
        label: '27/9/2023',
      },
      {
        id: 2115,
        date: '2024-02-14T13:30:32.000Z',
        crawled: 967846,
        assessed: 967846,
        frequency: 266059,
        value: 266059,
        label: '27/10/2023',
      },
      {
        id: 2116,
        date: '2024-02-15T07:14:57.000Z',
        crawled: 967926,
        assessed: 856609,
        frequency: 273031,
        value: 273031,
        label: '27/11/2023',
      },
      {
        id: 2117,
        date: '2024-02-16T02:50:25.000Z',
        crawled: 968143,
        assessed: 856811,
        frequency: 273067,
        value: 273067,
        label: '27/12/2023',
      },
    ];

from recharts.

Okay I worked out why I couldn't make strings work: if there's ANY duplicate labels, even labels which don't match the specified, it will not draw any reference lines.

Uncomment the 4 item in the data array to see this bug in action

https://codesandbox.io/p/sandbox/wandering-cookies-forked-d339y2

from recharts.

Hmm. allowDuplciatedCategory is defaulted to true on the XAxis which shouldn't affect reference lines...

I'll check the sandbox when I get a chance, thanks.

from recharts.

So, to clarify, adding allowDuplicatedCategory={false} to the problem axis will allow reference lines to render but only if there's a matching tick (based on my testing)

from recharts.

Ok, will check that.

Either way, there's some unwanted behavior here so labeled as a bug. Ideally we would render all reference lines that can be rendered (on non-duplicate axis items) and then either render a line at both duplicates, or throw a clear error saying what the issue is.

from recharts.

Sounds good to me. You might want more options for duplicates but just working at all with them would be great to start - maybe first match with the behaviour noted somewhere.

Here's another fork to show the previously mentioned behaviour where I would expected to see a second reference line between
https://codesandbox.io/p/sandbox/wandering-cookies-forked-d339y2

from recharts.

@justrealmilk the sandbox given uses values for x that do not represent one of the categories in the data.

From the docs:

If the specified x-axis is a category axis, the value of x must be one of the categories, otherwise no line will be drawn.

In this case, a line is drawn in the incorrect spot rather than no line which needs fixed. But we can't interpolate between labels when all of the labels are just strings. They don't have to be one of the generated ticks per se, just one of the values in the data.

As soon as you change x={}.. to a label that is a part of the data, the lines show up.

from recharts.

but there's plenty of occasions on which you'd want to display reference lines even if they don't match a precise value in the data set - especially for a time series for example

from recharts.

As mentioned earlier, XAxis is treated as categorical by default. Its impossible to interpolate between categories that are just strings. In order to interpolate by number, you'll have to use type="number" on the XAxis and use a formatter to get the display value you want

from recharts.

that's an excellent point

from recharts.

https://codesandbox.io/p/sandbox/wandering-cookies-forked-ht82yq?file=%2Fsrc%2FApp.js%3A99%2C20

from recharts.

Yeah it's all working now! I can't remember if there's an actual bug or not anymore. In any case, converting to a number type axis meant tickCount kicked in and defaulted to 5 ticks so now I'm abusing by setting it to 1000 so that it displays as many as it can fit with the tick labels being snug. It works but maybe there's a better way?

from recharts.

I can't remember if there's an actual bug or not anymore

I'll use this issue to track the fact that ReferenceLines render at 0 when they are invalid and fix that

maybe there's a better way

Try interval={0} and tickCount={null}?

from recharts.

tickCount={1000}

interval={0} tickCount={null as any} 😅

from recharts.

Another reason the lines appeared at 0 was because of ifOverflow="extendDomain" without that set this bug isn't noticeable because the data gets cut off which is probably why no one reported it yet

from recharts.

#4244

from recharts.

Ok the "bug fix" here is merged though won't be released until v3. Going to close this issue since your issues have cleared up and the NaN behavior has been mitigated for the future

from recharts.