Skip to content

MAUI-3582 Updated axis element customization sample with multiple axis #3

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Nov 14, 2022
Merged

MAUI-3582 Updated axis element customization sample with multiple axis #3

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
bde20fd
updated axis element customization sample with multiple axis
naveenkumar-sanjeevirayan Nov 14, 2022
96799f1
Merge branch 'master' of https://github.com/SyncfusionExamples/How-to…
naveenkumar-sanjeevirayan Nov 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
62 changes: 43 additions & 19 deletions ChartAxisDemo/MainPage.xaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,44 +6,68 @@
x:Class="ChartAxisDemo.MainPage">

<Grid>
<chart:SfCartesianChart Title="Sneakers sold by brand" Margin="20">
<chart:SfCartesianChart Margin="20">
<chart:SfCartesianChart.BindingContext>
<viewModel:ViewModel />
</chart:SfCartesianChart.BindingContext>

<!--Initializing new style for the axis line, grid lines, tick lines and labels.-->
<chart:SfCartesianChart.Resources>
<chart:ChartAxisLabelStyle x:Key="xAxisLableStyle" TextColor="Red"/>
<chart:ChartAxisLabelStyle x:Key="yAxisLableStyle" TextColor="Blue"/>
<chart:ChartAxisLabelStyle x:Key="xAxisLableStyle" LabelFormat="HH"/>
<chart:ChartAxisLabelStyle x:Key="yAxis1LableStyle" TextColor="Blue" LabelFormat="0rpm"/>
<chart:ChartAxisLabelStyle x:Key="yAxis2LableStyle" TextColor="Green" LabelFormat="0psi"/>
<chart:ChartLineStyle x:Key="majorLineStyle" Stroke="Gray"/>
<chart:ChartAxisTickStyle x:Key="majorTickStyle" Stroke="Gray"/>
<chart:ChartLineStyle x:Key="minorLineStyle" Stroke="Gray" StrokeDashArray="2 2"/>
<chart:ChartLineStyle x:Key="yAxis1LineStyle" Stroke="Blue"/>
<chart:ChartLineStyle x:Key="yAxis2LineStyle" Stroke="Green"/>
</chart:SfCartesianChart.Resources>

<chart:SfCartesianChart.Legend>
<chart:ChartLegend />
</chart:SfCartesianChart.Legend>

<chart:SfCartesianChart.XAxes>
<chart:CategoryAxis LabelStyle="{StaticResource xAxisLableStyle}"
ShowMajorGridLines="False">
<chart:CategoryAxis.Title>
<chart:ChartAxisTitle Text="Brand" TextColor="Red"/>
</chart:CategoryAxis.Title>
</chart:CategoryAxis>
<chart:DateTimeAxis ShowMajorGridLines="False"
Interval="1" IntervalType="Hours"
LabelStyle="{StaticResource xAxisLableStyle}" >
<chart:DateTimeAxis.Title>
<chart:ChartAxisTitle Text="Time in hours" />
</chart:DateTimeAxis.Title>
</chart:DateTimeAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis MinorTicksPerInterval="1"
Minimum="0"
LabelStyle="{StaticResource yAxisLableStyle}"
<chart:NumericalAxis Name="yAxis1" MinorTicksPerInterval="1"
Minimum="0" Maximum="6000" Interval="1000"
LabelStyle="{StaticResource yAxis1LableStyle}"
MajorGridLineStyle="{StaticResource majorLineStyle}"
MajorTickStyle="{StaticResource majorTickStyle}"
MinorGridLineStyle="{StaticResource minorLineStyle}">
<chart:NumericalAxis.Title>
<chart:ChartAxisTitle Text="Number of items sold" TextColor="Blue"/>
</chart:NumericalAxis.Title>
MinorGridLineStyle="{StaticResource minorLineStyle}"
AxisLineStyle="{StaticResource yAxis1LineStyle}">
</chart:NumericalAxis>

<chart:NumericalAxis Name="yAxis2"
Minimum="55" Maximum="85" Interval="5"
AxisLineStyle="{StaticResource yAxis2LineStyle}"
LabelStyle="{StaticResource yAxis2LableStyle}"
ShowMajorGridLines="False"
CrossesAt="{Static x:Double.MaxValue}">
</chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>

<chart:ColumnSeries XBindingPath="Brand"
YBindingPath="ItemsCount"
ItemsSource="{Binding Data}"/>
<chart:LineSeries ItemsSource="{Binding Data}"
XBindingPath="Time"
YBindingPath="Speed"
Label="Speed"
Fill="Blue" />

<chart:SplineSeries ItemsSource="{Binding Data}"
XBindingPath="Time"
YBindingPath="Pressure"
Label="Pressure"
Fill="Green"
YAxisName="yAxis2"/>

</chart:SfCartesianChart>
</Grid>
Expand Down
6 changes: 4 additions & 2 deletions ChartAxisDemo/Model/Model.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@ namespace ChartAxisDemo
{
public class Model
{
public string Brand { get; set; }
public DateTime Time { get; set; }

public double ItemsCount { get; set; }
public double Speed { get; set; }

public double Pressure { get; set; }
}
}
24 changes: 14 additions & 10 deletions ChartAxisDemo/ViewModel/ViewModel.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,20 @@ public class ViewModel
public ViewModel()
{
Data = new ObservableCollection<Model>();
Data.Add(new Model() { Brand = "Adidas", ItemsCount = 416 });
Data.Add(new Model() { Brand = "Nike", ItemsCount = 520 });
Data.Add(new Model() { Brand = "Reebok", ItemsCount = 470 });
Data.Add(new Model() { Brand = "Fila", ItemsCount = 500 });
Data.Add(new Model() { Brand = "Puma", ItemsCount = 449 });
Data.Add(new Model() { Brand = "New Balance", ItemsCount = 360 });
Data.Add(new Model() { Brand = "Asics", ItemsCount = 437 });
Data.Add(new Model() { Brand = "Skechers", ItemsCount = 458 });
Data.Add(new Model() { Brand = "Bata", ItemsCount = 500 });
Data.Add(new Model() { Brand = "Burberry", ItemsCount = 473 });
var random = new Random();
var randomSpeed = new List<double>() { 1000, 1100, 1500, 2000, 2100, 2200 };
var randomPressure = new List<double>() { 74, 77, 78, 79, 80, 82 };
DateTime date = new DateTime(2000, 1, 1, 7, 0, 0);
for (int i = 0; i < 100; i++)
{
Data.Add(new Model()
{
Time = date,
Speed = randomSpeed[random.Next(0, 5)],
Pressure = randomPressure[random.Next(0, 5)],
});
date = date.AddMinutes(10);
}
}
}
}
142 changes: 97 additions & 45 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

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).

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.
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.

**[XAML]**
```
Expand All @@ -11,38 +11,61 @@ The MAUI Cartesian chart provides support to customize the color of axis element
<viewModel:ViewModel />
</chart:SfCartesianChart.BindingContext>

<!--Initializing new style for the axis line, grid lines, tick lines and labels.-->
<chart:SfCartesianChart.Resources>
<chart:ChartAxisLabelStyle x:Key="xAxisLableStyle" TextColor="Red"/>
<chart:ChartAxisLabelStyle x:Key="yAxisLableStyle" TextColor="Blue"/>
<chart:ChartLineStyle x:Key="majorLineStyle" Stroke="Gray"/>
<chart:ChartAxisTickStyle x:Key="majorTickStyle" Stroke="Gray"/>
<chart:ChartLineStyle x:Key="minorLineStyle" Stroke="Gray" StrokeDashArray="2 2"/>
<chart:ChartAxisLabelStyle x:Key="xAxisLableStyle" LabelFormat="HH"/>
<chart:ChartAxisLabelStyle x:Key="yAxis1LableStyle" TextColor="Blue" LabelFormat="0rpm"/>
<chart:ChartAxisLabelStyle x:Key="yAxis2LableStyle" TextColor="Green" LabelFormat="0psi"/>
<chart:ChartLineStyle x:Key="majorLineStyle" Stroke="Gray"/>
<chart:ChartAxisTickStyle x:Key="majorTickStyle" Stroke="Gray"/>
<chart:ChartLineStyle x:Key="minorLineStyle" Stroke="Gray" StrokeDashArray="2 2"/>
<chart:ChartLineStyle x:Key="yAxis1LineStyle" Stroke="Blue"/>
<chart:ChartLineStyle x:Key="yAxis2LineStyle" Stroke="Green"/>
</chart:SfCartesianChart.Resources>

<chart:SfCartesianChart.Legend>
<chart:ChartLegend />
</chart:SfCartesianChart.Legend>

<chart:SfCartesianChart.XAxes>
<chart:CategoryAxis LabelStyle="{StaticResource xAxisLableStyle}"
ShowMajorGridLines="False">
<chart:CategoryAxis.Title>
<chart:ChartAxisTitle Text="Brand" TextColor="Red"/>
</chart:CategoryAxis.Title>
</chart:CategoryAxis>
<chart:DateTimeAxis ShowMajorGridLines="False"
Interval="1" IntervalType="Hours"
LabelStyle="{StaticResource xAxisLableStyle}" >
<chart:DateTimeAxis.Title>
<chart:ChartAxisTitle Text="Time in hours" />
</chart:DateTimeAxis.Title>
</chart:DateTimeAxis>
</chart:SfCartesianChart.XAxes>

<chart:SfCartesianChart.YAxes>
<chart:NumericalAxis MinorTicksPerInterval="1"
LabelStyle="{StaticResource yAxisLableStyle}"
MajorGridLineStyle="{StaticResource majorLineStyle}
MajorTickStyle="{StaticResource majorTickStyle}"
MinorGridLineStyle="{StaticResource minorLineStyle}">
<chart:NumericalAxis.Title>
<chart:ChartAxisTitle Text="Number of items sold" TextColor="Blue"/>
</chart:NumericalAxis.Title>
</chart:NumericalAxis>/>
<chart:NumericalAxis Name="yAxis1" MinorTicksPerInterval="1"
Minimum="0" Maximum="6000" Interval="1000"
LabelStyle="{StaticResource yAxis1LableStyle}"
MajorGridLineStyle="{StaticResource majorLineStyle}"
MajorTickStyle="{StaticResource majorTickStyle}"
MinorGridLineStyle="{StaticResource minorLineStyle}"
AxisLineStyle="{StaticResource yAxis1LineStyle}">
</chart:NumericalAxis>

<chart:NumericalAxis Name="yAxis2"
Minimum="55" Maximum="85" Interval="5"
AxisLineStyle="{StaticResource yAxis2LineStyle}"
LabelStyle="{StaticResource yAxis2LableStyle}"
ShowMajorGridLines="False"
CrossesAt="{Static x:Double.MaxValue}">
</chart:NumericalAxis>
</chart:SfCartesianChart.YAxes>

<chart:ColumnSeries XBindingPath="XValue"
YBindingPath="YValue"
ItemsSource="{Binding Data}"/>
<chart:LineSeries ItemsSource="{Binding Data}"
XBindingPath="Time"
YBindingPath="Speed"
Label="Speed" Fill="Blue" />

<chart:SplineSeries ItemsSource="{Binding Data}"
XBindingPath="Time"
YBindingPath="Pressure"
Label="Pressure" Fill="Green"
YAxisName="yAxis2"/>

</chart:SfCartesianChart>

Expand All @@ -53,48 +76,77 @@ var chart = new SfCartesianChart();
ViewModel viewModel = new ViewModel();

//Initializing new style for the axis line, grid lines, tick lines and labels.
var xAxisLableStyle = new ChartAxisLabelStyle { TextColor = Colors.Red };
var yAxisLableStyle = new ChartAxisLabelStyle { TextColor = Colors.Blue };
var xAxisLabelStyle = new ChartAxisLabelStyle { LabelFormat = "HH" };
var xAxisTitle = new ChartAxisTitle { Text = "Time in hours" };
var yAxis1LableStyle = new ChartAxisLabelStyle { TextColor = Colors.Blue, LabelFormat = "0rpm" };
var yAxis2LableStyle = new ChartAxisLabelStyle { TextColor = Colors.Green, LabelFormat = "0psi" };
var majorLineStyle = new ChartLineStyle { Stroke = Colors.Gray };
var minorLineStyle = new ChartLineStyle { Stroke = Colors.Gray, StrokeDashArray = new DoubleCollection() { 2, 2 } };
var majorTickStyle = new ChartAxisTickStyle { Stroke = Colors.Gray };
var xAxisTitle = new ChartAxisTitle() { Text = "Brand", TextColor = Colors.Red,};
var yAxisTitle = new ChartAxisTitle() { Text = " Number of items sold", TextColor = Colors.Blue,};
var yAxis1LineStyle = new ChartLineStyle { Stroke = Colors.Blue };
var yAxis2LineStyle = new ChartLineStyle { Stroke = Colors.Green };

//Initializing XAxes
var xAxis = new CategoryAxis()
var xAxis = new DateTimeAxis()
{
LabelStyle = xAxisLableStyle,
Title = xAxisTitle,
ShowMajorGridLines = false,
LabelStyle = xAxisLabelStyle,
Title = xAxisTitle,
ShowMajorGridLines = false,
};
chart.XAxes.Add(xAxis);

//Initializing YAxes
var yAxis = new NumericalAxis()
var yAxis1 = new NumericalAxis()
{
MinorTicksPerInterval = 2,
LabelStyle = yAxisLableStyle,
Name = "yAxis1",
Minimum = 0, Maximum = 6000, Interval = 1000,
MinorTicksPerInterval = 2,
LabelStyle = yAxis1LableStyle,
MajorGridLineStyle = majorLineStyle,
MinorGridLineStyle = minorLineStyle,
MajorTickStyle = majorTickStyle,
Title = yAxisTitle,
AxisLineStyle = yAxis1LineStyle,
};
chart.YAxes.Add(yAxis);

var series = new ColumnSeries()
var yAxis2 = new NumericalAxis()
{
ItemsSource = viewModel.Data,
XBindingPath = "XValue",
YBindingPath = "YValue",
Name = "yAxis2",
Minimum = 55, Maximum = 85, Interval = 5,
AxisLineStyle = yAxis2LineStyle,
LabelStyle = yAxis2LableStyle,
ShowMajorGridLines = false,
CrossesAt = double.MaxValue,
};

chart.Series.Add(series);
chart.YAxes.Add(yAxis1);
chart.YAxes.Add(yAxis2);

var series1 = new LineSeries()
{
ItemsSource = viewModel.Data,
XBindingPath = "Time",
YBindingPath = "Speed",
Label = "Speed",
Fill = Colors.Blue
};

var series2 = new LineSeries()
{
ItemsSource = viewModel.Data,
XBindingPath = "Time",
YBindingPath = "Pressure",
Label = "Pressure",
Fill = Colors.Green,
YAxisName = "yAxis2"
};

chart.Series.Add(series1);
chart.Series.Add(series2);

this.Content = chart;

```

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

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.

KB article - [How to change the color of axis elements in .NET MAUI Chart (SfCartesianChart)?]( )