CODEWITHSUNDEEP
javascriptreactjschartschart.js
Arthur
Arthur

Reputation: 3506

Chart works uncorrectly chart.js

CodeSandbox

When I try to change chart data with the top panel — it works, but when I hover on chart it changes data repeatedly. Why is this happening?

For example click on the 'week' and after that hover on the chart below.

Upvotes: 3

Views: 149

Answers (2)

Arthur
Arthur

Reputation: 3506

I added chart to global scope. If chart exists and is not equal null ⇒ it will be destroyed. Corresponding flickering was vanished

if (window.eChart && window.eChart !== null) {
  window.eChart.destroy();
}

Upvotes: 2

Daniel Alexandre
Daniel Alexandre

Reputation: 186

I was watching the CodeSandbox that you gave, and I see that you have the tooltips intersect with value : false and that I think it will use the tooltip mode all the time, and not when you want soo try to put it like this and see if it works:

tooltips: {
      mode: "index",
      intersect: true
    },

Sugestion: Add this to renderLi(refering to CodeSandbox sample)

onMouseOver={() => {
      this.setState({ selectedIdx: key });
      this.props.itemKey(key);
    }}

Upvotes: 2

Related Questions