Breadcrumb arrow Back to Code Examples

Highlight Specific Regions In The MAUI Cartesian Chart

Sample date Updated on Sep 30, 2025
Browse Code Git logo Download
charts charts-ai maui-charts maui-toolkit-charts syncfusion-charts

This sample demonstrates how to highlight specific regions in the .NET MAUI Cartesian Chart control within a .NET MAUI application.

Sample

    <chart:SfCartesianChart>

        <chart:SfCartesianChart.Title>
            <Label Text="Monthly Temperature Patterns Throughout the Year" FontSize="17"
                   HorizontalTextAlignment="Center" FontAttributes="Bold"/>
        </chart:SfCartesianChart.Title>

        <chart:SfCartesianChart.XAxes>
            <chart:DateTimeAxis ShowMajorGridLines="False" Interval="2" 
                                Minimum="2024-01-01" Maximum="2024-12-31"
                                EdgeLabelsDrawingMode="Fit" EdgeLabelsVisibilityMode="Visible">

                <chart:DateTimeAxis.LabelStyle>
                    <chart:ChartAxisLabelStyle LabelFormat="MMM"/>
                </chart:DateTimeAxis.LabelStyle>

                <chart:DateTimeAxis.Title>
                    <chart:ChartAxisTitle Text="Months" FontSize="15" TextColor="Black"/>
                </chart:DateTimeAxis.Title>
            </chart:DateTimeAxis>
        </chart:SfCartesianChart.XAxes>

        <chart:SfCartesianChart.YAxes>
            <chart:NumericalAxis x:Name="YAxis" Maximum="32" Minimum="20" Interval="4" 
                                ShowMinorGridLines="False" EdgeLabelsDrawingMode="Fit"
                                ShowMajorGridLines="False" PlotOffsetEnd="10">

                <chart:NumericalAxis.PlotBands>
                    <chart:NumericalPlotBandCollection>
                        <chart:NumericalPlotBand Start="22" End="22" Stroke="#B300E190"
                                                 StrokeWidth="2" Text="Low Temperature">

                            <chart:NumericalPlotBand.LabelStyle>
                                <chart:ChartPlotBandLabelStyle HorizontalTextAlignment="Start"
                                                               OffsetX="5" OffsetY="18" 
                                                               FontSize="14" TextColor="Black"/>
                            </chart:NumericalPlotBand.LabelStyle>

                        </chart:NumericalPlotBand>

                        <chart:NumericalPlotBand Start="26" End="26" Stroke="#FCD404"
                                                 StrokeWidth="2" Text="Average Temperature">

                            <chart:NumericalPlotBand.LabelStyle>
                                <chart:ChartPlotBandLabelStyle HorizontalTextAlignment="Start"
                                                               OffsetX="5" OffsetY="18" 
                                                               FontSize="14" TextColor="Black"/>
                            </chart:NumericalPlotBand.LabelStyle>

                        </chart:NumericalPlotBand>

                        <chart:NumericalPlotBand Start="30" End="30" Stroke="#F77C34"
                                                 StrokeWidth="2" Text="High Temperature">

                            <chart:NumericalPlotBand.LabelStyle>
                                <chart:ChartPlotBandLabelStyle HorizontalTextAlignment="Start"
                                                               OffsetX="5" OffsetY="18" 
                                                               FontSize="14" TextColor="Black"/>
                            </chart:NumericalPlotBand.LabelStyle>

                        </chart:NumericalPlotBand>

                    </chart:NumericalPlotBandCollection>
                </chart:NumericalAxis.PlotBands>

                <chart:NumericalAxis.Title>
                    <chart:ChartAxisTitle Text="Temperature [°C]" FontSize="15" 
                                          TextColor="Black"/>
                </chart:NumericalAxis.Title>

                <chart:NumericalAxis.LabelStyle>
                    <chart:ChartAxisLabelStyle LabelFormat="0°C"/>
                </chart:NumericalAxis.LabelStyle>
            </chart:NumericalAxis>
        </chart:SfCartesianChart.YAxes>

        <chart:SplineSeries ItemsSource="{Binding ClimateData}" XBindingPath="Date" 
                            YBindingPath="Value" StrokeWidth="2"
                            ShowMarkers="True" Fill="DodgerBlue">
        </chart:SplineSeries>
    </chart:SfCartesianChart>

Requirements to run the demo

To run the demo, refer to System Requirements for .NET MAUI

Troubleshooting:

Path too long exception

If you are facing path too long exception when building this example project, close Visual Studio and rename the repository to short and build the project.

Up arrow