SyncfusionExamples · rajendranr-5483 · Oct 31, 2025 · Oct 31, 2025
diff --git a/App.razor b/App.razor
diff --git a/BlazorChartSample.csproj b/BlazorChartSample.csproj
diff --git a/BlazorChartSample.sln b/BlazorChartSample.sln
diff --git a/Components/App.razor b/Components/App.razor
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <base href="/" />
+    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
+    <link rel="stylesheet" href="app.css" />
+    <link rel="stylesheet" href="BlazorApp.styles.css" />
+    <link rel="icon" type="image/png" href="favicon.png" />
+    <HeadOutlet @rendermode="InteractiveServer" />
+</head>
+
+<body>
+    <Routes @rendermode="InteractiveServer" />
+    <script src="_framework/blazor.web.js"></script>
+    <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
+</body>
+
+</html>
diff --git a/Components/Layout/MainLayout.razor b/Components/Layout/MainLayout.razor
@@ -0,0 +1,15 @@
+@inherits LayoutComponentBase
+
+<div class="page">
+    <main>
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
+</div>
+
+<div id="blazor-error-ui">
+    An unhandled error has occurred.
+    <a href="" class="reload">Reload</a>
+    <a class="dismiss">🗙</a>
+</div>
diff --git a/Shared/MainLayout.razor.css → Components/Layout/MainLayout.razor.css b/Shared/MainLayout.razor.css → Components/Layout/MainLayout.razor.css
@@ -21,26 +21,27 @@ main {
     align-items: center;
 }
 
-    .top-row ::deep a, .top-row .btn-link {
+    .top-row ::deep a, .top-row ::deep .btn-link {
         white-space: nowrap;
         margin-left: 1.5rem;
+        text-decoration: none;
     }
 
-    .top-row a:first-child {
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
+
+    .top-row ::deep a:first-child {
         overflow: hidden;
         text-overflow: ellipsis;
     }
 
 @media (max-width: 640.98px) {
-    .top-row:not(.auth) {
-        display: none;
-    }
-
-    .top-row.auth {
+    .top-row {
         justify-content: space-between;
     }
 
-    .top-row a, .top-row .btn-link {
+    .top-row ::deep a, .top-row ::deep .btn-link {
         margin-left: 0;
     }
 }
@@ -63,8 +64,33 @@ main {
         z-index: 1;
     }
 
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
     .top-row, article {
         padding-left: 2rem !important;
         padding-right: 1.5rem !important;
     }
 }
+
+#blazor-error-ui {
+    background: lightyellow;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+    #blazor-error-ui .dismiss {
+        cursor: pointer;
+        position: absolute;
+        right: 0.75rem;
+        top: 0.5rem;
+    }
diff --git a/Components/Pages/Home.razor b/Components/Pages/Home.razor
@@ -0,0 +1,34 @@
+@page "/"
+
+<SfChart Title="Sales Analysis">
+    <ChartPrimaryXAxis Title="Month" ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
+    <ChartPrimaryYAxis Title="Sales in Dollar"></ChartPrimaryYAxis>
+    <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
+    <ChartLegendSettings Visible="true"></ChartLegendSettings>
+    <ChartSeriesCollection>
+        <ChartSeries DataSource="@Sales" Name="Sales" XName="Month" YName="SalesValue" Type="ChartSeriesType.Column">
+            <ChartMarker>
+                <ChartDataLabel Visible="true"></ChartDataLabel>
+            </ChartMarker>
+        </ChartSeries>
+    </ChartSeriesCollection>
+</SfChart>
+
+@code {
+    public class SalesData
+    {
+        public string Month { get; set; }
+        public double SalesValue { get; set; }
+    }
+
+    public List<SalesData> Sales = new List<SalesData>
+    {
+        new SalesData { Month = "Jan", SalesValue = 35 },
+        new SalesData { Month = "Feb", SalesValue = 28 },
+        new SalesData { Month = "Mar", SalesValue = 34 },
+        new SalesData { Month = "Apr", SalesValue = 32 },
+        new SalesData { Month = "May", SalesValue = 40 },
+        new SalesData { Month = "Jun", SalesValue = 32 },
+        new SalesData { Month = "Jul", SalesValue = 35 }
+    };
+}
diff --git a/Components/Routes.razor b/Components/Routes.razor
@@ -0,0 +1,6 @@
+<Router AppAssembly="typeof(Program).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)" />
+        <FocusOnNavigate RouteData="routeData" Selector="h1" />
+    </Found>
+</Router>
diff --git a/_Imports.razor → Components/_Imports.razor b/_Imports.razor → Components/_Imports.razor
@@ -1,12 +1,11 @@
 @using System.Net.Http
-@using Microsoft.AspNetCore.Authorization
-@using Microsoft.AspNetCore.Components.Authorization
+@using System.Net.Http.Json
 @using Microsoft.AspNetCore.Components.Forms
 @using Microsoft.AspNetCore.Components.Routing
 @using Microsoft.AspNetCore.Components.Web
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
 @using Microsoft.AspNetCore.Components.Web.Virtualization
 @using Microsoft.JSInterop
-@using BlazorChartSample
-@using BlazorChartSample.Shared
-@using Syncfusion.Blazor
+@using BlazorApp
+@using BlazorApp.Components
 @using Syncfusion.Blazor.Charts
diff --git a/Data/WeatherForecast.cs b/Data/WeatherForecast.cs
diff --git a/Data/WeatherForecastService.cs b/Data/WeatherForecastService.cs
diff --git a/Pages/Counter.razor b/Pages/Counter.razor
diff --git a/Pages/Error.cshtml b/Pages/Error.cshtml
diff --git a/Pages/Error.cshtml.cs b/Pages/Error.cshtml.cs
diff --git a/Pages/FetchData.razor b/Pages/FetchData.razor