react-charts icon indicating copy to clipboard operation
react-charts copied to clipboard

Feature request: Ability to not render certain data points in a series

Open bmaupin opened this issue 4 years ago • 2 comments

I have a small project where I show programming language trends in a bump chart: https://bmaupin.github.io/langtrends/

I'm currently using react-vis which has been deprecated for a long time and I'd like to migrate to react-charts. But I'm running into one breaking issue: I can't seem to find a way to tell it not to render a point.

For example, if I'm showing the top 10 programming languages with the most growth for a particular month, I may have data for 15 different languages, but for any given month only 10 of those will show at a time. I need a way to tell the others not to render.

The best I've come up with is to return a null value if I don't want the point to be drawn, but then it still gets drawn, sometimes underneath another point, sometimes on top of another point. undefined works similarly.

The best-case scenario is when it gets drawn underneath another point, but even then it shows a subtle outline that's worse if the point that's drawn has a darker colour than the one on top of it: point-outline-bug

If I look at the HTML source for that point, I can see that any point where I set an X and Y value of null, it's being rendered underneath that top left point.

It also seems to create weird tooltip behaviour although it's hard to pin it down.

I've tried to reproduce this as best as possible here: https://codesandbox.io/s/2p8j1

Thanks!

bmaupin avatar Dec 13 '21 19:12 bmaupin

While it would be nice if the null values weren't rendered, I was able to work around this using getDatumStyle :)

          getDatumStyle: (datum, _status) => {
            if (datum.secondaryValue === null) {
              return {
                circle: {
                  r: 0,
                } as CSSProperties,
              };
            } else {
              return {};
            }
          },

bmaupin avatar Dec 14 '21 18:12 bmaupin

Unfortunately with the workaround, the null values still show up in the tooltip (note Swift and Dart):

extra-zero-data

So it'd still be nice if they weren't rendered at all and excluded from the tooltip. I guess this would be more of a feature request than a bug, depending on the intended behaviour.

Thanks!

bmaupin avatar Jan 03 '22 19:01 bmaupin