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.
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

115611 Jan 24,2014 07:33 PM UTC Jan 28,2014 06:35 PM UTC WPF 2
loading
Tags: Chart
Theodosia Konstantinidou
Asked On January 24, 2014 07:33 PM UTC

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 [Syncfusion]
Replied On 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

Theodosia Konstantinidou
Replied On 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

CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;