Hi, here is a demo:
https://echarts.apache.org/examples/zh/editor.html?c=line-simple&code=DYUwLgBGCWC2IBECGYkQLwQNoCgLYDsQB3CZMEACgHIAmABltoFp6BGVtie-gLh_71qASgA0ENgF1ReQiTIoqdRi3adubQYJHipM_FiKlyShk06ta3PgJ46J02YfkmaZ1R3oBmbrS12xCFpHSQBuHBwAYwB7AgBnSAAjaHiMCABvAF9wnAAzaIAnCEpQSGg0-lCIcoAeKDhEFCQAOlACAHMwAAsqgGpe6GEM2Rj4yAATNJh4ciQsaDCR2ISIccU08ax6SWb28AAxAFdgYABNECQCyiHeiGpmaghbyk3t3fAAWVju66eJG7uDz-rx2ezArmE4Xw0FyxWS8SwawokggAEJMARjsAhulZPh4XFEYoUb1MJspFCIJlZCBgHEQMN8PiUoSkSAUWSsBTZNTqVFlhMmmksItRitIihhYt8kUSuBqtUCBACTiRihmgAHQ5xLqUQaUpEtLU6ygE-aSSE4PnRDUwWJpXH4AAeAEEndA4rxGUywABPDUgL3UCUUdqFX3UfRMw1ekM8qO-t0er2On3-wN3ABuSGAhxA1HjsnpBWgIE92Dx3qZqyaUerfoDQeAKXzlep-EkVtCQA
Thanks
*Ovilia*
On Thu, Dec 1, 2022 at 6:15 PM <andrejmatov...@icloud.com> wrote:
> Hello Olivia,
>
> Thank you for your answer. I managed to do it somehow with xAxis set on
> time, but I had to make a separate chartSeries for each object in an array
> of object and then to tweak settings. I am interested could you send me
> some example with a real usage of xAxis: category and data into bins as I
> couldn’t make it happen and therefore decided to stick with time on axis.
> Though now we cannot do overlapping time interval as we are needing it for
> price forecast of energy prices, which is our app. So, I would be more then
> grateful if you could link me to some example or part of documentation as I
> cannot find part of you mentioned, data from bins and tape: category for
> the logic to be fully controlled by the programmer.
>
> Thank You for your assistance,
>
> Andrej
>
> On 30 Nov 2022, at 04:51, Ovilia <oviliazh...@gmail.com> wrote:
>
> Hi,
>
> I would suggest not using 'time' or 'value' type for xAxis because for
> value-like axes, the stack logic may not work as you may expect.
> You should use a 'category' xAxis and make the data into bins so the logic
> is fully controlled by yourself.
>
> Thanks
>
> *Ovilia*
>
>
> On Tue, Nov 29, 2022 at 6:53 AM <andrejmatov...@icloud.com.invalid> wrote:
>
>> Hello there fellow colleagues developers.
>>
>> Since I have troubles finding out the proper way to implement stack on
>> area stack chart or bar stack chart I am writing to you guys for some
>> guidance or tip as I have not found what I need on your GH page, neither in
>> API reference. So my goal is to make a stack chart either area chart or bar
>> chart. The problem I am getting is that for xAxis I need type: ‘time’. To
>> be precise I need to show FROM and TO from a date and then the value. If
>> the from and to were to be the same then I should stack it on the top, if
>> not then show properly with barWidth changed due to different timestamps.
>> So, for example I need to stack it on the top if the value is to be 100,
>> the second is 300, then my chart should show first 100, then additional
>> 300(400 in total), if the from and to dates are the same..
>> As shown on bellow picture, there is stacked data on bar charts, but not
>> the ones that I need. It does so that if I have values around timestamp as
>> in this case, first element in array is 11:30AM then the values are 130 and
>> 230, instead of me wanted to show (130 and then 360) it shows initial
>> values.. Is there any was I could get around over this. What would you
>> recommend for date from and to intervals? I would be more then thankful for
>> any help or guidance..
>> <Screenshot 2022-11-28 at 15.23.28.png>
>>
>> Part of the code initialising values..
>>
>>
>> this.chartSeries = [
>> {
>> name: this.translateService.instant('ASSETS.RESERVATIONS.POSITIVE_VALUE'
>> ),
>> type: 'bar',
>> emphasis: {
>> focus: 'series'
>> },
>> stack: 'Total',
>> itemStyle: {
>> color: 'rgba(255, 0, 0, 0.2)'
>> },
>> data: this.positiveValues,
>> },
>> {
>> name: this.translateService.instant('ASSETS.RESERVATIONS.NEGATIVE_VALUE'
>> ),
>> type: 'bar',
>> itemStyle: {
>> color: 'rgba(0, 255, 0, 0.25)'
>> },
>> stack: 'Total',
>> emphasis: {
>> focus: 'series'
>> },
>> data: this.negativeValues,
>> }
>> ];
>> this.chartOptions = {
>> grid: {
>> top: 50,
>> bottom: 90,
>> right: 5,
>> left: 80
>> },
>> legend: {
>> data: [
>> this.translateService.instant('ASSETS.RESERVATIONS.POSITIVE_VALUE'),
>> this.translateService.instant('ASSETS.RESERVATIONS.NEGATIVE_VALUE'),
>> ]
>> },
>> toolbox: {
>> orient: 'vertical',
>> top: 0,
>> left: 50,
>> feature: {
>> restore: {
>> show: false
>> },
>> dataZoom: {
>> yAxisIndex: false,
>> icon: {
>> zoom: "path://",
>> back: "path://"
>> }
>> }
>> }
>> },
>> tooltip: {
>> trigger: 'axis',
>> axisPointer: {
>> type: 'cross',
>> label: {
>> backgroundColor: '#6a7985'
>> }
>> },
>> formatter: (val) => {
>> console.log('value on formatter toggle: ',val);
>> if (!Array.isArray(val) || val.length === 0) {
>> return "";
>> }
>> let template = "";
>> let templateUpdatedAt = "";
>> if (Array.isArray(val[0].data) && val[0].data.length > 0) {
>> template += `<div>${time.format(val[0].data[0], "{dd}.{MM}.{yyyy}
>> {HH}:{mm}:{ss}", false)} - </div>`;
>> // template += `<div>${time.format(this.chartDataTo[val["dataIndex"]],
>> "{dd}.{MM}.{yyyy} {HH}:{mm}:{ss}", false)}</div>`;
>> // use this.chartDataTo to find element of arraz bz index...
>> // template += this.chartDataTo.forEach((item) =>
>> {console.log(item);`<div>${time.format(item, "{dd}.{MM}.{yyyy}
>> {HH}:{mm}:{ss}", false)}</div>`});
>> // templateUpdatedAt += `<div class="mt-1">${
>> // this.translateService.instant("SHARED.UPDATED_AT")
>> // }: <span class="ps-2 float-end">${time.format(
>> // this.chartDataUpdatedAt[val[0].data[0]],
>> // "{dd}.{MM}.{yyyy} {HH}:{mm}:{ss}",
>> // false
>> // )}</span></div>`;
>> }
>> template += val.map((params) =>
>> Array.isArray(params.data) && params.data.length > 1 ?
>> `<div>${params.marker ?? ""} ${params.seriesName ?? ""}
>> <span style="float:right"> \u00A0 ${params.data[1]} EUR/MWh</span>
>> </div>` : ""
>> )
>> .join("");
>> template += this.chartLegendValues.map((value, index) =>
>> index < 4 ?
>> `<div>${this.chartLegendTranslations[index] ?? ""}
>> <span style="float:right"> \u00A0 ${value[index] ?? ""} EUR/MWh</span>
>> </div>` :
>> `<div>${this.chartLegendTranslations[index] ?? ""}
>> <span style="float:right"> \u00A0 ${value[index] ?? ""}</span>
>> </div>`
>> )
>> .join("");
>> return template + templateUpdatedAt;
>> }
>> },
>> xAxis: {
>> type: 'time',
>> name: this.translateService.instant('IOT.TIME'),
>> nameGap: 75,
>> boundaryGap: false,
>> nameLocation: 'middle',
>> axisLabel: {
>> rotate: 40,
>> formatter: (val) => time.format(val, '{HH}:{mm}', false)
>> }
>> },
>> yAxis: {
>> type: 'value',
>> name: this.translateService.instant('ASSETS.RESERVATIONS.Y_AXIS'),
>> nameLocation: 'middle',
>> nameGap: 50,
>> scale: false,
>> boundaryGap: ['2%', '2%'],
>> splitArea: {
>> show: true
>> }
>> },
>> series: []
>> };
>>
>
>
