Cannot stack bars on time x-axis

[ghost]

One-line summary [问题简述]

Stacked bar charts collapsed since 4.0.3. See screenshot.

Version & Environment [版本及环境]

• ECharts version [ECharts 版本]: 4.0.4
• Browser version [浏览器类型和版本]: Chrome 64
• OS Version [操作系统类型和版本]: macOS High Sierra

Expected behaviour [期望结果]

Bars able to stack on top of each other without overflowing issues.

ECharts option [ECharts配置项]

option = { 
  grid: {
    right: '8%',
    left: '8%'
  },
  xAxis: {
      type: 'time',
      minInterval: 1000 * 3600 * 24
  },
  yAxis: {
    type: 'value',
    min: 0,
    max: 100,
    name: '%'
  },
  series: [
  {
    type: 'bar',
    stack: 'adherence',
   data: [{
       value: ['2018-02-21', 6, 2, 33, 67]
     }],
    encode: { x: 0, y: 3 },
    barMaxWidth: 25,
    barCategoryGap: '50%',
    cursor: 'auto',
    itemStyle: {
      normal: {
        color: 'red',
        opacity: 0.5
      }
    }
  },
  {
    type: 'bar',
    stack: 'adherence',
    data: [{
       value: ['2018-02-21', 6, 2, 33, 67]
     }],
    encode: { x: 0, y: 4 },
    barMaxWidth: 25,
    barCategoryGap: '50%',
    cursor: 'auto',
    itemStyle: {
      normal: {
        color: 'green',
        opacity: 0.5
      }
    }
  }],
  dataZoom: {
    type: 'slider',
    showDataShadow: false
  }
}

Other comments [其他信息]

[ghost]

Switching x-axis type to 'category' solved the problem. But unsure why issue only arose after version upgrade from 4.0.2 to 4.0.4.

[ghost]

Reopened because I need to use time for x-axis 😞

[saramorillon]

I have the same problem, stacked bar chart with time x-axis worked in 4.0.2 but not until 4.0.3.

[100pah]

Currently, stack is only supported on 'category' axis.

In fact, we've been considering whether support stack on 'time' or event 'value' axis, since it is a bit complicated than supporting it on 'category' axis.

@ClaraMedopad Could I have the detailed reason that why the 'time' axis is necessary in your case?

[ghost]

In my case I use it to visualise medication adherence, i.e. how many tablets a patient has taken out of the total per day. I want to have an overview of the continuous data, i.e. if the medication is stopped or not required for the day, a gap will be shown in the bar chart.

Example in the above screenshot, 2017-08-05 and 2017-08-07 does not show because no medication is prescribed, but it will be helpful to visualise that to the doctor.

A bar chart is used in this case to visualise the percentage completion of the daily dosage. I cannot think of alternative ways to display it other than stacked bar on time axis so any advice is welcomed.

[BenoitHanotte]

Same issue here, I use echarts to visualize memory consumption over time and I stack the memory usages to display the repartition of the overall memory usage.
eg: heap memory + off-heap memory = total memory consumed, thus I want to stack series as in the following plot:

[Xalio08]

Same issue, I need to stack registrations of different types at different dates, and categories doesn't work since some days are empty and should still appear.

[tmtron]

our use-case is almost like the Confidence Band example, but:

• but for the line-series, we need the time axis
• for the confidence band we could use a category axis

any ideas for a workaround? e.g.

1. maybe we can have 2 x-axis: a time-axis for the line-series and a category axis for the (confidence band stack)?
   But those axis would need to be "sychronized": e.g. when we zoom in, both must zoom together, etc.
2. or is it worth to try to keep only one time-axis and use a custom series to draw the area?
   If so, can someone link to an example, how to use custom-series with a time x-axis?
   The answer is NO. Custom series are just too slow (much slower than native series). Drawing the graphics basically works, but when we have like 10 charts with 5 series and 1k samples, the app is basically unusable.
3. something completely different, that I didn't think of..

[tmtron]

In fact, we've been considering whether support stack on 'time' or event 'value' axis, since it is a bit complicated than supporting it on 'category' axis.

@100pah: will it be simpler to support only a special case and not the general case to stack 2 different series (which may have data-samples at different time-stamps)?

e.g. when you have measurement data, you often need to display the min and max values of a series (instead of just e.g. the average) to avoid aliasing: e.g. in the screenshot below we have one such series (1) is the maximum and (2) is the minimum: so each of the samples have a time-stamp and they always have min and max:

[github-actions]

This issue has been automatically marked as stale because it did not have recent activity. It will be closed in 7 days if no further activity occurs. If you wish not to mark it as stale, please leave a comment in this issue.

[tmtron]

+1 don't close

[alexciesielski]

+1, we need stacking with x-axis type value

[hughess]

+1, I assume same solution to #15102

[th1under]

+1, It's related to #16177 and #16099

We also need stacking bars on time xAxis like the example provided in #16177.

[ghost]

+1 Still broken, we're interested to use stacked bar with time.

[juliepagano]

Has something changed that makes this slightly more supported now or are there still limitations on stacking on a time axis? When I try the options provided by the original poster, it looks like it might be properly stacked now.

[mitar]

It seems this still does not work for time, value, and log. :-(

[helgasoft]

@mitar, stacked bars on time axis work - Demo code

[mitar]

@helgasoft So this issue can be then closed?

[gggdomi]

@mitar, stacked bars on time axis work - Demo code

It works with your specific data which has all values for all series. I changed a single character (the last datapoint) and here's the incorrect result.

[helgasoft]

It works with your specific data which has all values for all series.

yes @gggdomi. And "incorrect results" are due to missing values which could/should be fixed by data preprocessing.
Demo with missing values added.

FAQ: ECharts axis types

ECharts has four axis types available - value, category, time and log.

• category is a discrete axis with individual values
• time and value are continuous axes with a range of values without gaps
• log is a non-linear axis dealing with very-large-range values

Character data are naturally discrete and can only be represented on a category axis.
Examples: ['Peru','Cuba','Japon',...] or ['Mon','Tue','Wed',...] or ['TypeA','TypeB',...].
Numerical data is usually continuous, like temperature, price or distance.
Time data is also continuous, with resolution in minutes, days or years.

All axis types allow for missing data, but present them differently. For instance
A bar chart with data:[['Feb',22], ['Oct',44]] on a category axis will present them side-by-side,
but data:[['2024-02',22], ['2024-10',44]] on a time axis will show continuous time without data in-between.
Missing time data, as null or interpolated values, could be added in a data pre-processing step.
Data transformation is a developer's task. Often data has to be modified to meet the needs of a chosen charting library and not the other way around.

Log axis is not suitable for stacked charts. A stacked chart relies on a linear axis to show proportions, but log axis is not linear.

---

[gggdomi]

@helgasoft thanks for your answer, even if I politely disagree. I guess this issue can indeed be closed, in favor of #20254 which is cleaner.

[kianj2]

+1

@helgasoft I appreciate your explanation, as it is the most thorough one I have found in this thread. I personally do not feel it addresses the comments made by @gggdomi. I see your point that preprocessing needs to be done, but that is mentioned nowhere in the documentation nor do I feel that is implied when using a time axis. In your example playground, we need to add [7,null] so that [7, 130] stacks nicely. But if we remove [7, null] then the [7, 130] bar is stacked floating in the air? That does not seem correct or predictable.

@th1under @Xalio08 I see that the use case you needed is the same use case I have. Did you end up finding solutions?

@100pah

Currently, stack is only supported on 'category' axis.

Is there any update on this? Is this still true in 2024? If so, can the documentation be updated? This is not mentioned at all. If it is only supported on 'category' axis can you please explain why the specific example of @helgasoft works?

[helgasoft]

@kianj2, @gggdomi, I apologize for being too "protective" of ECharts.
And I admit the data preprocessing workaround in this case is not very practical. Now I agree with you that users should be able to just dump two or more time series and see where bars get stacked. That would be a valuable new feature.
My change of camp was also helped by seeing how Highcharts supports that already.

[kianj2]

@helgasoft No worries 😄 I've seen you comment on a couple issues in this repo and it is always nice to see your input.

Good example. Yes it would be nice if echarts could have the same functionality.

With the preprocessing solution, do you know if this is the intended way to use stacked bars on a time axis? Or is it something that just in your experience has worked ok? I ask because my team needs a solution and I am trying to figure out how reliable the preprocessing one is.

[helgasoft]

this is the intended way to use stacked bars on a time axis? Or is it something that just in your experience has worked ok?

Would presume there is no "intended way" since the official API does not mention it explicitly and no examples.
I rarely dare to look at ECharts source code. But as experienced user I trust the workaround because it makes time axis behave like category axis. And category axis is definitely supported.