Override datum style when not hovered

[bmaupin]

I have a small app where I've implemented a bump chart using react-vis: https://bmaupin.github.io/langtrends/

Since react-vis has been deprecated for a while, I'd like to migrate it to react-charts. I've been able to get most of the existing functionality working with react-charts, except for one thing: the circle on each data point in the line, which is a common feature of bump charts (https://www.google.com/search?q=bump+chart&tbm=isch)

I see this in the documentation which sounds like it might be what I'm looking for?

• line
  • 1 Circle per datum (optional)

https://react-charts.tanstack.com/docs/api#secondary-axis-element-types

I was able to override the datum style using getDatumStyle in the chart options but it only seems to work when the datum is hovered (or just before/after hover if I use status === 'none'). I'm trying to set a style for when the datum doesn't have a hovered status.

Any help would be appreciated.

Thanks!

[bmaupin]

I dug through the source and found it: showDatumElements: true in the y axis options will show the circles.

Then I can set the default style in getSeriesStyle, e.g.

          getSeriesStyle: (series) => {
            return {
              circle: {
                r: 5,
              },
            };
          },