Synchronize size/width for two RadCartesianChart's

[Intecom]

Hi all.

I need to sync position and width for two RadCartesianChart's.

XAML:

style definition for chart's:            
<Style x:Key="ChartStyle" TargetType="telerik:RadCartesianChart">
                <Setter Property="Template">
                    <Setter.Value>
                        <ControlTemplate TargetType="{x:Type telerik:RadChartBase}">
                            <Border Background="{TemplateBinding Background}"
                                    BorderBrush="{TemplateBinding BorderBrush}"
                                    BorderThickness="{TemplateBinding BorderThickness}">
                                <Grid>
                                    <ContentPresenter x:Name="emptyContent"
                                                      HorizontalAlignment="{TemplateBinding HorizontalContentAlignment}"
                                                      VerticalAlignment="{TemplateBinding VerticalContentAlignment}"
                                                      Content="{TemplateBinding EmptyContent}"
                                                      ContentTemplate="{TemplateBinding EmptyContentTemplate}"
                                                      IsHitTestVisible="False"
                                                      Visibility="Collapsed" />
                                    <Canvas x:Name="adornerContainer"
                                            HorizontalAlignment="Stretch"
                                            VerticalAlignment="Stretch"
                                            Background="Transparent">
                                        <Canvas x:Name="labelContainer"
                                                HorizontalAlignment="Stretch"
                                                VerticalAlignment="Stretch">
                                            <Canvas x:Name="renderSurface"
                                                    HorizontalAlignment="Stretch"
                                                    VerticalAlignment="Stretch">
                                                <Border x:Name="plotAreaDecoration" Style="{TemplateBinding PlotAreaStyle}" />
                                            </Canvas>
                                        </Canvas>
                                    </Canvas>
                                </Grid>
                            </Border>
                        </ControlTemplate>
                    </Setter.Value>
                </Setter>
            </Style>

chart #1:
<telerik:RadCartesianChart x:Name="DeviationChart"
                                               Grid.Row="1"
                                               HorizontalAlignment="Stretch"
                                               VerticalAlignment="Stretch"
                                               MaxZoom="{Binding MaxZoom}"
                                               MouseMove="Chart_OnMouseMove"
                                               PanOffset="{Binding PanOffset,
                                                                   Mode=TwoWay}"
                                               Style="{StaticResource ChartStyle}"
                                               Zoom="{Binding Zoom,
                                                              Mode=TwoWay}">
 
                        <telerik:ScatterAreaSeries x:Name="DeviationSeries"
                                                   Fill="{Binding DeviationFillColor}"
                                                   ItemsSource="{Binding DeviationPoints}"
                                                   Opacity="{Binding DeviationOpacity}"
                                                   Stroke="{Binding DeviationColor}"
                                                   StrokeMode="AllButPlotLine"
                                                   StrokeThickness="{Binding DeviationThickness}"
                                                   Tag="{Binding Path=Settings.PressureEU,
                                                                 Converter={StaticResource PressureEUConverter}}"
                                                   XValueBinding="X"
                                                   YValueBinding="Y">                            
                        </telerik:ScatterAreaSeries>
 				<!-- ... -->
                        <telerik:RadCartesianChart.HorizontalAxis>
                            <telerik:LinearAxis x:Name="DeviationChartHorizontalAxis"
                                                MajorTickStyle="{StaticResource TopChartTickStyle}"
                                                Maximum="{Binding Path=ChartSettings.ChartMaxX}"
                                                Minimum="{Binding Path=ChartSettings.ChartMinX}"
                                                ShowLabels="False"
                                                Visibility="Collapsed" />
                        </telerik:RadCartesianChart.HorizontalAxis>
 
                        <telerik:RadCartesianChart.VerticalAxis>
                            <telerik:LinearAxis x:Name="DeviationChartVerticalAxis"
                                                Title="{Binding Path=PressureBaseEUText}"
                                                LabelFormat="N2"
                                                LastLabelVisibility="Visible"
                                                Maximum="{Binding DeviationChartSettings.ChartMaxY}"
                                                Minimum="{Binding DeviationChartSettings.ChartMinY}"
                                                Style="{StaticResource LinearAxisStyle}" />
                        </telerik:RadCartesianChart.VerticalAxis>
 
                        <telerik:RadCartesianChart.Grid>
                            <telerik:CartesianChartGrid MajorXLinesRenderMode="All"
                                                        MajorYLinesRenderMode="All"
                                                        StripLinesVisibility="None"
                                                        Style="{StaticResource CartesianChartGridStyle}" />
                        </telerik:RadCartesianChart.Grid>
 
                        <telerik:RadCartesianChart.Behaviors>
                            <telerik:ChartPanAndZoomBehavior PanMode="Both" ZoomMode="Both" />
                            <telerik:ChartTrackBallBehavior ShowIntersectionPoints="False"
                                                            ShowTrackInfo="True"
                                                            SnapMode="None" />
                        </telerik:RadCartesianChart.Behaviors>
 
                    </telerik:RadCartesianChart>

					
chart #2:
<telerik:RadCartesianChart x:Name="Chart"
                                           Grid.Row="1"
                                           MaxZoom="{Binding MaxZoom}"
                                           MouseMove="Chart_OnMouseMove"
                                           PanOffset="{Binding PanOffset,
                                                               Mode=TwoWay}"
                                           Style="{StaticResource ChartStyle}"
                                           Zoom="{Binding Zoom,
                                                          Mode=TwoWay}">

                    <telerik:ScatterAreaSeries x:Name="ElevationSeries"
                                               Fill="{Binding ElevationFillColor}"
                                               ItemsSource="{Binding RealElevationsPoints}"
                                               Opacity="{Binding ElevationOpacity}"
                                               Stroke="{Binding ElevationColor}"
                                               StrokeMode="AllButPlotLine"
                                               StrokeThickness="{Binding ElevationThickness}"
                                               XValueBinding="X"
                                               YValueBinding="Y">
                        <telerik:ScatterLineSeries.LegendSettings>
                            <telerik:SeriesLegendSettings Title="{Binding ElevationDescription}" />
                        </telerik:ScatterLineSeries.LegendSettings>
 <!-- ... -->
                        <telerik:ScatterLineSeries.TrackBallInfoTemplate>
                            <DataTemplate>
                                <Border Background="#FFEBEBEB">
                                    <TextBlock Text="{Binding Path=DataPoint.XValue, StringFormat=\{0:N3\}}" />
                                </Border>
                            </DataTemplate>
                        </telerik:ScatterLineSeries.TrackBallInfoTemplate>
                    </telerik:ScatterAreaSeries>

                    <telerik:RadCartesianChart.HorizontalAxis>
                        <telerik:LinearAxis x:Name="ChartHorizontalAxis"
                                            LabelFormat="N0"
                                            Maximum="{Binding Path=ChartSettings.ChartMaxX}"
                                            Minimum="{Binding Path=ChartSettings.ChartMinX}"
                                            Style="{StaticResource LinearAxisStyle}" />
                    </telerik:RadCartesianChart.HorizontalAxis>

                    <telerik:RadCartesianChart.VerticalAxis>
                        <telerik:LinearAxis x:Name="ChartVerticalAxis"
                                            HorizontalLocation="Left"
                                            LabelFormat="N2"
                                            Maximum="{Binding ChartSettings.ChartMaxY}"
                                            Minimum="{Binding ChartSettings.ChartMinY}"
                                            Style="{StaticResource LinearAxisStyle}" />
                    </telerik:RadCartesianChart.VerticalAxis>

                    <telerik:RadCartesianChart.Grid>
                        <telerik:CartesianChartGrid MajorXLinesRenderMode="All"
                                                    MajorYLinesRenderMode="All"
                                                    StripLinesVisibility="None"
                                                    Style="{StaticResource CartesianChartGridStyle}" />
                    </telerik:RadCartesianChart.Grid>

                    <telerik:RadCartesianChart.Behaviors>
                        <telerik:ChartPanAndZoomBehavior PanMode="Both" ZoomMode="Both" />
                        <telerik:ChartTrackBallBehavior ShowIntersectionPoints="False"
                                                        ShowTrackInfo="True"
                                                        SnapMode="None" />
                    </telerik:RadCartesianChart.Behaviors>

                </telerik:RadCartesianChart>

Code:
public override void OnApplyTemplate()
        {
            base.OnApplyTemplate();

            if (!Chart.IsTemplateApplied) Chart.ApplyTemplate();
            if (!DeviationChart.IsTemplateApplied) DeviationChart.ApplyTemplate();

            var chartpad = Chart.Template.FindName("plotAreaDecoration", Chart) as Border;
            var deviationpad = DeviationChart.Template.FindName("plotAreaDecoration", DeviationChart) as Border;

            if (null != chartpad && null != deviationpad)
            {
                chartpad.SizeChanged += (sender, args) =>
                    {
                        // Set position of left edge of chart #1 relative to chart #2
                        object left = chartpad.GetValue(Canvas.LeftProperty);
                        deviationpad.SetValue(Canvas.LeftProperty, left);
                        // Set width of chart #1 relative to chart #2
                        object width = chartpad.GetValue(WidthProperty);
                        deviationpad.SetValue(WidthProperty, width);
                    };
            }
        }
But this doesn't work.
Any ideas?

Best regards,
George.

[Petar Marchev]

Hello George,

Thank you for the attached code snippets.

When you place the two charts in the same grid and no Margins are applied to the charts - the charts automatically end up with the same width. I guess that what you need to do is to make sure that the plot areas of the two charts have the same width. I see that you have tried to manipulate the plotAreaDecoration Border. However, as the name implies, this Border exists for decoration purposes only.

The plot area itself has nothing to do with the size of this Border. The plot area's size of a chart is the result of the chart laying out its axes.

So in order to sync the two plot areas you need to make sure that:
1. The two charts have the same width (this you already have, as the two charts lie in the same Grid)
2. The two vertical axes have the same width. This is easy to do - set the same LabelStyle to both the axes and in this style target the Width property and set it to some value (say 50). 
3. The two horizontal axes have the same line width. The approach is the same, set the same LabelStyle (style that targets the Width property).

I have attached a project based on your code to demonstrate this. Note that have removed the ShowLabels="False" in the top chart and set a label height of 0 (this is needed to sync the two horizontal axes).

All the best,
Petar Marchev
the Telerik team