How to resize a WPF column chart control without stretching the columns?

[Theodosia Konstantinidou]

Hello,

I have a WPF chart control and I have given to the columns a specific width. What I want is to resize the whole grid and the chart area without stretching the columns.

Is there any way we can accomplish this?

Thank you in advance,

Theodosia Konstantinidou

[Karthikeyan V]

Hi Theodosia,

Thanks for using the Syncfusion products.

We have analysed the reported requirement. You can achieve your requirement with two ways.

Solution 1: SegmentWidthMode

Your requirement can be achieved by using the SegmentWidthMode as Relative and specified the columns width in data collection.

Code Snippet [XAML]:

  <chart:ChartSeries   

 

SegmentWidthMode="Relative" // Segment Width mode works with only Non-Indexed  

 

IsIndexed="False"   Name="Series1"   BindingPathX="ProdId" Type="Column"

 

BindingPathsY="Stock,Size" // Stock as YValue and Size as column Width

DataSource="{Binding Products}" />

          

Solution 2: Custom Template

Also you can achieve your requirement by applying the custom template. Please find the code snippet for this in below:

Code Snippet [XAML]:

        <DataTemplate x:Key="columnTemplate">

            <Grid HorizontalAlignment="Left" VerticalAlignment="Top" RenderOptions.EdgeMode="Aliased" Height="{Binding Height}" Width="{Binding Width}">

                <Grid.Margin>

                    <MultiBinding Converter="{StaticResource ColumnMargin}">

                        <Binding Path="X" />

                        <Binding Path="Y" />

                    </MultiBinding>

                </Grid.Margin>

                <Rectangle     Width="10" Height="{Binding Height}" Fill="{Binding Interior}" Stroke="{Binding Stroke}"

                 StrokeThickness="{Binding StrokeThickness}" ToolTip="{Binding ToolTip}" />

            </Grid>

        </DataTemplate>

<chart:ChartSeries  Template="{StaticResource columnTemplate}"    BindingPathX="ProdId" Type="Column" BindingPathsY="Stock,Price" DataSource="{Binding Products}"></chart:ChartSeries>

         

We have prepared a sample based on this and please find the sample under the following location.

Please let us know if you require further assistance on this.

Thanks,

Karthikeyan V.

ColumnChartCustomWidth_5aa6325a.zip

[Theodosia Konstantinidou]

Hi Karthikeyan V!

I have already tried the first solution, but it didn't work in my project. However, the second solution you provided (the one with the custom template) was exactly what I wanted.

I really thank you very very much!

Theodosia Konstantinidou