TL;DR: Learn how to build a compact restaurant management dashboard using Syncfusion .NET MAUI Toolkit Spark Charts and Radial Gauge. Visualize trends like daily sales, orders, prep time, and delivery success in a clean, responsive UI.
Welcome to the Chart of the Week blog series!
If you’ve ever tried to monitor restaurant performance across multiple metrics, sales, orders, prep times, and delivery success, you know how quickly dashboards can become cluttered. On tiny screens, the challenge is even greater: how do you keep everything clear and actionable? That’s where spark charts shine – small, data-dense visuals that fit perfectly into compact UI areas, such as mobile cards or list items.
In this blog, we’ll build a restaurant management dashboard using the Syncfusion® .NET MAUI Toolkit Spark Charts. We’ll incorporate four compact trend charts, a KPI radial gauge, and a CollectionView to display detailed data, all while maintaining a clean, responsive, and performant UI.
What is a Spark Chart, and why does it matter?
A spark chart, also called a sparkline or micro chart, is a minimalist visualization that omits axes and labels, focusing instead on the overall trend across time or categories.
Its key advantages include:
- Space efficiency: Fits inside cards, headers, or table cells without clutter.
- Quick trend recognition: Helps users spot upward or downward movement at a glance.
- Ideal for dashboards: Perfect for mobile or compact layouts with limited space.
Syncfusion .NET MAUI Toolkit Spark Chart
The Syncfusion .NET MAUI Toolkit is an open-source library that provides high-quality controls optimized for mobile dashboards. One of its standout features is the Spark Chart, designed for lightweight, trend-focused visualizations.
The available Spark Chart types are:
- Line
- Column
- Area
- Win/Loss
Each type supports customization options such as markers and point highlighting (first, last, high, low) to make trends even clearer.
Building a restaurant dashboard in .NET MAUI
Building a compact yet powerful dashboard in .NET MAUI is easier than you think. We’ll use four compact trends to provide quick insights into restaurant operations:
- Daily sales (₹): Displayed using a Spark Line chart for the last 14 days.
- Orders count: Represented with a Spark Column chart by day.
- Average prep time (mins): Shown as a Spark Area chart to highlight the magnitude of changes.
- Delivery success (Win/Loss): Illustrated with a Win/Loss series where +1 indicates success and −1 indicates an issue.
To make the dashboard more informative, we will add:
- Radial Gauge: Shows today’s fulfillment rate (for example, 87%).
- CollectionView: Presents per-day detail rows for auditing purposes.
The Radial Gauge is ideal for KPI visualization because it supports ranges, pointers, and annotations, making it perfect for compact dashboard metrics.
The CollectionView flexibly displays lists or grids with templates and selection, making it ideal for detailed dashboards.
Refer to the following image.
Step 1: Create the Model and ViewModel
Start by defining simple data models for sales, orders, prep time, and delivery status. Then, create a ViewModel that exposes observable collections for these models. This ensures smooth data binding and real-time updates.
_ Model _
public class OrderInfo
{
// Represents order-related details such as amount, item count, and channel.
}
public class KitchenLoadInfo
{
// Holds information about kitchen workload
}
public class DeliveryInfo
{
// Stores delivery-related data like delivery date, status indicators.
}
public class RevenueInfo
{
// Contains revenue details such as daily sales amount and total earnings.
}
public class WinLossInfo
{
// Tracks delivery success and failure trends for Win/Loss spark chart visualization.
}
_ ViewModel _
public partial class DashboardViewModel
{
private void GenerateBaseData()
{
// Generates deterministic data for orders and deliveries.
}
private static string ComputeChannel(int index)
{
// Returns the sales channel string (Dine-in, Takeaway, or Delivery) based on a repeating pattern.
}
private static string ComputeTable(int index)
{
// Returns a table or order identifier string derived from the index for display and grouping.
}
private void BuildKitchenLoadFromAllData()
{
// Builds the kitchen load series by computing pending items at each timestamp across all data.
}
private void ApplyFilter()
{
// Applies the selected time filter, updates gradients, filters series, rebuilds load and win/loss, and updates counters.
}
private List<OrderInfo> FilterOrdersByRange(DateTime start, DateTime end)
{
// Returns a time-ordered subset of deliveries within the specified time range.
}
private List<KitchenLoadInfo> BuildKitchenLoadFor(IEnumerable<OrderInfo> orders,
IEnumerable<DeliveryInfo> deliveries)
{
// Builds kitchen load points for the filtered time range using orders and deliveries.
}
private int CalculatePendingAt(DateTime t)
{
// Calculates pending items at a timestamp using over orders and deliveries.
}
private static List<WinLossInfo> BuildWinLossFromLoad(IReadOnlyList<KitchenLoadInfo> load)
{
// Converts kitchen load datas into a win/loss series: 1 for improving, -1 for worsening, 0 for flat.
}
private void UpdateRowCounts(int filteredOrdersCount)
{
// Updates summary counters for orders, pending items, and deliveries based on the filtered data.
}
}
Step 2: Configure the layout
Let’s design a clean and compact layout that fits multiple spark charts without clutter. Here, we’ll use a grid or stack layout to efficiently organize charts and KPI components, maintaining a visually balanced dashboard.
<Grid RowDefinitions="Auto,4*,5*" Padding="20" RowSpacing="10" Background="#8BD9CC">
<!-- Header -->
<Grid Grid.Row="0" ColumnDefinitions="Auto,*,Auto,Auto" Padding="0,4">
</Grid>
<!-- Top Cards -->
<Grid Grid.Row="1" ColumnDefinitions="*,*,*,*" ColumnSpacing="10">
<!-- Orders -->
<Border BackgroundColor="#E5F5EA" Padding="10" StrokeThickness="0" StrokeShape="RoundRectangle 10">
</Border>
<!-- Kitchen Load -->
<Border Grid.Column="1" BackgroundColor="#E5F5EA" Padding="10" StrokeThickness="0" StrokeShape="RoundRectangle 10">
</Border>
<!-- Deliveries -->
<Border Grid.Column="2" BackgroundColor="#E5F5EA" Padding="10" StrokeThickness="0" StrokeShape="RoundRectangle 10">
</Border>
<!-- Gauge Panel -->
<Border Grid.Column="3" BackgroundColor="#E5F5EA" Padding="10" StrokeThickness="0" StrokeShape="RoundRectangle 10">
</Border>
</Grid>
<!-- Bottom Section -->
<Grid Grid.Row="2" ColumnDefinitions="4*,6*" ColumnSpacing="10">
<!-- Performance Trend (Win/Loss) -->
<Grid Grid.Column="0" RowDefinitions="8*,2*">
</Grid>
<!-- Orders Table -->
<Border Grid.Column="1" BackgroundColor="#E8F9F9" Padding="15"
StrokeThickness="0" StrokeShape="RoundRectangle 10">
</Border>
</Grid>
</Grid>
Step 3: Visualizing key metrics with .NET MAUI Toolkit Spark Charts
To make the dashboard informative and visually appealing, we’ll add four spark charts that represent critical restaurant metrics in a compact format:
- Orders trend: A Spark Line chart to show how the number of orders fluctuates over time.
<!-- Orders -->
<Border BackgroundColor="#E5F5EA" Padding="10" StrokeThickness="0" StrokeShape="RoundRectangle 10">
<Grid RowDefinitions="Auto,Auto,Auto,*" RowSpacing="8">
<Label Text="Orders" FontSize="18" TextColor="#4c554d" FontFamily="NataSans" />
<Label Grid.Row="1" Text="{Binding OrdersRowsCount}" TextColor="#4c554d" FontSize="20" FontFamily="NataSans" />
<sparkchart:SfSparkLineChart Grid.Row="3" Stroke="#6CAA9C" StrokeWidth="2" ItemsSource="{Binding OrdersData}" YBindingPath="Orders"/>
</Grid>
</Border>
- Kitchen load: A Spark Area chart to highlight pending workload in the kitchen.
<!-- Kitchen Load -->
<Border Grid.Column="1" BackgroundColor="#E5F5EA" Padding="10" StrokeThickness="0" StrokeShape="RoundRectangle 10">
<Grid RowDefinitions="Auto,Auto,Auto,*" RowSpacing="8">
<Label Text="Kitchen Load" FontSize="18" TextColor="#4c554d" FontFamily="NataSans"/>
<Label Grid.Row="1" Text="{Binding PendingRowsCount}" TextColor="#4c554d" FontFamily="NataSans" FontSize="20"/>
<sparkchart:SfSparkAreaChart Grid.Row="3" ItemsSource="{Binding KitchenLoadData}" YBindingPath="Load" Fill="#B5E5D7" Stroke="#6CAA9C" StrokeWidth="2"/>
</Grid>
</Border>
- Deliveries: A Spark Column chart to display completed deliveries at different time intervals.
<!-- Deliveries -->
<Border Grid.Column="2" BackgroundColor="#E5F5EA" Padding="10" StrokeThickness="0" StrokeShape="RoundRectangle 10">
<Grid RowDefinitions="Auto,Auto,*" RowSpacing="8">
<Label Text="Deliveries" FontSize="18" TextColor="#4c554d" FontFamily="NataSans"/>
<Label Grid.Row="1" Text="{Binding DeliveriesRowsCount}" TextColor="#4c554d" FontFamily="NataSans" FontSize="20"/>
<sparkchart:SfSparkColumnChart Grid.Row="2" HighPointFill="#71C4BE" ItemsSource="{Binding DeliveriesData}" Fill="#008A87" YBindingPath="Deliveries"/>
</Grid>
</Border>
- Performance trend: A Spark Win/Loss chart to indicate improvements or declines in operational efficiency.
<!-- Performance Trend (Win/Loss) -->
<Border Grid.Row="0" BackgroundColor="#E5F5EA" Padding="10" StrokeThickness="0" StrokeShape="RoundRectangle 10">
<Grid RowDefinitions="Auto,*" RowSpacing="8">
<Label Text="Performance Trend" FontSize="18" TextColor="#4c554d" FontFamily="NataSans" Margin="0,0,10,0"/>
<sparkchart:SfSparkWinLossChart Grid.Row="1" ItemsSource="{Binding WinLossData}" YBindingPath="Value" NeutralPointFill="#066B82" NegativePointsFill="#F08650" PositivePointsFill="#098C8B"/>
</Grid>
</Border>
Each chart is bound to its respective data collection, ensuring real-time updates as new data flows in. This approach keeps the dashboard clean while providing quick insights at a glance.
Step 4: Add a Radial Gauge for service progress
Display today’s fulfillment rate in a visually appealing way using a Radial Gauge. Configure color-coded ranges, a needle pointer, and annotations to make the KPI stand out. This compact gauge provides an instant snapshot of operational performance without cluttering the dashboard.
Refer to the following code example.
<gauge:SfRadialGauge Grid.Row="1" BackgroundColor="#E5F5EA" HorizontalOptions="Center">
<!—Customization for Gauge -->
</gauge:SfRadialGauge>
Step 5: Implement a CollectionView for order details
Finally, complement the high-level charts with a CollectionView that lists detailed order information such as time, order type, table or order number, and amount. This scrollable list enables users to drill down into granular data while maintaining an overview of overall trends, striking a perfect balance between summary and detail.
<CollectionView Grid.Row="1" ItemsSource="{Binding OrdersData}" Margin="4" VerticalScrollBarVisibility="Never" VerticalOptions="Fill" SelectionMode="None">
<CollectionView.Header>
<Grid ColumnDefinitions="2*,2*,2*,2*" Padding="5,8,5,8" >
<Grid.Background>
<LinearGradientBrush StartPoint="0,0" EndPoint="1,0">
<GradientStop Color="#ACD5CB" Offset="0.0"/>
<GradientStop Color="#75C5BD" Offset="0.5"/>
<GradientStop Color="#3DA2B5" Offset="1.0"/>
</LinearGradientBrush>
</Grid.Background>
<Label Text="Time" Grid.Column="0" TextColor="#004D4D" FontFamily="NataSans"/>
<Label Text="Order Type" Grid.Column="1" TextColor="#004D4D" FontFamily="NataSans"/>
<Label Text="Table / Order" Grid.Column="2" TextColor="#004D4D" FontFamily="NataSans"/>
<Label Text="Amount" Grid.Column="3" TextColor="#004D4D" FontFamily="NataSans" HorizontalTextAlignment="End"/>
</Grid>
</CollectionView.Header>
<CollectionView.ItemTemplate>
<DataTemplate>
<Grid ColumnDefinitions="2*,2*,2*,2*" ColumnSpacing="5">
<!-- Time (12-hour format) -->
<Label Text="{Binding TimeStamp, StringFormat='{}{0:hh:mm tt}'}" Grid.Column="0" VerticalOptions="Center"/>
<!-- Order Type -->
<Label Grid.Column="1" TextColor="#333333"
Text="{Binding Channel}"
VerticalOptions="Center"/>
<!-- Table/Order Reference -->
<Label Grid.Column="2" TextColor="#333333"
Text="{Binding Reference}"
VerticalOptions="Center"/>
<!-- Amount -->
<Label Grid.Column="3" TextColor="#333333"
Text="{Binding Amount, StringFormat='{}{0:C}'}"
VerticalOptions="Center"
HorizontalTextAlignment="End"/>
<!-- Row Separator -->
<BoxView Grid.ColumnSpan="4"
VerticalOptions="End"
HeightRequest="1"
Color="#E0E0E0"/>
</Grid>
</DataTemplate>
</CollectionView.ItemTemplate>
</CollectionView>
Here’s a quick preview of the functional output of our restaurant management application.
GitHub reference
For more details, refer to the GitHub demo for building a restaurant management dashboard using .NET MAUI Toolkit Spark Charts.
Conclusion
Thank you for reading! In this blog, we’ve explored how to use Syncfusion .NET MAUI Toolkit Spark Chart to create a compact and insightful restaurant management dashboard. These charts help visualize key trends in minimal space, making dashboards more efficient and user-friendly.
If you are a Syncfusion user, you can download the latest setup from the license and downloads page. New users can try our controls by downloading a free 30-day trial.
For any questions or assistance, feel free to reach out through our support forum, support portal, or feedback portal. We are always happy to help you build amazing apps!
Related Blogs
- Build a Modern HR Recruitment Dashboard Using .NET MAUI Toolkit Charts
- How to Integrate Google Maps in .NET MAUI: A Cross-Platform Guide Using the Google Maps Tile API
- Visualize Monthly Weather Forecasts with .NET MAUI Scheduler
- 12 Chart Design Tips Every Developer Needs To Know
This article was originally published at Syncfusion.com.
Top comments (0)