[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: lightdash/lightdash#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]
    }
  })
})