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

[maryhmhhu]

Version

5.3.2

Link to Minimal Reproduction

Link to Chart

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:

When min and max on the xAxis are specified, only one series is shown at a time:

Expected Behavior

It stacks properly when x-axis type is category instead of value:

Environment

- OS:
- Browser:
- Framework:

Any additional comments?

No response

[Ovilia]

Please try to minify your data to make it easier to read and understand.

[maryhmhhu]

Hi @Ovilia , this is a simplified version of the example with just 2 series.

Same problems of xAxis max value is 50 when it should be 25; when min and max on the xAxis are specified (as 21 and 26), only one series is shown at a time; and it stacks properly only when x-axis type is category instead of value.

x-axis type is value:

x-axis type is category:

[Ovilia]

The default max value of the xAxis (when max is not set) seems to be weird.

[rephus]

I can also replicate this bug on my charts when I simply apply stack on my series when xAxis type is set to value

Here is our open issue: https://github.com/lightdash/lightdash/issues/3076

Here is a modified stacked bar chart example

as you can see, the max value on xAxis should be 1320, not 3000

This only happens when xAxis type is value (not category)

I noticed that if you remove any of the series, the maxValue will be reduced as well, like maxValue is the maxValue * number of series whe stack is applied.

we're using

    "echarts": "^5.3.0",
    "echarts-for-react": "^3.0.2",

[huangluyu]

It seams like stacked xAxis max value example:

option = {
  xAxis: {
    type: 'value'
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [
        [10, 50],
        [15, 100]
        ],
      type: 'bar',
      stack: 'jrx'
    },
    {
      data: [
        [12, 50],
        [14, 100]
        ],
      type: 'bar',
      stack: 'jrx'
    }
  ]
};

And It's stack strategy like the line,but show the bar as it own way，without stacked and accurately.

[huangluyu]

Another question, the "value type xAxis" with "bar series" doesn‘t stack well

[huangluyu]

Another question, the "value type xAxis" with "bar series" doesn‘t stack well

Expected：

[huangluyu]

// Expected for value type x-axis with bar series stacked
const xStackMap = {};
option.series.forEach((series, index) => {
  series.z = option.series.length - index;
  series.data.forEach((d, i) => {
    const xValue = d[0];
    const yValue = d[1];
    const stackedValue = xStackMap[xValue];
    if (stackedValue === undefined) {
      xStackMap[xValue] = yValue;
    } else {
      d[1] = yValue + stackedValue;
      xStackMap[xValue] = d[1];
    }
  });
});

[huangluyu]

New Version！

1. support multi stack target
2. fix z-level error

   const stackMap = {}
   option.series.forEach((series, index) => {
   if (series.stack == null) {
   series.z = option.series.length
   return
   }
   series.z = option.series.length - index
   const xStackMap = stackMap[series.stack] || {}
   stackMap[series.stack] = xStackMap
   series.data.forEach((d, i) => {
   const xValue = d[0]
   const yValue = d[1]
   const stackedValue = xStackMap[xValue]
   if (stackedValue === undefined) {
     xStackMap[xValue] = yValue
   } else {
     d[1] = yValue + stackedValue
     xStackMap[xValue] = d[1]
   }
   })
   })