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

BarChart with stacked bars and Tooltip with shared={false} break bars color #4101

Closed
1 task done
yonatandb opened this issue Jan 31, 2024 · 9 comments
Closed
1 task done
Labels
bug General bug label

Comments

@yonatandb
Copy link

yonatandb commented Jan 31, 2024

  • I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Edit on CodeSandbox

Steps to reproduce

any simple stacked bars chart with tooltip with the prop shared set to false

What is expected?

show tooltip without chainring the bar color

What is actually happening?

when hovering the bars, all others bar fill color change to the same color as the hovered one

recharts-tooltip

Environment Info
Recharts v2.11
React 18
System mac sonoma 14.3
Browser chrome 121
@ckifer
Copy link
Member

ckifer commented Jan 31, 2024

Did this break in 2.11 or has it always been like this?

@ckifer
Copy link
Member

ckifer commented Jan 31, 2024

FYI @PavelVanecek

@yonatandb
Copy link
Author

Did this break in 2.11 or has it always been like this?

apparently it happens in version 2.7.1 as well

@ckifer ckifer added the bug General bug label label Jan 31, 2024
@Pave91
Copy link

Pave91 commented Feb 5, 2024

I can confirm, it happened to me after updating next to 14.0.4, may it relate?

@ckifer
Copy link
Member

ckifer commented Feb 5, 2024

@Pave91 did recharts update too or just next?

@Pave91
Copy link

Pave91 commented Feb 6, 2024

We didn't update recharts, I'm not sure where exactly it showed, I thought it could be related to some other update a noticed where project setup changed, but now I can't say it was with next with certainity.
Version of recharts we are working with is 2.3.2

@ckifer
Copy link
Member

ckifer commented Feb 6, 2024

I found the bug and have a PR out for it so no worries

ckifer added a commit that referenced this issue Feb 8, 2024
<!--- Provide a general summary of your changes in the Title above -->

## Description

<!--- Describe your changes in detail -->
We, a few months ago, introduced changes for a consistent interface of
`activeShape`

#3756

In doing so we created a regression when a bar `shape` is different than
the default activeBar of `true` (and therefore a regular Rectangle
component)

This causes components to change to Bar on hover - see
[sandbox](https://codesandbox.io/p/sandbox/mixed-bar-chart-forked-2wdtzj?file=%2Fpackage.json%3A11%2C21)

Also noticed TS freaking out in some of our tests. This.. isn't good and
means that the usability of some of these things is quite terrible ...

## Related Issue

<!--- 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: -->
#4103 and #4101

## Motivation and Context

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

## 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. -->
- Tests continue to pass besides the ones that should have broken
- Test by hand, everything else is the same

## Screenshots (if appropriate):

<img width="453" alt="image"
src="https://github.com/recharts/recharts/assets/25180830/2e27eeb8-5c38-4f5a-b05a-94f91ae60fb8">
Still works

Does not break custom shape 
<img width="207" alt="image"
src="https://github.com/recharts/recharts/assets/25180830/23f35287-db95-4157-9a76-c5971f0f1b76">


## 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! -->

- [X] My code follows the code style of this project.
- [ ] My change requires a change to the documentation.
- [ ] I have updated the documentation accordingly.
- [X] I have added tests to cover my changes.
- [ ] I have added a storybook story or extended an existing story to
show my changes
- [X] All new and existing tests passed.

Co-authored-by: Coltin Kifer <ckifer@amazon.com>
@ckifer
Copy link
Member

ckifer commented Feb 9, 2024

fixed in 2.12!

@ckifer ckifer closed this as completed Feb 9, 2024
renovate bot added a commit to SAP/ui5-webcomponents-react that referenced this issue Feb 9, 2024
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [recharts](https://togithub.com/recharts/recharts) | [`2.11.0` ->
`2.12.0`](https://renovatebot.com/diffs/npm/recharts/2.11.0/2.12.0) |
[![age](https://developer.mend.io/api/mc/badges/age/npm/recharts/2.12.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/recharts/2.12.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/recharts/2.11.0/2.12.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/recharts/2.11.0/2.12.0?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>recharts/recharts (recharts)</summary>

###
[`v2.12.0`](https://togithub.com/recharts/recharts/releases/tag/v2.12.0)

[Compare
Source](https://togithub.com/recharts/recharts/compare/36c14c63d271d05b701e1d32ac931de0fd30b360...v2.12.0)

#### What's Changed

Bug fixes and a few small new features.

Releasing 2.12.0 to create a "clean slate" as contributors are
discussing next moves for recharts.

We will try to focus on upgrades, architectural changes, and
long-pending breaking changes so we can release a recharts v3. This will
not be a large major version, or one hard to upgrade to, but rather a
major version bump to prevent us from breaking people with library
upgrades, large refactors, etc. Feature parity should hold. Thanks!

#### Features

- `Bar`: Accept a callback function for `minPointSize` so it can be
determined by data by [@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4099
closes
[recharts/recharts#2819
- `Accessibility`: Enable screen reader support with accessibilityLayer
and default tooltip by
[@&#8203;julianna-langston](https://togithub.com/julianna-langston) in
[recharts/recharts#4077

#### Fix

- `Bar`: `activeBar` should not be true by default, fixes a breaking
change from 2.9.0 by [@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4139
- fixes
[recharts/recharts#4103
and
[recharts/recharts#4101
- `Scatter`: fix non-unique key errors by
[@&#8203;imagineLife](https://togithub.com/imagineLife) in
[recharts/recharts#4087
- fixes
[recharts/recharts#4151
and
[recharts/recharts#4060
- `Pie`: fix non-unique key errors by
[@&#8203;imagineLife](https://togithub.com/imagineLife) in
[recharts/recharts#4106
- `Tooltip`: fix bug that caused throttled tooltip to stay active when
moving mouse quickly by
[@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) in
[recharts/recharts#4100
fixes
[recharts/recharts#4093

#### Chore

- Cleanup, tests, and refactoring work. Thanks
[@&#8203;PavelVanecek](https://togithub.com/PavelVanecek)
- Upgrade react smooth, remove `translateStyle`, remove prop-types as a
peerDep
- **NOTE**: animations will no longer have browser prefixes on them.
Browsers have good support for this
(https://caniuse.com/?search=transforms)
-   Upgrade dev dependencies
    -   Upgrade TypeScript to 4.9.5 (no definition changes from upgrade)

#### Storybook

-   New storybook stories and doc updates

#### New Contributors

- [@&#8203;TRFielder](https://togithub.com/TRFielder) made their first
contribution in
[recharts/recharts#4088

**Full Changelog**:
recharts/recharts@v2.11...v2.12.0

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined),
Automerge - At any time (no schedule defined).

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/SAP/ui5-webcomponents-react).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy4xNzMuMCIsInVwZGF0ZWRJblZlciI6IjM3LjE3My4wIiwidGFyZ2V0QnJhbmNoIjoibWFpbiJ9-->

---------

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Lukas Harbarth <lukas.harbarth@sap.com>
@yonatandb
Copy link
Author

@ckifer Thank you!

renovate bot added a commit to specfy/specfy that referenced this issue Feb 21, 2024
[![Mend
Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com)

This PR contains the following updates:

| Package | Change | Age | Adoption | Passing | Confidence |
|---|---|---|---|---|---|
| [recharts](https://togithub.com/recharts/recharts) | [`2.9.3` ->
`2.12.1`](https://renovatebot.com/diffs/npm/recharts/2.9.3/2.12.1) |
[![age](https://developer.mend.io/api/mc/badges/age/npm/recharts/2.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/recharts/2.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/recharts/2.9.3/2.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|
[![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/recharts/2.9.3/2.12.1?slim=true)](https://docs.renovatebot.com/merge-confidence/)
|

---

### Release Notes

<details>
<summary>recharts/recharts (recharts)</summary>

###
[`v2.12.1`](https://togithub.com/recharts/recharts/releases/tag/v2.12.1)

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.12.0...v2.12.1)

#### What's Changed

Unintentional regression broke panoramic/compact Brush in 2.11.0 and
2.12.0, backport the fix to 2.x as we work on 3.x

##### Fix

- fix: compact render should read from context, fixes brush panorama by
[@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4194
fixes
[recharts/recharts#4193

**Full Changelog**:
recharts/recharts@v2.12.0...v2.12.1

###
[`v2.12.0`](https://togithub.com/recharts/recharts/releases/tag/v2.12.0)

[Compare
Source](https://togithub.com/recharts/recharts/compare/36c14c63d271d05b701e1d32ac931de0fd30b360...v2.12.0)

#### What's Changed

Bug fixes and a few small new features.

Releasing 2.12.0 to create a "clean slate" as contributors are
discussing next moves for recharts.

We will try to focus on upgrades, architectural changes, and
long-pending breaking changes so we can release a recharts v3. This will
not be a large major version, or one hard to upgrade to, but rather a
major version bump to prevent us from breaking people with library
upgrades, large refactors, etc. Feature parity should hold. Thanks!

#### Features

- `Bar`: Accept a callback function for `minPointSize` so it can be
determined by data by [@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4099
closes
[recharts/recharts#2819
- `Accessibility`: Enable screen reader support with accessibilityLayer
and default tooltip by
[@&#8203;julianna-langston](https://togithub.com/julianna-langston) in
[recharts/recharts#4077

#### Fix

- `Bar`: `activeBar` should not be true by default, fixes a breaking
change from 2.9.0 by [@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4139
- fixes
[recharts/recharts#4103
and
[recharts/recharts#4101
- `Scatter`: fix non-unique key errors by
[@&#8203;imagineLife](https://togithub.com/imagineLife) in
[recharts/recharts#4087
- fixes
[recharts/recharts#4151
and
[recharts/recharts#4060
- `Pie`: fix non-unique key errors by
[@&#8203;imagineLife](https://togithub.com/imagineLife) in
[recharts/recharts#4106
- `Tooltip`: fix bug that caused throttled tooltip to stay active when
moving mouse quickly by
[@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) in
[recharts/recharts#4100
fixes
[recharts/recharts#4093

#### Chore

- Cleanup, tests, and refactoring work. Thanks
[@&#8203;PavelVanecek](https://togithub.com/PavelVanecek)
- Upgrade react smooth, remove `translateStyle`, remove prop-types as a
peerDep
- **NOTE**: animations will no longer have browser prefixes on them.
Browsers have good support for this
(https://caniuse.com/?search=transforms)
-   Upgrade dev dependencies
    -   Upgrade TypeScript to 4.9.5 (no definition changes from upgrade)

#### Storybook

-   New storybook stories and doc updates

#### New Contributors

- [@&#8203;TRFielder](https://togithub.com/TRFielder) made their first
contribution in
[recharts/recharts#4088

**Full Changelog**:
recharts/recharts@v2.11...v2.12.0

###
[`v2.11.0`](https://togithub.com/recharts/recharts/compare/v2.10.4...36c14c63d271d05b701e1d32ac931de0fd30b360)

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.10.4...36c14c63d271d05b701e1d32ac931de0fd30b360)

###
[`v2.10.4`](https://togithub.com/recharts/recharts/releases/tag/v2.10.4)

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.10.3...v2.10.4)

#### What's Changed

Fix some older bugs annoying bugs, TS typings, update to the storybook
theme, and more

##### Fix

- `ResponsiveContainer`: fix `ref.current.current` without breaking
users using current implementation by
[@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) in
[recharts/recharts#4008
- closes
[recharts/recharts#3718
- `Brush`: Allow Brush to be controlled with start and end index via
state by [@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4034
- closes
[recharts/recharts#2404
- `Legend`: TypeScript - Add the dataKey type to legend props by
[@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) in
[recharts/recharts#4035
- closes
[recharts/recharts#2909
- `Pie`: TypeScript - added `payload` to `PieSectorDataItem` type by
[@&#8203;PavelVanecek](https://togithub.com/PavelVanecek) in
[recharts/recharts#4030
- `Pie`: unique sector keys fix by
[@&#8203;imagineLife](https://togithub.com/imagineLife) in
[recharts/recharts#4009
closes
[recharts/recharts#3273
- `RadialBar`: allow className to be passed to Radial Bar background by
[@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4027
- closes
[recharts/recharts#4011

##### Storybook

- Storybook: Added Legend component story! by
[@&#8203;AnujSharma141](https://togithub.com/AnujSharma141) in
[recharts/recharts#4039
- Storybook: add controlled brush storybook entry by
[@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#4032
- Storybook: Custom Storybook theme for Recharts brand by
[@&#8203;csdiehl](https://togithub.com/csdiehl) in
[recharts/recharts#4016

#### New Contributors

- [@&#8203;csdiehl](https://togithub.com/csdiehl) made their first
contribution in
[recharts/recharts#4016
- [@&#8203;AnujSharma141](https://togithub.com/AnujSharma141) made their
first contribution in
[recharts/recharts#4039

**Full Changelog**:
recharts/recharts@v2.10.3...v2.10.4

###
[`v2.10.3`](https://togithub.com/recharts/recharts/releases/tag/v2.10.3)

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.10.2...v2.10.3)

#### What's Changed

- Fix non-unique react `key` bug(s) by
[@&#8203;imagineLife](https://togithub.com/imagineLife) in
[recharts/recharts#4006
- closes
[recharts/recharts#4004

#### New Contributors

- [@&#8203;hkmarques](https://togithub.com/hkmarques) made their first
contribution in
[recharts/recharts#4002

**Full Changelog**:
recharts/recharts@v2.10.2...v2.10.3

###
[`v2.10.2`](https://togithub.com/recharts/recharts/releases/tag/v2.10.2)

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.10.1...v2.10.2)

#### What's Changed

Patch some bugs from 2.9 / 2.10

##### Fix

- `Tooltip`: Fix tooltip rendering crash when activeItem is undefined by
[@&#8203;tran-simon](https://togithub.com/tran-simon) in
[recharts/recharts#3982
- `Cursor`: should no longer show gray background on hover where there
was none previously
[@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo) in
[recharts/recharts#3992
- `Tooltip`: show tooltip when `data` prop is on individual cartesian
component by [@&#8203;HHongSeungWoo](https://togithub.com/HHongSeungWoo)
in
[recharts/recharts#3988
- `LabelList` - TypeScript: LabelList offset prop issue by
[@&#8203;ckifer](https://togithub.com/ckifer) in
[recharts/recharts#3999

##### Accessibility

- `Brush`: set default aria-label and allow value override by
[@&#8203;enriquetamames-cpi](https://togithub.com/enriquetamames-cpi) in
[recharts/recharts#3950

##### Refactor / Cleanup

- Removing some eslint errors for "no array index key" by
[@&#8203;imagineLife](https://togithub.com/imagineLife)

#### New Contributors

- [@&#8203;tran-simon](https://togithub.com/tran-simon) made their first
contribution in
[recharts/recharts#3982
- [@&#8203;enriquetamames-cpi](https://togithub.com/enriquetamames-cpi)
made their first contribution in
[recharts/recharts#3950

**Full Changelog**:
recharts/recharts@v2.10.1...v2.10.2

###
[`v2.10.1`](https://togithub.com/recharts/recharts/releases/tag/v2.10.1):
Patch: Do not include types from test folder

[Compare
Source](https://togithub.com/recharts/recharts/compare/15328ec11b78968c847b43b646767b7b0c0d9e36...v2.10.1)

Fixes
[recharts/recharts#3978

**Full Changelog**:
recharts/recharts@v2.10...v2.10.1

###
[`v2.10.0`](https://togithub.com/recharts/recharts/compare/v2.9.3...15328ec11b78968c847b43b646767b7b0c0d9e36)

[Compare
Source](https://togithub.com/recharts/recharts/compare/v2.9.3...15328ec11b78968c847b43b646767b7b0c0d9e36)

</details>

---

### Configuration

📅 **Schedule**: Branch creation - "after 4pm every weekday" in timezone
Europe/Paris, Automerge - At any time (no schedule defined).

🚦 **Automerge**: Enabled.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the
rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about this update
again.

---

- [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check
this box

---

This PR has been generated by [Mend
Renovate](https://www.mend.io/free-developer-tools/renovate/). View
repository job log
[here](https://developer.mend.io/github/specfy/specfy).

<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzNy44MS4zIiwidXBkYXRlZEluVmVyIjoiMzcuMjAwLjAiLCJ0YXJnZXRCcmFuY2giOiJjaG9yZS9yZW5vdmF0ZUJhc2VCcmFuY2gifQ==-->

Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
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

3 participants