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

[Md. Rashidul Hasan]

Hi,

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:

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

[Nanthini Mahalingam]

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.

[Xaml]

<chart:ColumnSeries.CustomTemplate>

                    <DataTemplate>

                        <Canvas>

                            <Border Background="{Binding Interior}"

                                        Canvas.Top="{Binding RectY}"

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

                                <Canvas.Left>

                                    <MultiBinding Converter="{StaticResource converter}">

                                        <Binding   Path="RectX" />

                                        <Binding  Path="Width" />

                                    </MultiBinding>

                                </Canvas.Left>

                            </Border>

                        </Canvas>

                    </DataTemplate>

                </chart:ColumnSeries.CustomTemplate>

MultiBindingConverter

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.

Output

Please refer to the following documentation:

https://help.syncfusion.com/wpf/charts/seriestypes/columnandbar#spacing

Please let us know if you need further assistance.

Regards,

Nanthini Mahalingam.

Attachment: SF_181467_eb68aab6.zip