Как я могу удалить пробел между двумя категориями, у меня есть динамические категории, и я использую тип диаграммы Столбец с опцией построения графика нормального стека

Question

Я хочу удалить пробел между категориями.Я приложил код.У меня есть задача, которая принадлежит проекту.В настоящее время у меня около 10 проектов, относящихся к категории.Проблема с моим текущим кодом заключается в расстоянии между барами категорий.И бар должен быть в центре категории

Я пробовал отступы и интервалы между группами, но это не решило мою проблему.

         chart: {
            type: 'column'
        },
        title: {
            text: 'Program View'
        },
        xAxis: {
            categories: ['Active', 'Planned','Scheduled','Undefinded'],              
        },
        yAxis: {
            title: {
                text: 'Duration'
            },
            stackLabels: {
                enabled: false,
                style: {
                    fontWeight: 'normal',
                    color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                }
            }

        },

        plotOptions: {

            column: {
                stacking: 'normal'
            }
        },


        series:
        [
            {
                name: 'Task 1',
                data: [{ x: 0, y: 7,duration:7}, { x: 1, y: 0,duration:1 },{ x: 2, y: 0,duration:0}, { x: 3, y: 0,duration:0 }], stack: '5G Roll Out',color: 'blue'
            },
            {
                name: 'Task 2',
                data: [{ x: 0, y: 20,duration:20 }, { x: 1, y: 0,duration:0 },{ x: 2, y: 0,duration:0}, { x: 3, y: 0,duration:0 }], stack: '5G Roll Out',color: 'blue'
            }, {
                name: 'Task 4',
                data: [{ x: 0, y: 12,duration:12 }, { x: 1, y: 0,duration:0 },{ x: 2, y: 0,duration:0}, { x: 3, y: 0,duration:0 }], stack: 'LTE Enhancement',color: 'blue'
            }, {
                name: 'Task 5',
                 data: [{ x: 0, y: 5,duration:5 }, { x: 1, y: 0,duration:0 },{ x: 2, y: 0,duration:0}, { x: 3, y: 0,duration:0 }], stack: 'ZTM Deployement',color: '#ECECEC'
            }, {
                name: 'Task 6',
                data: [{ x: 0, y: 15,duration:15 }, { x: 1, y: 0,duration:0 },{ x: 2, y: 0,duration:0}, { x: 3, y: 0,duration:0 }], stack: 'ZTM Deployement',color: 'blue'
            },{
                name: 'Task 9',
                data: [{ x: 0, y: 4,duration:4 }, { x: 1, y: 0,duration:0 },{ x: 2, y: 0,duration:0}, { x: 3, y: 0,duration:0 }], stack: 'ZTM Deployement',color: 'blue'
            },{
                name: 'Task 10',
                data: [{ x: 0, y: 15,duration:12 }, { x: 1, y: 0,duration:0 },{ x: 2, y: 0,duration:0}, { x: 3, y: 0,duration:0 }], stack: 'ZTM Deployement',color: 'blue'
            },{
                name: 'Task 11',
                data: [{ x: 0, y: 15,duration:15 }, { x: 1, y: 0,duration:0 },{ x: 2, y: 0,duration:0}, { x: 3, y: 0,duration:0 }], stack: 'Sprint-11',color: 'blue'
            },{
                name: 'Task 12',
                data: [{ x: 0, y: 5,duration:5 }, { x: 1, y: 0,duration:0 },{ x: 2, y: 0,duration:0}, { x: 3, y: 0,duration:0 }], stack: 'Sprint-11',color: 'blue'
            },{
                name: 'Task 18',
                data: [{ x: 0, y: 0,duration:0 }, { x: 1, y: 0,duration:0 },{ x: 2, y: 7,duration:0}, { x: 3, y: 0,duration:0 }], stack: '4g-Service1',color: 'yellow'
            },{
                name: 'Task 19',
                data: [{ x: 0, y: 0,duration:0 }, { x: 1, y: 0,duration:0 },{ x: 2, y: 7,duration:0}, { x: 3, y: 0,duration:0 }], stack: '4g-Service1',color: 'yellow'
            },{
                name: 'Task 20',
                data: [{ x: 0, y: 0,duration:0 }, { x: 1, y: 0,duration:0 },{ x: 2, y: 7,duration:0}, { x: 3, y: 0,duration:0 }], stack: '4g-Service1',color: 'yellow'
            }
        ]
    });

});

вот моя jsfiddle Ссылка