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?