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

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

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


2 Replies

KV Karthikeyan V Syncfusion Team January 28, 2014 05:48 PM UTC

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


TK Theodosia Konstantinidou January 28, 2014 06:35 PM UTC

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

Loader.
Live Chat Icon For mobile
Up arrow icon