How to equally space columns in react synfusion

Question

I'm currently working on presenting some data in bar chart format in react using syncfusion. I've checked out the documentation and tested everything I can come over to try and solve this problem, but with no success. I want the bars in the following bar plot to be centered over the label, but the first and last bar seems to stick to respectively left and right edge. Has anyone had this problem before? It doesn't seem to be the default behaviour, which is a bit strange.

Code rendering the bar chart:

<div>
<ChartComponent id='b-chart'
                background={"rgb(32, 42, 59)"}
                width={'80%'}
                height={'70%'}
                titleStyle={{color: "white"}}
                primaryXAxis={{
                    labelPlacement: 'BetweenTicks' ,
                    labelStyle: {color: "white"},
                    valueType: "Category",
                    edgeLabelPlacement: 'None'
                }}
                primaryYAxis={{
                    minimum: 0,
                    maximum: 200,
                    labelStyle: {color: "white"},
                    titleStyle: {color: "white"},
                    title: "Duration[sec]"
                }}>
    <Inject services={[ColumnSeries, Category, DataLabel, Tooltip, Legend]}/>
    <SeriesCollectionDirective>
        <SeriesDirective cornerRadius={{topLeft: 15, topRight: 15}} columnWidth={1} fill={"orange"}
                         border={{color:"black", width:1}} marker={{dataLabel:{visible:true}}}
                         dataSource={valSeries1} xName='x' yName='y' type='Column'/>
        <SeriesDirective cornerRadius={{topLeft: 15, topRight: 15}} columnWidth={1} fill={"lightblue"}
                         border={{color:"black", width:1}} marker={{dataLabel:{visible:true}}}
                         dataSource={valSeries2} xName='x' yName='y' type='Column'/>
        <SeriesDirective cornerRadius={{topLeft: 15, topRight: 15}} columnWidth={1} fill={"lightgrey"}
                         border={{color:"black", width:1}} marker={{dataLabel:{visible:true}}}
                         dataSource={valSeries3} xName='x' yName='y' type='Column'/>
    </SeriesCollectionDirective>
</ChartComponent>
</div>