recharts / recharts

Redefined chart library built with React and D3
http://recharts.org
MIT License
24.19k stars 1.72k forks source link

Single or isolated data point will not render any visual cue besides Tooltip. #5218

Open joaovfabri opened 3 weeks ago

joaovfabri commented 3 weeks ago

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

What is the current behavior?

Current Version of Recharts (2.12.7) still presents a bug identical to the one reported in this issue #149.

Rendering an Area / Bar chart with isolated points (not only with single data points) will not display any representation in the chart for that point.

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem via codesandbox or similar (template: https://codesandbox.io/p/sandbox/simple-line-chart-v25dl4).

Reproduction is the same as mentioned issue, #149

What is the expected behavior?

Similar libraries will represent these points with e.g. lines coming from the x axis and back: Screenshot 2024-11-07 at 08 45 30

Which versions of Recharts, and which browser / OS are affected by this issue? Did this work in previous versions of Recharts?

(2.12.7) Any browser

ckifer commented 3 weeks ago

Hey, sorry that this is still an issue. That issue was a closed a long time ago before any of the current maintainers were around.

Reproduction https://codesandbox.io/p/sandbox/simple-line-chart-forked-tl8mw4

Looks like the intention is that a dot should be rendered if there is one datapoint. The problem being one data point is different than many datapoints with only 1 of them having a Y value

image
ckifer commented 3 weeks ago

https://github.com/recharts/recharts/blob/fd50fb8c67a60b5b9e8af3388afc4212396838ed/src/cartesian/Area.tsx#L513

That'll do it

ckifer commented 3 weeks ago

Don't see any issue with Bar chart https://codesandbox.io/p/sandbox/simple-line-chart-forked-9f449v

joaovfabri commented 3 weeks ago

Hey! that's a lightning fast response, thanks a lot for that. It can be a problem as well when a set of points for a line contains multiple Nulls and a single point in between, like

{ varX: "Mon", varY: 10 },
{ varX: "Tue", varY: 8 },
{ varX: "Wed", varY: 5 },
{ varX: "Thu" },
{ varX: "Fri" },
{ varX: "Sat", varY: 10 },
{ varX: "Sun" },
ckifer commented 3 weeks ago

I believe if you are using the dot prop the dot will show in that case. If you are not using the dot prop I'm not sure what to do there - If you want those lines connected you can use connectNulls, otherwise it's just a point (without a dot) that isn't connected to anything.

Open to suggestions I guess.

Will look at this again tomorrow (it's late my time). Thanks!

ckifer commented 3 weeks ago

with dot image

joaovfabri commented 3 weeks ago

Well, that's the problem, we don't want to use the dot prop to conform with our design. I can understand the difficulty of rendering a line, but would it make sense to enforce the Dot rendering on points like this, regardless of it using the dots or not?

ckifer commented 3 weeks ago

You can make a custom dot which can be whatever you'd like as long as you have the info to render it correctly. But you'd have to do it conditionally else you'll always have a line and it will look strange.

I've never seen any other charting library use a line or anything but a dot to indicate an unconnected area data point. Not saying we shouldn't allow something different but this is current state.

Let's try a custom dot and see if it works out. Otherwise we can mark this a feature request.