Is it possible to make a double stack chart in ECharts

Question

The ECharts provide stack option to stack multiple area/line charts together.
https://echarts.apache.org/en/option.html#series-line.stack

I have three charts that look like this:

To achieve it you can paste the following code here: https://echarts.apache.org/examples/en/editor.html?c=area-stack

option = {
  title: {
    text: 'Double stack',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    data: ['stack 1', 'stack 2', 'basis'],
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['0', '1', '2', '3', '4', '5', '6'],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: 'stack 1',
      type: 'line',
      areaStyle: {
        color: 'red',
      },
      data: [140, 150, 160, 180, 160, 240, 160],
    },
    {
      name: 'stack 2',
      type: 'line',
      areaStyle: {
        color: 'green',
      },
      data: [120, 140, 130, 150, 120, 160, 125],
    },
    {
      name: 'basis',
      type: 'line',
      areaStyle: {
        color: 'blue',
      },
      data: [100, 110, 120, 130, 90, 130, 120],
    },
  ],
};

However I would like to stack both the green and the red charts on the blue one to get something like this:

I can add the values of the blue one to both other charts and get the result and get the following options:

option = {
  title: {
    text: 'Double stack',
  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985',
      },
    },
  },
  legend: {
    data: ['stack 1', 'stack 2', 'basis'],
  },
  toolbox: {
    feature: {
      saveAsImage: {},
    },
  },
  grid: {
    left: '3%',
    right: '4%',
    bottom: '3%',
    containLabel: true,
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: ['0', '1', '2', '3', '4', '5', '6'],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: 'stack 1',
      type: 'line',
      areaStyle: {
        color: 'red',
      },
      data: [140 + 100, 150 + 110, 160 + 120, 180 + 130, 160 + 90, 240 + 130, 160 + 120],
    },
    {
      name: 'stack 2',
      type: 'line',
      areaStyle: {
        color: 'green',
      },
      data: [120 + 100, 140 + 110, 130 + 120, 150 + 130, 120 + 90, 160 + 130, 125 + 120],
    },
    {
      name: 'basis',
      type: 'line',
      areaStyle: {
        color: 'blue',
      },
      data: [100, 110, 120, 130, 90, 130, 120],
    },
  ],
};

but this way I will loose the interactive functionalities of ECharts.

Is there a possible way to do this? To stack the red and the green chart on the blue one but not on each other?

Answer 1

You need to do the same all series' names like this.

series: [
{
  name: 'stack',
  type: 'line',
  areaStyle: {
    color: 'red',
  },
  data: [140, 150, 160, 180, 160, 240, 160],
},
{
  name: 'stack',
  type: 'line',
  areaStyle: {
    color: 'green',
  },
  data: [120, 140, 130, 150, 120, 160, 125],
},
{
  name: 'stack',
  type: 'line',
  areaStyle: {
    color: 'blue',
  },
  data: [100, 110, 120, 130, 90, 130, 120],
},
],

and also, you can modify the tooltip with this

I hope, it will be helpful for you.

Answer 2

I found a simple solution for this by duplicating the basis graph with the very same data and colors, so the user doesn't see two graphs, then stack the red graph on one example of blue, and the green one on the other copy of the blue one like this:

option = {
  legend: {
    data: ['blue', 'red', 'green'],
  },
  xAxis: [
    {
      boundaryGap: false,
      data: ['0', '1', '2', '3', '4', '5', '6'],
    },
  ],
  yAxis: [
    {
      type: 'value',
    },
  ],
  series: [
    {
      name: 'blue',
      stack: 'stack 1',
      type: 'line',
      areaStyle: {
        color: 'blue',
      },
      data: [100, 110, 120, 130, 90, 130, 120],
    },
    {
      name: 'blue',
      stack: 'stack 2',
      type: 'line',
      areaStyle: {
        color: 'blue',
      },
      data: [100, 110, 120, 130, 90, 130, 120],
    },
    {
      name: 'red',
      stack: 'stack 1',
      type: 'line',
      areaStyle: {
        color: 'red',
      },
      data: [140, 150, 160, 180, 160, 240, 160],
    },
    {
      name: 'green',
      stack: 'stack 2',
      type: 'line',
      areaStyle: {
        color: 'green',
      },
      data: [120, 140, 130, 150, 120, 160, 125],
    },
  ],
};

This will insure that both copies of the blue graph (standing as basis for both red and green one) will be disabled/enabled together since they have the same name, and each one of the the red and green graphs is stacked on a different blue copy.