Skip to content

Commit be49767

Browse files
MuneeshKumarGMuneeshKumarG
authored
Merge pull request #3 from SyncfusionExamples/AxisElementsCustomization
MAUI-3582 Updated axis element customization sample with multiple axis
2 parents 43f2c4f + 96799f1 commit be49767

File tree

4 files changed

+158
-76
lines changed

4 files changed

+158
-76
lines changed

‎ChartAxisDemo/MainPage.xaml‎

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

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

14+
<!--Initializing new style for the axis line, grid lines, tick lines and labels.-->
1415
<chart:SfCartesianChart.Resources>
15-
<chart:ChartAxisLabelStyle x:Key="xAxisLableStyle" TextColor="Red"/>
16-
<chart:ChartAxisLabelStyle x:Key="yAxisLableStyle" TextColor="Blue"/>
16+
<chart:ChartAxisLabelStyle x:Key="xAxisLableStyle" LabelFormat="HH"/>
17+
<chart:ChartAxisLabelStyle x:Key="yAxis1LableStyle" TextColor="Blue" LabelFormat="0rpm"/>
18+
<chart:ChartAxisLabelStyle x:Key="yAxis2LableStyle" TextColor="Green" LabelFormat="0psi"/>
1719
<chart:ChartLineStyle x:Key="majorLineStyle" Stroke="Gray"/>
1820
<chart:ChartAxisTickStyle x:Key="majorTickStyle" Stroke="Gray"/>
1921
<chart:ChartLineStyle x:Key="minorLineStyle" Stroke="Gray" StrokeDashArray="2 2"/>
22+
<chart:ChartLineStyle x:Key="yAxis1LineStyle" Stroke="Blue"/>
23+
<chart:ChartLineStyle x:Key="yAxis2LineStyle" Stroke="Green"/>
2024
</chart:SfCartesianChart.Resources>
2125

26+
<chart:SfCartesianChart.Legend>
27+
<chart:ChartLegend />
28+
</chart:SfCartesianChart.Legend>
29+
2230
<chart:SfCartesianChart.XAxes>
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>
31+
<chart:DateTimeAxis ShowMajorGridLines="False"
32+
Interval="1" IntervalType="Hours"
33+
LabelStyle="{StaticResource xAxisLableStyle}" >
34+
<chart:DateTimeAxis.Title>
35+
<chart:ChartAxisTitle Text="Time in hours" />
36+
</chart:DateTimeAxis.Title>
37+
</chart:DateTimeAxis>
2938
</chart:SfCartesianChart.XAxes>
3039

3140
<chart:SfCartesianChart.YAxes>
32-
<chart:NumericalAxis MinorTicksPerInterval="1"
33-
Minimum="0"
34-
LabelStyle="{StaticResource yAxisLableStyle}"
41+
<chart:NumericalAxis Name="yAxis1" MinorTicksPerInterval="1"
42+
Minimum="0" Maximum="6000" Interval="1000"
43+
LabelStyle="{StaticResource yAxis1LableStyle}"
3544
MajorGridLineStyle="{StaticResource majorLineStyle}"
3645
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>
46+
MinorGridLineStyle="{StaticResource minorLineStyle}"
47+
AxisLineStyle="{StaticResource yAxis1LineStyle}">
48+
</chart:NumericalAxis>
49+
50+
<chart:NumericalAxis Name="yAxis2"
51+
Minimum="55" Maximum="85" Interval="5"
52+
AxisLineStyle="{StaticResource yAxis2LineStyle}"
53+
LabelStyle="{StaticResource yAxis2LableStyle}"
54+
ShowMajorGridLines="False"
55+
CrossesAt="{Static x:Double.MaxValue}">
4156
</chart:NumericalAxis>
4257
</chart:SfCartesianChart.YAxes>
4358

44-
<chart:ColumnSeries XBindingPath="Brand"
45-
YBindingPath="ItemsCount"
46-
ItemsSource="{Binding Data}"/>
59+
<chart:LineSeries ItemsSource="{Binding Data}"
60+
XBindingPath="Time"
61+
YBindingPath="Speed"
62+
Label="Speed"
63+
Fill="Blue" />
64+
65+
<chart:SplineSeries ItemsSource="{Binding Data}"
66+
XBindingPath="Time"
67+
YBindingPath="Pressure"
68+
Label="Pressure"
69+
Fill="Green"
70+
YAxisName="yAxis2"/>
4771

4872
</chart:SfCartesianChart>
4973
</Grid>

‎ChartAxisDemo/Model/Model.cs‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,10 @@ namespace ChartAxisDemo
88
{
99
public class Model
1010
{
11-
public string Brand { get; set; }
11+
public DateTime Time { get; set; }
1212

13-
public double ItemsCount { get; set; }
13+
public double Speed { get; set; }
14+
15+
public double Pressure { get; set; }
1416
}
1517
}

‎ChartAxisDemo/ViewModel/ViewModel.cs‎

Lines changed: 14 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,20 @@ public class ViewModel
1414
public ViewModel()
1515
{
1616
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 });
17+
var random = new Random();
18+
var randomSpeed = new List<double>() { 1000, 1100, 1500, 2000, 2100, 2200 };
19+
var randomPressure = new List<double>() { 74, 77, 78, 79, 80, 82 };
20+
DateTime date = new DateTime(2000, 1, 1, 7, 0, 0);
21+
for (int i = 0; i < 100; i++)
22+
{
23+
Data.Add(new Model()
24+
{
25+
Time = date,
26+
Speed = randomSpeed[random.Next(0, 5)],
27+
Pressure = randomPressure[random.Next(0, 5)],
28+
});
29+
date = date.AddMinutes(10);
30+
}
2731
}
2832
}
2933
}

‎README.md‎

Lines changed: 97 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
This article explains how to change the color of the axis elements in the [.NET MAUI charts](https://www.syncfusion.com/maui-controls/maui-charts).
44

5-
The MAUI Cartesian chart provides support to customize the color of axis elements with the help of the [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html?tabs=tabid-1#Syncfusion_Maui_Charts_ChartAxis_LabelStyle), [AxisLineStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html?tabs=tabid-1#Syncfusion_Maui_Charts_ChartAxis_AxisLineStyle), [MajorGridLineStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_MajorGridLineStyle), [MinorGridLineStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.RangeAxisBase.html#Syncfusion_Maui_Charts_RangeAxisBase_MinorGridLineStyle), [MajorTickStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_MajorTickStyle), and [MinorTickStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.RangeAxisBase.html#Syncfusion_Maui_Charts_RangeAxisBase_MinorTickStyle) properties in the chart axis as shown in the following code example.
5+
The MAUI Cartesian chart provides support to customize the color of axis elements with the help of the [LabelStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html?tabs=tabid-1#Syncfusion_Maui_Charts_ChartAxis_LabelStyle), [AxisLineStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html?tabs=tabid-1#Syncfusion_Maui_Charts_ChartAxis_AxisLineStyle), [MajorGridLineStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_MajorGridLineStyle), [MinorGridLineStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.RangeAxisBase.html#Syncfusion_Maui_Charts_RangeAxisBase_MinorGridLineStyle), [MajorTickStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_MajorTickStyle), [MinorTickStyle](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.RangeAxisBase.html#Syncfusion_Maui_Charts_RangeAxisBase_MinorTickStyle), and [CrossesAt](https://help.syncfusion.com/cr/maui/Syncfusion.Maui.Charts.ChartAxis.html#Syncfusion_Maui_Charts_ChartAxis_CrossesAt) properties in the chart axis as shown in the following code example.
66

77
**[XAML]**
88
```
@@ -11,38 +11,61 @@ The MAUI Cartesian chart provides support to customize the color of axis element
1111
<viewModel:ViewModel />
1212
</chart:SfCartesianChart.BindingContext>
1313
14+
<!--Initializing new style for the axis line, grid lines, tick lines and labels.-->
1415
<chart:SfCartesianChart.Resources>
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"/>
16+
<chart:ChartAxisLabelStyle x:Key="xAxisLableStyle" LabelFormat="HH"/>
17+
<chart:ChartAxisLabelStyle x:Key="yAxis1LableStyle" TextColor="Blue" LabelFormat="0rpm"/>
18+
<chart:ChartAxisLabelStyle x:Key="yAxis2LableStyle" TextColor="Green" LabelFormat="0psi"/>
19+
<chart:ChartLineStyle x:Key="majorLineStyle" Stroke="Gray"/>
20+
<chart:ChartAxisTickStyle x:Key="majorTickStyle" Stroke="Gray"/>
21+
<chart:ChartLineStyle x:Key="minorLineStyle" Stroke="Gray" StrokeDashArray="2 2"/>
22+
<chart:ChartLineStyle x:Key="yAxis1LineStyle" Stroke="Blue"/>
23+
<chart:ChartLineStyle x:Key="yAxis2LineStyle" Stroke="Green"/>
2024
</chart:SfCartesianChart.Resources>
2125
26+
<chart:SfCartesianChart.Legend>
27+
<chart:ChartLegend />
28+
</chart:SfCartesianChart.Legend>
29+
2230
<chart:SfCartesianChart.XAxes>
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>
31+
<chart:DateTimeAxis ShowMajorGridLines="False"
32+
Interval="1" IntervalType="Hours"
33+
LabelStyle="{StaticResource xAxisLableStyle}" >
34+
<chart:DateTimeAxis.Title>
35+
<chart:ChartAxisTitle Text="Time in hours" />
36+
</chart:DateTimeAxis.Title>
37+
</chart:DateTimeAxis>
2938
</chart:SfCartesianChart.XAxes>
3039
3140
<chart:SfCartesianChart.YAxes>
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>/>
41+
<chart:NumericalAxis Name="yAxis1" MinorTicksPerInterval="1"
42+
Minimum="0" Maximum="6000" Interval="1000"
43+
LabelStyle="{StaticResource yAxis1LableStyle}"
44+
MajorGridLineStyle="{StaticResource majorLineStyle}"
45+
MajorTickStyle="{StaticResource majorTickStyle}"
46+
MinorGridLineStyle="{StaticResource minorLineStyle}"
47+
AxisLineStyle="{StaticResource yAxis1LineStyle}">
48+
</chart:NumericalAxis>
49+
50+
<chart:NumericalAxis Name="yAxis2"
51+
Minimum="55" Maximum="85" Interval="5"
52+
AxisLineStyle="{StaticResource yAxis2LineStyle}"
53+
LabelStyle="{StaticResource yAxis2LableStyle}"
54+
ShowMajorGridLines="False"
55+
CrossesAt="{Static x:Double.MaxValue}">
56+
</chart:NumericalAxis>
4157
</chart:SfCartesianChart.YAxes>
4258
43-
<chart:ColumnSeries XBindingPath="XValue"
44-
YBindingPath="YValue"
45-
ItemsSource="{Binding Data}"/>
59+
<chart:LineSeries ItemsSource="{Binding Data}"
60+
XBindingPath="Time"
61+
YBindingPath="Speed"
62+
Label="Speed" Fill="Blue" />
63+
64+
<chart:SplineSeries ItemsSource="{Binding Data}"
65+
XBindingPath="Time"
66+
YBindingPath="Pressure"
67+
Label="Pressure" Fill="Green"
68+
YAxisName="yAxis2"/>
4669
4770
</chart:SfCartesianChart>
4871
@@ -53,48 +76,77 @@ var chart = new SfCartesianChart();
5376
ViewModel viewModel = new ViewModel();
5477
5578
//Initializing new style for the axis line, grid lines, tick lines and labels.
56-
var xAxisLableStyle = new ChartAxisLabelStyle { TextColor = Colors.Red };
57-
var yAxisLableStyle = new ChartAxisLabelStyle { TextColor = Colors.Blue };
79+
var xAxisLabelStyle = new ChartAxisLabelStyle { LabelFormat = "HH" };
80+
var xAxisTitle = new ChartAxisTitle { Text = "Time in hours" };
81+
var yAxis1LableStyle = new ChartAxisLabelStyle { TextColor = Colors.Blue, LabelFormat = "0rpm" };
82+
var yAxis2LableStyle = new ChartAxisLabelStyle { TextColor = Colors.Green, LabelFormat = "0psi" };
5883
var majorLineStyle = new ChartLineStyle { Stroke = Colors.Gray };
5984
var minorLineStyle = new ChartLineStyle { Stroke = Colors.Gray, StrokeDashArray = new DoubleCollection() { 2, 2 } };
6085
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,};
86+
var yAxis1LineStyle = new ChartLineStyle { Stroke = Colors.Blue };
87+
var yAxis2LineStyle = new ChartLineStyle { Stroke = Colors.Green };
6388
6489
//Initializing XAxes
65-
var xAxis = new CategoryAxis()
90+
var xAxis = new DateTimeAxis()
6691
{
67-
LabelStyle = xAxisLableStyle,
68-
Title = xAxisTitle,
69-
ShowMajorGridLines = false,
92+
LabelStyle = xAxisLabelStyle,
93+
Title = xAxisTitle,
94+
ShowMajorGridLines = false,
7095
};
7196
chart.XAxes.Add(xAxis);
7297
7398
//Initializing YAxes
74-
var yAxis = new NumericalAxis()
99+
var yAxis1 = new NumericalAxis()
75100
{
76-
MinorTicksPerInterval = 2,
77-
LabelStyle = yAxisLableStyle,
101+
Name = "yAxis1",
102+
Minimum = 0, Maximum = 6000, Interval = 1000,
103+
MinorTicksPerInterval = 2,
104+
LabelStyle = yAxis1LableStyle,
78105
MajorGridLineStyle = majorLineStyle,
79106
MinorGridLineStyle = minorLineStyle,
80107
MajorTickStyle = majorTickStyle,
81-
Title = yAxisTitle,
108+
AxisLineStyle = yAxis1LineStyle,
82109
};
83-
chart.YAxes.Add(yAxis);
84110
85-
var series = new ColumnSeries()
111+
var yAxis2 = new NumericalAxis()
86112
{
87-
ItemsSource = viewModel.Data,
88-
XBindingPath = "XValue",
89-
YBindingPath = "YValue",
113+
Name = "yAxis2",
114+
Minimum = 55, Maximum = 85, Interval = 5,
115+
AxisLineStyle = yAxis2LineStyle,
116+
LabelStyle = yAxis2LableStyle,
117+
ShowMajorGridLines = false,
118+
CrossesAt = double.MaxValue,
90119
};
91120
92-
chart.Series.Add(series);
121+
chart.YAxes.Add(yAxis1);
122+
chart.YAxes.Add(yAxis2);
123+
124+
var series1 = new LineSeries()
125+
{
126+
ItemsSource = viewModel.Data,
127+
XBindingPath = "Time",
128+
YBindingPath = "Speed",
129+
Label = "Speed",
130+
Fill = Colors.Blue
131+
};
132+
133+
var series2 = new LineSeries()
134+
{
135+
ItemsSource = viewModel.Data,
136+
XBindingPath = "Time",
137+
YBindingPath = "Pressure",
138+
Label = "Pressure",
139+
Fill = Colors.Green,
140+
YAxisName = "yAxis2"
141+
};
142+
143+
chart.Series.Add(series1);
144+
chart.Series.Add(series2);
145+
146+
this.Content = chart;
93147
94148
```
95149

96-
![Axis elements customization](https://user-images.githubusercontent.com/61832185/201011516-954e603f-eb74-42ee-812c-e3ca0a376813.png)
150+
![Axis elements customization](https://user-images.githubusercontent.com/61832185/201659851-54e4fa22-6abc-4402-b6c9-8bef371bc3eb.png)
97151

98152
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.
99-
100-
KB article - [How to change the color of axis elements in .NET MAUI Chart (SfCartesianChart)?]( )

0 commit comments

Comments
 (0)