We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

How to align the X axis label and column label when manually changing the column width in ColumnSeries


I am facing an issue to align the X axis label and column label when manually changing the column width in ColumnSeries. Also segment spacing between columns is increased if the width is reduced.

How can I reduce the segment spacing between columns and also align the labels along with column width?

For reference:


Code in XAML:

                                <Border Background="{Binding Interior}"
                                        Canvas.Left="{Binding RectX}"
                                        Canvas.Top="{Binding RectY}"
                                        Width="15" Height="{Binding Height}"/>

1 Reply

NM Nanthini Mahalingam Syncfusion Team March 30, 2023 11:39 AM UTC

Hi Md. Rashidul Hasan,

We have analyzed your query and would like to inform you that we calculate the segment width using the Spacing property in our implementation. We can manually set the width for each column segment and align them with the axis label and data label using the MultiBindingConverter. You can set the width value based on your requirements as shown in the code snippet.





                            <Border Background="{Binding Interior}"

                                        Canvas.Top="{Binding RectY}"

                                        Width="15" Height="{Binding Height}">


                                    <MultiBinding Converter="{StaticResource converter}">

                                        <Binding   Path="RectX" />

                                        <Binding  Path="Width" />








public class Converter : IMultiValueConverter


        public object Convert(object[] values, Type targetType, object parameter, System.Globalization.CultureInfo culture)


            var dataXPosition = (double)values[0] + (double)values[1] / 2;

                var rectX = dataXPosition - 15 / 2;

                return rectX;




        public object[] ConvertBack(object value, Type[] targetTypes, object parameter, System.Globalization.CultureInfo culture)


            throw new NotImplementedException();



By increasing the column width, the spacing between each segment will be reduced. Additionally, we can specify the width for the columns by using the Spacing property in ChartSeriesBase. If we use multiple series, we can set the width of the columns by using the SegmentSpacing property.


Chart, line chart, waterfall chart

Description automatically generated

Please refer to the following documentation:


Please let us know if you need further assistance.


Nanthini Mahalingam.

Attachment: SF_181467_eb68aab6.zip

Live Chat Icon For mobile
Up arrow icon