pointerLabelComponent Rendering Issues: Overlaps with Bars in Bar Graph and Lacks z-index Adjustment

[rohan-bigstep]

Description

The pointerLabelComponent in the react-native-gifter-chart library has two rendering issues that impact its visibility and customization options:

Overlapping with Bars: When there are a high number of bars in a bar graph, the pointerLabelComponent can sometimes appear behind the bars, making it difficult to read.
Lack of z-index Control: There is currently no way to adjust the z-index of the pointerLabelComponent. This makes it challenging to control the component’s layering when additional elements like average lines are added. For instance, if an average line is placed in the graph, it may be rendered on top of the pointerLabelComponent, obscuring it.

Steps to reproduce

For Issue 1: Overlapping with Bars

1. Create a bar graph with a large number of bars (e.g., 30 or more).
2. Use the pointerLabelComponent prop to add labels on the pointer.
3. Observe that the pointerLabelComponent may render behind the bars when the bar count is high.

For Issue 2: Lack of z-index Control

1. Add an average line to the graph
2. Use the pointerLabelComponent prop to customize the pointer labels.
3. Notice that the average line renders on top of the pointerLabelComponent, with no way to adjust layering so that the labels appear above the line.

Snack or a link to a repository

No response

version of react-native-gifted-charts

1.4.47

React Native version

0.74.3

Platforms

Android, iOS

Workflow

React Native

[namikarif]