Issues with CandleStickSeries

[Shawn]

Attached is an image of a rendered RadCartesianChart in which I am trying to overlay a CandlestickSeries on a BarSeries. First, as you can see, the Candlestickseries is horizontally left-aligned. I would like to center that series with respect to the barseries' bars but am having difficulty. Any suggestions? Another problem I am having with the same chart is that the point of the chart is to compare low and high temperatures to the usage. The chart is generating the min y and the max y values for the temperature so the CandletstickSeries may not align vertically with the BarSeries so they can be properly compared. My thought is to allow the user to adjust the temperature chart vertically up and down. To achieve this feature, I would need to get the displayed axis min-y and the displayed axis max-y and add or subtract some value from each. My problems with this is that I don't know how to get and set the displayed min axis y-value and the displayed axis max y-value and would love some suggestions. Here is my XAML so far:

<chart:RadCartesianChart Grid.Row="4" Grid.Column="0" Grid.ColumnSpan="3"  x:Name="AccountUsageChart" Height="500" Width="875" VerticalAlignment="Top" HorizontalAlignment="Center">

                <chart:RadCartesianChart.HorizontalAxis>
                    <chartView:CategoricalAxis HorizontalAlignment="Center" LabelFitMode="Rotate" Title="{Binding XAxisTitle, Mode=TwoWay}" Foreground="Gray" FontSize="15"/>
                </chart:RadCartesianChart.HorizontalAxis>

                <chart:RadCartesianChart.VerticalAxis>
                    <chartView:LinearAxis Title="Usage" ElementBrush="#FF8EC441" FontSize="20"/>
                </chart:RadCartesianChart.VerticalAxis>

                <chart:RadCartesianChart.Grid>
                    <chartView:CartesianChartGrid MajorLinesVisibility="Y" />
                </chart:RadCartesianChart.Grid>

                <chartView:BarSeries CategoryBinding="XValue" ValueBinding="YValue" ItemsSource="{Binding BindingData}" CombineMode="Stack">

                    <telerik:BarSeries.PointTemplate>
                        <DataTemplate>
                            <Rectangle Fill="#FF8EC441"/>
                        </DataTemplate>
                    </telerik:BarSeries.PointTemplate>

                </chartView:BarSeries>

                <chartView:BarSeries CategoryBinding="XValue" ValueBinding="YValue" ItemsSource="{Binding ProjectedBindingData}" CombineMode="Stack" >

                    <telerik:BarSeries.LegendSettings>
                        <telerik:DataPointLegendSettings />
                    </telerik:BarSeries.LegendSettings>

                    <telerik:BarSeries.PointTemplate>
                        <DataTemplate>
                            <Rectangle Fill="Gray"/>
                        </DataTemplate>
                    </telerik:BarSeries.PointTemplate>

                </chartView:BarSeries>

                <chartView:LineSeries Visibility="{Binding ShowLineSeriesTempChart, Converter={StaticResource boolToVisibility}}" CategoryBinding="XValue" ValueBinding="Temp" ItemsSource="{Binding BindingData}" Stroke="#FF1B9DDE" >
                    <chartView:LineSeries.VerticalAxis>
                        <chartView:LinearAxis Title="{Binding TemperatureAxisTitle, Mode=TwoWay}"
                                              ElementBrush="#FF1B9DDE"
                                              HorizontalLocation="Right"
                                              Visibility="{Binding ShowLineSeriesTempChart, Converter={StaticResource boolToVisibility}}"
                                              IsInverse="{Binding FlipTempYAxisVertically, Mode=TwoWay}" />
                    </chartView:LineSeries.VerticalAxis>
                </chartView:LineSeries>

                <chartView:CandlestickSeries ItemsSource="{Binding BindingData}"
                                             CategoryBinding="XValue"
                                             LowBinding="LowTemp"
                                             HighBinding="HighTemp"
                                             OpenBinding="LowTemp"
                                             CloseBinding="HighTemp"
                                             Visibility="{Binding ShowCandleStickTempChart, Converter={StaticResource boolToVisibility}}" >

                    <chartView:CandlestickSeries.DefaultVisualStyle>
                        <Style TargetType="chartView:Candlestick">
                            <Setter Property="MaxWidth" Value="10"/>
                            <Setter Property="HorizontalAlignment" Value="Center"/>
                            <Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Visible"/>
                            <Setter Property="UpFill" Value="#FF1B9DDE"/>
                            <Setter Property="UpStroke" Value="#FF1B9DDE"/>
                            <Setter Property="DownFill" Value="#FF1B9DDE"/>
                            <Setter Property="DownStroke" Value="#FF1B9DDE"/>
                        </Style>
                    </chartView:CandlestickSeries.DefaultVisualStyle>

                    <chartView:CandlestickSeries.VerticalAxis>

                        <chartView:LinearAxis Title="{Binding TemperatureAxisTitle, Mode=TwoWay}"
                                              Visibility="{Binding ShowCandleStickTempChart, Converter={StaticResource boolToVisibility}}"
                                              ElementBrush="#FF1B9DDE"
                                              HorizontalLocation="Right"/>


                    </chartView:CandlestickSeries.VerticalAxis>

                </chartView:CandlestickSeries>

                <telerik:RadCartesianChart.Behaviors>
                    <telerik:ChartSelectionBehavior DataPointSelectionMode="Single" >
                        <i:Interaction.Triggers>
                            <i:EventTrigger EventName="SelectionChanged">
                                <ei:CallMethodAction MethodName="Bar_SelectionChanged"
                                            TargetObject="{Binding}"
                                            IsEnabled="True" />
                            </i:EventTrigger>
                        </i:Interaction.Triggers>
                    </telerik:ChartSelectionBehavior>
                </telerik:RadCartesianChart.Behaviors>

            </chart:RadCartesianChart>

[Petar Kirov]

Hi Shawn,

1. Instead of using CandleStickSeries, you can use RangeBarSeries with an additional horizontal axis. The additional horizontal axis is needed so its category slots align with the chart.HorizontalAxis, but because only one series is using the axes, the series data points will be in the center of the slots:

<telerik:RangeBarSeries CategoryBinding="XValue"
                 LowBinding="LowTemp"
                 HighBinding="HighTemp"
                 ItemsSource="{Binding Data}">
  <telerik:RangeBarSeries.PointTemplate>
    <DataTemplate>
      <Grid>
          <Border Background="#FF1B9DDE"
               Width="10" Height="{Binding ActualHeight, RelativeSource=                                   {RelativeSource AncestorType=Grid}}"
               HorizontalAlignment="Center"/>
      </Grid>
    </DataTemplate>
  </telerik:RangeBarSeries.PointTemplate>
  <telerik:RangeBarSeries.VerticalAxis>
    <telerik:LinearAxis Title="Some Title"
                 ElementBrush="#FF1B9DDE"
                 HorizontalLocation="Right"/>
  </telerik:RangeBarSeries.VerticalAxis>
  <telerik:RangeBarSeries.HorizontalAxis>
    <telerik:CategoricalAxis Visibility="Collapsed"/>
  </telerik:RangeBarSeries.HorizontalAxis>
</telerik:RangeBarSeries

2. The ActualVisibleRange property of the LinearAxis indicates the current (calculated by the chart) axis minimum and maximum. The properties is not a DependencyProperty, so you will need to manually get its value when the axis range is updated:

double min = double.NaN;
double max = double.NaN;

this.chart1.LayoutUpdated += (s,e) =>
{
    min = (this.chart1.Series[0].VerticalAxis as LinearAxis)
            .ActualVisibleRange.Minimum;
    //or
    max = (this.chart1.VerticalAxis as LinearAxis).ActualVisibleRange.Maximum;
    return;
};

The axis Minimum and Maximum properties are DependencyProperties, so you can bind them to your ViewModel if you need to do so.

I hope this helps.
 
Regards,
Petar Kirov
Telerik