Skip to content

Commit 74a23dd

Browse files
MuneeshKumarGMuneeshKumarG
authored
Merge pull request #2 from SyncfusionExamples/AxisElementsCustomization
MAUI-3582 Update sample with real time data
2 parents ab0e616 + d11ee4e commit 74a23dd

File tree

5 files changed

+74
-74
lines changed

5 files changed

+74
-74
lines changed

‎ChartAxisDemo/AppShell.xaml‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
Shell.FlyoutBehavior="Disabled">
88

99
<ShellContent
10-
Title="Home"
1110
ContentTemplate="{DataTemplate local:MainPage}"
1211
Route="MainPage" />
1312

‎ChartAxisDemo/MainPage.xaml‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -6,40 +6,43 @@
66
x:Class="ChartAxisDemo.MainPage">
77

88
<Grid>
9-
<chart:SfCartesianChart Title="Axis elements customization">
9+
<chart:SfCartesianChart Title="Sneakers sold by brand" Margin="20">
1010
<chart:SfCartesianChart.BindingContext>
1111
<viewModel:ViewModel />
1212
</chart:SfCartesianChart.BindingContext>
1313

1414
<chart:SfCartesianChart.Resources>
15-
<chart:ChartAxisLabelStyle x:Key="axisLableStyle" TextColor="Red"/>
16-
<chart:ChartLineStyle x:Key="axisLineStyle" Stroke="Yellow" />
17-
<chart:ChartLineStyle x:Key="majorLineStyle" Stroke="Brown"/>
18-
<chart:ChartAxisTickStyle x:Key="majorTickStyle" Stroke="Brown"/>
19-
<chart:ChartLineStyle x:Key="minorLineStyle" Stroke="Gray"/>
20-
<chart:ChartAxisTickStyle x:Key="minorTickStyle" Stroke="Gray"/>
15+
<chart:ChartAxisLabelStyle x:Key="xAxisLableStyle" TextColor="Red"/>
16+
<chart:ChartAxisLabelStyle x:Key="yAxisLableStyle" TextColor="Blue"/>
17+
<chart:ChartLineStyle x:Key="majorLineStyle" Stroke="Gray"/>
18+
<chart:ChartAxisTickStyle x:Key="majorTickStyle" Stroke="Gray"/>
19+
<chart:ChartLineStyle x:Key="minorLineStyle" Stroke="Gray" StrokeDashArray="2 2"/>
2120
</chart:SfCartesianChart.Resources>
2221

2322
<chart:SfCartesianChart.XAxes>
24-
<chart:CategoryAxis AxisLineStyle="{StaticResource axisLineStyle}"
25-
LabelStyle="{StaticResource axisLableStyle}"
26-
MajorGridLineStyle="{StaticResource majorLineStyle}"
27-
MajorTickStyle="{StaticResource majorTickStyle}" />
23+
<chart:CategoryAxis LabelStyle="{StaticResource xAxisLableStyle}"
24+
ShowMajorGridLines="False">
25+
<chart:CategoryAxis.Title>
26+
<chart:ChartAxisTitle Text="Brand" TextColor="Red"/>
27+
</chart:CategoryAxis.Title>
28+
</chart:CategoryAxis>
2829
</chart:SfCartesianChart.XAxes>
2930

3031
<chart:SfCartesianChart.YAxes>
31-
<chart:NumericalAxis MinorTicksPerInterval="2"
32+
<chart:NumericalAxis MinorTicksPerInterval="1"
3233
Minimum="0"
33-
AxisLineStyle="{StaticResource axisLineStyle}"
34-
LabelStyle="{StaticResource axisLableStyle}"
34+
LabelStyle="{StaticResource yAxisLableStyle}"
3535
MajorGridLineStyle="{StaticResource majorLineStyle}"
36-
MajorTickStyle="{StaticResource majorTickStyle}"
37-
MinorGridLineStyle="{StaticResource minorLineStyle}"
38-
MinorTickStyle="{StaticResource minorTickStyle}" />
36+
MajorTickStyle="{StaticResource majorTickStyle}"
37+
MinorGridLineStyle="{StaticResource minorLineStyle}">
38+
<chart:NumericalAxis.Title>
39+
<chart:ChartAxisTitle Text="Number of items sold" TextColor="Blue"/>
40+
</chart:NumericalAxis.Title>
41+
</chart:NumericalAxis>
3942
</chart:SfCartesianChart.YAxes>
4043

41-
<chart:SplineSeries XBindingPath="XValue"
42-
YBindingPath="YValue"
44+
<chart:ColumnSeries XBindingPath="Brand"
45+
YBindingPath="ItemsCount"
4346
ItemsSource="{Binding Data}"/>
4447

4548
</chart:SfCartesianChart>

‎ChartAxisDemo/Model/Model.cs‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -8,14 +8,8 @@ namespace ChartAxisDemo
88
{
99
public class Model
1010
{
11-
public Model(string xValue, double yValue)
12-
{
13-
XValue = xValue;
14-
YValue = yValue;
15-
}
11+
public string Brand { get; set; }
1612

17-
public string XValue { get; set; }
18-
19-
public double YValue { get; set; }
13+
public double ItemsCount { get; set; }
2014
}
2115
}

‎ChartAxisDemo/ViewModel/ViewModel.cs‎

Lines changed: 11 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,17 @@ public class ViewModel
1313

1414
public ViewModel()
1515
{
16-
Data = new ObservableCollection<Model>()
17-
{
18-
new Model("Naveen", 25000),
19-
new Model("John", 15000),
20-
new Model("James", 35000),
21-
new Model("Magesh", 20000),
22-
new Model("Karthi", 25000),
23-
new Model("Ram", 17000),
24-
};
16+
Data = new ObservableCollection<Model>();
17+
Data.Add(new Model() { Brand = "Adidas", ItemsCount = 416 });
18+
Data.Add(new Model() { Brand = "Nike", ItemsCount = 520 });
19+
Data.Add(new Model() { Brand = "Reebok", ItemsCount = 470 });
20+
Data.Add(new Model() { Brand = "Fila", ItemsCount = 500 });
21+
Data.Add(new Model() { Brand = "Puma", ItemsCount = 449 });
22+
Data.Add(new Model() { Brand = "New Balance", ItemsCount = 360 });
23+
Data.Add(new Model() { Brand = "Asics", ItemsCount = 437 });
24+
Data.Add(new Model() { Brand = "Skechers", ItemsCount = 458 });
25+
Data.Add(new Model() { Brand = "Bata", ItemsCount = 500 });
26+
Data.Add(new Model() { Brand = "Burberry", ItemsCount = 473 });
2527
}
2628
}
2729
}

‎README.md‎

Lines changed: 39 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -12,32 +12,35 @@ The MAUI Cartesian chart provides support to customize the color of axis element
1212
</chart:SfCartesianChart.BindingContext>
1313
1414
<chart:SfCartesianChart.Resources>
15-
<chart:ChartAxisLabelStyle x:Key="axisLableStyle" TextColor="Red"/>
16-
<chart:ChartLineStyle x:Key="axisLineStyle" Stroke="Yellow" />
17-
<chart:ChartLineStyle x:Key="majorLineStyle" Stroke="Brown"/>
18-
<chart:ChartAxisTickStyle x:Key="majorTickStyle" Stroke="Brown"/>
19-
<chart:ChartLineStyle x:Key="minorLineStyle" Stroke="Gray"/>
20-
<chart:ChartAxisTickStyle x:Key="minorTickStyle" Stroke="Gray"/>
15+
<chart:ChartAxisLabelStyle x:Key="xAxisLableStyle" TextColor="Red"/>
16+
<chart:ChartAxisLabelStyle x:Key="yAxisLableStyle" TextColor="Blue"/>
17+
<chart:ChartLineStyle x:Key="majorLineStyle" Stroke="Gray"/>
18+
<chart:ChartAxisTickStyle x:Key="majorTickStyle" Stroke="Gray"/>
19+
<chart:ChartLineStyle x:Key="minorLineStyle" Stroke="Gray" StrokeDashArray="2 2"/>
2120
</chart:SfCartesianChart.Resources>
2221
2322
<chart:SfCartesianChart.XAxes>
24-
<chart:CategoryAxis AxisLineStyle="{StaticResource axisLineStyle}"
25-
LabelStyle="{StaticResource axisLableStyle}"
26-
MajorGridLineStyle="{StaticResource majorLineStyle}"
27-
MajorTickStyle="{StaticResource majorTickStyle}" />
23+
<chart:CategoryAxis LabelStyle="{StaticResource xAxisLableStyle}"
24+
ShowMajorGridLines="False">
25+
<chart:CategoryAxis.Title>
26+
<chart:ChartAxisTitle Text="Brand" TextColor="Red"/>
27+
</chart:CategoryAxis.Title>
28+
</chart:CategoryAxis>
2829
</chart:SfCartesianChart.XAxes>
2930
3031
<chart:SfCartesianChart.YAxes>
31-
<chart:NumericalAxis MinorTicksPerInterval="2"
32-
AxisLineStyle="{StaticResource axisLineStyle}"
33-
LabelStyle="{StaticResource axisLableStyle}"
34-
MajorGridLineStyle="{StaticResource majorLineStyle}"
35-
MajorTickStyle="{StaticResource majorTickStyle}"
36-
MinorGridLineStyle="{StaticResource minorLineStyle}"
37-
MinorTickStyle="{StaticResource minorTickStyle}" />
32+
<chart:NumericalAxis MinorTicksPerInterval="1"
33+
LabelStyle="{StaticResource yAxisLableStyle}"
34+
MajorGridLineStyle="{StaticResource majorLineStyle}
35+
MajorTickStyle="{StaticResource majorTickStyle}"
36+
MinorGridLineStyle="{StaticResource minorLineStyle}">
37+
<chart:NumericalAxis.Title>
38+
<chart:ChartAxisTitle Text="Number of items sold" TextColor="Blue"/>
39+
</chart:NumericalAxis.Title>
40+
</chart:NumericalAxis>/>
3841
</chart:SfCartesianChart.YAxes>
3942
40-
<chart:SplineSeries XBindingPath="XValue"
43+
<chart:ColumnSeries XBindingPath="XValue"
4144
YBindingPath="YValue"
4245
ItemsSource="{Binding Data}"/>
4346
@@ -50,48 +53,47 @@ var chart = new SfCartesianChart();
5053
ViewModel viewModel = new ViewModel();
5154
5255
//Initializing new style for the axis line, grid lines, tick lines and labels.
53-
var axisLableStyle = new ChartAxisLabelStyle { TextColor = Colors.Red };
54-
var axisLineStyle = new ChartLineStyle { Stroke = Colors.Yellow };
55-
var majorLineStyle = new ChartLineStyle { Stroke = Colors.Brown };
56-
var minorLineStyle = new ChartLineStyle { Stroke = Colors.Gray };
57-
var majorTickStyle = new ChartAxisTickStyle { Stroke = Colors.Brown };
58-
var minorTickStyle = new ChartAxisTickStyle { Stroke = Colors.Gray };
56+
var xAxisLableStyle = new ChartAxisLabelStyle { TextColor = Colors.Red };
57+
var yAxisLableStyle = new ChartAxisLabelStyle { TextColor = Colors.Blue };
58+
var majorLineStyle = new ChartLineStyle { Stroke = Colors.Gray };
59+
var minorLineStyle = new ChartLineStyle { Stroke = Colors.Gray, StrokeDashArray = new DoubleCollection() { 2, 2 } };
60+
var majorTickStyle = new ChartAxisTickStyle { Stroke = Colors.Gray };
61+
var xAxisTitle = new ChartAxisTitle() { Text = "Brand", TextColor = Colors.Red,};
62+
var yAxisTitle = new ChartAxisTitle() { Text = " Number of items sold", TextColor = Colors.Blue,};
5963
6064
//Initializing XAxes
6165
var xAxis = new CategoryAxis()
6266
{
63-
LabelStyle = axisLableStyle,
64-
AxisLineStyle = axisLineStyle,
65-
MajorGridLineStyle = majorLineStyle,
66-
MajorTickStyle = majorTickStyle,
67+
LabelStyle = xAxisLableStyle,
68+
Title = xAxisTitle,
69+
ShowMajorGridLines = false,
6770
};
6871
chart.XAxes.Add(xAxis);
6972
7073
//Initializing YAxes
7174
var yAxis = new NumericalAxis()
7275
{
73-
MinorTicksPerInterval = 2,
74-
LabelStyle = axisLableStyle,
75-
AxisLineStyle = axisLineStyle,
76+
MinorTicksPerInterval = 2,
77+
LabelStyle = yAxisLableStyle,
7678
MajorGridLineStyle = majorLineStyle,
7779
MinorGridLineStyle = minorLineStyle,
7880
MajorTickStyle = majorTickStyle,
79-
MinorTickStyle = minorTickStyle,
81+
Title = yAxisTitle,
8082
};
8183
chart.YAxes.Add(yAxis);
8284
83-
var series = new SplineSeries()
85+
var series = new ColumnSeries()
8486
{
85-
ItemsSource = viewModel.Data,
86-
XBindingPath = "XValue",
87-
YBindingPath = "YValue",
87+
ItemsSource = viewModel.Data,
88+
XBindingPath = "XValue",
89+
YBindingPath = "YValue",
8890
};
8991
9092
chart.Series.Add(series);
9193
9294
```
9395

94-
![Axis elements customization](https://user-images.githubusercontent.com/61832185/199484950-6b067835-2313-49ca-9829-8f264c1344e4.png)
96+
![Axis elements customization](https://user-images.githubusercontent.com/61832185/201011516-954e603f-eb74-42ee-812c-e3ca0a376813.png)
9597

9698
This user guide [Documentation](https://help.syncfusion.com/maui/cartesian-charts/getting-started) helps you to acquire more knowledge on the MAUI cartesian charts and their features. You can also refer to the [Feature Tour](https://www.syncfusion.com/maui-controls/maui-charts) site to get an overview of all the features in the chart.
9799

0 commit comments

Comments
 (0)