Added new kb article chart-display-empty

components/chart/templates.md

@@ -85,4 +85,5 @@ Starting in **version 7.0.0**, when all Chart series have no data to show, a def
 ## See Also
 
  * [Live Demo: Chart - No Data Template](https://demos.telerik.com/blazor-ui/chart/no-data-template)
+ * [How to Show Empty Chart Instead the Default No Data Template](slug:// chart-kb-display-empty-chart)
 

knowledge-base/chart-display-empty.md

@@ -0,0 +1,107 @@
+---
+title: How to Show Empty Chart Instead of the Default No Data Template
+description: Learn how to show an empty Chart component when there is no data, instead of displaying the default No Data template.
+type: how-to
+page_title: How to Show Empty Chart Instead of the Default No Data Template
+slug: chart-kb-display-empty-chart
+tags: charts, blazor, no data template, empty chart
+res_type: kb
+ticketid: 1675313
+---
+
+## Environment
+<table>
+	<tbody>
+		<tr>
+			<td>Product</td>
+			<td>Chart for Blazor</td>
+		</tr>
+	</tbody>
+</table>
+
+## Description
+
+As of version 7.1.0 of Telerik UI for Blazor, the [No Data Template](slug://chart-no-data-template) was introduced for Charts in Blazor. In some scenarios, displaying an empty Chart, rather than the No Data template, is preferred when there is no data. This knowledge base article also answers the following questions:
+
+- How can I hide the No Data Template in Blazor Charts?
+- Is it possible to display an empty Chart in Blazor when there's no data?
+- Can I override the No Data Template in Blazor Charts?
+
+## Solution
+
+To display an empty Chart when there is no data, [override the default theme styles](slug://themes-override) with custom CSS. The following example demonstrates how to achieve an empty Chart display by hiding the No Data Template overlay through CSS.
+
+
+
+````RAZOR
+<TelerikButton OnClick="@UpdateData">@ButtonContent</TelerikButton>
+<br />
+<TelerikChart @ref="ChartRef" Width="800px" Height="400px">
+    <ChartSeriesItems>
+        <ChartSeries Type="ChartSeriesType.Column"
+                     Data="@ChartData"
+                     Name="Product Sales"
+                     Field="@nameof(ChartSeriesData.ProductSales)"
+                     CategoryField="@nameof(ChartSeriesData.Year)">
+        </ChartSeries>
+    </ChartSeriesItems>
+</TelerikChart>
+
+<style>
+    .k-chart-overlay {
+        display: none;
+    }
+</style>
+
+@code {
+    private const string Add = "Add Data";
+    private const string Remove = "Remove Data";
+
+    private TelerikChart ChartRef { get; set; }
+    private List<ChartSeriesData> ChartData { get; set; } = new ();
+    private string ButtonContent { get; set; } = Add;
+
+    private void UpdateData()
+    {
+        if (ChartData == null || ChartData?.Count() == 0)
+        {
+            ChartData = ChartSeriesData.GenerateData();
+            ButtonContent = Remove;
+        }
+        else
+        {
+            // Clear the data
+            ChartData = new List<ChartSeriesData>();
+            ButtonContent = Add;
+        }
+        ChartRef.Refresh(); // Refresh the Chart
+    }
+
+    public class ChartSeriesData
+    {
+        public int ProductSales { get; set; }
+        public int Year { get; set; }
+
+        public static List<ChartSeriesData> GenerateData()
+        {
+            List<ChartSeriesData> data = new List<ChartSeriesData>
+            {
+                new ChartSeriesData { ProductSales = 120, Year = 2020 },
+                new ChartSeriesData { ProductSales = 180, Year = 2021 },
+                new ChartSeriesData { ProductSales = 150, Year = 2022 },
+                new ChartSeriesData { ProductSales = 210, Year = 2023 },
+                new ChartSeriesData { ProductSales = 90,  Year = 2024 }
+            };
+
+            return data;
+        }
+    }
+}
+````
+
+By applying the `.k-chart-overlay { display: none; }` style, the No Data template overlay is hidden, allowing the Chart to appear empty when there is no data.
+
+## See Also
+
+- [Blazor Charts Overview](slug://components/chart/overview)
+- [Override Theme Styles](slug://themes-override)