Skip to content

Commit c403a36

Browse files
SyncfusionKarthikeyanSyncfusionKarthikeyan
authored
Merge pull request #1 from SyncfusionExamples/876726-Creating-the-WPF-StackedArea-Chart-to-visualize-wealth-distribution-in-America-from-1990-to-2023
876726 Creating the WPF Stacked area chart to visualize wealth distribution in America from 1990 to 2023
2 parents b705562 + bfabb09 commit c403a36

File tree

12 files changed

+1160
-2
lines changed

12 files changed

+1160
-2
lines changed

‎README.md‎

Lines changed: 28 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,28 @@
1-
# Creating-the-WPF-StackedArea-Chart-to-visualize-wealth-distribution-in-America-from-1990-to-2023
2-
This sample demonstrates how to Create the Syncfusion WPF Stacked Area Chart to visualize wealth distribution in America based on income groups from 1990 to 2023.
1+
# Creating the WPF StackedArea Chart to visualize wealth distribution in America from 1990 to 2023
2+
3+
This sample demonstrates how to Create the Syncfusion WPF Stacked Area Chart to visualize wealth distribution in America based on income groups spanning from 1990 to 2023.
4+
5+
# Stacked Area Chart
6+
7+
A WPF Stacked Area Chart is a data visualization tool used to represent the cumulative values of different categories over time. It is composed of multiple data series stacked on top of each other, with the area below the lines filled with colors to differentiate between the categories.
8+
9+
![WealthDistribution](https://github.com/SyncfusionExamples/Creating-the-WPF-StackedArea-Chart-to-visualize-wealth-distribution-in-America-from-1990-to-2023/assets/124584591/ffe8fa1c-23b3-4886-abb9-8bd5c1a7909d)
10+
11+
## Customized chart appearance
12+
13+
In this demonstration, we've focused on enhancing the appearance of the Stacked Area Series interior while also customizing the chart axis labels using custom labels for better representation and understanding.
14+
15+
Additionally, we enhancing the appearance of Stacked Area chart with following properties for better visualization.
16+
17+
* Header.
18+
* Axis Labels and styles.
19+
20+
We use the following WPF SfChart feature to displaying the additional information about the chart.
21+
22+
* [Text Annotation](https://help.syncfusion.com/wpf/charts/annotations#text-annotation) - This feature allows the user to add Text property in specific points over the chart area.
23+
24+
Also customize the chart layout using border and use the stroke thickness, stroke color and background color properties for better visual of chart.
25+
26+
For a comprehensive, step-by-step guide on implementing this chart and understanding the underlying process, please refer to our detailed blog post titled "Wealth Distribution in America from 1990 to 2023."
27+
28+
If you have a any query, can also contact us through our [support forums](https://www.syncfusion.com/forums), [support portal](https://support.syncfusion.com/) or [feedback portal](https://www.syncfusion.com/feedback). We are always happy to assist you!

‎WhealthDistributionSample/App.xaml‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Application x:Class="WhealthDistributionSample.App"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:local="clr-namespace:WhealthDistributionSample"
5+
StartupUri="MainWindow.xaml">
6+
<Application.Resources>
7+
8+
</Application.Resources>
9+
</Application>

‎WhealthDistributionSample/App.xaml.cs‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
using System.Configuration;
2+
using System.Data;
3+
using System.Windows;
4+
5+
namespace WhealthDistributionSample
6+
{
7+
/// <summary>
8+
/// Interaction logic for App.xaml
9+
/// </summary>
10+
public partial class App : Application
11+
{
12+
}
13+
14+
}

‎WhealthDistributionSample/AssemblyInfo.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
using System.Windows;
2+
3+
[assembly: ThemeInfo(
4+
ResourceDictionaryLocation.None, //where theme specific resource dictionaries are located
5+
//(used if a resource is not found in the page,
6+
// or application resource dictionaries)
7+
ResourceDictionaryLocation.SourceAssembly //where the generic resource dictionary is located
8+
//(used if a resource is not found in the page,
9+
// app, or any theme specific resource dictionaries)
10+
)]

‎WhealthDistributionSample/MainWindow.xaml‎

Lines changed: 129 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,129 @@
1+
<Window x:Class="WhealthDistributionSample.MainWindow"
2+
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
4+
xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
5+
xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
6+
xmlns:charts="clr-namespace:Syncfusion.UI.Xaml.Charts;assembly=Syncfusion.SfChart.WPF"
7+
xmlns:local="clr-namespace:WhealthDistributionSample"
8+
mc:Ignorable="d"
9+
Title="MainWindow" Height="640" Width="879" Background="Black">
10+
11+
<Window.Resources>
12+
<local:ValueConverter x:Key="ColorCoverter"/>
13+
</Window.Resources>
14+
15+
<!--Border for the chart-->
16+
<Border Margin="20" BorderThickness="2" BorderBrush="White" CornerRadius="10" Padding="0,0,40,0">
17+
18+
<charts:SfChart x:Name="chart" Grid.Column="0" Palette="LightCandy" Margin="20,10,0,20" HorizontalContentAlignment="Stretch" VerticalContentAlignment="Stretch" HorizontalHeaderAlignment="Left">
19+
<charts:SfChart.DataContext>
20+
<local:HouseHoldWealthData x:Name="viewModel"/>
21+
</charts:SfChart.DataContext>
22+
23+
<charts:SfChart.Resources>
24+
25+
<charts:NumericalAxis x:Key="yAxis" x:Name="YAxis" Interval="50000000" ActualRangeChanged="NumericalAxis_ActualRangeChanged" LabelCreated="NumericalAxis_LabelCreated" Maximum="146000000" >
26+
<charts:NumericalAxis.LabelStyle>
27+
<charts:LabelStyle Foreground="White"/>
28+
</charts:NumericalAxis.LabelStyle>
29+
<charts:NumericalAxis.AxisLineStyle>
30+
<Style TargetType="Line">
31+
<Setter Property="StrokeThickness" Value="0"/>
32+
</Style>
33+
</charts:NumericalAxis.AxisLineStyle>
34+
35+
</charts:NumericalAxis>
36+
37+
</charts:SfChart.Resources>
38+
39+
<charts:SfChart.Header>
40+
<Border>
41+
<Grid x:Name="header">
42+
<Grid.ColumnDefinitions>
43+
<ColumnDefinition />
44+
<ColumnDefinition Width="5*"/>
45+
</Grid.ColumnDefinitions>
46+
47+
<Image Source="Wealth.png" Grid.Column="0" Margin="0,5,0,5" Width="70" Height="60"/>
48+
49+
<StackPanel Grid.Column="1" Margin="5,2,0,0" HorizontalAlignment="Left" Orientation="Vertical">
50+
<Label Content="A Comprehensive Analysis of Household Wealth Distribution" FontSize="22" FontFamily="AntaRegular" Foreground="White"/>
51+
<Label Content="in the US by Exploring Income Groups" FontSize="22" Margin="0,2,0,0" FontFamily="AntaRegular" Foreground="White"/>
52+
</StackPanel>
53+
</Grid>
54+
55+
</Border>
56+
</charts:SfChart.Header>
57+
58+
<charts:SfChart.PrimaryAxis>
59+
60+
<charts:CategoryAxis Interval="25" ShowGridLines="False">
61+
<charts:CategoryAxis.LabelStyle>
62+
<charts:LabelStyle Foreground="White"/>
63+
</charts:CategoryAxis.LabelStyle>
64+
</charts:CategoryAxis>
65+
66+
</charts:SfChart.PrimaryAxis>
67+
68+
<charts:SfChart.SecondaryAxis>
69+
70+
<charts:NumericalAxis x:Name="customAxis" OpposedPosition="True" LabelsSource="{Binding Labels}" ContentPath="Content" PositionPath="Position" ShowGridLines="False" EdgeLabelsDrawingMode="Shift" TickLineSize="0" >
71+
72+
<charts:NumericalAxis.AxisLineStyle>
73+
<Style TargetType="Line">
74+
<Setter Property="StrokeThickness" Value="0"/>
75+
</Style>
76+
</charts:NumericalAxis.AxisLineStyle>
77+
78+
<charts:NumericalAxis.LabelTemplate>
79+
<DataTemplate>
80+
<Border Width="70" Background="{Binding LabelContent, Converter= {StaticResource ColorCoverter}}">
81+
<Label Content="{Binding LabelContent}" Foreground="Black" HorizontalContentAlignment="Center" FontWeight="SemiBold"/>
82+
</Border>
83+
</DataTemplate>
84+
</charts:NumericalAxis.LabelTemplate>
85+
86+
</charts:NumericalAxis>
87+
88+
</charts:SfChart.SecondaryAxis>
89+
90+
<charts:SfChart.Annotations>
91+
<charts:TextAnnotation CoordinateUnit="Axis" Y1="100000000" X1="70.60" >
92+
<charts:TextAnnotation.ContentTemplate>
93+
<DataTemplate>
94+
<StackPanel>
95+
<TextBlock Text="The share of wealth held by the top 0.1% has reached its highest point to date" Foreground="White" FontSize="10" FontWeight="Medium" Width="105" Height="60" TextAlignment="Justify" TextWrapping="Wrap"/>
96+
</StackPanel>
97+
</DataTemplate>
98+
</charts:TextAnnotation.ContentTemplate>
99+
100+
</charts:TextAnnotation>
101+
<charts:TextAnnotation CoordinateUnit="Axis" Y1="18000000" X1="75.60" >
102+
<charts:TextAnnotation.ContentTemplate>
103+
<DataTemplate>
104+
<StackPanel>
105+
<TextBlock Text="In 2011, the bottom 50% reached a historically low share of wealth, at just 0.4%" Foreground="Black" FontSize="10" FontWeight="Medium" Width="135" Height="50" TextAlignment="Justify" TextWrapping="Wrap"/>
106+
</StackPanel>
107+
</DataTemplate>
108+
</charts:TextAnnotation.ContentTemplate>
109+
110+
</charts:TextAnnotation>
111+
</charts:SfChart.Annotations>
112+
113+
<charts:StackingAreaSeries ItemsSource="{Binding Bottom50Data}" YAxis="{StaticResource yAxis}" XBindingPath="Date" YBindingPath="Value" Interior="#A94438" >
114+
</charts:StackingAreaSeries>
115+
<charts:StackingAreaSeries ItemsSource="{Binding Next40}" YAxis="{StaticResource yAxis}" XBindingPath="Date" YBindingPath="Value" Interior="#CD5C08">
116+
</charts:StackingAreaSeries>
117+
<charts:StackingAreaSeries ItemsSource="{Binding Top9}" YAxis="{StaticResource yAxis}" XBindingPath="Date" YBindingPath="Value" Interior="#E8C872">
118+
</charts:StackingAreaSeries>
119+
<charts:StackingAreaSeries ItemsSource="{Binding Top1}" YAxis="{StaticResource yAxis}" XBindingPath="Date" YBindingPath="Value" Interior="#BBE2EC" >
120+
</charts:StackingAreaSeries>
121+
<charts:StackingAreaSeries ItemsSource="{Binding TopPoint1}" YAxis="{StaticResource yAxis}" XBindingPath="Date" YBindingPath="Value" Interior="#DFF5FF">
122+
</charts:StackingAreaSeries>
123+
124+
</charts:SfChart>
125+
126+
</Border>
127+
128+
129+
</Window>

‎WhealthDistributionSample/MainWindow.xaml.cs‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
using Syncfusion.UI.Xaml.Charts;
2+
using System.Text;
3+
using System.Windows;
4+
using System.Windows.Controls;
5+
using System.Windows.Data;
6+
using System.Windows.Documents;
7+
using System.Windows.Input;
8+
using System.Windows.Media;
9+
using System.Windows.Media.Imaging;
10+
using System.Windows.Navigation;
11+
using System.Windows.Shapes;
12+
13+
namespace WhealthDistributionSample
14+
{
15+
/// <summary>
16+
/// Interaction logic for MainWindow.xaml
17+
/// </summary>
18+
public partial class MainWindow : Window
19+
{
20+
public MainWindow()
21+
{
22+
InitializeComponent();
23+
24+
}
25+
26+
private void NumericalAxis_LabelCreated(object sender, LabelCreatedEventArgs e)
27+
{
28+
double value = Convert.ToDouble(e.AxisLabel.LabelContent);
29+
double trillionValue = value / 1000000;
30+
if(trillionValue <= 100)
31+
{
32+
e.AxisLabel.LabelContent = $"${trillionValue}T";
33+
}
34+
else
35+
{
36+
e.AxisLabel.LabelContent = string.Empty;
37+
e.AxisLabel.Position = 0;
38+
}
39+
}
40+
41+
private void NumericalAxis_ActualRangeChanged(object sender, ActualRangeChangedEventArgs e)
42+
{
43+
customAxis.Maximum = (double?)e.ActualMaximum;
44+
customAxis.Minimum = (double?)e.ActualMinimum;
45+
}
46+
}
47+
48+
49+
public class ValueConverter : IValueConverter
50+
{
51+
public object Convert(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
52+
{
53+
string content = value.ToString();
54+
55+
// Define your color mappings based on content
56+
switch (content)
57+
{
58+
case "Bottom 50%":
59+
return "#A94438";
60+
case "50 - 90%":
61+
return "#CD5C08";
62+
case "90 - 99%":
63+
return "#E8C872";
64+
case "Top 0.9%":
65+
return "#BBE2EC";
66+
case "Top 0.1%":
67+
return "#DFF5FF";
68+
default:
69+
return null; // Return default color or null
70+
}
71+
}
72+
public object ConvertBack(object value, Type targetType, object parameter, System.Globalization.CultureInfo culture)
73+
{
74+
return null;
75+
}
76+
}
77+
}

‎WhealthDistributionSample/Model/WealthData.cs‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
using System;
2+
using System.Collections.Generic;
3+
using System.Linq;
4+
using System.Text;
5+
using System.Threading.Tasks;
6+
7+
namespace WhealthDistributionSample
8+
{
9+
public class WealthData
10+
{
11+
public string Date { get; set; }
12+
13+
public double Value { get; set; }
14+
public double Bottom50 { get; set; }
15+
public double Next40 { get; set; }
16+
public double Top9 { get; set; }
17+
public double Top1 { get; set; }
18+
public double TopPoint1 { get; set; }
19+
20+
public WealthData(string date, double value)
21+
{
22+
Date = date;
23+
Value = value;
24+
}
25+
}
26+
}

0 commit comments

Comments
 (0)