recharts: ReferenceLine always positioned at 0 if value passed is not a string, console error thrown
- I have searched the issues of this repository and believe that this is not a duplicate.
Reproduction link
https://codesandbox.io/p/sandbox/wandering-cookies-5tkqwq
Steps to reproduce
Create a chart (I use the ComposedChart) and draw some components. Add a reference line and specify x="string". The shape of my data was as follows and I was trying to draw on the label value:
{
"id": 1918,
"date": "2023-09-27T22:14:40.000Z",
"crawled": 934330,
"assessed": 934330,
"frequency": 244882,
"value": 244882,
"label": "27/9/2023"
}
What is expected?
Draw on the label.
What is actually happening?
“NaN” is passed to the SVG component and several errors are thrown to the console
| Environment | Info |
|---|---|
| Recharts | v2.12.1 |
| React | 18.2.0 |
| System | Windows |
| Browser | Chrome |
I searched around and then thought I’d try a number instead but obviously an axis of timestamps is useless so I’ll need to use the label formatter in place of converting my numbies to strings first
About this issue
- Original URL
- State: closed
- Created 4 months ago
- Comments: 23 (15 by maintainers)
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
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