How to Add Multiple Plot Bands to the Same Axis in .NET MAUI Toolkit Cartesian Charts?

This article offers a step-by-step guide on how to add multiple plot bands to the same axis in .NET MAUI Toolkit Cartesian Chart.

The SfCartesianChart provides PlotBand support for both X and Y axes, enabling you to visually highlight specific value ranges. This feature is particularly useful for emphasizing thresholds, performance zones, or categorized regions - enhancing the overall readability and interpretability of your data.

The PlotBand includes the following properties:

• Start - Gets or sets the axis value representing where the plot band should start on the axis.
• End - Gets or sets the axis value representing where the plot bands should end on the axis.
• Fill - Gets or sets the color of the plot band.
• Text - Gets or sets the text to be displayed on the plot band.
• LabelStyle - Gets or sets the customized style for the plot band labels.

Learn step-by-step instructions and gain insights to add multiple plot bands to the same axis.

Configure the Cartesian Chart
Define SfCartesianChart with CategoryAxis for the X-axis and NumericalAxis for the Y-axis. Add LineSeries to visualize data points.

XAML

<chart:SfCartesianChart>
......

   <chart:SfCartesianChart.XAxes>
       <chart:CategoryAxis ShowMajorGridLines="False" LabelPlacement="BetweenTicks">
           ......
       </chart:CategoryAxis>
   </chart:SfCartesianChart.XAxes>

   <chart:SfCartesianChart.YAxes>
       <chart:NumericalAxis ShowMajorGridLines="False" Minimum="0" Maximum="100" Interval="20">
           ......
       </chart:NumericalAxis>
   </chart:SfCartesianChart.YAxes>

   ......

   <chart:LineSeries ItemsSource="{Binding TaskUsageData}"
                 XBindingPath="TaskName"
                 YBindingPath="CpuUsage"
                 ShowMarkers="True"
                 Label="CPU"/>

   <chart:LineSeries ItemsSource="{Binding TaskUsageData}"
                 XBindingPath="TaskName"
                 YBindingPath="MemoryUsage"
                 ShowMarkers="True" 
                 Label="Memory"/>

   <chart:LineSeries ItemsSource="{Binding TaskUsageData}"
                 XBindingPath="TaskName"
                 YBindingPath="DiskUsage" 
                 ShowMarkers="True"
                 Label="Disk"/>

</chart:SfCartesianChart> 

C#

var chart = new SfCartesianChart();
.....

var xAxis = new CategoryAxis()
{
   ShowMajorGridLines = false,
   LabelPlacement = LabelPlacement.BetweenTicks,
};

.....
chart.XAxes.Add(xAxis);

var yAxis = new NumericalAxis()
{
   ShowMajorGridLines = false,
   Minimum = 0,
   Maximum = 100,
   Interval = 20
};

......
chart.YAxes.Add(yAxis);

var lineSeries1 = new LineSeries()
{
   ItemsSource = new ViewModel().TaskUsageData,
   XBindingPath = "TaskName",
   YBindingPath = "CpuUsage",
   ShowMarkers = true,
   Label = "CPU"
};

var lineSeries2 = new LineSeries()
{
   ItemsSource = new ViewModel().TaskUsageData,
   XBindingPath = "TaskName",
   YBindingPath = "MemoryUsage",
   ShowMarkers = true,
   Label = "Memory"
};

var lineSeries3 = new LineSeries()
{
   ItemsSource = new ViewModel().TaskUsageData,
   XBindingPath = "TaskName",
   YBindingPath = "DiskUsage",
   ShowMarkers = true,
   Label = "Disk"
};

chart.Series.Add(lineSeries1);
chart.Series.Add(lineSeries2);
chart.Series.Add(lineSeries3); 

Added the Multiple Plot Bands
To visually separate usage zones (like Low, Moderate, High, Very High), use the NumericalPlotBandCollection inside the NumericalAxis. Each NumericalPlotBand can specify a Start, End, Fill, and Text.

XAML

<chart:SfCartesianChart>
......

   <chart:SfCartesianChart.YAxes>
       <chart:NumericalAxis ShowMajorGridLines="False" Minimum="0" Maximum="100" Interval="20">
           <chart:NumericalAxis.PlotBands>
               <chart:NumericalPlotBandCollection>
                   <chart:NumericalPlotBand Start="0" End="25" Fill="#FFE699" Text="Low"/>
                   <chart:NumericalPlotBand Start="25" End="50" Fill="#FFDD66" Text="Moderate"/>
                   <chart:NumericalPlotBand Start="50" End="75" Fill="#FFC300" Text="High"/>
                   <chart:NumericalPlotBand Start="75" End="100" Fill="#FF5733" Text="Very High"/>
               </chart:NumericalPlotBandCollection>
           </chart:NumericalAxis.PlotBands>
           ......
       </chart:NumericalAxis>
   </chart:SfCartesianChart.YAxes>

   .......

</chart:SfCartesianChart> 

C#

var chart = new SfCartesianChart();

......
var yAxis = new NumericalAxis()
{
   ShowMajorGridLines = false,
   Minimum = 0,
   Maximum = 100,
   Interval = 20
};

yAxis.PlotBands = new NumericalPlotBandCollection()
{
   new NumericalPlotBand { Start = 0, End = 25, Fill = Color.FromArgb("#FFE699"), Text = "Low" },
   new NumericalPlotBand { Start = 25, End = 50, Fill = Color.FromArgb("#FFDD66"), Text = "Moderate" },
   new NumericalPlotBand { Start = 50, End = 75, Fill = Color.FromArgb("#FFC300"), Text = "High" },
   new NumericalPlotBand { Start = 75, End = 100, Fill = Color.FromArgb("#FF5733"), Text = "Very High" }
};
......

chart.YAxes.Add(yAxis);
...... 

Output:

Conclusion:
I hope you enjoyed learning about how to add multiple plot bands to the same axis in .NET MAUI Toolkit Charts.
You can refer to our .NET MAUI Toolkit Chart’s feature tour page to learn about its other groundbreaking feature representations and documentation to understand how to present and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!