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

dropShadow in a multi-series chart applies dropShadow to other series after hovering #4167

Labels
bug Something isn't working verified

Comments

@ericlighthofmann
Copy link

ericlighthofmann commented Dec 21, 2023

Description

I have a chart with two series, a bar series and a line series. I've applied dropShadow to the line series here:

dropShadow: { enabled: true, enabledOnSeries: [1], top: 5, left: 5, blur: 5, opacity: 0.2 }

After hovering over a point in the bar series to view the tooltip, the dropShadow is applied to my bar and persists until the chart is re-rendered. See the screenshot, I hovered over the first two points but did not hover over the third:

image

Steps to Reproduce

  1. Create a multi series chart and apply dropShadow to one series.
  2. Have a shared tooltip and hover over the series. See the dropShadow be applied to the other series.

Reproduction Link

Here is a minimal example - hover over a bar in the series to see the dropShadow be applied to the bar:
https://codepen.io/Eric-Hofmann/pen/MWxWeYZ

Edit:

Removing the hover state solves it, but is still probably a bug:

states: { hover: { filter: { type: 'none', } }, }

@ericlighthofmann ericlighthofmann added the bug Something isn't working label Dec 21, 2023
mouxdev pushed a commit to mouxdev/apexcharts.js that referenced this issue May 29, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment