ECharts: Display Label For Each Item With Multiple Series

Question

Here is an Echarts column chart:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon','Tue']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [120],
        type: 'bar'
    },
{
        data: [100],
        type: 'bar'
    }    
    ]
};

It will display a column chart with two bars, one for each series. ECharts will render it as such:

What I really want is for Mon to be a label for the red bar in the first data series, and Tue to be a label for the blue bar in the second data series. In other words, I want the x label for each item in each series to display, as it would if it were a single series:

This second chart is the way I want it to display except I want the Tue bar to display in blue as it would if it were in another series.

In my real-life scenario, I expect there would be only one item per series, so if the solution has something to do with the name of the series as opposed to names/label of the individual items, that would work for me.

Any guidance would be appreciated.

Answer 1

There are at least two ways you can accomplish this.

1. Use two bar series and barGap :

option = {
    xAxis: {
        type: 'category',
        data: ['Mon','Tue']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: ['-', 120],
        type: 'bar',
        barGap: '-100%'
    },
{
        data: [100, '-'],
        type: 'bar'
    }    
    ]
};

ref: https://echarts.apache.org/en/option.html#series-bar.barGap

2. Use a single bar series with a customized data item:

option = {
    xAxis: {
        type: 'category',
        data: ['Mon','Tue']
    },
    yAxis: {
        type: 'value'
    },
    series: [{
        data: [
            120,
            {
                value: 100,
                itemStyle: {
                    color: '#324b5b'
                }
            }
        ],
        type: 'bar'
    }    
    ]
};

ref: https://echarts.apache.org/en/option.html#series-bar.data

Either of the above approaches should yield a chart that looks like this: two vertical bars with different colours