echarts line between grouped bar chart

Question

I am trying to make the data groupen more obvious in my chart:

I would like a line to go through the middle to indicate that they are two different data sets. However i am not quite sure how to do it.

Here is my code for generating the chart:

const frequencyChartoption = {
title: {},
tooltip: {},
legend: {
    data: ['Frekvens', 'Vigtighed']
},
xAxis: {
    type: 'category',
    data: ['marker_01', 'marker_02'],
    axisLine: {
        show: true
    },
    axisTick: {
        show: true
    },
    axisLabel: {
        formatter: function (value) {
            return '{' + value + '| }\n{value|}';
        },
        margin: 20,
        rich: {
            value: {
                lineHeight: 30,
                align: 'center'
            },
            marker_01: {
                height: 20,
                align: 'center',
                backgroundColor: {
                    image: icons.marker_01
                }
            },
            marker_02: {
                height: 20,
                align: 'center',
                backgroundColor: {
                    image: icons.maker_02
                }
            },

        }

    }
},
yAxis: {
    axisLine: {
        show: true
    },
    axisTick: {
        show: true
    },
    axisLabel: {}
},
series: [{
    name: 'Frekvens',
    type: 'bar',
    data: frequencyChartFrequencyScore,
    tooltip: {
        formatter: '{c0}'
    },
    itemStyle: {
        normal: {
            color: colors[0],
            label: {
                interval: 5,
                show: true,
                position: 'top',
                formatter: '\n{c}'
            }
        }
    }
},
    {
        name: 'Vigtighed',
        type: 'bar',
        data: frequencyChartImportance,
        tooltip: {
            formatter: '{c0}'
        },
        itemStyle: {
            normal: {
                color: colors[1],
                label: {
                    show: true,
                    position: 'top',
                    formatter: '\n{c}'
                }
            }
        }
    }
]
};

Can anyone help me out?

Answer 1

I think what you are looking for is a splitLine . Just enabled splitLine on your xAxis and style it accordingly.

xAxis: {
    splitLine: {
        show: true,
        lineStyle: ...         
    }
}