question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Bar Series onValueMouseOut not triggering

See original GitHub issue

I am using vertical clustered bar chart. Rest of the functionality works well, but onValueMouseOut does not trigger when I leave a particular bar. Here is my snippet from React render:

{
          data.map((item, i) => {
            if (!item.disabled) {
              return (
                <BarSeries
                  key={i}
                  color={item.color}
                  data={item.datum}
                  title={item.title}
                  onValueMouseOver={(datapoint, event) => getHintData(datapoint, event, item.title)}
                  # **onValueMouseOut**={(datapoint, event) => this._removeHintData(datapoint, event)}
                  onValueClick={(datapoint, event, j) => handleBarClick(datapoint, event, j, item.datum)}
                />
              );
            }
            return null;
          })
        }

Issue Analytics

  • State:open
  • Created 6 years ago
  • Reactions:10
  • Comments:13 (3 by maintainers)

github_iconTop GitHub Comments

9reactions
mizozobucommented, Nov 23, 2018

My workaround was to have animation in state, and set it to true by default, set it to false on onValueMouseOver, and set it back to true on onValueMouseOut.

It will still be nice if this gets fixed since I don’t like having another state in my component.

<VerticalBarSeries
    data={data}
    onValueMouseOver={() => { this.setState({ animation: true }) }}
    onValueMouseOut={() => { this.setState({ animation: false }) }}
    animation={this.state.animation}
/>
1reaction
mcnuttandrewcommented, Aug 18, 2017

Hey @ArbaazAnDossani

I did a cursory check on some of the examples and they appear to have their onValueMouseOver/onValueMouseOut/onValueClick working in good order. is there a chance that you animation on? It is a known issue (#381) that animation causes problems here. Additionally you shouldn’t be using BarSeries (bar-series) directly, as that will most likely cause problems?

Read more comments on GitHub >

github_iconTop Results From Across the Web

Mouseover not getting triggered when two line mark series are ...
When the mouse hovers on the mark, a hint is shown. In certain cases, this mouse over is not getting triggered. I have...
Read more >
Bar Series - react-vis
onValueMouseOut. Type: function. Default: none. This handler is triggered either when the user's mouse leaves a mark. The handler passes two arguments ...
Read more >
HighchartsReact mouseout event not triggering after chart's ...
It works, but if I try to add a mouseleave listener to the chart's series[0] and series[1], the event never triggers. Adding a...
Read more >
Building Custom Charts with react-vis - Aaron Moat
That's how we'll proceed for the rest of the article, where we build an Isotype series. The Goal. Let's build an Isotype plot...
Read more >
Creating a React visualization web app | by Jérôme Cukier
This is the 6th post in my Visualization with React series. ... A web app is a comprehensive system of code files working...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found