Как равномерно распределить столбцы в React Synfusion

Question

В настоящее время я работаю над представлением некоторых данных в формате гистограммы в реакции с использованием syncfusion. Я проверил документацию и протестировал все, что мог, чтобы попытаться решить эту проблему, но безуспешно. Я хочу, чтобы столбцы на следующем графике столбцов располагались по центру метки, но кажется, что первый и последний столбцы прилипают к левому и правому краю соответственно. У кого-нибудь раньше была такая проблема? Это не похоже на поведение по умолчанию, что немного странно.

Код, отображающий гистограмму:

      <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>