Stacked Chart Question

[Hung]

I have attached an image of a chart I am looking to reproduce and was wondering if it is possible to do using StackedColumn series

I know I can have a StackedColumn chart with 4 stacked column series (Buys, Sells, Income, Expenses) but I do not want to total all Buys. For instance there may be 6 buy transactions for Jan and I want to show each of the 6 transactions on the chart. Also I want to have small padding between each transaction like in the image attached. Lastly I would need a line draw half way through the chart to indicate 0 and have Buys and Income which are positive numbers to be grouped together above the 0 line and Sells and Expenses which are negative numbers to be grouped together below the 0 line

Attachment: PerformanceChart_98986623.zip

[Muneesh Kumar G]

Hi Hung, 

 

Thanks for using Syncfusion products.  

 

Query 1: For instance, there may be 6 buy transactions for Jan and I want to show each of the 6 transactions on the chart. 

 

We would like to inform you that currently we don’t have direct support to achieve this requirement.  

 

However, we have achieved this by using LineAnnotation with each buy value in jan month as per the below code snippet.  

 

Code snippet 

//We have added buy value in 0th index.  

            var buys = (int)viewModel.Data[0].TotalBuys; 

 

            Random rd = new Random(); 

            double y1; 

 

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

            { 

 

                //Set each buy value 

                if (buys > 0) 

                    y1 = rd.Next(0, buys); 

                else 

                    y1 = rd.Next(buys, 0); 

 

                LineAnnotation line = new LineAnnotation() 

                { 

                    X1 = 2.6,//We have set jan month in 3rd index, so that we have set mid point for X1 and X2 

                    X2 = 3.4, 

                    Y1 = y1, 

                    Y2 = y1, 

                    Stroke = new SolidColorBrush(Colors.White) 

                }; 

 

                chart.Annotations.Add(line); 

            } 

 

Query 2: Also, I want to have small padding between each transaction like in the image attached 

 

You can achieve this by setting StrokeThickness and Stroke value for series as per the below code snippet.  

 

Code snippet 

 

            <chart:StackingColumnSeries XBindingPath="Month" YBindingPath="Sells"  

                                        StrokeThickness="2" Stroke="Transparent" 

                                        Label="Sells" 

                                        ItemsSource="{Binding Data}"/> 

            <chart:StackingColumnSeries XBindingPath="Month" YBindingPath="Income"  

                                        Label="Income" 

                                         StrokeThickness="2" Stroke="Transparent" 

                                        ItemsSource="{Binding Data}"/> 

 

            <chart:StackingColumnSeries XBindingPath="Month" YBindingPath="Expenses"  

                                        Label="Expenses" 

                                         StrokeThickness="2" Stroke="Transparent" 

                                        ItemsSource="{Binding Data}"/> 

             

            <chart:StackingColumnSeries XBindingPath="Month" YBindingPath="Buys"  

                                        Label="Buys" 

                                             StrokeThickness="2" Stroke="Transparent" 

                                                  ItemsSource="{Binding Data}"/> 

 

 

Query 3: Lastly, I would need a line draw half way through the chart to indicate 0 and have Buys and Income which are positive numbers to be grouped together above the 0 line and Sells and Expenses which are negative numbers to be grouped together below the 0 line 

 

You can achieve this by setting HorizontalLineAnnottation with required position as per the below code snippet.  

 

Code snippet 

           <chart:SfChart.Annotations> 

                <chart:HorizontalLineAnnotation Y1="0" Stroke="Black"/> 

            </chart:SfChart.Annotations> 

 

Screenshot: 

 

 

Sample: http://www.syncfusion.com/downloads/support/forum/142962/ze/WPF_Sample267747551 

 

Please let us know if you have any queries.  

  

Thanks,     

Muneesh Kumar G.