Disappearing lines in CartesianGrid

[ackvf]

Do you want to request a feature or report a bug?

Bug

version: recharts 1.0.0-beta.10

Linked are modified versions of original example for LineChart at jsfiddle.

What is the current behavior?

In first example, horizontal line is disappearing within a ResponsiveContainer. The line is actually missing in DOM as well, so it is not a display bug. The line is added back to DOM if the height is set back.

https://jsfiddle.net/xqjtetw0/1996/

Vertical lines are missing further in the graph. Notice three different densities.

https://jsfiddle.net/xqjtetw0/1997/

[kxxoling]

I encountered this case in v0.22.4 when the data passed into recharts changed, so I tried to upgrade Recharts to the newest version recharts 1.0.0-beta.10 but the issue still exists.

I dig a little and find data in CartesianGrid.xAxis.domain is an Array of 11 which is correct, but <g className="recharts-cartesian-grid-vertical" /> only has 10 element in the data array. I tried several times and the length in the inner g element is not always equals CartesianGrid.xAxis.domain.length - 1.

[username99987]

I'm experiencing the exact same issue. Any follow up on this?

[tafaust]

Still an issue. :(

[xile611]

Sorry for not handling your issue in time, please try the latest version. If the problem persists, please open a new issue according to the issue guide.
@tahesse

[ackvf]

@xile611 I am not working with recharts any more, but @tahesse reported the same issue just a bunch of days ago.

@tahesse Would you please verify the issue remains with newest version in your project?

[Brayve-Pancake]

Issue still exists! :(

[ckifer]

Hi all,

Sorry this got closed - labeled as a bug for now.

I'm not sure how this works but I think I have a working version of the initial issue code here:

Without looking at the code or knowing anything about how this works I'm not entirely sure this could be called a bug. With a responsive container and no property telling recharts how many lines you want, recharts has to determine where and when to render lines within a grid. Since there is nothing forcing n number of lines then that decision must be made somewhere similar to a breakpoint in CSS. In the working example above 107px to 106px is the breakpoint from two lines to three. The inconsistencies at the edges are because the breakpoint has not yet been hit to add or remove a line.

Any propositions here on how this should behave? Should recharts always render the grid with the same amount of lines even when squished by a shrinking container or expanded by a growing one?

[Lueton]

Hi all,

Sorry this got closed - labeled as a bug for now.

I'm not sure how this works but I think I have a working version of the initial issue code here:

Without looking at the code or knowing anything about how this works I'm not entirely sure this could be called a bug. With a responsive container and no property telling recharts how many lines you want, recharts has to determine where and when to render lines within a grid. Since there is nothing forcing n number of lines then that decision must be made somewhere similar to a breakpoint in CSS. In the working example above 107px to 106px is the breakpoint from two lines to three. The inconsistencies at the edges are because the breakpoint has not yet been hit to add or remove a line.

Any propositions here on how this should behave? Should recharts always render the grid with the same amount of lines even when squished by a shrinking container or expanded by a growing one?

Well i would say that the amount of lines wether vertical or horizontal should behave similar to the axis ticks. So if your y-axis has the labels/ticks [10, 20, 30] then there should be a line for every tick at least. So that the behavior in my image below does not happen (line is missing for 2,9M).