Customize ChartPanAndZoomBehavior for RadCartesianChart

5 posts, 0 answers
  1. Markus
    Markus avatar
    13 posts
    Member since:
    Sep 2013

    Posted 04 Sep 2013 Link to this post


    I have 3x RadCartesianChart using LinearAxis (Y) and DateTimeContinuousAxis (X).
    The zoom & pans shall be synchronized on X, but not Y - right now they are synchronized, but all axes.
    The zoom control beside and underneath the axis shall be visible. DragMode shall be Zoom, but only on horizontally - right now I either can zoom only horizontally and only have the horizontal zoom control below OR I can zoom by selection horizontally & vertically and have both zoom controls.

    Any path on how to achieve this?



  2. Petar Kirov
    Petar Kirov avatar
    425 posts

    Posted 09 Sep 2013 Link to this post

    Hi Markus,

    1. In order synchronize only the horizontal pan/zoom across several charts, you can use the following approach:
    • Introduce two INotifyPropertyChanged properties like these: double HorizontalStart, double HorizontalEnd.
    • Set them in the VM constructor to 0.0 and 1.0, respectively.
    • Add the following implicit style to the resources of the horizontal axes of the chart that you want to be synchronized:
      <Style TargetType="telerik:PanZoomBar">
        <Setter Property="SelectionStart"
                  Value="{Binding HorizontalRangeStart, Mode=TwoWay}"/>
        <Setter Property="SelectionEnd"
                  Value="{Binding HorizontalRangeEnd, Mode=TwoWay}"/>

    This style binds the Zoom control associated with the axis to the properties in your ViewModel and that way the horizontal synchronization is achieved. 

    2. To make the Drag-to-Zoom rectangle work in horizontal mode only, you can set the ChartPanAndZoomBehavior .ZoomMode and .PanMode to Horizontal. 

    To enable the per-chart vertical zooming and panning you will need to add an external range slider next to each chart, hook to its Selection Start/End properties and update the Zoom and PanOffset properties manually. We are planning to introduce bind-able Horizontal/Vertical Range Start/End properties to make this easier with our Q3 release, but for the time being, you will need to manually calculate the Zoom and PanOffset values.

    I have attached two sample projects illustrating the two parts of your question.

    I hope this helps!
    Petar Kirov
    Learn what features your users use (or don't use) in your application. Know your audience. Target it better. Develop wisely.
    Sign up for Free application insights >>

  3. DevCraft banner
  4. Was
    Was avatar
    16 posts
    Member since:
    Dec 2012

    Posted 14 Apr 2014 in reply to Petar Kirov Link to this post

    Hi, how to set background for selection rectangle, which is shown while selecting the range?
  5. Sia
    Sia avatar
    667 posts

    Posted 15 Apr 2014 Link to this post

    Hello Was,

    If you use implicit styling you can define the following implicit style in your application resources (the commented line is the original brush that we use):
    <Style TargetType="telerik:RadCartesianChart" BasedOn="{StaticResource RadChartBaseStyle}">
        <Setter Property="DragZoomBorderStyle">
                <Style TargetType="Border">
                    <Setter Property="BorderBrush" Value="#FF828282" />
                    <Setter Property="BorderThickness" Value="1" />
                    <!--<Setter Property="Background" Value="#40FFFFFF" />-->
                    <Setter Property="Background" Value="Red" />

    If you want to style specific RadCartesianChart, you need to set the style on control's level as follows:
    HorizontalZoomRangeStart="{Binding SelectionStart, Mode=TwoWay}"
    HorizontalZoomRangeEnd="{Binding SelectionEnd, Mode=TwoWay}">
            <Style TargetType="Border">
                <Setter Property="BorderBrush" Value="#FF828282" />
                <Setter Property="BorderThickness" Value="1" />
                <Setter Property="Background" Value="Red" />

    Please try one of the mentioned approached and let me know how it works on your end.


    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

  6. Was
    Was avatar
    16 posts
    Member since:
    Dec 2012

    Posted 16 Apr 2014 in reply to Sia Link to this post

    Thanks a lot, Markus, i've chosen the second way
Back to Top
DevCraft banner