Skip to content

Commit f1acab9

Browse files
Saravanan-MadheshSaravanan-Madhesh
authored
Merge pull request #1 from SyncfusionExamples/BarChart
Task 914558- Adding multiple customized bar chart
2 parents 6b4473a + 0ad0570 commit f1acab9

11 files changed

+361
-2
lines changed

‎MeasuresOfPower/MeasuresOfPower.sln

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.9.34728.123
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MeasuresOfPower", "MeasuresOfPower\MeasuresOfPower.csproj", "{0FECEFAC-9D3A-453E-BF70-C70743E90885}"
7+
EndProject
8+
Global
9+
GlobalSection(SolutionConfigurationPlatforms) = preSolution
10+
Debug|Any CPU = Debug|Any CPU
11+
Release|Any CPU = Release|Any CPU
12+
EndGlobalSection
13+
GlobalSection(ProjectConfigurationPlatforms) = postSolution
14+
{0FECEFAC-9D3A-453E-BF70-C70743E90885}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{0FECEFAC-9D3A-453E-BF70-C70743E90885}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{0FECEFAC-9D3A-453E-BF70-C70743E90885}.Release|Any CPU.ActiveCfg = Release|Any CPU
17+
{0FECEFAC-9D3A-453E-BF70-C70743E90885}.Release|Any CPU.Build.0 = Release|Any CPU
18+
EndGlobalSection
19+
GlobalSection(SolutionProperties) = preSolution
20+
HideSolutionNode = FALSE
21+
EndGlobalSection
22+
GlobalSection(ExtensibilityGlobals) = postSolution
23+
SolutionGuid = {E3797CE1-A384-4024-831A-7EE1F33CC0B1}
24+
EndGlobalSection
25+
EndGlobal

‎MeasuresOfPower/MeasuresOfPower/App.xaml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<Application x:Class="MeasuresOfPower.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:MeasuresOfPower"
5+
StartupUri="MainWindow.xaml">
6+
<Application.Resources>
7+
8+
</Application.Resources>
9+
</Application>

‎MeasuresOfPower/MeasuresOfPower/App.xaml.cs

+14
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 MeasuresOfPower
6+
{
7+
/// <summary>
8+
/// Interaction logic for App.xaml
9+
/// </summary>
10+
public partial class App : Application
11+
{
12+
}
13+
14+
}

‎MeasuresOfPower/MeasuresOfPower/AssemblyInfo.cs

+10
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+
)]

‎MeasuresOfPower/MeasuresOfPower/MainWindow.xaml

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<Window x:Class="MeasuresOfPower.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:MeasuresOfPower"
8+
mc:Ignorable="d">
9+
10+
<Window.DataContext>
11+
<local:MeasureData/>
12+
</Window.DataContext>
13+
14+
<Border Margin="25" Padding="10,10,50,20" BorderThickness="2" CornerRadius="10">
15+
16+
<Border.Background>
17+
<LinearGradientBrush StartPoint="0,0" EndPoint="1,1">
18+
<GradientStop Color="#708BD2" Offset="0" />
19+
<GradientStop Color="#b0b8bf" Offset="0.6" />
20+
<GradientStop Color="#5065BE" Offset="0.8" />
21+
<GradientStop Color="#2138A2" Offset="1" />
22+
</LinearGradientBrush>
23+
</Border.Background>
24+
25+
<charts:SfChart Annotations="{Binding Annotation}">
26+
27+
<charts:SfChart.Resources>
28+
29+
<DataTemplate x:Key="seriesTemplate">
30+
<Canvas>
31+
<Rectangle Canvas.Left="{Binding RectX}" Canvas.Top="{Binding RectY}"
32+
Width="{Binding Width}" Height="{Binding Height}" RadiusX="10" RadiusY="10">
33+
<Rectangle.Fill>
34+
<VisualBrush TileMode="Tile" Viewport="0,0,10,10" ViewportUnits="Absolute"
35+
Viewbox="0,0,10,10" ViewboxUnits="Absolute">
36+
37+
<VisualBrush.Transform>
38+
<RotateTransform Angle="45"/>
39+
</VisualBrush.Transform>
40+
41+
<VisualBrush.Visual>
42+
<Canvas>
43+
<Rectangle Fill="{Binding Interior}" Width="5" Height="20"/>
44+
<Rectangle Fill="White" Width="5" Height="20" Canvas.Left="5"/>
45+
</Canvas>
46+
</VisualBrush.Visual>
47+
</VisualBrush>
48+
</Rectangle.Fill>
49+
</Rectangle>
50+
</Canvas>
51+
</DataTemplate>
52+
53+
</charts:SfChart.Resources>
54+
55+
<charts:SfChart.Header>
56+
<TextBlock TextAlignment="Center" Text="U.S. vs. China: Who Holds the Title of World’s #1 Superpower?"
57+
FontSize="20" Margin="0,0,0,20" Foreground="White" FontWeight="DemiBold"/>
58+
</charts:SfChart.Header>
59+
60+
<charts:SfChart.PrimaryAxis>
61+
<charts:CategoryAxis FontSize="0.1" Origin="0" ShowAxisNextToOrigin="True"
62+
TickLineSize="0" ShowGridLines="False">
63+
64+
<charts:CategoryAxis.AxisLineStyle>
65+
<Style TargetType="Line">
66+
<Setter Property="StrokeThickness" Value="2"/>
67+
<Setter Property="Stroke" Value="White"/>
68+
</Style>
69+
</charts:CategoryAxis.AxisLineStyle>
70+
71+
</charts:CategoryAxis>
72+
</charts:SfChart.PrimaryAxis>
73+
74+
<charts:SfChart.SecondaryAxis>
75+
<charts:NumericalAxis FontSize="14" Interval="0.5" Minimum="-1" TickLineSize="0"
76+
Foreground="White" EdgeLabelsDrawingMode="Shift">
77+
78+
<charts:NumericalAxis.AxisLineStyle>
79+
<Style TargetType="Line">
80+
<Setter Property="StrokeThickness" Value="0"/>
81+
</Style>
82+
</charts:NumericalAxis.AxisLineStyle>
83+
84+
<charts:NumericalAxis.MajorGridLineStyle>
85+
<Style TargetType="Line">
86+
<Setter Property="StrokeThickness" Value="0.25"/>
87+
<Setter Property="Stroke" Value="White"/>
88+
</Style>
89+
</charts:NumericalAxis.MajorGridLineStyle>
90+
91+
</charts:NumericalAxis>
92+
</charts:SfChart.SecondaryAxis>
93+
94+
<charts:SfChart.Legend>
95+
<charts:ChartLegend DockPosition="Right" LegendPosition="Inside" Foreground="White"
96+
FontSize="13" IconHeight="13" IconWidth="13">
97+
98+
<charts:ChartLegend.Header>
99+
<TextBlock Text="Overall Strength Score" FontWeight="SemiBold" FontSize="15" Margin="-30,0,0,0"/>
100+
</charts:ChartLegend.Header>
101+
102+
</charts:ChartLegend>
103+
</charts:SfChart.Legend>
104+
105+
<charts:BarSeries Label="US : 0.89" ItemsSource="{Binding Data}" XBindingPath="Measures" YBindingPath="US"
106+
CustomTemplate="{StaticResource seriesTemplate}" SegmentSpacing="0.2" Interior="#0003CE">
107+
108+
<charts:BarSeries.AdornmentsInfo>
109+
<charts:ChartAdornmentInfo ShowLabel="True" LabelPosition="Outer" FontSize="14" UseSeriesPalette="False" Foreground="White"/>
110+
</charts:BarSeries.AdornmentsInfo>
111+
112+
</charts:BarSeries>
113+
114+
<charts:BarSeries Label="China : 0.8" ItemsSource="{Binding Data}" XBindingPath="Measures" YBindingPath="China"
115+
CustomTemplate="{StaticResource seriesTemplate}" SegmentSpacing="0.2" Interior="#EE3D43">
116+
117+
<charts:BarSeries.AdornmentsInfo>
118+
<charts:ChartAdornmentInfo ShowLabel="True" LabelPosition="Outer" FontSize="14" UseSeriesPalette="False" Foreground="White"/>
119+
</charts:BarSeries.AdornmentsInfo>
120+
</charts:BarSeries>
121+
122+
</charts:SfChart>
123+
124+
</Border>
125+
</Window>

‎MeasuresOfPower/MeasuresOfPower/MainWindow.xaml.cs

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
using System.Globalization;
2+
using System.Windows;
3+
using System.Windows.Data;
4+
5+
namespace MeasuresOfPower
6+
{
7+
public partial class MainWindow : Window
8+
{
9+
public MainWindow()
10+
{
11+
InitializeComponent();
12+
}
13+
}
14+
15+
16+
17+
}

‎MeasuresOfPower/MeasuresOfPower/MeasuresOfPower.csproj

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<Project Sdk="Microsoft.NET.Sdk">
2+
3+
<PropertyGroup>
4+
<OutputType>WinExe</OutputType>
5+
<TargetFramework>net8.0-windows</TargetFramework>
6+
<Nullable>enable</Nullable>
7+
<ImplicitUsings>enable</ImplicitUsings>
8+
<UseWPF>true</UseWPF>
9+
</PropertyGroup>
10+
11+
<ItemGroup>
12+
<PackageReference Include="Syncfusion.SfChart.WPF" Version="*" />
13+
</ItemGroup>
14+
15+
</Project>

‎MeasuresOfPower/MeasuresOfPower/MeasuresOfPower.csproj.user

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
<Project ToolsVersion="Current" xmlns="http://schemas.microsoft.com/developer/msbuild/2003">
3+
<PropertyGroup />
4+
<ItemGroup>
5+
<ApplicationDefinition Update="App.xaml">
6+
<SubType>Designer</SubType>
7+
</ApplicationDefinition>
8+
</ItemGroup>
9+
<ItemGroup>
10+
<Page Update="MainWindow.xaml">
11+
<SubType>Designer</SubType>
12+
</Page>
13+
</ItemGroup>
14+
</Project>

‎MeasuresOfPower/MeasuresOfPower/Model/MeasureModel.cs

+30
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
namespace MeasuresOfPower
2+
{
3+
public class MeasureModel
4+
{
5+
public string Measures { get; set; }
6+
public double US { get; set; }
7+
public double China { get; set; }
8+
public AnnotationModel AnnotationValue { get; set; }
9+
10+
public MeasureModel(string measures, double us, double china, AnnotationModel annotationValue)
11+
{
12+
Measures = measures;
13+
US = us;
14+
China = china;
15+
AnnotationValue = annotationValue;
16+
AnnotationValue.Text = measures;
17+
}
18+
}
19+
20+
public class AnnotationModel
21+
{
22+
public double X1 { get; set; }
23+
public double X2 { get; set; }
24+
public double Y1 { get; set; }
25+
public double Y2 { get; set; }
26+
public string? Text { get; set; }
27+
public double TextX { get; set; }
28+
public double TextY { get; set; }
29+
}
30+
}

‎MeasuresOfPower/MeasuresOfPower/ViewModel/MeasureData.cs

+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
using Syncfusion.UI.Xaml.Charts;
2+
using System.Collections.ObjectModel;
3+
using System.Windows;
4+
using System.Windows.Documents;
5+
using System.Windows.Media;
6+
7+
namespace MeasuresOfPower
8+
{
9+
public class MeasureData
10+
{
11+
public ObservableCollection<MeasureModel> Data { get; set; }
12+
public AnnotationCollection Annotation { get; set; }
13+
14+
public MeasureData()
15+
{
16+
Data = new ObservableCollection<MeasureModel>()
17+
{
18+
new MeasureModel("Reserve Currency Status",1.9, -0.6,new AnnotationModel()
19+
{
20+
X1=0.1, Y1=0, X2=0.1, Y2=2.4, TextX=0.3, TextY=2.4
21+
}),
22+
new MeasureModel("Financial Center",2.7, 0.2,new AnnotationModel()
23+
{
24+
X1=1.0, Y1=0 ,X2=1.1, Y2=2.6, TextX=1.3, TextY=2.6
25+
}),
26+
new MeasureModel("Economic Output",1.7, 1.6,new AnnotationModel()
27+
{
28+
X1=2.0, Y1=0, X2=2.0, Y2=2.3, TextX=2.2, TextY=2.3
29+
}),
30+
new MeasureModel("Trade",1.3, 1.7,new AnnotationModel()
31+
{
32+
X1=3.0, Y1=0, X2=3.0, Y2=-0.5, TextX=3.2, TextY=-0.63
33+
}),
34+
new MeasureModel("Military",2.1, 0.9,new AnnotationModel()
35+
{
36+
X1=4.0, Y1=0, X2=4.0, Y2=-0.7, TextX=4.2, TextY=-0.89
37+
}),
38+
new MeasureModel("Competitiveness",-0.4,1.0,new AnnotationModel()
39+
{
40+
X1=5.0, Y1=0, X2=5.0, Y2=2.3, TextX=5.2, TextY=2.3
41+
}),
42+
new MeasureModel("Innovation and Technology",1.9,1.8 ,new AnnotationModel()
43+
{
44+
X1=6.0, Y1=0, X2=6.0, Y2=-0.3, TextX=6.2, TextY=-0.9
45+
}),
46+
new MeasureModel("Education", 2.0, 1.6,new AnnotationModel()
47+
{
48+
X1=7.0, Y1=0, X2=7.0, Y2=-0.3, TextX=7.2, TextY=-0.54
49+
}),
50+
};
51+
52+
Annotation = new AnnotationCollection();
53+
54+
foreach (var measure in Data)
55+
{
56+
Annotation.Add(new LineAnnotation()
57+
{
58+
X1 = measure.AnnotationValue.X1,
59+
Y1 = measure.AnnotationValue.Y1,
60+
X2 = measure.AnnotationValue.X2,
61+
Y2 = measure.AnnotationValue.Y2,
62+
StrokeThickness = 1.5,
63+
Stroke = new SolidColorBrush(Colors.White),
64+
StrokeDashArray = new DoubleCollection() { 2, 3 },
65+
});
66+
67+
Annotation.Add(new TextAnnotation()
68+
{
69+
Text = measure.AnnotationValue.Text,
70+
X1 = measure.AnnotationValue.TextX,
71+
Y1 = measure.AnnotationValue.TextY,
72+
Foreground = new SolidColorBrush(Colors.White),
73+
FontStyle = FontStyles.Italic,
74+
FontSize = 14.5
75+
});
76+
}
77+
}
78+
}
79+
}

‎README.md

+23-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,23 @@
1-
# Creating-a-WPF-Multiple-Bar-Chart-Visualizing-U.S.-vs.-China-Superpower-Status
2-
Learn how to create a WPF multiple bar chart to compare and visualize the superpower status of the U.S. and China. Discover which country leads in various metrics and gain insights into their global influence.
1+
# Creating a WPF Multiple Bar Chart Visualizing U.S. vs. China Superpower Status
2+
3+
A bar chart is used to display a distribution of data points or compare metric values across different subgroups of your data.
4+
5+
## Customization:
6+
We can customize the color, border, and width of the bar chart using the [Palette](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Palette),[Interior](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeriesBase.html#Syncfusion_UI_Xaml_Charts_ChartSeriesBase_Interior), [Stroke](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_Stroke), and [StrokeThickness](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.ChartSeries.html#Syncfusion_UI_Xaml_Charts_ChartSeries_StrokeThickness) properties respectively.
7+
8+
## Watermark:
9+
We can add any view to the plot area using [Watermark](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html#Syncfusion_UI_Xaml_Charts_SfChart_Watermark) support, which is useful for adding any relevant data.
10+
11+
## Annotation:
12+
[SfChart](https://help.syncfusion.com/cr/wpf/Syncfusion.UI.Xaml.Charts.SfChart.html) supports annotations, which allow you to mark specific areas of interest in the chart. You can add shapes, text, and images using [annotations](https://help.syncfusion.com/wpf/charts/annotations).
13+
14+
This article demonstrates how to create a WPF multiple bar chart to compare and visualize the superpower status of the U.S. and China. Discover which country leads in various metrics and gain insights into their global influence.
15+
16+
<img width="940" alt="image" src="https://github.com/user-attachments/assets/ae209a62-ca0a-44fb-86bc-59c415d62286">
17+
18+
19+
## Troubleshooting:
20+
### Path too long exception:
21+
If you encounter a path too long exception when building this example project, close Visual Studio and rename the repository to a shorter name before building the project.
22+
23+
For a step-by-step procedure, refer to the [Which Country is the World’s #1 Superpower? blog]().

0 commit comments

Comments
 (0)