I want to create bar chart with multiple series overlapping each other.

Stack bar chart places bar on top of another bar.

I want all bar to start from the bottom like below example.

Is there any way to achieve this with echarts ?

I want to create bar chart with multiple series overlapping each other.

Stack bar chart places bar on top of another bar.

I want all bar to start from the bottom like below example.

Is there any way to achieve this with echarts ?

• javascript
• echarts
• baidu
• ngecharts

Share Improve this question Follow asked Jan 18, 2020 at 11:40 AnkurAnkur 3,20955 gold badges3030 silver badges5757 bronze badges 4

• Is this something you are looking for - ibb.co/kMpYQnq – Gautam Commented Jan 18, 2020 at 12:05
• @gautam Yes. Similar to that. It's just all bar should start from bottom. Not on top of another. – Ankur Commented Jan 18, 2020 at 12:29
• You can find the example here: echarts.apache/examples/en/… – Ray Commented Jan 20, 2020 at 5:07
• @Raymond It puts bar on top of bar. For ex one bar is of value 20 & another is 30 then on chart final bar should be 30 not 20+30=50. Current example provides a way to put one bar on top of another not overlappin. – Ankur Commented Jan 20, 2020 at 6:22

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

This example

added

series: [
    {
        name: 'Forest',
        type: 'bar',
        barGap: '-100%',  // this changed
        barCategoryGap: '80%', // this changed
        label: labelOption,
        data: [320, 332, 301, 334, 390]
    },
    {
        name: 'Steppe',
        type: 'bar',
        label: labelOption,
        data: [220, 182, 191, 234, 290]
    },
    {
        name: 'Desert',
        type: 'bar',
        label: labelOption,
        data: [150, 232, 201, 154, 190]
    },
    {
        name: 'Wetland',
        type: 'bar',
        label: labelOption,
        data: [98, 77, 101, 99, 40]
    }
]