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

Subscribe to this post

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

Reply | Reply with quote

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:

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.

Reply | Reply with quote

Stacked Chart Question

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US