Skip to content

Commit a7aaf00

Browse files
SyncfusionKarthikeyanSyncfusionKarthikeyan
authored
Merge pull request #1 from SyncfusionExamples/MAUI-863148-Add_Blog_sample
MAUI-863148- Added Stacked column chart blog Sample
2 parents b814fa9 + 6d9887a commit a7aaf00

34 files changed

+1276
-2
lines changed

‎README.md‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,7 @@
1-
# Creating-a-Stacked-Column-Chart-for-Global-Smartphone-Shipments
2-
Creating a Stacked Column Chart for Global Smartphone Shipments
1+
# Creating a Stacked Column Chart for Global Smartphone Shipments
2+
3+
A [Stacked column chart](https://help.syncfusion.com/maui/cartesian-charts/stackedcolumn) comprises columns stacked on top of one another, allowing a comparison of the total and the relative contribution of each sub-category. In this case, the columns represent the quarterly smartphone shipments for 2022, while the line chart illustrates the market share of smartphones in 2022.
4+
5+
<img width="930" alt="StackedColumn" src="https://github.com/SyncfusionExamples/Creating-a-Stacked-Column-Chart-for-Global-Smartphone-Shipments/assets/102796134/d384b86e-2793-4cf3-a570-b45495d91434">
6+
7+

‎SmartphoneShipmentsDemo/SmartphoneShipmentsDemo.sln‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
2+
Microsoft Visual Studio Solution File, Format Version 12.00
3+
# Visual Studio Version 17
4+
VisualStudioVersion = 17.8.34227.203
5+
MinimumVisualStudioVersion = 10.0.40219.1
6+
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "SmartphoneShipmentsDemo", "SmartphoneShipmentsDemo\SmartphoneShipmentsDemo.csproj", "{309D8857-2B0B-4680-BF2C-50ABBD91B73F}"
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+
{309D8857-2B0B-4680-BF2C-50ABBD91B73F}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
15+
{309D8857-2B0B-4680-BF2C-50ABBD91B73F}.Debug|Any CPU.Build.0 = Debug|Any CPU
16+
{309D8857-2B0B-4680-BF2C-50ABBD91B73F}.Debug|Any CPU.Deploy.0 = Debug|Any CPU
17+
{309D8857-2B0B-4680-BF2C-50ABBD91B73F}.Release|Any CPU.ActiveCfg = Release|Any CPU
18+
{309D8857-2B0B-4680-BF2C-50ABBD91B73F}.Release|Any CPU.Build.0 = Release|Any CPU
19+
{309D8857-2B0B-4680-BF2C-50ABBD91B73F}.Release|Any CPU.Deploy.0 = Release|Any CPU
20+
EndGlobalSection
21+
GlobalSection(SolutionProperties) = preSolution
22+
HideSolutionNode = FALSE
23+
EndGlobalSection
24+
GlobalSection(ExtensibilityGlobals) = postSolution
25+
SolutionGuid = {2728EC67-E673-48BE-A548-3B372867E1E0}
26+
EndGlobalSection
27+
EndGlobal

‎SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/App.xaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version = "1.0" encoding = "UTF-8" ?>
2+
<Application xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:local="clr-namespace:SmartphoneShipmentsDemo"
5+
x:Class="SmartphoneShipmentsDemo.App">
6+
<Application.Resources>
7+
<ResourceDictionary>
8+
<ResourceDictionary.MergedDictionaries>
9+
<ResourceDictionary Source="Resources/Styles/Colors.xaml" />
10+
<ResourceDictionary Source="Resources/Styles/Styles.xaml" />
11+
</ResourceDictionary.MergedDictionaries>
12+
</ResourceDictionary>
13+
</Application.Resources>
14+
</Application>

‎SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/App.xaml.cs‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
namespace SmartphoneShipmentsDemo
2+
{
3+
public partial class App : Application
4+
{
5+
public App()
6+
{
7+
InitializeComponent();
8+
9+
MainPage = new AppShell();
10+
}
11+
}
12+
}

‎SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/AppShell.xaml‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<?xml version="1.0" encoding="UTF-8" ?>
2+
<Shell
3+
x:Class="SmartphoneShipmentsDemo.AppShell"
4+
xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
5+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
6+
xmlns:local="clr-namespace:SmartphoneShipmentsDemo"
7+
Shell.FlyoutBehavior="Disabled"
8+
Title="SmartphoneShipmentsDemo">
9+
10+
<ShellContent
11+
ContentTemplate="{DataTemplate local:MainPage}"
12+
Route="MainPage" />
13+
14+
</Shell>

‎SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/AppShell.xaml.cs‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
namespace SmartphoneShipmentsDemo
2+
{
3+
public partial class AppShell : Shell
4+
{
5+
public AppShell()
6+
{
7+
InitializeComponent();
8+
}
9+
}
10+
}

‎SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/MainPage.xaml‎

Lines changed: 216 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,216 @@
1+
<?xml version="1.0" encoding="utf-8" ?>
2+
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
3+
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
4+
xmlns:chart="clr-namespace:Syncfusion.Maui.Charts;assembly=Syncfusion.Maui.Charts"
5+
xmlns:model="clr-namespace:SmartphoneShipmentsDemo"
6+
x:Class="SmartphoneShipmentsDemo.MainPage">
7+
8+
<ContentPage.BindingContext>
9+
<model:ViewModel></model:ViewModel>
10+
</ContentPage.BindingContext>
11+
12+
13+
14+
<ContentPage.Content>
15+
<Border Background="#e8ebe0"
16+
StrokeThickness="4"
17+
StrokeShape="RoundRectangle 40"
18+
Margin="30">
19+
20+
<Grid RowDefinitions="1*,7*" Margin="10,15,0,0" RowSpacing="0">
21+
<!--Align Header-->
22+
<Grid Grid.Row="0" RowDefinitions="*,*,*">
23+
24+
<Label Text="Creating a Stacked Column Chart for Global Smartphone Shipments"
25+
TextColor="Black"
26+
FontSize="18"
27+
FontFamily="TimeSpan"
28+
FontAttributes="Bold"
29+
Grid.Row="0"
30+
Margin="18,0,0,0"/>
31+
32+
<Label Text="The stacked column chart showcases the quarterly smartphone shipments throughout 2022 (Q1 to Q4), while the line chart illustrates the corresponding market shares over the same period"
33+
TextColor="Black"
34+
FontSize="12"
35+
FontFamily="TimeSpan"
36+
Grid.Row="1"
37+
Margin="18,3,0,0"/>
38+
<StackLayout Orientation="Horizontal" Grid.Row="2" Spacing="10" Margin="18,0,0,0">
39+
<BoxView BackgroundColor="#9aa573"
40+
HeightRequest="10"
41+
WidthRequest="10"
42+
HorizontalOptions="Start"
43+
VerticalOptions="Start"
44+
Margin="0,4,0,0" />
45+
46+
<Label Text="Smartphone Shipments 2022[Q1-Q4][in Millions]"
47+
TextColor="Black"
48+
FontSize="12"/>
49+
50+
<BoxView BackgroundColor="#555d3c"
51+
HeightRequest="2"
52+
WidthRequest="30"
53+
HorizontalOptions="Start"
54+
VerticalOptions="Start"
55+
Margin="0,8,0,0"/>
56+
57+
<Label Text="Smartphone Market Share 2022[in Percentage]"
58+
TextColor="Black"
59+
FontSize="12"/>
60+
</StackLayout>
61+
</Grid>
62+
63+
64+
<chart:SfCartesianChart Grid.Row="1" >
65+
<!--Customise Tooltip-->
66+
<chart:SfCartesianChart.Resources>
67+
<DataTemplate x:Key="tooltipTemplate">
68+
<StackLayout Orientation="Horizontal">
69+
<Label Text="{Binding Item.BrandName}"
70+
TextColor="White"
71+
FontAttributes="Bold"
72+
FontSize="12"
73+
HorizontalOptions="Center"
74+
VerticalOptions="Center"/>
75+
<Label Text=" : "
76+
TextColor="White"
77+
FontAttributes="Bold"
78+
FontSize="12"
79+
HorizontalOptions="Center"
80+
VerticalOptions="Center"/>
81+
<Label Text="{Binding Item.MarketShare,StringFormat='{0:F1} %'}"
82+
TextColor="White"
83+
FontAttributes="Bold"
84+
FontSize="12"
85+
Margin="3,0,0,0"
86+
HorizontalOptions="Center"
87+
VerticalOptions="Center"/>
88+
</StackLayout>
89+
</DataTemplate>
90+
</chart:SfCartesianChart.Resources>
91+
92+
<!--X-Axis-->
93+
<chart:SfCartesianChart.XAxes>
94+
<chart:CategoryAxis IsVisible="True"
95+
ShowMajorGridLines="False"
96+
AxisLineOffset="30">
97+
<chart:CategoryAxis.LabelStyle>
98+
<chart:ChartAxisLabelStyle FontAttributes="Bold" />
99+
</chart:CategoryAxis.LabelStyle>
100+
</chart:CategoryAxis>
101+
</chart:SfCartesianChart.XAxes>
102+
103+
<!--Y-Axis-->
104+
<chart:SfCartesianChart.YAxes>
105+
<chart:NumericalAxis ShowMajorGridLines="False"
106+
Maximum="270"
107+
Interval="20"
108+
EdgeLabelsDrawingMode="Fit">
109+
<chart:NumericalAxis.LabelStyle>
110+
<chart:ChartAxisLabelStyle FontAttributes="Bold"/>
111+
</chart:NumericalAxis.LabelStyle>
112+
</chart:NumericalAxis>
113+
<chart:NumericalAxis Name="YAxis"
114+
CrossesAt="{Static x:Double.MaxValue}"
115+
ShowMajorGridLines="False"
116+
EdgeLabelsDrawingMode="Fit">
117+
<chart:NumericalAxis.LabelStyle>
118+
<chart:ChartAxisLabelStyle LabelFormat="0'%"
119+
FontAttributes="Bold"/>
120+
</chart:NumericalAxis.LabelStyle>
121+
</chart:NumericalAxis>
122+
</chart:SfCartesianChart.YAxes>
123+
124+
<!--Quater 1 Smartphone shipments value-->
125+
<chart:StackingColumnSeries ShowDataLabels="True"
126+
ItemsSource="{Binding ShipmentsData}"
127+
XBindingPath="BrandName"
128+
YBindingPath="Quarter1"
129+
StrokeWidth="7"
130+
Fill="#9aa573">
131+
<chart:StackingColumnSeries.DataLabelSettings>
132+
<chart:CartesianDataLabelSettings LabelPlacement="Inner"
133+
UseSeriesPalette="False"
134+
BarAlignment="Bottom">
135+
<chart:CartesianDataLabelSettings.LabelStyle>
136+
<chart:ChartDataLabelStyle LabelFormat="0.##'M"
137+
TextColor="Black"/>
138+
</chart:CartesianDataLabelSettings.LabelStyle>
139+
</chart:CartesianDataLabelSettings>
140+
</chart:StackingColumnSeries.DataLabelSettings>
141+
142+
</chart:StackingColumnSeries>
143+
144+
145+
<chart:StackingColumnSeries ShowDataLabels="True"
146+
ItemsSource="{Binding ShipmentsData}"
147+
XBindingPath="BrandName"
148+
YBindingPath="Quarter2"
149+
StrokeWidth="7"
150+
Fill="#a5af83">
151+
<chart:StackingColumnSeries.DataLabelSettings>
152+
<chart:CartesianDataLabelSettings LabelPlacement="Inner"
153+
UseSeriesPalette="False"
154+
BarAlignment="Bottom">
155+
<chart:CartesianDataLabelSettings.LabelStyle>
156+
<chart:ChartDataLabelStyle LabelFormat="0.##'M"
157+
TextColor="Black"/>
158+
</chart:CartesianDataLabelSettings.LabelStyle>
159+
</chart:CartesianDataLabelSettings>
160+
</chart:StackingColumnSeries.DataLabelSettings>
161+
</chart:StackingColumnSeries>
162+
163+
<chart:StackingColumnSeries ShowDataLabels="True"
164+
ItemsSource="{Binding ShipmentsData}"
165+
XBindingPath="BrandName"
166+
YBindingPath="Quarter3"
167+
Fill="#b0b992">
168+
<chart:StackingColumnSeries.DataLabelSettings>
169+
<chart:CartesianDataLabelSettings LabelPlacement="Inner"
170+
UseSeriesPalette="False"
171+
BarAlignment="Bottom">
172+
<chart:CartesianDataLabelSettings.LabelStyle>
173+
<chart:ChartDataLabelStyle LabelFormat="0.##'M"
174+
TextColor="Black"/>
175+
</chart:CartesianDataLabelSettings.LabelStyle>
176+
</chart:CartesianDataLabelSettings>
177+
</chart:StackingColumnSeries.DataLabelSettings>
178+
</chart:StackingColumnSeries>
179+
180+
<chart:StackingColumnSeries ShowDataLabels="True"
181+
ItemsSource="{Binding ShipmentsData}"
182+
XBindingPath="BrandName"
183+
YBindingPath="Quarter4"
184+
Fill="#bbc3a2">
185+
<chart:StackingColumnSeries.DataLabelSettings>
186+
<chart:CartesianDataLabelSettings LabelPlacement="Inner"
187+
UseSeriesPalette="False"
188+
BarAlignment="Bottom">
189+
<chart:CartesianDataLabelSettings.LabelStyle>
190+
<chart:ChartDataLabelStyle TextColor="Black"
191+
LabelFormat="0.##'M"/>
192+
</chart:CartesianDataLabelSettings.LabelStyle>
193+
</chart:CartesianDataLabelSettings>
194+
195+
</chart:StackingColumnSeries.DataLabelSettings>
196+
</chart:StackingColumnSeries>
197+
198+
<chart:LineSeries XBindingPath="BrandName"
199+
YBindingPath="MarketShare"
200+
ItemsSource="{Binding ShipmentsData}"
201+
YAxisName="YAxis"
202+
ShowMarkers="True"
203+
EnableTooltip="True"
204+
TooltipTemplate="{StaticResource tooltipTemplate}"
205+
Fill="#555d3c">
206+
<chart:LineSeries.MarkerSettings>
207+
<chart:ChartMarkerSettings Type="Circle"
208+
Height="8"
209+
Width="8"/>
210+
</chart:LineSeries.MarkerSettings>
211+
</chart:LineSeries>
212+
</chart:SfCartesianChart>
213+
</Grid>
214+
</Border>
215+
</ContentPage.Content>
216+
</ContentPage>

‎SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/MainPage.xaml.cs‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
namespace SmartphoneShipmentsDemo
2+
{
3+
public partial class MainPage : ContentPage
4+
{
5+
6+
7+
public MainPage()
8+
{
9+
InitializeComponent();
10+
}
11+
12+
13+
}
14+
15+
}

‎SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/MauiProgram.cs‎

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
using Microsoft.Extensions.Logging;
2+
using Syncfusion.Maui.Core.Hosting;
3+
4+
namespace SmartphoneShipmentsDemo
5+
{
6+
public static class MauiProgram
7+
{
8+
public static MauiApp CreateMauiApp()
9+
{
10+
var builder = MauiApp.CreateBuilder();
11+
builder
12+
.UseMauiApp<App>()
13+
.ConfigureSyncfusionCore()
14+
.ConfigureFonts(fonts =>
15+
{
16+
fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");
17+
fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");
18+
});
19+
20+
#if DEBUG
21+
builder.Logging.AddDebug();
22+
#endif
23+
24+
return builder.Build();
25+
}
26+
}
27+
}

‎SmartphoneShipmentsDemo/SmartphoneShipmentsDemo/Model/Model.cs‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
namespace SmartphoneShipmentsDemo
2+
{
3+
4+
public class Model
5+
{
6+
public string BrandName { get; set; }
7+
8+
public double Quarter1 { get; set; }
9+
10+
public double Quarter2 { get; set; }
11+
12+
public double Quarter3 { get; set; }
13+
14+
public double Quarter4 { get; set; }
15+
16+
public double MarketShare { get; set; }
17+
18+
public Model(string brandName,double q1, double q2, double q3, double q4, double marketShare)
19+
{
20+
BrandName = brandName;
21+
Quarter1 = q1;
22+
Quarter2 = q2;
23+
Quarter3 = q3;
24+
Quarter4 = q4;
25+
MarketShare = marketShare;
26+
}
27+
}
28+
}

0 commit comments

Comments
 (0)