Drawing Envelopes in Line Charts

[tomsoftware]

What problem does this feature solve?

I do want to mark the area in between two lines in a line-chart

The "confidence-band" is quiet a hack cause it shifts all data up over 0 and fakes all lables and ticks https://echarts.apache.org/examples/en/editor.html?c=confidence-band

Is there a other way to set two series and mark the area in between

What does the proposed API look like?

Chart.js uses a "fill" property to set the relative-index of the dataset to fill to https://www.chartjs.org/docs/latest/charts/area.html https://stackoverflow.com/questions/37866992/filling-area-between-two-lines-chart-js-v2

[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 you have posted enough image to demo your request. 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 dev@echarts.apache.org. Please attach the issue link if it's a technical questions.

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

Have a nice day! 🍵

[Ovilia]

https://echarts.apache.org/examples/en/editor.html?c=confidence-band is the recommended way to do this.

[tomsoftware]

Hi Ovilia: The "confidence-band" example is quiet a hack cause it uses a "base" value to shifts all y-values to be larger then 0 and fakes all lables and ticks.This is quite an bad idea cause I want to dynamicly add new values... how should I do this? Always calculating and applying a new base? Also this makes the code quiet complicated.

[quillblue]

Though agree with "confidence-band" is somehow a hack, I'm afraid I don't think putting fill property in line series is reasonable. Envelop should not belongs to line serires, but directly to the chart. Maybe in further features of drawing area markers (using line series/axis as boundery) or drawing such kind of envelops via a new kind of chart extensions will be added, but currently confidence-band hack is the most recommend way to implement such kind of effects.

[tomsoftware]

By the way: there is a bug in the "confidence-band" example: Line 31: return params[2].name + '<br />' + params[2].value; should be return params[2].name + '<br />' + (params[2].value - base) * 100; to cover up the shifting-hack (the base value is 3)

[Ovilia]

@tomsoftware base value is used because ECharts handles stacking in the following logic: negative lines/bars stack with negative bars and positive with positive ones.

[tomsoftware]

@Ovilia because of that, this issue was marked as "new-feature" and not a "support" question. May you could add the "new-feature" label again? In my opinion this is a missing feature.

[Ovilia]

I marked this to be a new feature but I don't think we plan to make this new feature recently. Because as I said, the suggested method to do so is to this as the demo does. It's not much a "hack" and it does complete the job without much bother.

[creadone]

I tried to make the similar visual with custom series. @tomsoftware, maybe you find something useful until desired feature not implemented official.

https://stackoverflow.com/questions/61724715/echarts-plot-the-variance-of-signals

[github-actions[bot]]

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.

[xmatthias]

I would still think this is relevant, as the current hacky way has some drawbacks when using more complex charts (with tooltip etc).

[mkersche17]

I fully agree with @xmatthias and think this is still a relevant feature.

In my case I have a lot of datapoints in my data base, which can not be loaded an displayed. Therefore I load a reduced number (e.g. 1000) of points. For those points I get the mean, max and min. So I can very nice plot the mean and filling between max and min would nicely indicate that the signal is not that smooth and indeed has some variance. When zoom in a repeat the process and therefore get more and more acurate. I think this is a very valid use case which a lot of users have.

The condidence interval example will not solve the issue. Even if we think that we can have multiple series in one chart. Furthermore adjusting fake ticks and axis labels should not be our ambition here..

Right now, I am using the areaStyle attribute with origin: 'start' to color the background for the max series and the same for the min series but using the background color of the webpage as color and a higher z-index, which is quite a hack. This is also only working for one series.

One idea which I had was: Since v5.3.2. it is possible to set a number as origin. So it is possible to fill between a series and a number. If it would be possible to set an array of numbers as origin this would do the trick. Here we could set the upper bound of the variance as the series data and the lower as the areaStyle origin. @Ovilia what do you think?