Visualizing Geo-Spatial Data in .NET MAUI with Interactive Charts and Maps

Welcome to the Chart of the Week series!

In today’s fast-paced world, instant access to critical data drives smart decisions. When it comes to something as dynamic as electric vehicle (EV) adoption, understanding evolving trends is essential. Imagine a dashboard that not only visualizes global EV penetration but also lets you drill down into country-specific trends and market mixes with a single click. That’s the power of a geo-analytics dashboard.

With Syncfusion^® .NET MAUI Charts and Maps controls, building dynamic, cross-platform applications that deliver this experience becomes incredibly straightforward. These powerful charting and mapping libraries help you turn raw data into stunning, interactive visualizations.

In this hands-on tutorial, you’ll learn how to build a sleek, interactive dashboard in .NET MAUI using Syncfusion Maps and Charts, following the MVVM pattern. We’ll process real-world EV sales data and transform it into actionable insights.

Here’s what the Geo-Analytics Dashboard looks like:

Ready to dive in? Let’s start building your interactive EV dashboard with .NET MAUI!

Step 1: Designing the dashboard layout

Start by creating a clean and responsive geo-analytics workspace using a Grid layout in .NET MAUI. This layout organizes the dashboard components logically, ensuring an intuitive user experience.

Here’s how you can do it in XAML code:

<ScrollView Orientation="Vertical">
    <Grid RowDefinitions="Auto, Auto" ColumnDefinitions="*">

        // Header
        <Grid Grid.Row="0">
            // Logo + Title
        </Grid>

        // Body
        <Grid Grid.Row="1" ColumnDefinitions="2*, *, *" ColumnSpacing="16">

            // Left Column
            <VerticalStackLayout Grid.Column="0">
                <Border>
                    // SfMaps:EV Adoption
                </Border>
                <Border>
                    // KPIs: Battery, Plug-in, Growth
                </Border>
            </VerticalStackLayout>

            // Middle Column
            <VerticalStackLayout Grid.Column="1">
                <Border>
                    // SfCartesianChart: EV Trend
                </Border>
                <Border>
                    // SfCircularChart: Radial Bar (EV Mix)
                </Border>
            </VerticalStackLayout>

            // Right Column
            <VerticalStackLayout Grid.Column="2">
                <Border>
                    // SfCircularChart: Continent Share
                </Border>
                <Border>
                    // SfCircularChart: Country Share
                </Border>
            </VerticalStackLayout>
        </Grid>
    </Grid>
</ScrollView>

Step 2: Implementing MVVM architecture

The MVVM (Model-View-ViewModel) architecture is essential for building scalable, testable, and maintainable .NET MAUI dashboards. It separates the UI (View) from the business logic (ViewModel) and data (Model).

Creating model classes for EV data

You can define model classes to structure your EV data, including country stats, yearly trends, and EV mix slices.

Here’s how the C# code example to achieve this:

public class EvAdoptionRecord
{
    // Raw EV adoption record from CSV (per country, per year)
}

public class CountryAdoptionSnapshot
{
    // Latest-year snapshot per country
}

public class TopCountryShare
{
    // Top N countries by Battery EV share
}

public class ContinentShare
{
    // Aggregated Battery EV share by continent
}

public class YearlySharePoint
{
    // Single point in yearly trend series (Year, Value)
}

public class PowertrainMixSlice
{
    // Slice in radial bar (Battery / Plug-in / Other)
}

Note: You can check the complete implementation of the Model classes on the Github repository.

Building the ViewModel for dynamic updates

The ViewModel loads the CSV data, processes the latest year’s shares, and then updates all relevant properties dynamically when a user selects a new country on the map. It manages observable collections that the UI binds to, ensuring seamless updates.

Explore the full DashboardViewModel implementation in C#:

public class DashboardViewModel
{
    public void LoadCsvData(string path)
    {
        // implementation for loading CSV
    }

    public void ApplySelection(CountryEvStat cs)
    {
        // implementation for updating UI data based on selection
    }
}

Note: For more details, refer to the DashboardViewModel class on Github.

Step 3: Building modular views with user controls

A well-structured dashboard is modular. Each section delivers distinct, actionable insights. By using user controls in .NET MAUI, you can keep your code clean, reusable, and easy to maintain.

Visualizing EV adoption by country

Start with a world map that visually represents EV adoption. Countries are color-coded based on their share of Battery EVs, making hotspots easy to identify. Users can interact by selecting a country, which triggers dynamic updates across the dashboard.

Explore the full XAML implementation for the map layout:

<map:SfMaps Grid.Row="1">
    <map:SfMaps.Layer>
        <map:MapShapeLayer x:Name="ShapeLayer" DataSource="{Binding Countries}" ShapeDataPrimaryValuePath="Name" ShapeColorValuePath="BatteryShare" EnableSelection="True" ShowShapeTooltip="True" ShapeSelected="MapShapeLayer_SelectionChanged"... >
            // Color ranges and Legend
        </map:MapShapeLayer>
    </map:SfMaps.Layer>
</map:SfMaps>

When a user selects a country, the dashboard updates in real time. KPIs, EV trend charts, radial bar mix, and pie charts all reflect the selected country’s data without manual refresh.

Note: You can check MAUI Map’s selection documentation for more insights.

Displaying key performance indicators (KPIs)

Now, we need to display critical metrics, such as Battery EV share, Plug-in share, and Year-over-Year growth, in a responsive KPI card. These values update instantly when a country is selected.

Add this to your project:

// KPI Card (updates on country selection)
<Border Padding="16">
    <HorizontalStackLayout Spacing="16">

        // Battery Share
        <VerticalStackLayout>
            <Label Text="Battery Share" />
            <Label Text="{Binding SelectedBatteryShare, StringFormat='{0:F2}%'}" />
        </VerticalStackLayout>

        // Plug‑in Share
        <VerticalStackLayout>
            <Label Text="Plug‑in Share" />
            <Label Text="{Binding SelectedPlugInShare, StringFormat='{0:F2}%'}" />
        </VerticalStackLayout>

        // Growth YoY
        <VerticalStackLayout>
            <Label Text="Growth YoY" />
            <Label Text="{Binding SelectedGrowth, StringFormat='{0:F2}%'}" />
        </VerticalStackLayout>

    </HorizontalStackLayout>
</Border>

Representing EV powertrain mix

Use a Radial Bar Chart to display the EV powertrain mix, like Battery EV, Plug-in Hybrid, and Other, for the selected country. This visualization helps users quickly understand market composition.

Code example for quick integration:

<Grid Grid.Row="1"
      HorizontalOptions="Center"
      VerticalOptions="Start"
      Padding="0">
    <chart:SfCircularChart HeightRequest="250">
        <chart:RadialBarSeries ItemsSource="{Binding SelectedMix}" ShowDataLabels="True" LabelContext="Percentage" XBindingPath="Name" YBindingPath="Value" InnerRadius="0.35" EnableTooltip="True" EnableAnimation="True">
        </chart:RadialBarSeries>
           <chart:SfCircularChart.Legend>
               <chart:ChartLegend Placement="Right" />
           </chart:SfCircularChart.Legend>
    </chart:SfCircularChart>
</Grid>

Analyzing EV adoption trends over time

You can use a Line Chart to illustrate how the shares of Battery EVs and Plug-in Hybrids have changed over the years for the selected country. This trend analysis highlights growth patterns and market shifts.

Below is the code you need:

// Two LineSeries: BatterySeries, PlugInSeries
<chart:SfCartesianChart>
    <chart:SfCartesianChart.XAxes>
        <chart:CategoryAxis />
    </chart:SfCartesianChart.XAxes>

    <chart:SfCartesianChart.YAxes>
        <chart:NumericalAxis />
    </chart:SfCartesianChart.YAxes>

    <chart:LineSeries ItemsSource=“Binding BatterySeries}" XBindingPath="Year" YBindingPath="Value" />
    <chart:LineSeries ItemsSource=“Binding PlugInSeries}" XBindingPath="Year" YBindingPath="Value" />
</chart:SfCartesianChart >

Comparing battery EV adoption across top continents

A Pie Chart offers a concise overview of Battery EV adoption across major continents. This high-level view helps stakeholders assess regional momentum and disparities at a glance.

Try this in your code:

// Continent by Batttery Share
<chart:SfCircularChart>
    <chart:PieSeries ItemsSource=“{Binding ContinentShares}" XBindingPath="Country" YBindingPath="Value" ShowDataLabels="True" />
</chart:SfCircularChart>

Highlighting top countries by battery EV share

Now, showcase the top five countries with the highest Battery EV share using a Pie Chart. This quick benchmarking tool enables comparative analysis of national-level adoption trends.

Code snippet to achieve this:

// Country by Batttery Share
<chart:SfCircularChart>
    <chart:PieSeries ItemsSource=“{Binding TopCountries}" XBindingPath="Country" YBindingPath="Value" ShowDataLabels="True" />
</chart:SfCircularChart>

Following these elegant steps, you have built the core of a dynamic .NET MAUI geo-analytics dashboard using Syncfusion Maps and Charts, delivering rich, interactive insights to users.

Here’s a preview of the feature in action:

Mobile optimization

On mobile, selecting a country opens an SfBottomSheet with two buttons:

• EV trends: Displays battery and plug-in share over time.
• Insights: Shows KPIs and powertrain mix.

This approach keeps the map visible while presenting focused details in a compact panel.

GitHub reference

For more details, refer to the complete .NET MAUI Geo-Analytics Dashboard sample on Github.

Supercharge your cross-platform apps with Syncfusion's robust .NET MAUI controls.

Try It Free

Conclusion

Thanks for joining us on this dashboard-building journey! By following this walkthrough, you’ve learned how to create a clear, interactive geo-analytics dashboard powered by Syncfusion^® .NET MAUI Charts and Maps. Leveraging MVVM architecture ensures your app stays scalable, maintainable, and responsive.

This approach provides a flexible foundation for visualizing complex geographic data, analyzing EV adoption trends, and delivering actionable insights, all within a sleek, cross-platform experience.

If you’re a Syncfusion user, you can download the setup from the license and downloads page. Otherwise, you can download a free 30-day trial.

You can also contact us through our support forum, support portal, or feedback portal for queries. We are always happy to assist you!

Scan it to get the demo app.

Scan it to get the demo app.

Scan it to get the demo app.

Related Blogs

Build a Sprint Management Dashboard in .NET MAUI with Interactive Charts

9 min read

Build a Modern Student Enrollment Dashboard Using .NET MAUI Charts

10 min read

Build a Modern HR Recruitment Dashboard Using .NET MAUI Toolkit Charts

7 min read

Build a Compact Restaurant Dashboard in .NET MAUI with Spark Charts and Radial Gauge

10 min read