[bug]: Wrong Bar Chart Tooltip For Horizontal Layout On Mobile

[MHBahrampour]

Describe the bug

When tapping on any bar in the chart, the tooltip for the first bar always appears first, as shown in the video below.

https://github.com/user-attachments/assets/86a5a274-7dd5-4878-a9cd-55eb8e610d98

Affected component/components

Bar Chart

How to reproduce

1. Open the bar chart page on the documentation site using a mobile device or Chrome's mobile simulator.
2. Tap on any bar other than the first one in a horizontal bar chart.

Codesandbox/StackBlitz link

No response

Logs

No response

System Info

Windows and Android, Google Chrome

Before submitting

• [X] I've made research efforts and searched the documentation
• [X] I've searched for existing issues

[heecheon92]

I think I found the solution but don't really understand what's going on.

Adding "onClick={(e) => e.preventDefault()}" seems to fix the issue.

Look for "ChartTooltipContent". On the return statement div, applying the following changes seems to fix the behavior. (not the underlying issue tho)

      <div
        ref={ref}
        className={cn(
          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
          className
        )}
        onClick={(e) => e.preventDefault()} // <-- This line fixes the behavior
      >
...
    </div>

Is anyone working on this?

[MHBahrampour]

@heecheon92 Thanks for the reply, unfortunately preventDefault didn't solve the issue for me. Please thumbs up the issue so they notice sooner.