Skip to content

Conversation

@osamaqarem
Copy link
Contributor

Description

Fixes #2369

This issue seems present on many charts that work with mouse events e.g. #1726. The fix over there was to reduce the throttling interval. That does alleviate the issue but doesn't eliminate it completely.

Note that there is an open PR here that also deals with the same issue: #2890. I'm aware this PR exists, however I'm not sure that's the right change and I haven't seen any activity on it for weeks.

Before After
before.mov
after.mov

Type of Change

  • Bug fix

How Has This Been Tested?

Verified manually by duplicating the chart shown in the docs here on the same page.

Show manual testing code

File: docs/src/content/gallery/voronoi-tooltips-grouped.md

---
id: 19
title: Voronoi Tooltips with Grouped Components
---

```playground
<>
<VictoryChart containerComponent={<VictoryVoronoiContainer/>}>
  <VictoryGroup
    color="#c43a31"
    labels={({ datum }) => `y: ${datum.y}`}
    labelComponent={
      <VictoryTooltip
        style={{ fontSize: 10 }}
      />
    }
    data={[
      { x: 1, y: -3 },
      { x: 2, y: 5 },
      { x: 3, y: 3 },
      { x: 4, y: 0 },
      { x: 5, y: -2 },
      { x: 6, y: -2 },
      { x: 7, y: 5 }
    ]}
  >
    <VictoryLine/>
    <VictoryScatter
      size={({ active }) => active ? 8 : 3}
    />
  </VictoryGroup>
  <VictoryGroup
    labels={({ datum }) => `y: ${datum.y}`}
    labelComponent={
      <VictoryTooltip
        style={{ fontSize: 10 }}
      />
    }
    data={[
      { x: 1, y: 3 },
      { x: 2, y: 1 },
      { x: 3, y: 2 },
      { x: 4, y: -2 },
      { x: 5, y: -1 },
      { x: 6, y: 2 },
      { x: 7, y: 3 }
    ]}
  >
    <VictoryLine/>
    <VictoryScatter
      size={({ active }) => active ? 8 : 3}
    />
  </VictoryGroup>
</VictoryChart>
<div/>
<VictoryChart containerComponent={<VictoryVoronoiContainer/>}>
  <VictoryGroup
    color="#c43a31"
    labels={({ datum }) => `y: ${datum.y}`}
    labelComponent={
      <VictoryTooltip
        style={{ fontSize: 10 }}
      />
    }
    data={[
      { x: 1, y: -3 },
      { x: 2, y: 5 },
      { x: 3, y: 3 },
      { x: 4, y: 0 },
      { x: 5, y: -2 },
      { x: 6, y: -2 },
      { x: 7, y: 5 }
    ]}
  >
    <VictoryLine/>
    <VictoryScatter
      size={({ active }) => active ? 8 : 3}
    />
  </VictoryGroup>
  <VictoryGroup
    labels={({ datum }) => `y: ${datum.y}`}
    labelComponent={
      <VictoryTooltip
        style={{ fontSize: 10 }}
      />
    }
    data={[
      { x: 1, y: 3 },
      { x: 2, y: 1 },
      { x: 3, y: 2 },
      { x: 4, y: -2 },
      { x: 5, y: -1 },
      { x: 6, y: 2 },
      { x: 7, y: 3 }
    ]}
  >
    <VictoryLine/>
    <VictoryScatter
      size={({ active }) => active ? 8 : 3}
    />
  </VictoryGroup>
</VictoryChart>
</>

</details>

@changeset-bot
Copy link

changeset-bot bot commented Oct 8, 2024

🦋 Changeset detected

Latest commit: 89dc610

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 32 packages
Name Type
victory-voronoi-container Patch
victory-create-container Patch
victory Patch
rn-demo Patch
victory-area Patch
victory-axis Patch
victory-bar Patch
victory-box-plot Patch
victory-brush-container Patch
victory-brush-line Patch
victory-candlestick Patch
victory-canvas Patch
victory-chart Patch
victory-core Patch
victory-cursor-container Patch
victory-errorbar Patch
victory-group Patch
victory-histogram Patch
victory-legend Patch
victory-line Patch
victory-native Patch
victory-pie Patch
victory-polar-axis Patch
victory-scatter Patch
victory-selection-container Patch
victory-shared-events Patch
victory-stack Patch
victory-tooltip Patch
victory-vendor Patch
victory-voronoi Patch
victory-zoom-container Patch
victory-docs Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@vercel
Copy link

vercel bot commented Oct 8, 2024

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name Status Preview Comments Updated (UTC)
victory ✅ Ready (Inspect) Visit Preview 💬 Add feedback Oct 8, 2024 7:55pm

@osamaqarem osamaqarem marked this pull request as ready for review October 8, 2024 19:49
@carbonrobot
Copy link
Contributor

Awesome, thanks for the fix and the detailed capture of before and after clips

@carbonrobot carbonrobot merged commit 25333ab into FormidableLabs:main Oct 14, 2024
6 checks passed
@github-actions github-actions bot mentioned this pull request Oct 9, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

VictoryVoronoiContainer tooltip breaks when mouse moves between different chats

2 participants