[Bug] dataIndex in tooltip.valueFormatter is not absolute when zooming

[bchazalet]

Version

6.0.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/en/editor.html?code=bZHtaoMwFIb_exVnUnADC-pa2zrcGIzBbmEiazqzEtBEYjoU8d53YrQfYX9K8_i8r-fEgigCKWQOQOZGQRgvw2C5cn0Ic_-GrZFFFouRPVpsg2xlsS2ytcV2yGKLhQHCjQ1DhFsbRgh3uZM_OY6oFRMcl-hRUUKUitXJeMCjZMcjlQm4pGWNq0sAfkl5ou9CVkQp_ez-ayQ-6Mv44AVtHyB9nhoAvgVv1BSSonozN6bd7BzIsxBHufabrjqIEkUrmIJ5G7yAl3qQgHeXenNUUnWSfL_ojTPAojc9-t9N0bA3mQF_B72WXvwg2nnxH0qwis5HGOf9FKK6EB29KrAF1dUYdxlvWEHd2Wpf8R4tRbHqInT_COPkZ6OhklFUMuNwUo0ltFHT95lSJeN0Ino2Hc-d4Q8&_source=echarts-doc-preview&enc=deflate

Steps to Reproduce

Create a simple line chart with zoom enabled and use tooltip.valueFormatter to format the value. Zoom in on a few points of the chart.

  data = [
  ["2016-10-4", 1],
  ["2016-10-5", 2],
  ["2016-10-6", 3],
  ["2016-10-7", 4],
  ["2016-10-8", 5],
  ["2016-10-9", 6],
  ["2016-10-10", 7],
  ["2016-10-11", 8],
  ["2016-10-12", 9]
];

option = {
  tooltip: {
    trigger: "axis",
    valueFormatter: (_value, dataIndex) => {
      const valueFromData = data[dataIndex][1];
      const symbol = valueFromData == _value ? '=' : '!=';
      return`${_value} ${symbol} ${valueFromData}`;
    }
  },
  toolbox: {
    feature: {
      dataZoom: {
      }
    }
  },
  dataZoom: {
    type: "inside"
  },
  xAxis: {
    type: "time"
  },
  yAxis: {
    type: "value"
  },
  series: [{
    name: "test",
    type: "line",
    data
  }]
}

Current Behavior

When using dataIndex to get the raw value from underlying data array, the value retrieved is wrong when I zoom onto a few points. It looks like dataIndex is only considering the points displayed on the chart , i.e. it's 0 for the first visible point with the zoom on but it prevents me from using it to retrieve the raw value from the underlying data array.

No zoom:

With zoom:

Expected Behavior

I expect the dataIndex to refer to the absolute index of the value within the underlying data array, no matter what the zoom context is.

Environment

- OS: macOS Tahoe 26.2
- Browser: Chrome 142.0.7444.176
- Framework: Angular

Any additional comments?

No response

[plainheart]

Thanks for your report! This is a case that is not covered by the original PR #19123.

Currently, the dataIndex is actually dataIndexInside, which is the index within the visible data range.

echarts/src/component/tooltip/TooltipView.ts

Line 579 in 0919819

const dataIndex = idxItem.dataIndexInside;

[plainheart]

A possible quick fix may be to add the raw absolute dataIndex rawDataIndex and take it as the callback parameter of valueFormatter.

echarts/src/component/tooltip/seriesFormatTooltip.ts

Lines 89 to 97 in 0919819

	// Do not mix display seriesName and itemName in one tooltip,
	// which might confuses users.
	name: inlineName,
	// name dimension might be auto assigned, where the name might
	// be not readable. So we check trim here.
	noName: !trim(inlineName),
	value: inlineValue,
	valueType: inlineValueType,
	dataIndex

return createTooltipMarkup('section', { 
    header: seriesName, 
    // When series name is not specified, do not show a header line with only '-'. 
    // This case always happens in tooltip.trigger: 'item'. 
    noHeader: multipleSeries || !seriesNameSpecified, 
    sortParam: sortParam, 
    blocks: [ 
        createTooltipMarkup('nameValue', { 
            markerType: 'item', 
            markerColor: markerColor, 
            // Do not mix display seriesName and itemName in one tooltip, 
            // which might confuses users. 
            name: inlineName, 
            // name dimension might be auto assigned, where the name might 
            // be not readable. So we check trim here. 
            noName: !trim(inlineName), 
            value: inlineValue, 
            valueType: inlineValueType, 
-           dataIndex
+           dataIndex,
+           rawDataIndex: data.getRawIndex(dataIndex)
        }) 
    ].concat(subBlocks || [] as any) 
});

echarts/src/component/tooltip/tooltipMarkup.ts

Lines 349 to 351 in 0919819

	const readableValueList = noValue
	? []
	: valueFormatter(fragment.value as OptionDataValue, fragment.dataIndex);

-     : valueFormatter(fragment.value as OptionDataValue, fragment.dataIndex); 
+     : valueFormatter(fragment.value as OptionDataValue, fragment.rawDataIndex); 

[bchazalet]

thanks for the quick response @plainheart! And for the link to the original PR.

Currently, the dataIndex is actually dataIndexInside, which is the index within the visible data range.

Thanks for confirming. So are you saying this was meant to be the raw index and this is indeed a bug?

[plainheart]

@bchazalet Yeah, you are right. This is a bug and will be fixed in #21479.