ECharts "Stacked Area Chart" does not work for not-synced time series data.

[Sakkyoku-Sha]

Version

5.2.0

Reproduction link

https://jsfiddle.net/pgnjw27b/5/

• Consistent Simple Version https://jsfiddle.net/f7a4k5ng/2/

Steps to reproduce

In the example just run the code a few times and see all the different ways the line's end up intersecting or being disconnected for each other. The line's are not 'stacked'.

This issue can lead to much larger problems in our data set where the difference produce results like

If we pad the series with leading zero's so all of them share the same start date it looks more reasonable, but now we have a line rendered on top of every series with 0, which is not ideal.

It can be recreated by doing the following in any chart.

Create a graph with time type x axis and y value type axis

Add 2 series with time series data that have some dates which overlap, and some dates that do not.

Make the series stacked with 'stack:' and 'areaStyle:{}"

What is expected?

The line series' which are in the same stack group (when areaStyle:{} is used) should always connect with other lines at common x values with no intersection of their areas.

What is actually happening?

Line series' area can intersect with other line series' area under the same stack group.

---

Please let me know if this is something that cannot or will likely not be fixed.

[echarts-bot[bot]]

Hi! We've received your issue and please be patient to get responded. 🎉 The average response time is expected to be within one day for weekdays.

In the meanwhile, please make sure that it contains a minimum reproducible demo and necessary images to illustrate. Otherwise, our committers will ask you to do so.

A minimum reproducible demo should contain as little data and components as possible but can still illustrate your problem. This is the best way for us to reproduce it and solve the problem faster.

You may also check out the API and chart option to get the answer.

If you don't get helped for a long time (over a week) or have an urgent question to ask, you may also send an email to [email protected]. Please attach the issue link if it's a technical question.

If you are interested in the project, you may also subscribe to our mailing list.

Have a nice day! 🍵

[Sakkyoku-Sha]

Interestingly switching to "Category" and providing a "day" is a potential workaround to this issue.

const days = new Array<string>(36525);
let currDate = new Date(2020,1,1,)
for(let i = 0; i < 36525; i++){

    days[i] = [currDate.getFullYear(), currDate.getMonth() + 1, currDate.getDate()].join('/');
    currDate.setDate(currDate.getDate() + 1);
}

xAxis: { type: 'category', data : days, silent: false, },

--- edit ----- However I am noticing a ~15-25% decrease in performance after doing this.

[iProGamer]

I have same problem

[ktx-abhay]

++

[iProGamer]

wen fix???

[kianj2]

+1

[btaluy]

We really could use a fix for this, our engineers are currently having issues to compare data that have missing start dates in certain data points. Can you guys at least give us a status for this if this is something that's going to get fixed or not?

[Ovilia]

I think a quick fix should be adding the same x value for all the series data. Here is a demo.