syncfusion-content · smukilansf3478 · Aug 29, 2025
diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/dynamic-data-update.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.MVC/dynamic-data-update.md
@@ -105,4 +105,31 @@ To replace the existing data source in the accumulation chart with a new data so
 {% endtabs %}
 {% endif %}
 
+## No data template
 
+When there is no data available to render in the chart, the `NoDataTemplate` property allows you to display a custom layout within the chart area. This layout can include a message indicating the absence of data, a relevant image, or a button to initiate data loading. You can incorporate styled text, images, or interactive elements to maintain design consistency and enhance user guidance.
+
+Once data becomes available, the chart automatically updates to display the appropriate visualization.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="No-data-template.cs" %}
+{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/no-data-template.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="No-data-template.cs" %}
+{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/No-data-template.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
diff --git a/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/dynamic-data-update.md b/ej2-asp-core-mvc/accumulation-chart/EJ2_ASP.NETCORE/dynamic-data-update.md
@@ -105,4 +105,32 @@ To replace the existing data source in the accumulation chart with a new data so
 {% endtabs %}
 {% endif %}
 
+## No data template
+
+When there is no data available to render in the chart, the `NoDataTemplate` property allows you to display a custom layout within the chart area. This layout can include a message indicating the absence of data, a relevant image, or a button to initiate data loading. You can incorporate styled text, images, or interactive elements to maintain design consistency and enhance user guidance.
+
+Once data becomes available, the chart automatically updates to display the appropriate visualization.
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="No-data-template.cs" %}
+{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/no-data-template.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="No-data-template.cs" %}
+{% include code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/No-data-template.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
 
diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/working-with-data.md b/ej2-asp-core-mvc/chart/EJ2_ASP.MVC/working-with-data.md
@@ -342,4 +342,33 @@ Specific color for empty point can be set by `Fill` property in `EmptyPointSetti
 {% endtabs %}
 {% endif %}
 
+## No data template
+
+When there is no data available to render in the chart, the `NoDataTemplate` property allows you to display a custom layout within the chart area. This layout can include a message indicating the absence of data, a relevant image, or a button to initiate data loading. You can incorporate styled text, images, or interactive elements to maintain design consistency and enhance user guidance.
+
+Once data becomes available, the chart automatically updates to display the appropriate visualization.
+
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/chart/axis/working-data/no-data-template/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="No-data-template.cs" %}
+{% include code-snippet/chart/axis/working-data/no-data-template/no-data-template.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/chart/axis/working-data/no-data-template/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="No-data-template.cs" %}
+{% include code-snippet/chart/axis/working-data/no-data-template/no-data-template.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
 
diff --git a/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/working-with-data.md b/ej2-asp-core-mvc/chart/EJ2_ASP.NETCORE/working-with-data.md
@@ -342,3 +342,32 @@ Specific color for empty point can be set by `fill` property in `emptyPointSetti
 {% endtabs %}
 {% endif %}
 
+## No data template
+
+When there is no data available to render in the chart, the `NoDataTemplate` property allows you to display a custom layout within the chart area. This layout can include a message indicating the absence of data, a relevant image, or a button to initiate data loading. You can incorporate styled text, images, or interactive elements to maintain design consistency and enhance user guidance.
+
+Once data becomes available, the chart automatically updates to display the appropriate visualization.
+
+
+{% if page.publishingplatform == "aspnet-core" %}
+
+{% tabs %}
+{% highlight cshtml tabtitle="CSHTML" %}
+{% include code-snippet/chart/axis/working-data/no-data-template/tagHelper %}
+{% endhighlight %}
+{% highlight c# tabtitle="No-data-template.cs" %}
+{% include code-snippet/chart/axis/working-data/no-data-template/no-data-template.cs %}
+{% endhighlight %}
+{% endtabs %}
+
+{% elsif page.publishingplatform == "aspnet-mvc" %}
+
+{% tabs %}
+{% highlight razor tabtitle="CSHTML" %}
+{% include code-snippet/chart/axis/working-data/no-data-template/razor %}
+{% endhighlight %}
+{% highlight c# tabtitle="No-data-template.cs" %}
+{% include code-snippet/chart/axis/working-data/no-data-template/no-data-template.cs %}
+{% endhighlight %}
+{% endtabs %}
+{% endif %}
diff --git a/...ode-snippet/chart/accumulation-charts/dynamic-update/no-data-template/no-data-template.cs b/...ode-snippet/chart/accumulation-charts/dynamic-update/no-data-template/no-data-template.cs
@@ -0,0 +1,21 @@
+  public ActionResult Index()
+        {
+            List<PieChartData> chartData = new List<PieChartData>
+            {
+
+                new PieChartData { xValue = "Chrome", yValue = 37 },
+                new PieChartData { xValue = "UC Browser", yValue = 17 },
+                new PieChartData { xValue = "iPhone", yValue = 19 },
+                new PieChartData { xValue = "Others", yValue = 4  },
+                new PieChartData { xValue = "Opera", yValue = 11 },
+                new PieChartData { xValue = "Android", yValue = 12 },
+            };
+            ViewBag.dataSource = chartData;
+            return View();
+        }
+        public class PieChartData
+        {
+            public string xValue;
+            public double yValue;
+        }
+
diff --git a/...asp-core-mvc/code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/razor b/...asp-core-mvc/code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/razor
@@ -0,0 +1,110 @@
+
+@(Html.EJS().AccumulationChart("container").Series(series =>
+            {
+                series.DataSource(ViewBag.dataSource)
+                      .XName("x")
+                      .YName("y")
+                      .Name("Browser")
+                      .Type(Syncfusion.EJ2.Charts.AccumulationType.Pie)
+                      .ExplodeIndex(0).Add();
+            })
+            .EnableSmartLabels(true)
+            .Title("Mobile Browser Statistics").NoDataTemplate("#No-Data-Template").Load("load").Loaded("loaded")
+            .LegendSettings(ls => ls.Visible(false)).Render()
+)
+<style>
+        #noDataTemplateContainer {
+            height: inherit;
+            width: inherit;
+        }
+
+        .load-data-btn {
+            border-radius: 4px;
+            margin-top: 75px;
+            display: inline-flex;
+            align-items: center;
+        }
+
+        .light-bg {
+            background-color: #fafafa;
+            color: #000000;
+        }
+
+        .template-align img {
+            max-width: 150px;
+            /* Adjust size as needed */
+            max-height: 150px;
+            margin-top: 55px;
+        }
+
+        .template-align {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+        }
+
+        #control-container {
+            padding: 0px !important;
+        }
+
+        #noDataButtonOverlay {
+            position: absolute;
+            top: 60%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            z-index: 1000;
+        }
+    </style>
+    @*custom code end*@
+    <div id="noDataButtonOverlay" style="display: none;">
+        @Html.EJS().Button("loadDataButton").Content("Load data").IconCss("e-icons e-refresh").CssClass("load-data-btn e-outline").IsPrimary(false).HtmlAttributes(new Dictionary<string, object> { { "onclick", "loadChartData()" } }).Render()
+    </div>
+
+    <script id='No-Data-Template' type="text/x-template">
+                <div id='noDataTemplateContainer' class="light-bg">
+                    <div class="template-align">
+                        <img src="@Url.Content("~/Content/chart/no-data.png")" alt="No Data" />
+                    </div>
+                    <div class="template-align">
+                        <p style="font-size: 15px; margin: 10px 0 0;"><strong>No data available to display.</strong></p>
+                    </div>
+                </div>
+            </script>
+    <script>
+        var chartData = [
+            { x : "Chrome", y : 37 },
+            { x : "UC Browser", y : 17 },
+            { x : "iPhone", y : 19 },
+            { x : "Others", y : 4  },
+            { x : "Opera", y : 11 },
+            { x : "Android", y : 12 },
+        ];
+        var dataLoaded = false;
+
+        var load = function (args) {
+            args.chart.series[0].dataSource = dataLoaded ? chartData : [];
+        };
+
+        var loaded = function (args) {
+            var buttonOverlay = document.getElementById("noDataButtonOverlay");
+            if (buttonOverlay) {
+                buttonOverlay.style.display = !dataLoaded ? 'block' : 'none';
+            }            
+        };
+
+        var loadChartData = function () {
+            var chart = document.getElementById('container').ej2_instances[0];
+            chart.series[0].dataSource = chartData;
+            chart.series[0].animation.enable = true;
+            dataLoaded = true;
+
+            // Hide the button overlay when data is loaded
+            var buttonOverlay = document.getElementById("noDataButtonOverlay");
+            if (buttonOverlay) {
+                buttonOverlay.style.display = 'none';
+            }
+
+            chart.refresh();
+        };
+    </script>
diff --git a/...core-mvc/code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/tagHelper b/...core-mvc/code-snippet/chart/accumulation-charts/dynamic-update/no-data-template/tagHelper
@@ -0,0 +1,121 @@
+@{
+    List<PieChartData> chartData = new List<PieChartData>
+    {
+        new PieChartData { xValue = "Chrome", yValue = 37 },
+        new PieChartData { xValue = "UC Browser", yValue = 17 },
+        new PieChartData { xValue = "iPhone", yValue = 19 },
+        new PieChartData { xValue = "Others", yValue = 4  },
+        new PieChartData { xValue = "Opera", yValue = 11 },
+        new PieChartData { xValue = "Android", yValue = 12 },
+    };
+
+}
+
+
+<ejs-accumulationchart id="lineContainer" title="Mobile Browser Statistics" load="load" loaded="loaded" noDataTemplate="noDataTemplate">
+    <e-accumulationchart-legendsettings visible="false">
+    </e-accumulationchart-legendsettings>
+    <e-accumulation-series-collection>
+        <e-accumulation-series dataSource="@chartData" xName="xValue" yName="yValue" name="Browser">
+        </e-accumulation-series>
+    </e-accumulation-series-collection>
+</ejs-accumulationchart>
+<div id="noDataButtonOverlay" class="no-data-button-overlay" style="display: none;">
+                <ejs-button id="loadDataButton" content="Load data" iconCss="e-icons e-refresh" onclick="loadChartData()"
+                           cssClass="load-data-btn e-outline" isPrimary="false">
+                </ejs-button>
+            </div>
+
+            <style>
+        .no-data-button-overlay {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            margin-top: 60px; /* Position below the no-data message */
+            z-index: 10;
+        }
+
+        #noDataTemplateContainer {
+            height: inherit;
+            width: inherit;
+        }
+
+        .load-data-btn {
+            margin-top: 55px;
+            border-radius: 4px !important;
+        }
+
+        .load-data-btn .e-btn-icon {
+            margin-right: 8px;
+        }
+
+        .light-bg {
+            background-color: #fafafa;
+            color: #000000;
+        }
+
+        .template-align img {
+            max-width: 150px;
+            /* Adjust size as needed */
+            max-height: 150px;
+            margin-top: 55px;
+        }
+
+        .template-align {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            text-align: center;
+        }
+
+        #control-container {
+            padding: 0px !important;
+        }
+    </style>
+    @*custom code end*@
+    <script src="~/scripts/chart/theme-color.js"></script>
+    <script id='No-Data-Template' type="text/x-template">
+        <div id='noDataTemplateContainer' class="light-bg">
+            <div class="template-align">
+                <img src="./../scripts/chart/images/no-data.png" alt="No Data" />
+            </div>
+            <div class="template-align">
+                <p style="font-size: 15px; margin: 10px 0 10px;"><strong>No data available to display.</strong></p>
+            </div>
+        </div>
+        </script>
+    <script>
+        var chartData = [
+            { x : "Chrome", y : 37 },
+            { x : "UC Browser", y : 17 },
+            { x : "iPhone", y : 19 },
+            { x : "Others", y : 4  },
+            { x : "Opera", y : 11 },
+            { x : "Android", y : 12 },
+        ];
+        var dataLoaded = false;
+        function load(args) {
+            args.chart.noDataTemplate = "#No-Data-Template";
+            args.chart.series[0].dataSource = (dataLoaded ? chartData : []);
+        }
+
+        function loaded(args) {
+            var buttonOverlay = document.getElementById("noDataButtonOverlay");
+            if (buttonOverlay) {
+                buttonOverlay.style.display = !dataLoaded ? 'block' : 'none';
+            }
+        }
+
+        function loadChartData() {
+            var chart = document.getElementById('lineContainer').ej2_instances[0];
+            var buttonOverlay = document.getElementById("noDataButtonOverlay");
+            dataLoaded = true;            
+            chart.series[0].dataSource = chartData;
+            chart.series[0].animation.enable = true;            
+            if (buttonOverlay) {
+                buttonOverlay.style.display = 'none';
+            }
+            chart.refresh();
+        }
+    </script>
diff --git a/ej2-asp-core-mvc/code-snippet/chart/axis/working-data/no-data-template/no-data-template.cs b/ej2-asp-core-mvc/code-snippet/chart/axis/working-data/no-data-template/no-data-template.cs
@@ -0,0 +1,5 @@
+public ActionResult Index()
+        {
+
+            return View();
+        }
diff --git a/ej2-asp-core-mvc/code-snippet/chart/axis/working-data/no-data-template/no-data.png b/ej2-asp-core-mvc/code-snippet/chart/axis/working-data/no-data-template/no-data.png