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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Stacked Chart Question

Thread ID:

Created:

Updated:

Platform:

Replies:

142962 Feb 27,2019 03:50 AM UTC Feb 27,2019 07:17 AM UTC UWP 1
loading
Tags: SfChart
Hung
Asked On February 27, 2019 03:50 AM UTC

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 [Syncfusion]
Replied On 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.     
   


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;