apache / apache/echarts

[Bug] bar chart x-axis incorrect when stacking multiple series

Open
#17,522 9 comments 0 reactions 0 assignees View on GitHub
bug en pending topic: bar
Dominant language
TypeScript
Stars
67.3k
Forks
19.8k
Avg merge
11d 14h
Merged PRs (30d)
8

Description

### Version

5.3.2

### Link to Minimal Reproduction

[Link to Chart](https://echarts.apache.org/examples/en/editor.html?c=bar-simple&code=PYBwLglsB2AEC8sDesBQsMCIDmAnCAJpgFxLoYWYBGwYYwAtiQCwAMANORbJgMYxgAhhGgAZQVQCmAGxJhcAV0mduWaZIBmYEgGZmK1ZnzYAFtuIBOAOxcAvgZ71g0mgA8SZVTw2TBYBbiSHlxemAR-ggBqEJIA7sFeoQDOJsDxxPJKIar22dxhEQBawIwJifkpaXKKynmhAJ4Agq4QSQCS0ASS7sSYgtKydRi55TxJggBuko3tDILYQaRD-dCCDIuYEHMLmA6jmJXpmZLLtnkjhofVWRQXjt1gAMpg9epl-RoCAGJrENL1JEwHTAklwmDsDgKQmKpSWoReIA2IiShCCeywAC8SgxRMBeABra4nW6Q8JCJKScyeQwELaSaAomBJEgAbWWmAA6pJJIT0fkAMK7dmiIX7ACyovKmAAQpLEpgAOJy0L8gDy4K8AF0-QdgAFeIs2aNqaMeFyeYCvAAmK3KqVK4gARj5oQlTqtLsMguIOk9AvVxA9y0oIuI0AUAz9lFlYYj0lOfpN-3NhN61p0dvlof0waw3uduZ4bosUawMYLpqwDorlcwapI4YGCeWSalKctqitzEzKpIjqspZ4ocb0kHmDdI7HMcnhcVDbjY_rsabozuXlb8vbac7AFYe16-2PhwvZxOT5WeNPz7WHTOL3WAyPTnlNRCuJh1AtOu9KBB-NBAUCXhtB1CAQQYAAJSQIFMcxHQANlA8COUIMATD7RC8gOVIjhqHV1C0QCYLMTNMGAfB6XMTAplwSBeH6Uj6BAEgd1YN9KApCjmWII1VA3ShBGgLY_CgADiA0foKT9ahBFwBVBGY3pWAAUn3Hh6X4LofylHpOW5XlZwBXpBWbfYwMkBhnleRZ-MMfhpHIwEAGIdEdAAOK0AFFZVMqVpAkGRtPlezHN6JzWAitTKE-aAwB-Bg_iMoFYtBKKsBip4IAxRZHQ4WcQGAFFIBgQFkVRNKxhwolfPlfypGkcR6j1KlZxMVFVRo_zFOOGrQlWdZAUFaSkiEAlARGwQxukhENioWSNRyPlbJ4QThOKsSJOkKT2TmuSFMBFS1MwDTgC0uFa109sxySkVesMczLJeN5ztNPhnFCzAnK-L4rAAEUdHzV2kurApe_YQrBMKItYCrMAy-LEsBYFUrHDLHiynK8vvAqitE0qGXKscrgyGo7vyEGGsEJqFBa-82q6DrQS66qgfZfqNhFYbRtTA5uaOmbAV2hbuDXDBlr6IS5nWkhNu2_ZdvkxTMEO6STrO5bKEu_TYaSiUyd_cCrOejWsAh5yd2YaUrEt4WvFF8mAtkMGpTNqHItR75fn-JGUrBD3YvR7K-yx2scbAvHejKrSiaqkmbnKe3KApxrmqC0J6ckRncGZuPiQT6T2cBCUucmnmJqm9kBd6IXziW9lVqliPZdqeXZMVg7VNV6BNJs2ctYta7AUB_P2Qeo3e_vV3Ps85gdF-nc931tRHbTuz3shz7odh-GvaS5G_dnNGMeDscw-lyOCej2diZ61n9mTqnU-d-UM6znPb5H_ZC96WUS7G3py4GX2FXGSYJa55HFg3ESJVxKSRblKBW-0lKd3ZGrCeF1ARXUMoCJUS8eBjyeug16U8nKNH5MwZgnlGi20WuyCmq98gkK3v7OKu8fYggPveI-QcnQh1emfCOmxL5omvrHD-iRE7L3qinGmDDKCv06kg8RdsC5rA2EqP-Zc-bTXqIiQW81wHrnrpLaBG04HSUQUrFWqDu6nSIfsfuQDaxJXrHgzYhtCFyNNuvZy8FyGOmYI6GhItgYr2fqEEhGgonRO3p7BK3tej71iQHY-vDT6FXDjAoRKIr73hvqTO-flHYyNprWBRTMlEFM_lKb-D4jqAPGtoyuujZoGLtlwbU74nDSEgIpDc7EsCuGaK0IKfQWhJHEPVBhcM4mI0Sb7I63Cco1hfu1RR3U8Kj19hMBixA-GhFwLQPwix9mXDEVUkJWFBDjIACp_lTJA6QMFoAoTQpM0GxxpIiA4Tsp2bEVF5AAPSAp4HMHosArSYS8MC0FIgSAQpWZQGgChOiyXqO3XOOpalYL6mojFbAsVqNxPRc-mAEoEAIG8Ql6wbkPHHtM_ozzAQGgWdJJZfYcz7AylyYiVEaDSCINJEAggKUiGwKyQspzEhSq8DK1Q_zyidP2DROi_RGhPOwGJTATFgn22wlUTFWEQG_KUMLO4mAmjjNGdc1o7ynbix3vEverL2TsqdIis5BrlHDGpRsBQnEAD6hBSLs3xVKzA7NiWmMBOSylIjcU0rpZ48J6UBCBxypyqU3LoKwUFs4IghjLj0Wes3HU-SlA6mNf0U1dhUC2CAA)

Expand for chart config

```
option = {
"grid":{
"bottom":40,
"containLabel":true,
"left":34,
"right":97
},
"toolbox":{
"feature":{
"dataView":{
"show":true
},
"dataZoom":{
"show":true,
"yAxisIndex":"all"
},
"saveAsImage":{
"name":"image",
"show":true
}
},
"show":true
},
"textStyle":{
"fontFamily":"Inter"
},
"dataZoom":{
"type":"inside",
"zoomLock":true
},
"dataset":{
"dimensions":[
"Week",
"C",
"L",
"M",
"B",
"G",
"CO"
],
"source":[
{
"Week":" 22",
"G":1,
"M":12,
"C":3,
"CO":2,
"L":null,
"B":null
},
{
"Week":" 23",
"L":4,
"C":1,
"M":9,
"B":1,
"G":1,
"CO":null
},
{
"Week":" 24",
"C":17,
"L":null,
"M":null,
"B":null,
"G":null,
"CO":null
},
{
"Week":" 25",
"C":1,
"L":null,
"M":null,
"B":null,
"G":null,
"CO":null
}
]
},
"legend":{
"icon":"rect",
"itemHeight":16,
"itemWidth":16,
"show":true,
"left":"right",
"orient":"vertical",
"top":50
},
"series":[
{
"animation":false,
"barGap":"0%",
"encode":{
"x":"Week",
"y":"C"
},
"itemStyle":{
"color":"#3182EB"
},
"label":{
"color":"#000",
"fontFamily":"Inter",
"fontSize":10,
"position":"inside",
"show":true
},
"labelLayout":{
"hideOverlap":true
},
"name":"C",
"stack":"stack",
"type":"bar"
},
{
"animation":false,
"barGap":"0%",
"encode":{
"x":"Week",
"y":"L"
},
"itemStyle":{
"color":"#FF7D1B"
},
"label":{
"color":"#000",
"fontFamily":"Inter",
"fontSize":10,
"position":"inside",
"show":true
},
"labelLayout":{
"hideOverlap":true
},
"name":"L",
"stack":"stack",
"type":"bar"
},
{
"animation":false,
"barGap":"0%",
"encode":{
"x":"Week",
"y":"M"
},
"itemStyle":{
"color":"#54B74B"
},
"label":{
"color":"#000",
"fontFamily":"Inter",
"fontSize":10,
"position":"inside",
"show":true
},
"labelLayout":{
"hideOverlap":true
},
"name":"M",
"stack":"stack",
"type":"bar"
},
{
"animation":false,
"barGap":"0%",
"encode":{
"x":"Week",
"y":"B"
},
"itemStyle":{
"color":"#E43D55"
},
"label":{
"color":"#000",
"fontFamily":"Inter",
"fontSize":10,
"position":"inside",
"show":true
},
"labelLayout":{
"hideOverlap":true
},
"name":"B",
"stack":"stack",
"type":"bar"
},
{
"animation":false,
"barGap":"0%",
"encode":{
"x":"Week",
"y":"G"
},
"itemStyle":{
"color":"#AC44EA"
},
"label":{
"color":"#000",
"fontFamily":"Inter",
"fontSize":10,
"position":"inside",
"show":true
},
"labelLayout":{
"hideOverlap":true
},
"name":"G",
"stack":"stack",
"type":"bar"
},
{
"animation":false,
"barGap":"0%",
"encode":{
"x":"Week",
"y":"CO"
},
"itemStyle":{
"color":"#6C4141"
},
"label":{
"color":"#ffffff",
"fontFamily":"Inter",
"fontSize":10,
"position":"inside",
"show":true
},
"labelLayout":{
"hideOverlap":true
},
"name":"CO",
"stack":"stack",
"type":"bar"
}
],
"tooltip":{

},
"xAxis":{
"axisLabel":{
"fontFamily":"Inter",
"fontSize":11,
"hideOverlap":true,
"interval":0,
"rotate":0,
"show":true
},
"axisTick":{
"alignWithLabel":true,
"interval":0
},
"max": 26,
"min": 21,
"boundaryGap":true,
"name":"Week",
"nameGap":40,
"nameLocation":"middle",
"nameTextStyle":{
"align":"center",
"fontSize":14,
"fontWeight":"bold",
"padding":[
0,
0,
0,
0
],
"verticalAlign":"top"
},
"show":true,
"type":"value"
// "type":"category"
},
"yAxis":{
"axisLabel":{
"fontFamily":"Inter",
"fontSize":11,
"show":true
},
"name":"user_id",
"nameGap":40,
"nameLocation":"middle",
"nameTextStyle":{
"fontSize":14,
"fontWeight":"bold"
},
"scale":false,
"show":true,
"type":"value"
}
}
```

### Steps to Reproduce

1. Go to link
2. See that the xAxis max value is multiple times the actual max value

It seems de-selecting series from the chart changes the xAxis max value.

### Current Behavior

xAxis max value is 150 when it should be 25, the chart is unreadable:

Screen Shot 2022-08-15 at 3 47 52 PM

When `min` and `max` on the xAxis are specified, only one series is shown at a time:
Screen Shot 2022-08-15 at 3 48 04 PM

### Expected Behavior

It stacks properly when x-axis type is `category` instead of `value`:
Screen Shot 2022-08-15 at 3 47 15 PM

### Environment

```markdown
- OS:
- Browser:
- Framework:
```

### Any additional comments?

_No response_

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.