We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Stacked Chart Question

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

1 Reply

Muneesh Kumar G February 27, 2019 07:17 AM UTC

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: 
 
 
 
Please let us know if you have any queries.  
  
Thanks,     
Muneesh Kumar G.     
   

Loader.
Live Chat Icon For mobile
Up arrow icon