TimeBar + Chartesian Chart do not align

[Herald]

Hello 

 

I have a TimeBar which Connet is a Cartesian chart. The Period Start and End are the Min and Max dates in the source of the Cartesian chart items. For some reason, the start and the end of the cartesian chart does not align with the boundaries of the TimeBar. As if the chart has has some margin/padding that prohibits it to align with the TiemBar boundaries. (see atteched graphs).

Here is the xaml of the Timebar + cartesian chart:

<telerik:RadTimeBar Height="150" VerticalAlignment="Top"
                            PeriodStart="{Binding PeriodStart, Mode=TwoWay}"
                            PeriodEnd="{Binding PeriodEnd, Mode=TwoWay}"
                            VisiblePeriodStart="{Binding VisiblePeriodStart, Mode=TwoWay}"
                            VisiblePeriodEnd="{Binding VisiblePeriodEnd, Mode=TwoWay}"
                            SelectionStart="{Binding SelectionPeriodStart, Mode=TwoWay}"
                            SelectionEnd="{Binding SelectionPeriodEnd, Mode=TwoWay}">
            

        <telerik:RadTimeBar.Intervals>
            <telerik:YearInterval />
                <telerik:QuarterInterval/>
                <telerik:MonthInterval />
            <telerik:WeekInterval />
            <telerik:DayInterval />
        </telerik:RadTimeBar.Intervals>

            <telerik:RadTimeBar.Content>

                <telerik:RadCartesianChart Height="90" VerticalAlignment="Top">
                    <telerik:RadCartesianChart.Behaviors>
                        <telerik:ChartSelectionBehavior DataPointSelectionMode="Single" />
                        <telerik:ChartTooltipBehavior/>
                    </telerik:RadCartesianChart.Behaviors>
                    <telerik:RadCartesianChart.HorizontalAxis>
                        <telerik:DateTimeContinuousAxis Visibility="Collapsed" ShowLabels="False" TickThickness="0"/>
                    </telerik:RadCartesianChart.HorizontalAxis>
                    <telerik:RadCartesianChart.VerticalAxis>
                        <telerik:LinearAxis Visibility="Collapsed" ShowLabels="False" TickThickness="0" SmartLabelsMode="None"/>
                    </telerik:RadCartesianChart.VerticalAxis>

                    <telerik:RadCartesianChart.Series>
                        <telerik:BarSeries CategoryBinding="EffectiveDate" ValueBinding="PerformanceYTD" ItemsSource="{Binding PortfolioPerformanceHistoryChartItemPositive}">
                            <telerik:BarSeries.TooltipTemplate>
                                <ItemContainerTemplate>
                                    <TextBlock Text="{Binding DataItem.PerformanceYTD, StringFormat=P2}" Background="Bisque" Padding="1"/>
                                </ItemContainerTemplate>
                            </telerik:BarSeries.TooltipTemplate>
                            <telerik:BarSeries.PointTemplate>
                                <DataTemplate>
                                    <Rectangle Width="10" Fill="Blue" />
                                </DataTemplate>
                            </telerik:BarSeries.PointTemplate>
                        </telerik:BarSeries>
                        <telerik:BarSeries CategoryBinding="EffectiveDate" ValueBinding="PerformanceYTD" ItemsSource="{Binding PortfolioPerformanceHistoryChartItemNegative}">
                            <telerik:BarSeries.TooltipTemplate>
                                <ItemContainerTemplate>
                                    <TextBlock Text="{Binding DataItem.PerformanceYTD, StringFormat=P2}" Background="Bisque" Padding="1"/>
                                </ItemContainerTemplate>
                            </telerik:BarSeries.TooltipTemplate>
                            <telerik:BarSeries.PointTemplate>
                                <DataTemplate>
                                    <Rectangle Width="10" Fill="Red" />
                                </DataTemplate>
                            </telerik:BarSeries.PointTemplate>
                        </telerik:BarSeries>
                    </telerik:RadCartesianChart.Series>

                </telerik:RadCartesianChart>
            </telerik:RadTimeBar.Content>
            
        </telerik:RadTimeBar>

 

 

Thanks

Herald

[Martin Ivanov]

Hello Herald,

I've prepared a small example based on your code to show how to sync RadTimeBar with a BarSeries. I hope that helps.

Regards,
Martin Ivanov
Progress Telerik

[Herald]

Thank you. This fixed the problem. The adding of the PlotMode="OnTicks" was what fixed it.