From b7d933bcd921e70702bb052119de5013449575d3 Mon Sep 17 00:00:00 2001 From: KB Bot Date: Mon, 13 Jan 2025 13:17:09 +0000 Subject: [PATCH 1/5] Added new kb article chart-display-empty --- knowledge-base/chart-display-empty.md | 108 ++++++++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 knowledge-base/chart-display-empty.md diff --git a/knowledge-base/chart-display-empty.md b/knowledge-base/chart-display-empty.md new file mode 100644 index 0000000000..4fad776066 --- /dev/null +++ b/knowledge-base/chart-display-empty.md @@ -0,0 +1,108 @@ +--- +title: How to Display an Empty Chart Without Data +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 Display an Empty Chart Without Data +slug: chark-kb-display-empty-chart +tags: charts, blazor, no data template, empty chart +res_type: kb +ticketid: 1675313 +--- + +## Environment + + + + + + + +
ProductChart for Blazor
+ +## Description + +As of version 7.1.0, 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) by applying custom CSS. The following example demonstrates how to achieve an empty Chart display by hiding the No Data Template overlay through CSS. + + + +````RAZOR +@ButtonContent +
+ + + + + + + + + + +@code { + private const string Add = "Add Data"; + private const string Remove = "Remove Data"; + + private TelerikChart ChartRef { get; set; } + private List ChartData { get; set; } = new List(); + 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(); + ButtonContent = Add; + } + ChartRef.Refresh(); // Refresh the Chart + } + + public class ChartSeriesData + { + public int ProductSales { get; set; } + public int Year { get; set; } + + public static List GenerateData() + { + List data = new List + { + 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) +- [Customizing the Appearance of Blazor Charts](slug://themes-override) From 00c90e4d42bb3cc233eabefe875ae5ed188f4f58 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 13 Jan 2025 15:36:03 +0200 Subject: [PATCH 2/5] chore: kb polish --- knowledge-base/chart-display-empty.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/chart-display-empty.md b/knowledge-base/chart-display-empty.md index 4fad776066..f50adaf442 100644 --- a/knowledge-base/chart-display-empty.md +++ b/knowledge-base/chart-display-empty.md @@ -105,4 +105,4 @@ By applying the `.k-chart-overlay { display: none; }` style, the No Data templat ## See Also - [Blazor Charts Overview](slug://components/chart/overview) -- [Customizing the Appearance of Blazor Charts](slug://themes-override) +- [Override Theme Styles](slug://themes-override) From bdf6567494bf8e9c5181365748992ec0dee3a601 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 13 Jan 2025 15:49:19 +0200 Subject: [PATCH 3/5] chore: update kb title and add link in docs --- components/chart/templates.md | 1 + knowledge-base/chart-display-empty.md | 6 +++--- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/components/chart/templates.md b/components/chart/templates.md index b59caee53f..d9118f4df1 100644 --- a/components/chart/templates.md +++ b/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) diff --git a/knowledge-base/chart-display-empty.md b/knowledge-base/chart-display-empty.md index f50adaf442..983c66e1e8 100644 --- a/knowledge-base/chart-display-empty.md +++ b/knowledge-base/chart-display-empty.md @@ -1,9 +1,9 @@ --- -title: How to Display an Empty Chart Without Data +title: How to Show Empty Chart Instead 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 Display an Empty Chart Without Data -slug: chark-kb-display-empty-chart +page_title: How to Show Empty Chart Instead the Default No Data Template +slug: chart-kb-display-empty-chart tags: charts, blazor, no data template, empty chart res_type: kb ticketid: 1675313 From 95615f6fd5c857e9304d64a666d315d92cb80735 Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Thu, 16 Jan 2025 16:03:42 +0200 Subject: [PATCH 4/5] apply suggested changes and polish example --- knowledge-base/chart-display-empty.md | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/knowledge-base/chart-display-empty.md b/knowledge-base/chart-display-empty.md index 983c66e1e8..371aceffdb 100644 --- a/knowledge-base/chart-display-empty.md +++ b/knowledge-base/chart-display-empty.md @@ -1,8 +1,8 @@ --- -title: How to Show Empty Chart Instead the Default No Data Template +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 the Default No Data Template +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 @@ -21,7 +21,7 @@ ticketid: 1675313 ## Description -As of version 7.1.0, 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: +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? @@ -29,7 +29,7 @@ As of version 7.1.0, the [No Data Template](slug://chart-no-data-template) was i ## Solution -To display an empty Chart when there is no data, [override the default theme styles](slug://themes-override) by applying custom CSS. The following example demonstrates how to achieve an empty Chart display by hiding the No Data Template overlay through CSS. +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. @@ -37,7 +37,6 @@ To display an empty Chart when there is no data, [override the default theme sty @ButtonContent
- ChartData { get; set; } = new List(); + private List ChartData { get; set; } = new (); private string ButtonContent { get; set; } = Add; private void UpdateData() From c21def8eec3bfbc79b66e167dfcdd253bf1bef0b Mon Sep 17 00:00:00 2001 From: Tsvetomir Hristov <106250052+Tsvetomir-Hr@users.noreply.github.com> Date: Mon, 20 Jan 2025 09:46:21 +0200 Subject: [PATCH 5/5] chore: polish kb article --- knowledge-base/chart-display-empty.md | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/knowledge-base/chart-display-empty.md b/knowledge-base/chart-display-empty.md index 371aceffdb..712c476832 100644 --- a/knowledge-base/chart-display-empty.md +++ b/knowledge-base/chart-display-empty.md @@ -21,18 +21,12 @@ ticketid: 1675313 ## 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? +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. ## 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 @ButtonContent
@@ -99,8 +93,6 @@ To display an empty Chart when there is no data, [override the default theme sty } ```` -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)