FormidableLabs / FormidableLabs/victory

VictoryTooltip overlap in VictoryGroup

Open
#2,201 3 comments 0 reactions 0 assignees View on GitHub
Issue: Accepted Note: Victory native :iphone: Type: Bug :bug:
Dominant language
TypeScript
Stars
11.2k
Forks
536
PR merge metrics
No merged PRs in 30d

Description

## The Problem / Bug

**`VictoryTooltip`** is **overlapping** in a `VictoryGroup` of `VictoryBar` with a vertical position on IOS.

### Reason
I managed to understand that the problem is related to how the charts are drawn.
Considering the input data array and the structure of drawing charts in a group, the Chart is drawn in turn.
First from the first block of data, then the second, the third... This creates layering in the SVG image.

Each `BarChart` has his `VictoryTooltip`. Accordingly, in an active state of `VictoryTooltip` for `BarChart`, it is located on the same layer as the related Chart. That is, the first rendered `VictoryBar` and its `VictoryTooltip` will be **overlaid** by subsequent charts on IOS, **unlike the web version**.

I saw that this problem [was already opened ](https://github.com/FormidableLabs/victory/issues/981)in 2018, 2019.., but was closed without solving it.

_______________________________________________________________________________

## Request
**Please could you please take a look into this issue? And maybe suggest to me how to fix it for time.**

### Example in Sandboxs

- [Here is Sandbox of VictoryChart with VictoryGroup of VictoryBar for WEB](https://codesandbox.io/s/patient-bush-6ho81t?file=/index.js) -and you can see, all works fine.

BarChartInGroup-web1
BarChartInGroup-web2

- [Here is Sandbox Expo **with the same code**, using `victory-native` to run on IOS](https://snack.expo.dev/@vitalia.luzhna/victorytooltip) - you will see the problem on the IOS simulator or run expo on your device. I took the code from Victory documentation: [Group](https://formidable.com/open-source/victory/docs/victory-group/#colorscale) and [Tooltip](https://formidable.com/open-source/victory/docs/victory-tooltip/#constraintovisiblearea) examples, so there is nothing extra.

![BarChartInGroup-ios1](https://user-images.githubusercontent.com/30116825/164719481-5c7a2729-ef90-489e-aa5b-aa4c6e20f42b.png)
![BarChartInGroup-ios2](https://user-images.githubusercontent.com/30116825/164719651-9835cca0-f32d-41c3-8809-ba3e785ac442.jpeg)
![BarChartInGroup-ios3](https://user-images.githubusercontent.com/30116825/164719654-444a3f46-a4b8-40f1-80db-364fd2016d53.jpeg)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.