1. Home
  2. Forum
  3. WPF
  4. Is it possible to add trading marker at candlestick?

Is it possible to add trading marker at candlestick?

I'd like to show buy or sell marker at candlestick chart series.
How can I achieve this one?

7 Replies
DS Durgadevi Selvaraj Syncfusion Team January 15, 2018 06:13 PM UTC

 
Thanks for contacting Syncfusion Support. 
 
We have analyzed your requirement (displaying candlestick chart with buy or sell marker) and currently we don’t have this support in SfChart. However, you can achieve this requirement with the help of chart Annotation. 
Please refer the below codes , 
 
Code Snippet[XAML] 
<Grid.Resources> 
            <DataTemplate x:Key="buy"> 
                <StackPanel> 
                    <TextBlock Text="Buy" Margin="-10,0,0,10" HorizontalAlignment="Center"/> 
                    <Polygon Points="-10,10,10,10,0,0" Fill="Red"/> 
                </StackPanel> 
            </DataTemplate> 
 
            <DataTemplate x:Key="sell"> 
                <StackPanel> 
                    <Polygon Points="-10,10,10,10,0,20" Fill="Green"/> 
                    <TextBlock Text="Sell" Margin="-10,0,0,10" HorizontalAlignment="Center"/> 
                </StackPanel> 
            </DataTemplate> 
</Grid.Resources> 
 
 
Code Snippet[C#] 
           ViewModel view = new ViewModel(); 
            TextAnnotation text; 
            for (int i = 0; i < view.StockPriceDetails.Count; i++) 
            { 
                var collection=(view.StockPriceDetails as ObservableCollection<Model>); 
 
                text = new TextAnnotation(); 
                if (collection[i].Open < collection[i].Close) 
                { 
                     
                    text.X1 = i; 
                    text.Y1 = collection[i].Low - 20;                     
                    text.ContentTemplate = grid.Resources["sell"] as DataTemplate; 
                   
                } 
                else 
                { 
                    text.X1 = i; 
                    text.Y1 = collection[i].High + 20; 
                    text.ContentTemplate = grid.Resources["buy"] as DataTemplate;                    
                } 
 
                chart.Annotations.Add(text); 
 
Please find the output screenshot below, 
 
 
 
We have prepared simple sample for your reference and it can be downloaded from the below link, 
 
 
You can our UG Documentation link to know more about chart Annotation, 
 
 
Please let us know if you have any concerns. 
 
Regards, 
Durgadevi S 
  


SO songjaeyong January 16, 2018 03:18 AM UTC

Thank you for your fast reply.

I converted your code behind code to xaml code.
But I don't know how to bind X1 and Y1 value from ObservableCollection data in ViewModel.

<chart:SfChart.Annotations>
                                        <chart:TextAnnotation                                            
                                            CoordinateUnit="Axis"
                                            YAxisName="yAxis_3"
                                            X1="date"
                                            Y1="tradeMarkValue"                                            
                                            >
                                            <chart:TextAnnotation.ContentTemplate>
                                                <DataTemplate>
                                                    <StackPanel>
                                                        <TextBlock Text="trading" Margin="-10,0,0,10" HorizontalAlignment="Center"/>
                                                        <Polygon Points="-10,10,10,10,0,0" Fill="{Binding Converter={StaticResource TradeMarkerConverter}}"/>
                                                    </StackPanel>
                                                </DataTemplate>
                                            </chart:TextAnnotation.ContentTemplate>
                                        </chart:TextAnnotation>
                                    </chart:SfChart.Annotations>

"date" is XBindingPath of my candlestick seriese and tradeMarkValue is high price + 10 to render.

ObservableCollection binded to candlestick seriese has tradeMarkValue when buy or sell traded.



MK Muneesh Kumar G Syncfusion Team January 16, 2018 07:32 AM UTC

Hi Songjaeyong,   
 
We would like to inform you that we have achieved your requirement using annotation feature. So, you need to create annotations equals to view model data count. If you choose XAML to achieve this requirement, same code will be repeated in every annotation and value assigning will be complex. So we recommend you to use C# to achieve this requirement easily.  
 
Please let us know if you have any queries.  
 
Regards,  
Muneesh Kumar G. 


SO songjaeyong January 16, 2018 10:16 AM UTC

I understand your advice.
As you said, using xaml to make annotationcollection is very difficult.
So I found another solution to use scatterseriese. Using this solution, I can use mvvm pattern.
But I have one problem. 
my TraderMarker is high value + offset of candleStick data. But when to render TraderMarket at top area, the TraderMarker not visible.
I think that the Maximum value of the yaxis not reset
How can I solve this problem?

<chart:ScatterSeries   
                                        ItemsSource="{Binding SelectedTargetedStock.DailyChart}" 
                                        XBindingPath="Date" 
                                        YBindingPath="TradeMarker"
                                        ScatterHeight="10" ScatterWidth="20"                                        
                                        Interior="DarkGray" 
                                        StrokeThickness="1"
                                        ListenPropertyChange="True"       
                                        VisibilityOnLegend="Collapsed"
                                        ShowTooltip="True"                                        
                                        chart:ChartTooltip.ShowDuration ="5000"
                                        chart:ChartTooltip.InitialShowDelay="0"
                                        TooltipTemplate="{StaticResource TradeMarkTooltipTemplate}"                                       
                                        YAxis="{DynamicResource yAxis_3}">
                                        <chart:ScatterSeries.CustomTemplate>
                                            <DataTemplate>
                                                <Canvas>
                                                    <Path 
                                                          Fill="{Binding Converter={StaticResource TradeMarkerConverter}}"
                                                          Stretch="Fill"
                                                          Height="{Binding ScatterHeight}" Width="{Binding ScatterWidth}" 
                                                          RenderTransformOrigin="0.5,0.5"                                                        
                                                          Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}"
                                                          Data="M10,-20 L50,-20 L30,-10 L10,-20z">
                                                        <Path.Effect>
                                                            <DropShadowEffect BlurRadius="10" Opacity="0.5" ShadowDepth="4" />
                                                        </Path.Effect>
                                                    </Path>
                                                    <Canvas.RenderTransform>
                                                        <TranslateTransform X="0" Y="-10" />
                                                    </Canvas.RenderTransform>
                                                </Canvas>
                                            </DataTemplate>
                                        </chart:ScatterSeries.CustomTemplate>
                                    </chart:ScatterSeries>



LR Lakshmi Radha Krishnan Syncfusion Team January 18, 2018 04:05 AM UTC

Hi Songjaeyong, 
   
We have checked your query with provided code snippet and we suspect that the size of the custom template is not considered in range. To overcome this issue, we request you to set the RangePadding property of ChartAxis to Additional or PlotOffset property of ChartAxis to offset the start and end range. Please refer the below code snippet for your reference.  
  
   
<chart:SfChart.SecondaryAxis>
        <chart:NumericalAxis RangePadding =”Additional” />     
</chart:SfChart.SecondaryAxis>   
   
   
Please refer the below link for more details about axis padding.  
   
  
Please let us know, if you need further assistance on this. 
  
Regards, 
Lakshmi R. 
 


SO songjaeyong January 18, 2018 05:17 AM UTC

As you said, I changed padding of axis to "additional" and I can see trading marker.

Thank you very much.



DS Durgadevi Selvaraj Syncfusion Team January 19, 2018 04:35 AM UTC

Hi Songjaeyong, 
 
We glad to know that your problem has been resolved. 
 
Please let us know if you need any further assistance on this. 
 
Regards, 
Durgadevi S 


Loader.
Up arrow icon