How to display values in CandleStickChart's Bars

[Arun]

I am able to get the Mockup using CandleStick chart.. Please look into the attached Screenshot.
Can somebody help me in solving the below 2 issues..
    1. I have to display the "HighValue" and "LowValue" at the top and bottom of every item as in the mockup.
    2. Using Annotation, I have drawn a line at the value of "13" and i have named the Label as "BASE VALUE".
       I want that label to be displayed outside the graph as in the mockup.

<telerik:RadCartesianChart x:Name="xCartesianChart" Height="300"  Width="400" Palette="Windows8" >

            <telerik:RadCartesianChart.VerticalAxis>

                    <telerik:LinearAxis x:Name="verticalAxis"  HorizontalLocation="Left"/>

            </telerik:RadCartesianChart.VerticalAxis>

              

            <telerik:RadCartesianChart.HorizontalAxis >

                    <telerik:CategoricalAxis VerticalLocation="Top" LineThickness="1" LabelInterval="2" ShowLabels="True"/>

            </telerik:RadCartesianChart.HorizontalAxis>

              

            <telerik:CandlestickSeries x:Name="xCandleStick" 

                                       CategoryBinding="XValue" 

                                       LowBinding="YValue2" HighBinding="YValue"

                                       CloseBinding="YValue2" OpenBinding="YValue" 

                                       ShowLabels="True"/>   

              

            <telerik:RadCartesianChart.Annotations>

                <telerik:CartesianGridLineAnnotation Axis="{Binding ElementName=verticalAxis}" Label="BASE VALUE" Value="13" Stroke="Green">

                        <telerik:CartesianGridLineAnnotation.LabelDefinition>

                            <telerik:ChartAnnotationLabelDefinition Location="Left" VerticalAlignment="Top" VerticalOffset="0" HorizontalOffset="80"/>

                        </telerik:CartesianGridLineAnnotation.LabelDefinition>

                    </telerik:CartesianGridLineAnnotation>

            </telerik:RadCartesianChart.Annotations>

              

        </telerik:RadCartesianChart>

//Code-behind

public MainWindow()

        {

            InitializeComponent();

  

            PopulateCartesianChart();

        }

  

void PopulateCartesianChart()

        {

            Random rnd = new Random();

  

            List<ChartDataClass> chartDatas = new List<ChartDataClass>();

  

            for (int i = 0; i < 20; i++)

            {

                ChartDataClass cdc = new ChartDataClass();

                cdc.XValue = i;

                cdc.YValue = rnd.NextDouble() * 100;

                cdc.YValue2 = cdc.YValue - 50;

  

                chartDatas.Add(cdc);

            }

  

            xCartesianChart.Series[0].ItemsSource = chartDatas;

}

Thanks in Advance :)

[Evgenia]

Hello Arun,

 It is not possible to show multiple labels per serie. What I can suggest is that you show the High and Low values in a single Label, formatted one under the other for example. For the purpose you might use the ChartSeriesLabelDefinition and your own custom template:

<telerik:ChartSeriesLabelDefinition Margin="-4 0 0 0">
        <telerik:ChartSeriesLabelDefinition.Template>
            <DataTemplate>
                  <StackPanel>
                                                          <TextBlock Text="{Binding DataItem.HighValue}" HorizontalAlignment="Center" />
                                                         <TextBlock Text="{Binding DataItem.LowValue}" HorizontalAlignment="Center" />
                                                  </StackPanel>
        </DataTemplate>
                            </telerik:ChartSeriesLabelDefinition.Template>
                        </telerik:ChartSeriesLabelDefinition>

Please mind that LowValue and HighValue are properties of your business object class.

Regards,

Evgenia
Telerik

[Arun]

Thanks for your quick reply Evgenia.. As you suggested, i have added a 'ChartSeriesLabelDefinition' Template with 2 Textblocks to display both the HighBinding and LowBinding property values.. But they are not getting displayed. I am not sure what DataItem refers to.

I looked into someother solutions but am not able to open the attached project(Error : This project requires Windows8 or higher to load). Any help will be appreciated.. It will be great if you could attach a workable solution.

Reference:-
http://www.telerik.com/community/forums/metro/chart-xaml/displaying-category-value-in-bar-series-label.aspx

<telerik:CandlestickSeries x:Name="xCandleStick"
                                           CategoryBinding="XValue"
                                           CloseBinding="YValue2"
                                           HighBinding="YValue"
                                           LowBinding="YValue2"
                                           OpenBinding="YValue"
                                           ShowLabels="True">
                    <telerik:CandlestickSeries.LabelDefinitions>
                        <telerik:ChartSeriesLabelDefinition Margin="-4 0 0 0">
                            <telerik:ChartSeriesLabelDefinition.Template>
                                <DataTemplate>
                                    <StackPanel>
                                        <TextBlock HorizontalAlignment="Center" Text="{Binding YValue}" />
                                        <TextBlock HorizontalAlignment="Center" Text="{Binding DataContext.YValue2, RelativeSource={RelativeSource AncestorType={x:Type telerik:CandlestickSeries}}}" />
                                    </StackPanel>
                                </DataTemplate>
                            </telerik:ChartSeriesLabelDefinition.Template>
                        </telerik:ChartSeriesLabelDefinition>
                    </telerik:CandlestickSeries.LabelDefinitions>
                </telerik:CandlestickSeries>

[Evgenia]

Hi Arun,

 You may find attached a sample that demonstrates what I explained in my previous post. Feel free to modify it per your own scenario needs.

Regards,
Evgenia
Telerik

[Arun]

Thanks Evgenia for your sample solution. It works.. Can you answer my 2nd question also..!!
2. Using Annotation, I have drawn a line at the value of "13" and i have named the Label as "BASE VALUE".
   I want that label to be displayed outside the graph as in the mockup.

[Evgenia]

Hello,

 I'm glad my project was helpful.
 There are three ways you might choose from to achieve your second requirement:

1. You might set Title for the Vertical Axis and Rotate the label via Custom style for the axis so that is appears as you desire. For the purpose you need to create Style with TargetType TextBlock.
Let me know if you need further assistance with this.

2. You might choose to use a CartesianCustomAnnotation where its Content is simple text or TextBlock. Use it with combination of ClipToPlotArea property set to false so that the text will go outside the plot area.

3. Simply position a TextBlock over the chart at the place you desire and use the Horizontal/Vertical Alignment and Margin properties to fixate its position over the ChartView.

Regards,
Evgenia
Telerik