apache / apache/echarts

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

Open
#21,340 6 comments 0 reactions 0 assignees View on GitHub
bug en pending
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### 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

```markdown
- 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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.