Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

v2.9.3 tooltip does not render on right half of Line graph #4717

Open
Forfold opened this issue Jul 2, 2024 · 4 comments
Open

v2.9.3 tooltip does not render on right half of Line graph #4717

Forfold opened this issue Jul 2, 2024 · 4 comments
Labels
bug General bug label

Comments

@Forfold
Copy link

Forfold commented Jul 2, 2024

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

Bug, reference PR to dep update

What is the current behavior?

After upgrading from v2.9.2, we noticed that our tooltip does not render on the right half of our Line graph. This happens on an upgrade to v2.9.3 or any future release. This PR seems to be the only change? When I hover over the line that does not render a tooltip, my console log in the tooltip's content prop does still show.

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.

Codesandbox Link

Left side of graph, mouseover a line:
Screenshot 2024-07-02 at 8 58 50 AM

Right side of graph, mouseover a line:
Screenshot 2024-07-02 at 8 58 56 AM

What is the expected behavior?

Tooltip renders as expected

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

Chrome, Yes, v2.9.2

@ckifer
Copy link
Member

ckifer commented Jul 2, 2024

Remove the data prop from the high level chart. Then your Tooltip will render normally.

This shouldn't have been a breaking change though.. still looking into it

@Forfold
Copy link
Author

Forfold commented Jul 2, 2024

Oooh that was simple. Thank you @ckifer! Hoping you can find the breaking change soon.

The only change I noticed when upgrading from 2.9.2 to 2.9.3 was in src/chart/generateCategoricalChart.tsx:

const { data = chartData } = child.props;

->

const data = (child.props.data ?? chartData).slice(state.dataStartIndex, state.dataEndIndex   1);

@ckifer
Copy link
Member

ckifer commented Jul 2, 2024

No problem!

Your data array that you pass into the high level chart is not in the form that recharts knows how to react to since it consists of nested series. None of the datakeys that you reference in the chart itself are within that structure. If all of your data was a flat array of objects and your series were instead different keys per line
i.e.

data = [
  {
    name: 'xAxis1'
    series1: 100
    series2: 300
  }
]

Then your data prop on the high level chart would work as expected.

I think this is a side-effect of that expectation - one or the other dataset has to take precedence at some point. We should always prefer the dataset on the child, but in this case there is a conflict for some reason

@ckifer
Copy link
Member

ckifer commented Jul 2, 2024

Actually this makes a lot of sense and is a bug.

Notice that the first 4 datapoints are the ones with the tooltip - this is because your high level array of objects has 4 items. Those dataStartIndex/dataEndIndex are slicing the data the tooltip gets unexpectedly because it is referencing the length of the top level dataset

Luckily you have an easy workaround

@HHongSeungWoo fyi since this was your PR if you'd like to address it feel free

@ckifer ckifer added the bug General bug label label Jul 2, 2024
HHongSeungWoo added a commit to HHongSeungWoo/recharts that referenced this issue Jul 3, 2024
ckifer pushed a commit that referenced this issue Jul 4, 2024
…de the dataIndex range. (#4718)

<!--- Provide a general summary of your changes in the Title above -->

## Description

<!--- Describe your changes in detail -->

## Related Issue

#4717 
<!--- This project only accepts pull requests related to open issues -->
<!--- If suggesting a new feature or change, please discuss it in an
issue first -->
<!--- If fixing a bug, there should be an issue describing it with steps
to reproduce -->
<!--- Please link to the issue here: -->

## Motivation and Context

<!--- Why is this change required? What problem does it solve? -->

## How Has This Been Tested?

<!--- Please describe in detail how you tested your changes. -->
<!--- Include details of your testing environment, and the tests you ran
to -->
<!--- see how your change affects other areas of the code, etc. -->

## Screenshots (if appropriate):

## Types of changes

<!--- What types of changes does your code introduce? Put an `x` in all
the boxes that apply: -->

- [x] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing
functionality to change)

## Checklist:

<!--- Go over all the following points, and put an `x` in all the boxes
that apply. -->
<!--- If you're unsure about any of these, don't hesitate to ask. We're
here to help! -->

- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [ ] I have added tests to cover my changes.
- [ ] I have added a storybook story or extended an existing story to
show my changes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug General bug label
Projects
None yet
Development

No branches or pull requests

2 participants