Диаграмма работает некорректно chart.js

Question

CodeSandbox

Когда я пытаюсь изменить данные диаграммы с помощью верхней панели - это работает, но когда я нахожу на графике, это меняет данные несколько раз. Почему это происходит?

Например, нажмите на «неделю» и после этого наведите курсор на диаграмму ниже.

Answer 1

Я добавил диаграмму в глобальную область видимости. Если диаграмма существует и не равна нулю ⇒ она будет уничтожена. Соответствующее мерцание исчезло

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

Answer 2

Я наблюдал за CodeSandbox, который вы дали, и я вижу, что у вас всплывающие подсказки пересекаются со значением: false, и я думаю, что он будет использовать режим всплывающей подсказки все время, а не тогда, когда вы хотите, чтобы soo попытался поставить его как это и посмотреть, если это работает:

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

предложение приемлемо: Добавьте это к renderLi (ссылаясь на пример CodeSandbox)

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