Tooltip/Crosshair not working when y-direction="south" is used in Vue

[phuclh]

Description

When using y-direction="south" on a VisXYContainer component in Vue, the tooltip fails to appear on hover. The crosshair component appears to not detect mouse events properly when the y-axis is inverted.

Environment

• @unovis/vue: latest version
• @unovis/ts: latest version
• Vue: 3.x
• Browser: All browsers tested (Chrome, Firefox, Safari)

Steps to Reproduce

1. Create a LineChart component with y-direction="south"
2. Add a VisCrosshair and VisTooltip for showing tooltips
3. Hover over the chart lines
4. Observe that no tooltip appears and crosshair events don't trigger

Minimal Reproducible Example

<template>
  <VisXYContainer
    :data="chartData"
    :y-domain="[0.5, 100]"
    y-direction="south"
  >
    <VisCrosshair
      :template="tooltipTemplate"
      :color="color"
    />
    <VisTooltip />

    <VisLine
      v-for="category in categories"
      :key="category"
      :x="(d, i) => i"
      :y="d => d[category]"
      :color="getColor(category)"
    />

    <VisAxis type="x" />
    <VisAxis type="y" />
  </VisXYContainer>
</template>

<script setup>
import { VisXYContainer, VisLine, VisCrosshair, VisTooltip, VisAxis } from '@unovis/vue'

const chartData = [
  { date: "2024-01-01", series1: 10, series2: 20 },
  { date: "2024-01-02", series1: 15, series2: 18 },
  { date: "2024-01-03", series1: 8, series2: 25 },
]

const categories = ['series1', 'series2']

const tooltipTemplate = (d) => {
  console.log('Tooltip template called:', d) // This never logs
  return `Value: ${d.series1}`
}

const color = (d, i) => ['#4e79a7', '#f28e2c'][i]
const getColor = (category) => category === 'series1' ? '#4e79a7' : '#f28e2c'
</script>

Expected Behavior

The tooltip should appear when hovering over the chart lines, regardless of the y-direction setting. The crosshair should detect mouse events and trigger the tooltip template function.

Actual Behavior

• No tooltip appears when hovering over the chart
• The crosshair template function is never called (no console logs)
• Crosshair events (mouseover, click) don't trigger
• The issue only occurs when y-direction="south" is set

Workaround

The only current workaround is to avoid using y-direction="south" and instead reverse the y-domain values:

<!-- Instead of: -->
<VisXYContainer :y-domain="[0.5, 100]" y-direction="south">

<!-- Use: -->
<VisXYContainer :y-domain="[100, 0.5]">

This achieves the same visual effect (inverted y-axis) but allows tooltips to work correctly.

Additional Context

• When y-direction="north" (default), tooltips work perfectly
• The issue appears to be related to coordinate transformation when the y-axis is inverted
• Multiple charts in our application are affected by this issue
• We've tried various solutions including:
  • Changing the order of VisCrosshair and VisTooltip components
  • Setting :follow-cursor="false" on VisTooltip
  • Adjusting vertical/horizontal shift values
  • Using different tooltip positioning properties

[lee00678]

@phuclh I'm able to reproduce this. We will look into this issue. Thanks for bringing it up to our attention.