[Bug] api.value() function does not return any value if I use key-value dataset

[hihibaibai]

Version

6.0.0

Link to Minimal Reproduction

https://echarts.apache.org/examples/zh/editor.html?c=bar-y-category-stack

Steps to Reproduce

I'm trying to make a gantt, and would like draw the graph by myself. And I put key-value dataset in series, then use api.value() function to get the data so I can draw the graph.
Here is the option that I use not working properly

option = {
        title: {
          text: "Custom Series Example"
        },
        xAxis: {
          type: "value",
          show: true,
          min: new Date('2025-11-04').getTime(),
          max: new Date('2025-11-10').getTime(),
          interval: 24 * 60 * 60 * 1000,
          axisLabel: {
            formatter: function(value) {
              return new Date(value).toISOString().split('T')[0];
            }
          }
        },
        yAxis: {
          type: "value",
          min: 0,
          max: 100
        },
        series: [{
          type: "custom",
          coordinateSystem: 'cartesian2d',
          renderItem: function(params, api) {
            var point = api.coord([api.value(0), api.value(1)]);
            console.log(params);
            console.log(api);
            console.log(point);
            var centerX = api.getWidth() / 2;
            var centerY = api.getHeight() / 2;
            var size = 50;

            return {
              type: 'rect',
              shape: {
                x: centerX - size / 2,
                y: centerY - size / 2,
                width: size,
                height: size
              },
              style: {
                fill: '#000000'
              }
            };
          },
          dimensions: [
            {name:'x', type: 'ordinal'},
            {name:'y', type: 'ordinal'},
          ],
          data: [
            {x: new Date('2025-11-04').getTime(), y: '50'},
            // {x: '2025-11-05', y: '60'},
            // {x: '2025-11-06', y: '70'}
          ]
        }]
      };

The option above will print api in console. And I try "api.value(0)","api.value('x')", it returns NaN.
I'm expecting '2025-11-05'.
I read options documentation, no explaination about key-value set.

Current Behavior

The option above will print api in console. And I try "api.value(0)","api.value('x')", it returns NaN.

Expected Behavior

I'm expecting '2025-11-05' on call of "api.value('x')"

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

Then I try this option:
`option = {
title: {
text: "Custom Series Example"
},
xAxis: {
type: "value",
show: true,
min: new Date('2025-11-04').getTime(),
max: new Date('2025-11-10').getTime(),
interval: 24 * 60 * 60 * 1000,
axisLabel: {
formatter: function(value) {
return new Date(value).toISOString().split('T')[0];
}
}
},
yAxis: {
type: "value",
min: 0,
max: 100
},
series: [{
type: "custom",
coordinateSystem: 'cartesian2d',
renderItem: function(params, api) {
var point = api.coord([api.value(0), api.value(1)]);
console.log(params);
console.log(api);
console.log(point);
var centerX = api.getWidth() / 2;
var centerY = api.getHeight() / 2;
var size = 50;

        return {
          type: 'rect',
          shape: {
            x: centerX - size / 2,
            y: centerY - size / 2,
            width: size,
            height: size
          },
          style: {
            fill: '#000000'
          }
        };
      },
      dimensions: [
        {name:'x', type: 'ordinal'},
        {name:'y', type: 'ordinal'},
      ],
      data: [
        [new Date('2025-11-04'),'50'],
        // {x: '2025-11-05', y: '60'},
        // {x: '2025-11-06', y: '70'}
      ]
    }]
  };`

This time, I can get the value from api.value(0).
I have no idea why this will happen. And there is no function to tell me what value I can use. It will be nice if there is a function for debugging.

[helgasoft]

I read options documentation, no explaination about key-value set.

Yes, but api.value depends on dimension, which is applicable only to array-type data. There is no dimension, or guaranteed order, in key-value (object) type of data. In your example then:
[new Date('2025-11-04'), '50'] has two dimensions
{x: new Date('2025-11-04').getTime(), y: '50'} has none, so it cannot be used in api.value().

[hihibaibai]

I read options documentation, no explaination about key-value set.

Yes, but api.value depends on dimension, which is applicable only to array-type data. There is no dimension, or guaranteed order, in key-value (object) type of data. In your example then: [new Date('2025-11-04'), '50'] has two dimensions {x: new Date('2025-11-04').getTime(), y: '50'} has none, so it cannot be used in api.value().

I couldn't use api.value() to get data. But I still need the values to do custom rendering in renderItem(params, api) function. Which function should I use when I use key-value dataset?

[helgasoft]

api.value() is the only available function for custom charts. Since it does not support key-value dataset, you need to convert your data from key-value to array.

[Srajan-Sanjay-Saxena]

resolved the issue in pr #21342

[hihibaibai]

resolved the issue in pr #21342

Think you for your debug.
How to use this patch? Will it be used after I run npm install ?

[Srajan-Sanjay-Saxena]

@hihibaibai Hi! Thanks for your interest in the fix. Here are the options to use this patch:

Wait for Official Release
This fix will be included in the next ECharts release. After it's merged and released, you can simply:

npm install echarts@latest