From e38f2f1a728b5f65d4fc2bc158885919507b0bd8 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Fri, 7 Nov 2025 18:48:01 +0530 Subject: [PATCH 1/5] Update preview sample output of Blazor components UG documentation --- blazor/3D-chart/chart-types/bar.md | 20 +++++-------------- blazor/3D-chart/chart-types/column.md | 20 +++++-------------- blazor/3D-chart/chart-types/stack-bar.md | 12 +++-------- blazor/3D-chart/chart-types/stack-column.md | 12 +++-------- blazor/3D-chart/chart-types/stacked-bar.md | 16 ++++----------- blazor/3D-chart/chart-types/stacked-column.md | 16 ++++----------- blazor/accordion/animations.md | 5 +---- blazor/accordion/data-binding.md | 4 +--- blazor/accordion/expand-mode.md | 15 +++----------- .../accordion/getting-started-with-web-app.md | 2 +- blazor/accordion/getting-started.md | 2 +- .../how-to/add-icon-to-accordion-header.md | 4 +--- .../accordion/how-to/add-nested-accordion.md | 4 +--- .../how-to/add-remove-accordion-items.md | 5 +---- .../how-to/enable-disable-accordion-item.md | 4 +--- ...integrate-treeview-inside-the-accordion.md | 4 +--- .../prevent-expand-collapse-accordion-item.md | 4 +--- .../how-to/show-hide-accordion-item.md | 4 +--- blazor/accordion/style.md | 5 +---- 19 files changed, 39 insertions(+), 119 deletions(-) diff --git a/blazor/3D-chart/chart-types/bar.md b/blazor/3D-chart/chart-types/bar.md index 7ead2f4e6a..3f0b599997 100644 --- a/blazor/3D-chart/chart-types/bar.md +++ b/blazor/3D-chart/chart-types/bar.md @@ -48,9 +48,7 @@ To render a bar series, set series `Type` as `Bar`. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhJXxsKslDavsMW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Bar 3D Chart](../images/chart-types-images/blazor-bar-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhJXxsKslDavsMW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart](../images/chart-types-images/blazor-bar-chart.png)" %} ## Bar space and width @@ -92,9 +90,7 @@ The `ColumnSpacing` and `ColumnWidth` properties are used to customize the space } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhTXHMgilipfRPo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Bar 3D Chart with Space and Width](../images/chart-types-images/blazor-bar-chart-space-and-width.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhTXHMgilipfRPo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart with Space and Width](../images/chart-types-images/blazor-bar-chart-space-and-width.png)" %} ## Grouped bar @@ -135,9 +131,7 @@ The data points can be grouped in the bar type charts by using the `GroupName` p } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLfZRMUMlsmhOBI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Grouping in Blazor Grouped Bar 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-bar.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLfZRMUMlsmhOBI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Grouped Bar 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-bar.png)" %} ## Cylindrical column chart @@ -176,9 +170,7 @@ To render a cylindrical column chart, set the `ColumnFacet` property to `Cylinde } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBfDdMAilBDiXzS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-bar-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBfDdMAilBDiXzS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-bar-chart.png)" %} ## Series customization @@ -222,6 +214,4 @@ The following properties can be used to customize the `Bar` series. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBTZdMKWvrLOzmq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-bar-chart-custom-series.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBTZdMKWvrLOzmq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-bar-chart-custom-series.png)" %} diff --git a/blazor/3D-chart/chart-types/column.md b/blazor/3D-chart/chart-types/column.md index 7655c3ff93..8af2227daf 100644 --- a/blazor/3D-chart/chart-types/column.md +++ b/blazor/3D-chart/chart-types/column.md @@ -49,9 +49,7 @@ To render a `Column Chart`, use series `Type` as `Column`. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpNRCqCFqsFuka?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart](../images/chart-types-images/blazor-column-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpNRCqCFqsFuka?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart](../images/chart-types-images/blazor-column-chart.png)" %} ## Column space and width @@ -93,9 +91,7 @@ The `ColumnSpacing` and `ColumnWidth` properties are used to customize the space } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhTZxMgMPqSWDMz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Space and Width](../images/chart-types-images/blazor-column-chart-space-and-width.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhTZxMgMPqSWDMz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Space and Width](../images/chart-types-images/blazor-column-chart-space-and-width.png) %} ## Grouped column @@ -136,9 +132,7 @@ The data points can be grouped in the column type charts by using the `GroupName } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthTjHsUWvUFSkhR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Grouping in Blazor Grouped Column 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-column.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthTjHsUWvUFSkhR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Grouped Column 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-column.png)" %} ## Cylindrical column chart @@ -176,9 +170,7 @@ To render a cylindrical column chart, set the `ColumnFacet` property to `Cylinde } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBJNxiAslpiKcOw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-column-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBJNxiAslpiKcOw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-column-chart.png)" %} ## Series customization @@ -222,6 +214,4 @@ The following properties can be used to customize the `Column` series. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthztRMgWFpfyYWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Custom Series](../images/chart-types-images/blazor-column-chart-custom-series.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthztRMgWFpfyYWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Series](../images/chart-types-images/blazor-column-chart-custom-series.png) %} diff --git a/blazor/3D-chart/chart-types/stack-bar.md b/blazor/3D-chart/chart-types/stack-bar.md index dfea264acd..a75838e6ea 100644 --- a/blazor/3D-chart/chart-types/stack-bar.md +++ b/blazor/3D-chart/chart-types/stack-bar.md @@ -50,9 +50,7 @@ To render a `100% Stacked Bar Chart` series, use series `Type` as `StackingBar10 } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTtxCUBNtIGBRY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Bar100 3D Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTtxCUBNtIGBRY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 3D Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.png)" %} ## 100% Cylindrical Stacked Bar chart @@ -95,9 +93,7 @@ To render a 100% cylindrical Stacked Bar chart, set the `ColumnFacet` property } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBTtdiqrXMpthaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBTtdiqrXMpthaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.png)" %} ## Series customization @@ -143,6 +139,4 @@ The following properties can be used to customize the `100% Stacked Bar` series. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrJNnsqhNsRoHio?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Bar100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrJNnsqhNsRoHio?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.png)" %} diff --git a/blazor/3D-chart/chart-types/stack-column.md b/blazor/3D-chart/chart-types/stack-column.md index 0f2d546f8d..997e6e7ebf 100644 --- a/blazor/3D-chart/chart-types/stack-column.md +++ b/blazor/3D-chart/chart-types/stack-column.md @@ -48,9 +48,7 @@ To render a `100% Stacked Column Chart` series, use series `Type` as `StackingCo } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLfjRsqLXBJrLXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Column100 3D Chart](../images/chart-types-images/blazor-stacked-column-100-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLfjRsqLXBJrLXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 3D Chart](../images/chart-types-images/blazor-stacked-column-100-chart.png)" %} ## 100% Cylindrical stacked column chart @@ -93,9 +91,7 @@ To render a 100% cylindrical stacked column chart, set the `ColumnFacet` propert } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzjnCAhNBGdkGQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzjnCAhNBGdkGQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.png)" %} ## Series customization @@ -141,6 +137,4 @@ The following properties can be used to customize the `100% Stacked Column` seri } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptHsKBjUZKwWE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Column100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-column-100-chart-custom-series.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptHsKBjUZKwWE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-column-100-chart-custom-series.png)" %} diff --git a/blazor/3D-chart/chart-types/stacked-bar.md b/blazor/3D-chart/chart-types/stacked-bar.md index e9743dc5f4..46e01c6a0a 100644 --- a/blazor/3D-chart/chart-types/stacked-bar.md +++ b/blazor/3D-chart/chart-types/stacked-bar.md @@ -50,9 +50,7 @@ To render a stacked bar series, use series `Type` as `StackingBar`. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrfNHMgVDXktKyD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Bar 3D Chart](../images/chart-types-images/blazor-stacked-Bar-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrfNHMgVDXktKyD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar 3D Chart](../images/chart-types-images/blazor-stacked-Bar-chart.png)" %} ## Stacking group @@ -95,9 +93,7 @@ To group the stacked bar, the `StackingGroup` property can be used. The columns } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVpZnsgsuHovTcn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Grouping in Blazor Stacked Bar 3D Chart](../images/chart-types-images/blazor-stacked-bar-chart-with-grouping.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVpZnsgsuHovTcn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Stacked Bar 3D Chart](../images/chart-types-images/blazor-stacked-bar-chart-with-grouping.png)" %} ## Cylindrical column chart @@ -140,9 +136,7 @@ To render a cylindrical stacked bar chart, set the `ColumnFacet` property to `Cy } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLzjRCgiamCLrWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLzjRCgiamCLrWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.png)" %} ## Series customization @@ -188,6 +182,4 @@ The following properties can be used to customize the `Stacked Bar` series. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpDnMqCYcOWHOq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-chart-custom-series.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpDnMqCYcOWHOq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-chart-custom-series.png)" %} diff --git a/blazor/3D-chart/chart-types/stacked-column.md b/blazor/3D-chart/chart-types/stacked-column.md index 8fe5f49bf2..13f2d85a29 100644 --- a/blazor/3D-chart/chart-types/stacked-column.md +++ b/blazor/3D-chart/chart-types/stacked-column.md @@ -50,9 +50,7 @@ To render a stacked column series, use series `Type` as `StackingColumn`. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBftRMAVjJALNDA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Column 3D Chart](../images/chart-types-images/blazor-stacked-column-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBftRMAVjJALNDA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column 3D Chart](../images/chart-types-images/blazor-stacked-column-chart.png)" %} ## Stacking group @@ -95,9 +93,7 @@ To group the stacked column, the `StackingGroup` property can be used. The colum } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhpZnCUhDzupZKQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Grouping in Blazor Stacked Column 3D Chart](../images/chart-types-images/blazor-stacked-colum-chart-with-grouping.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhpZnCUhDzupZKQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Stacked Column 3D Chart](../images/chart-types-images/blazor-stacked-colum-chart-with-grouping.png)" %} ## Cylindrical stacked column chart @@ -140,9 +136,7 @@ To render a cylindrical stacked column chart, set the `ColumnFacet` property to } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhTDnCqVjoUjFfB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-column-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhTDnCqVjoUjFfB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-column-chart.png)" %} ## Series customization @@ -188,6 +182,4 @@ The following properties can be used to customize the `Stacked Column` series. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVJXHMqLXoxCjlL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Column 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-column-chart-custom-series.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVJXHMqLXoxCjlL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-column-chart-custom-series.png)" %} diff --git a/blazor/accordion/animations.md b/blazor/accordion/animations.md index 2da03ec21e..4ece2a4f96 100644 --- a/blazor/accordion/animations.md +++ b/blazor/accordion/animations.md @@ -91,7 +91,4 @@ The following example demonstrates various animation types that can be applied t } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhqWBsqAJzMiZJi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Customize Accordion expand or collapse animation behavior](./images/blazor-accordion-animation.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhqWBsqAJzMiZJi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customize Accordion expand or collapse animation behavior](./images/blazor-accordion-animation.gif)" %} diff --git a/blazor/accordion/data-binding.md b/blazor/accordion/data-binding.md index 81a802fab9..dafed21659 100644 --- a/blazor/accordion/data-binding.md +++ b/blazor/accordion/data-binding.md @@ -74,6 +74,4 @@ The following example demonstrates how to initialize accordion items using `temp ``` -![Blazor Accordion Data Binding](./images/blazor-accordion-data-binding.png) - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVUMrigKgalNSWq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVUMrigKgalNSWq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Data Binding](./images/blazor-accordion-data-binding.png)" %} \ No newline at end of file diff --git a/blazor/accordion/expand-mode.md b/blazor/accordion/expand-mode.md index ee29e9eb78..a59bb95059 100644 --- a/blazor/accordion/expand-mode.md +++ b/blazor/accordion/expand-mode.md @@ -31,10 +31,7 @@ The property enables to expand only one Accordion item at a time. If you expand ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUWhiqKztxpXDo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Blazor Accordion Component with Single Expand Mode](./images/blazor-accordion-single-expand-mode.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUWhiqKztxpXDo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Single Expand Mode](./images/blazor-accordion-single-expand-mode.png)" %} ## Multiple @@ -57,10 +54,7 @@ The default [ExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVgsVsqApsKInXs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Blazor Accordion Component with Multiple Expand Mode](./images/blazor-accordion-multiple-expand-mode.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVgsVsqApsKInXs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Multiple Expand Mode](./images/blazor-accordion-multiple-expand-mode.png)" %} ## Expanding the items @@ -127,7 +121,4 @@ By default, accordion items were in collapsed state on initial load. To expand a } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUWVCKqpKMrZBu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Blazor Accordion Component with Expanding Items](./images/blazor-accordion-expand-items.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUWVCKqpKMrZBu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Expanding Items](./images/blazor-accordion-expand-items.png)" %} \ No newline at end of file diff --git a/blazor/accordion/getting-started-with-web-app.md b/blazor/accordion/getting-started-with-web-app.md index 16d059e703..55a2b35437 100644 --- a/blazor/accordion/getting-started-with-web-app.md +++ b/blazor/accordion/getting-started-with-web-app.md @@ -243,7 +243,7 @@ The following code explains how to initialize Blazor Accordion using header and {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBzXirSVLuZFLkH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVoisjQKaKacVAK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.png)" %} ## See also diff --git a/blazor/accordion/getting-started.md b/blazor/accordion/getting-started.md index b06c35cd89..a8d65b9f06 100644 --- a/blazor/accordion/getting-started.md +++ b/blazor/accordion/getting-started.md @@ -172,7 +172,7 @@ The following code explains how to initialize Blazor Accordion using header and {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBzXirSVLuZFLkH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVoisjQKaKacVAK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion with header and content Template](images/blazor-accordion-header-template.png)" %} ## See also diff --git a/blazor/accordion/how-to/add-icon-to-accordion-header.md b/blazor/accordion/how-to/add-icon-to-accordion-header.md index 50cd3dade6..ebe41f66f9 100644 --- a/blazor/accordion/how-to/add-icon-to-accordion-header.md +++ b/blazor/accordion/how-to/add-icon-to-accordion-header.md @@ -195,6 +195,4 @@ You can add custom icons to the Accordion header by using the [IconCss](https:// ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLKihigqyvhnutf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Accordion Component with Header Icon](../images/blazor-accordion-header-icon.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLKihigqyvhnutf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Header Icon](../images/blazor-accordion-header-icon.png)" %} diff --git a/blazor/accordion/how-to/add-nested-accordion.md b/blazor/accordion/how-to/add-nested-accordion.md index 1175b6da9b..3e3af3697b 100644 --- a/blazor/accordion/how-to/add-nested-accordion.md +++ b/blazor/accordion/how-to/add-nested-accordion.md @@ -60,6 +60,4 @@ The Accordion component supports to render the nested level of Accordion by usin ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUWLWUAyOkHSnV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Accordion Component with Nested Item](../images/blazor-accordion-with-nested-item.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUWLWUAyOkHSnV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accordion Component with Nested Item](../images/blazor-accordion-with-nested-item.png)" %} diff --git a/blazor/accordion/how-to/add-remove-accordion-items.md b/blazor/accordion/how-to/add-remove-accordion-items.md index 58eb8329cf..8c07e7f0f7 100644 --- a/blazor/accordion/how-to/add-remove-accordion-items.md +++ b/blazor/accordion/how-to/add-remove-accordion-items.md @@ -85,7 +85,4 @@ In the following example, the Accordion initially contains three accordion items } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLUWBMqqTnOpwoL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Adding or Removing items in Blazor Accordion](../images/blazor-accordion-add-remove-item.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLUWBMqqTnOpwoL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding or Removing items in Blazor Accordion](../images/blazor-accordion-add-remove-item.gif)" %} diff --git a/blazor/accordion/how-to/enable-disable-accordion-item.md b/blazor/accordion/how-to/enable-disable-accordion-item.md index a218fd1ec7..ddc5cb4498 100644 --- a/blazor/accordion/how-to/enable-disable-accordion-item.md +++ b/blazor/accordion/how-to/enable-disable-accordion-item.md @@ -37,6 +37,4 @@ In the following example, the first accordion item is enabled or disabled dynami } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgiLiUUImofYGa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Enabling or Disabling Item in Blazor Accordion](../images/blazor-accordion-enable-disable-item.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgiLiUUImofYGa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling or Disabling Item in Blazor Accordion](../images/blazor-accordion-enable-disable-item.gif)" %} diff --git a/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md b/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md index 66e390fd7b..26dc117b64 100644 --- a/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md +++ b/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md @@ -181,6 +181,4 @@ The following example shows how to render a TreeView within the Accordion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LthqWrMKgwYXnecX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Treeview Integration in Blazor Accordion](../images/blazor-accordion-treeview-integration.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthqWrMKgwYXnecX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Treeview Integration in Blazor Accordion](../images/blazor-accordion-treeview-integration.png)" %} diff --git a/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md b/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md index 93d511e7aa..58cfd01755 100644 --- a/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md +++ b/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md @@ -117,6 +117,4 @@ The following code example demonstrates how to prevent expand and collapse actio } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAChWqgyaWwIZu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Expanding or Collapsing Item in Blazor Accordion](../images/blazor-accordion-prevent-expand-collapse.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAChWqgyaWwIZu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Expanding or Collapsing Item in Blazor Accordion](../images/blazor-accordion-prevent-expand-collapse.gif)" %} diff --git a/blazor/accordion/how-to/show-hide-accordion-item.md b/blazor/accordion/how-to/show-hide-accordion-item.md index 871ce641ea..8f41419f60 100644 --- a/blazor/accordion/how-to/show-hide-accordion-item.md +++ b/blazor/accordion/how-to/show-hide-accordion-item.md @@ -138,6 +138,4 @@ In the following example, the specified accordion item will toggle between showi } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBqMBMAATlJlwpr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Hiding or showing items in Blazor Accordion](../images/blazor-accordion-show-hide-item.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBqMBMAATlJlwpr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding or showing items in Blazor Accordion](../images/blazor-accordion-show-hide-item.gif)" %} diff --git a/blazor/accordion/style.md b/blazor/accordion/style.md index ba51a02a7b..934759f0ea 100644 --- a/blazor/accordion/style.md +++ b/blazor/accordion/style.md @@ -144,7 +144,4 @@ You can customize each accordion item header by setting [AccordionItem.CssClass] ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqWBsAATytYBFq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Accordion Item Header Appearance Customization](./images/blazor-accordion-item-cssclass-style.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqWBsAATytYBFq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Accordion Item Header Appearance Customization](./images/blazor-accordion-item-cssclass-style.png)" %} From 4bec6b70e2873248d26ab57211502c34a68edfd0 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Mon, 10 Nov 2025 18:54:07 +0530 Subject: [PATCH 2/5] Update preview sample output of Blazor components UG documentation --- blazor/3D-chart/appearance.md | 40 ++++--------- blazor/3D-chart/axis-customization.md | 28 +++------- blazor/3D-chart/axis-labels.md | 16 ++---- blazor/3D-chart/category-axis.md | 16 ++---- blazor/3D-chart/chart-dimensions.md | 12 +--- blazor/3D-chart/data-labels.md | 32 +++-------- blazor/3D-chart/date-time-axis.md | 32 +++-------- blazor/3D-chart/legend.md | 56 +++++-------------- blazor/3D-chart/logarithmic-axis.md | 16 ++---- blazor/3D-chart/multiple-panes.md | 16 ++---- blazor/3D-chart/numeric-axis.md | 40 ++++--------- blazor/3D-chart/selection.md | 24 ++------ blazor/3D-chart/tool-tip.md | 20 ++----- blazor/3D-chart/working-with-data.md | 20 ++----- blazor/accumulation-chart/annotation.md | 9 +-- blazor/accumulation-chart/center-label.md | 9 +-- .../accumulation-chart/chart-types/funnel.md | 21 +++---- .../chart-types/pie-doughnut.md | 29 +++------- .../accumulation-chart/chart-types/pyramid.md | 18 ++---- blazor/accumulation-chart/data-label.md | 24 +++----- blazor/accumulation-chart/empty-points.md | 9 +-- blazor/accumulation-chart/grouping.md | 10 +--- blazor/accumulation-chart/legend.md | 27 +++------ .../accumulation-chart/title-and-sub-title.md | 18 ++---- blazor/accumulation-chart/tool-tip.md | 15 ++--- blazor/appbar/design.md | 20 ++----- blazor/appbar/position.md | 9 +-- blazor/appbar/size-and-color.md | 27 +++------ blazor/appbar/style-and-appearance.md | 3 +- blazor/autocomplete/data-source.md | 31 +++------- blazor/autocomplete/filtering.md | 20 ++----- blazor/autocomplete/grouping.md | 4 +- blazor/autocomplete/highlight-search.md | 8 +-- blazor/autocomplete/style.md | 48 ++++------------ blazor/autocomplete/templates.md | 20 ++----- blazor/autocomplete/virtualization.md | 4 +- 36 files changed, 204 insertions(+), 547 deletions(-) diff --git a/blazor/3D-chart/appearance.md b/blazor/3D-chart/appearance.md index 7144e8c186..c72a9dfb8e 100644 --- a/blazor/3D-chart/appearance.md +++ b/blazor/3D-chart/appearance.md @@ -56,9 +56,7 @@ The default color of series or points can be customized by providing a custom co } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVfXxCBqRuWmxlT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Custom Color Palette](images/appearance/blazor-column-chart-custom-color-palette.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVfXxCBqRuWmxlT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Color Palette](images/appearance/blazor-column-chart-custom-color-palette.png)" %} @@ -100,9 +98,7 @@ The color for the points can be bound from the `DataSource` for the series by ut } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrfDxMrKwXpXlgX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with PointColorMapping](images/appearance/blazor-column-chart-with-point-color.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrfDxMrKwXpXlgX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with PointColorMapping](images/appearance/blazor-column-chart-with-point-color.png)" %} ## Point level customization @@ -164,9 +160,7 @@ The data label and fill color of each data point can be customized using the `Po } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzXdsrUGMqoJpK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Point level customization](images/appearance/blazor-column-chart-point-level-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzXdsrUGMqoJpK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Point level customization](images/appearance/blazor-column-chart-point-level-customization.png)" %} ## Chart area customization @@ -212,9 +206,7 @@ The background color and border of the 3D chart can be customized using the `Bac } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptRCLgGMkWnGY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Custom Background and Border](images/appearance/blazor-column-chart-custom-background-and-border.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptRCLgGMkWnGY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Background and Border](images/appearance/blazor-column-chart-custom-background-and-border.png)" %} **Chart margin** @@ -257,9 +249,7 @@ The 3D chart's margin can be set from its container using the `Chart3DMargin` pr } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLftnshAmBJsYEA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Custom Margin](images/appearance/blazor-column-chart-custom-margin.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLftnshAmBJsYEA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Margin](images/appearance/blazor-column-chart-custom-margin.png)" %} ## Animation @@ -387,9 +377,7 @@ The 3D chart can be given a title by using `Title` property, to show the informa } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrJZRihUwKPsGvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrJZRihUwKPsGvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title.png)" %} ### Title position @@ -431,9 +419,7 @@ By using the `Position`property in `TitleStyle`, the `Title` can be positioned } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDnsBKczVydKx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDnsBKczVydKx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title-position.png)" %} The custom option is used to position the title anywhere in the 3D chart using `X` and `Y` coordinates. @@ -473,9 +459,7 @@ The custom option is used to position the title anywhere in the 3D chart using ` } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBftnWBgwTPesmR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Custom Title](images/appearance/blazor-column-chart-title-custom.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBftnWBgwTPesmR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Title](images/appearance/blazor-column-chart-title-custom.png)" %} ## Title alignment @@ -517,9 +501,7 @@ The title can be aligned to the near, far, or center of the 3D chart by using th } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVzXdiBKwdsnLib?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart Title with Text Alignment](images/appearance/blazor-column-chart-title-alignment.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVzXdiBKwdsnLib?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Title with Text Alignment](images/appearance/blazor-column-chart-title-alignment.png)" %} ### Title customization @@ -562,9 +544,7 @@ The `TitleStyle` property of the 3D chart provides options to customize the titl } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzDHirqQwNwVvM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart Title with Customization](images/appearance/blazor-column-chart-title-with-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzDHirqQwNwVvM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Title with Customization](images/appearance/blazor-column-chart-title-with-customization.png)" %} N> The chart components do not use any CSS style for customization; chart elements like axis labels, datalabel, background, series palette, legend text, and tooltip text can be customized by using the `Chart3DAxisLabelStyle`, `Chart3DDataLabelFont`, `BackGround`, `Palettes`, `Chart3DLegendTextStyle`, and `Chart3DTooltipTextStyle`, respectively. diff --git a/blazor/3D-chart/axis-customization.md b/blazor/3D-chart/axis-customization.md index d9a00a3934..6f413fbfbb 100644 --- a/blazor/3D-chart/axis-customization.md +++ b/blazor/3D-chart/axis-customization.md @@ -50,9 +50,7 @@ The title for the axis can be added by using the `Title` property. It helps to p } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhJDdChpXSmCYrG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhJDdChpXSmCYrG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.png)" %} ## Title rotation @@ -94,9 +92,7 @@ The title can be rotated from 0 to 360 degree by using the `TitleRotationAngle` } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJXdWBfZniAVZI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Axis Title Rotation](images/axis-customization/blazor-column-chart-axis-title-rotation.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJXdWBfZniAVZI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Axis Title Rotation](images/axis-customization/blazor-column-chart-axis-title-rotation.png)" %} ## Tick lines customization @@ -137,9 +133,7 @@ The width, color, and height of the minor and major tick lines can be custo } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJtxChftnfOPTu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJtxChftnfOPTu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.png)" %} ## Grid lines customization @@ -180,9 +174,7 @@ The width and color of the minor and major grid lines can be customized by usin } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhzjxWLJXbLjntW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhzjxWLJXbLjntW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.png)" %} ## Multiple Axis @@ -226,9 +218,7 @@ In addition to primary X and Y axis, n number of axis can be added to the chart. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDxirztleaKrC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor 3D Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDxirztleaKrC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.png)" %} ## Inversed Axis @@ -269,9 +259,7 @@ When an axis is inversed, highest value of the axis comes closer to origin and v } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrJjxWLpXlYDizR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrJjxWLpXlYDizR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.png)" %} ## Opposed position @@ -311,7 +299,5 @@ To place an axis opposite from its original position, set the `OpposedPosition` } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBzZHWhJZuVFHfl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBzZHWhJZuVFHfl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.png)" %} diff --git a/blazor/3D-chart/axis-labels.md b/blazor/3D-chart/axis-labels.md index 85cac9693d..6a6995722c 100644 --- a/blazor/3D-chart/axis-labels.md +++ b/blazor/3D-chart/axis-labels.md @@ -55,9 +55,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTDnMVpitELVMq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Hiding Smart Axis Label in Blazor Column 3D Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTDnMVpitELVMq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Smart Axis Label in Blazor Column 3D Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.png)" %} **Case 2:** When setting `LabelIntersectAction` as **Rotate45**. @@ -98,9 +96,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLptnWBJMsfXNjH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLptnWBJMsfXNjH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png)" %} **Case 3:** When setting `LabelIntersectAction` as **Rotate90**. @@ -141,9 +137,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBJjnsLJMrjzDrD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBJjnsLJMrjzDrD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png)" %} ## Edge label placement @@ -185,9 +179,7 @@ use the `EdgeLabelPlacement` property in axis, which moves the label inside t } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpDnsLTsLcphWe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpDnsLTsLcphWe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.png)" %} ## Maximum labels diff --git a/blazor/3D-chart/category-axis.md b/blazor/3D-chart/category-axis.md index e34c386516..9bc25be6e5 100644 --- a/blazor/3D-chart/category-axis.md +++ b/blazor/3D-chart/category-axis.md @@ -46,9 +46,7 @@ The category axis is the horizontal axis of a 3D chart that shows text values ra } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTZdMLTMTKyfTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Default Axis](images/category-axis/blazor-chart-default-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTZdMLTMTKyfTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Default Axis](images/category-axis/blazor-chart-default-axis.png)" %} ## Labels placement @@ -89,9 +87,7 @@ By default, category axis labels are placed between ticks in an axis. It can als } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJjHsLTWRHhqRc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Labels Position in Blazor 3D Chart](images/category-axis/blazor-diagram-label-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJjHsLTWRHhqRc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Labels Position in Blazor 3D Chart](images/category-axis/blazor-diagram-label-position.png)" %} ## Range @@ -132,9 +128,7 @@ The range of the category axis can be customized using `Minimum`, `Maximum`, and } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNxMLficgvSbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Column 3D Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNxMLficgvSbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.png)" %} ## Indexed category axis @@ -182,6 +176,4 @@ The category axis can also be rendered based on the index values of the data sou } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBTjniVJWQPizAl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor 3D Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBTjniVJWQPizAl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.png)" %} diff --git a/blazor/3D-chart/chart-dimensions.md b/blazor/3D-chart/chart-dimensions.md index ca89172535..185383d064 100644 --- a/blazor/3D-chart/chart-dimensions.md +++ b/blazor/3D-chart/chart-dimensions.md @@ -49,9 +49,7 @@ The 3D chart can be rendered to its container size and it can be set via inline } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrJtdsrpsPezXYL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor 3D Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrJtdsrpsPezXYL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.png)" %} ## Size for chart @@ -95,9 +93,7 @@ The size of the 3D chart can be set in pixel as demonstrated below. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLTZdCrpWvYfGmi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor 3D Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLTZdCrpWvYfGmi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.png)" %} ### In Percentage @@ -137,6 +133,4 @@ By setting the value in percentage, the 3D Chart gets its dimension with respec } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVJDxMrpsargarf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor 3D Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVJDxMrpsargarf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.png)" %} diff --git a/blazor/3D-chart/data-labels.md b/blazor/3D-chart/data-labels.md index 92ef207ab4..29289890c6 100644 --- a/blazor/3D-chart/data-labels.md +++ b/blazor/3D-chart/data-labels.md @@ -48,9 +48,7 @@ Data labels are fields that includes information about the sample point connecte } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzZdWrfVZpBXMM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor 3D Chart with Data Label](images/data-label/blazor-chart-data-label.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzZdWrfVZpBXMM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Data Label](images/data-label/blazor-chart-data-label.png)" %} ## Position @@ -93,9 +91,7 @@ The `Position` property is used to place the label either on `Top`, `Middle`, or } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJtxCBfBjQyAbW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Label Position in Blazor 3D Chart](images/data-label/blazor-chart-label-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJtxCBfBjQyAbW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Position in Blazor 3D Chart](images/data-label/blazor-chart-label-position.png)" %} ## Template @@ -145,9 +141,7 @@ Label content can be formatted by using the template option. Inside the template } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBJNRWBJVChojGx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor 3D Chart Label with Template](images/data-label/blazor-chart-datalabel-template.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBJNRWBJVChojGx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Template](images/data-label/blazor-chart-datalabel-template.png)" %} ## Text mapping @@ -185,9 +179,7 @@ Text from the data source can be mapped using the `NameField` property. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVJNxsrfBWdyERK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor 3D Chart Label with Text Mapping](images/data-label/blazor-chart-label-with-text-mapping.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVJNxsrfBWdyERK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Text Mapping](images/data-label/blazor-chart-label-with-text-mapping.png)" %} ## Format @@ -225,9 +217,7 @@ Data label for the chart can be formatted using the `Format` property. The globa } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrJNnWhzrCaQgqM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor 3D Chart Label with Format](images/data-label/blazor-chart-label-with-format.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrJNnWhzrCaQgqM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Format](images/data-label/blazor-chart-label-with-format.png)" %} The table below shows the results of applying various commonly used label formats to numeric data. @@ -329,9 +319,7 @@ The `Margin` option can be applied to the data label to create space around the } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLpNHihJhLAjJdx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor 3D Chart Label with Margin](images/data-label/blazor-chart-label-with-margin.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLpNHihJhLAjJdx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Margin](images/data-label/blazor-chart-label-with-margin.png)" %} ## Customization @@ -371,9 +359,7 @@ The `stroke` and `border` of data label can be customized using `Fill` and `Char } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrJXnCrfBBywLmC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor 3D Chart with Custom Label](images/data-label/blazor-chart-custom-label.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrJXnCrfBBywLmC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Custom Label](images/data-label/blazor-chart-custom-label.png)" %} ## Customizing specific label @@ -430,6 +416,4 @@ A specific label can be customized by using the `TextRender` event. The `TextR } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzNxihTVLOVTJZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor 3D Chart with Custom Speci Label](images/data-label/blazor-chart-custom-specific-label.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzNxihTVLOVTJZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Custom Speci Label](images/data-label/blazor-chart-custom-specific-label.png)" %} diff --git a/blazor/3D-chart/date-time-axis.md b/blazor/3D-chart/date-time-axis.md index 8ae96241ab..b26e030dea 100644 --- a/blazor/3D-chart/date-time-axis.md +++ b/blazor/3D-chart/date-time-axis.md @@ -48,9 +48,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhTZHirphUnPCqM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor 3D Chart with DateTime Axis](images/datetime/blazor-column-chart-datetime-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhTZHirphUnPCqM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with DateTime Axis](images/datetime/blazor-column-chart-datetime-axis.png)" %} ## DateTime category axis @@ -87,9 +85,7 @@ The `DateTimeCategory` axis is used to display the date time values with non-lin } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLpjHiVJrKOIbbu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with DateTime Axis](images/datetime/blazor-column-chart-with-datetime-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLpjHiVJrKOIbbu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with DateTime Axis](images/datetime/blazor-column-chart-with-datetime-axis.png)" %} ### Range @@ -129,9 +125,7 @@ Range of an axis will be calculated automatically based on the provided data. Yo } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXdCLzhJLRmjw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Column 3D Chart DateTime Axis based on Range](images/datetime/blazor-column-chart-axis-based-on-range.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXdCLzhJLRmjw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart DateTime Axis based on Range](images/datetime/blazor-column-chart-axis-based-on-range.png)" %} ### Interval customization @@ -177,9 +171,7 @@ Date time intervals can be customized by using the `Interval` and `IntervalType` } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBpDdirTBfmVqNO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Column 3D Chart DateTime Axis based on Interval](images/datetime/blazor-column-chart-axis-based-on-interval.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBpDdirTBfmVqNO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart DateTime Axis based on Interval](images/datetime/blazor-column-chart-axis-based-on-interval.png)" %} **Applying padding to the Range** @@ -226,9 +218,7 @@ When the `RangePadding` is set to **None**, the minimum and maximum of the a } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrptHMhfBIrZRdV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart without RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-none.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrptHMhfBIrZRdV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart without RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-none.png)" %} **DateTime - Round** @@ -268,9 +258,7 @@ When the `RangePadding` is set to `Round`, minimum and maximum will be rounded t } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rthpZRWBJVSnflQi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Round RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-round.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthpZRWBJVSnflQi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Round RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-round.png)" %} **DateTime - Additional** @@ -309,9 +297,7 @@ When the `RangePadding` property is set to **Additional**, the interval of an ax } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBTjdsrfrxMZeIc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Additional RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-Additional.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBTjdsrfrxMZeIc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Additional RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-Additional.png)" %} ## Label format @@ -354,9 +340,7 @@ The date can be formatted and parsed to all globalize format using the `LabelFo } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLftHshTUyFcIMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Axis Label Formatting in Blazor Column 3D Chart](images/datetime/blazor-column-chart-axis-label-format.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLftHshTUyFcIMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Axis Label Formatting in Blazor Column 3D Chart](images/datetime/blazor-column-chart-axis-label-format.png)" %} The table below shows the results of applying various popular date and time formats to the `LabelFormat` property. diff --git a/blazor/3D-chart/legend.md b/blazor/3D-chart/legend.md index 0e53d90809..291dee7736 100644 --- a/blazor/3D-chart/legend.md +++ b/blazor/3D-chart/legend.md @@ -56,9 +56,7 @@ By using the `Position` property, the legend can be positioned at left, right, } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVzNnMVpznHbBmn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Legend Position in Blazor Column Chart](images/legend/blazor-column-chart-legend-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVzNnMVpznHbBmn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Position in Blazor Column Chart](images/legend/blazor-column-chart-legend-position.png)" %} The custom position helps you to position the legend anywhere in the 3D chart using x and y coordinates. @@ -105,9 +103,7 @@ The custom position helps you to position the legend anywhere in the 3D chart us } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBJXHiLpzGiRrpE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart Legend in Custom Position](images/legend/blazor-column-chart-legend-in-custom-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBJXHiLpzGiRrpE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend in Custom Position](images/legend/blazor-column-chart-legend-in-custom-position.png)" %} @@ -156,9 +152,7 @@ The order of the legend items can be reversed by using the `Reverse` property. B } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpXnsLpIMZlkTl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Column 3D Chart Legend Reverse](images/legend/blazor-column-chart-legend-reverse.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpXnsLpIMZlkTl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Legend Reverse](images/legend/blazor-column-chart-legend-reverse.png)" %} **Legend alignment** @@ -208,9 +202,7 @@ The legend can be aligned at near, far or center to the 3D chart using the `Alig } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLpDRsrTICojdGV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Column 3D Chart Legend Alignment Position](images/legend/blazor-column-chart-legend-alignment-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLpDRsrTICojdGV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Legend Alignment Position](images/legend/blazor-column-chart-legend-alignment-position.png)" %} ## Legend customization @@ -257,9 +249,7 @@ To change the legend icon shape, `LegendShape` property in the `Series` can be } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLTNRiBpyVrMjeP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Legend Shape in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-shape.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLTNRiBpyVrMjeP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Shape in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-shape.png)" %} ### Legend size @@ -308,9 +298,7 @@ By default, legend takes 20% - 25% of the 3D chart's height horizontally, when i } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrfDHMLpeVFwoRs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart Legend with Custom Size](images/legend/blazor-column-chart-legend-custom-size.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrfDHMLpeVFwoRs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Custom Size](images/legend/blazor-column-chart-legend-custom-size.png)" %} ### Legend item Size @@ -358,9 +346,7 @@ The size of the legend items can be customized by using the `ShapeHeight` and `S } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rthftHMLpyqztChS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart Legend Shape with Custom Size](images/legend/blazor-column-chart-custom-legend-shape-size.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthftHMLpyqztChS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Legend Shape with Custom Size](images/legend/blazor-column-chart-custom-legend-shape-size.png)" %} ### Paging for legend @@ -408,9 +394,7 @@ Paging will be enabled by default, when the legend items exceeds the legend boun } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVTDnChfygYhRAJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart Legend with Paging](images/legend/blazor-column-chart-legend-paging.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVTDnChfygYhRAJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Paging](images/legend/blazor-column-chart-legend-paging.png)" %} ### Legend text wrap @@ -458,9 +442,7 @@ When the legend text exceeds the container, the text can be wrapped by using the } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpXRsLJoJxytCf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor 3D Chart Legend with Wrap](images/legend/blazor-column-chart-legend-text-wrap.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpXRsLJoJxytCf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Legend with Wrap](images/legend/blazor-column-chart-legend-text-wrap.png)" %} ## Series selection through legend @@ -508,9 +490,7 @@ By default, you can collapse the series visibility by clicking the legend. On th } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhzNHiLfoSHNKph?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart Legend with Series Selection](images/legend/blazor-column-chart-legend-series-selection.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhzNHiLfoSHNKph?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Series Selection](images/legend/blazor-column-chart-legend-series-selection.png)" %} ## Collapsing legend item @@ -557,9 +537,7 @@ By default, series `Name` will be displayed as legend. To skip the legend for a } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJDxWLfeYGOxOB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Hiding Legend Item in Blazor Column 3D Chart](images/legend/blazor-column-chart-hide-legend-item.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJDxWLfeYGOxOB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Legend Item in Blazor Column 3D Chart](images/legend/blazor-column-chart-hide-legend-item.png)" %} ## Legend title @@ -606,9 +584,7 @@ You can set title for legend using `Title` property in `LegendSettings`. The `Si } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhztRiBfnXfzkzm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Legend Title in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-title.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhztRiBfnXfzkzm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Legend Title in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-title.png)" %} ## Arrow page navigation @@ -656,9 +632,7 @@ The page number will always be visible while using legend paging. It is now poss } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLfjxChpxNYlHvV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Enabling legend pages in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-with-page-navigation.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLfjxChpxNYlHvV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling legend pages in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-with-page-navigation.png)" %} ### Legend Item Padding @@ -706,6 +680,4 @@ The `ItemPadding` property can be used to adjust the space between the legend it } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhTjnsVpdCodgcy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart Legend Shape with Item Padding](images/legend/blazor-column-chart-legend-item-padding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhTjnsVpdCodgcy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend Shape with Item Padding](images/legend/blazor-column-chart-legend-item-padding.png)" %} diff --git a/blazor/3D-chart/logarithmic-axis.md b/blazor/3D-chart/logarithmic-axis.md index 1972506d37..ef19be2411 100644 --- a/blazor/3D-chart/logarithmic-axis.md +++ b/blazor/3D-chart/logarithmic-axis.md @@ -51,9 +51,7 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrJtnsUsBeKhZTc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor 3D Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrJtnsUsBeKhZTc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.png)" %} ## Range @@ -97,9 +95,7 @@ The range of an axis will be calculated automatically based on the provided data } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhzZnCUCBSddGpF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Column 3D Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-column-chart-axis-based-on-range.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhzZnCUCBSddGpF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-column-chart-axis-based-on-range.png)" %} ## Logarithmic base @@ -143,9 +139,7 @@ Logarithmic base can be customized by using the `LogBase` property of the axis } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBTZdWqWhouoYOv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBTZdWqWhouoYOv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.png)" %} ## Logarithmic interval @@ -189,6 +183,4 @@ The interval of the logarithmic axis can be customized by using the `Interval` p } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBTNniUMVdBYcdW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Column 3D Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBTNniUMVdBYcdW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.png)" %} diff --git a/blazor/3D-chart/multiple-panes.md b/blazor/3D-chart/multiple-panes.md index 7b6723575a..1f78f617da 100644 --- a/blazor/3D-chart/multiple-panes.md +++ b/blazor/3D-chart/multiple-panes.md @@ -64,9 +64,7 @@ To split the chart area vertically into number of rows, use `Rows` property of t } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzXxiAsBdkbxIl?appbar=true&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Rows with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzXxiAsBdkbxIl?appbar=true&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rows with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.png)" %} For spanning the vertical axis along multiple rows, use `Span` property of an axis. @@ -116,9 +114,7 @@ For spanning the vertical axis along multiple rows, use `Span` property of an a ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzjniUWLwATaKo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Row spanning with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-span-with-rows-span.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzjniUWLwATaKo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Row spanning with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-span-with-rows-span.png)" %} ## Columns @@ -173,9 +169,7 @@ To split the chart area horizontally into number of columns, use `Columns` prope } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLfjdsgiVmdedVN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Columns with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLfjdsgiVmdedVN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Columns with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.png)" %} The `Span` property of the axis can be used to span the horizontal axis across multiple column. @@ -225,6 +219,4 @@ The `Span` property of the axis can be used to span the horizontal axis across m } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLzXRiqsVGkcDLy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Column Spanning with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLzXRiqsVGkcDLy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Column Spanning with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png)" %} diff --git a/blazor/3D-chart/numeric-axis.md b/blazor/3D-chart/numeric-axis.md index d69c81b9dc..6adac00cd7 100644 --- a/blazor/3D-chart/numeric-axis.md +++ b/blazor/3D-chart/numeric-axis.md @@ -44,9 +44,7 @@ The numeric axis can be used to represent the numeric values of data in 3D chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhJjRsUMqZPMXVt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Numeric Axis](images/numeric-axis/blazor-column-chart-numeric-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhJjRsUMqZPMXVt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Numeric Axis](images/numeric-axis/blazor-column-chart-numeric-axis.png)" %} ## Range @@ -84,9 +82,7 @@ The range of an axis will be calculated automatically based on the provided data } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJZHCACUsVDOLk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Column 3D Chart Axis based on Range](images/numeric-axis/blazor-column-chart-axis-range.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJZHCACUsVDOLk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Column 3D Chart Axis based on Range](images/numeric-axis/blazor-column-chart-axis-range.png)" %} ## Range padding @@ -135,9 +131,7 @@ When the `RangePadding` is set to **None**, the minimum and maximum of an ax } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLpDnMqCKVVDIJp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart without RangePadding](images/numeric-axis/blazor-column-chart-range-without-padding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLpDnMqCKVVDIJp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart without RangePadding](images/numeric-axis/blazor-column-chart-range-without-padding.png)" %} **Numeric - Round** @@ -175,9 +169,7 @@ When the `RangePadding` is set to **Round**, the minimum and maximum will be r } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rthTtHiUMKhdGTjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Round RangePadding](images/numeric-axis/blazor-column-chart-round-range-padding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthTtHiUMKhdGTjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Round RangePadding](images/numeric-axis/blazor-column-chart-round-range-padding.png)" %} **Numeric - Additional** @@ -215,9 +207,7 @@ When the `RangePadding` is set to **Additional**, interval of an axis will be } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhpZxMAiUKXQVEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Additional RangePadding](images/numeric-axis/blazor-column-chart-additional-range-padding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhpZxMAiUKXQVEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Additional RangePadding](images/numeric-axis/blazor-column-chart-additional-range-padding.png)" %} **Numeric - Normal** @@ -255,9 +245,7 @@ When the `RangePadding` is set to **Normal**, padding is applied to the axis } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBTjdsUigqzLKgV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Normal RangePadding](images/numeric-axis/blazor-column-chart-normal-range-padding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBTjdsUigqzLKgV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Normal RangePadding](images/numeric-axis/blazor-column-chart-normal-range-padding.png)" %} **Numeric - Auto** @@ -296,9 +284,7 @@ When the `RangePadding` is set to **Auto**, horizontal numeric axis takes **N } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBJNHWUiAgPWmCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Auto RangePadding](images/numeric-axis/blazor-column-chart-auto-rangepadding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBJNHWUiAgPWmCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Auto RangePadding](images/numeric-axis/blazor-column-chart-auto-rangepadding.png)" %} ## Label format @@ -343,9 +329,7 @@ Numeric labels can be formatted by using the `LabelFormat` property. Also, it s } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVzDRCUsATCTBYJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Label Formatting in Blazor Column 3D Chart](images/numeric-axis/blazor-column-chart-label-format.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVzDRCUsATCTBYJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Formatting in Blazor Column 3D Chart](images/numeric-axis/blazor-column-chart-label-format.png)" %} The table below shows the results of applying various commonly used label formats to numeric data. @@ -446,9 +430,7 @@ To separate groups of thousands for numerical values, use the `UseGroupingSepara } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLfZHiUMgzGZgqO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Grouping Separator in Blazor Column 3D Chart](images/numeric-axis/blazor-column-chart-grouping-separator.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLfZHiUMgzGZgqO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping Separator in Blazor Column 3D Chart](images/numeric-axis/blazor-column-chart-grouping-separator.png)" %} ## Custom label format @@ -490,6 +472,4 @@ Axis also supports custom label format using placeholders such as {value}K, wher } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBztRiqiUoUFbWM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Custom Label Format](images/numeric-axis/blazor-column-chart-custom-label-format.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBztRiqiUoUFbWM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Label Format](images/numeric-axis/blazor-column-chart-custom-label-format.png)" %} diff --git a/blazor/3D-chart/selection.md b/blazor/3D-chart/selection.md index 5305e5109a..2c84c094cd 100644 --- a/blazor/3D-chart/selection.md +++ b/blazor/3D-chart/selection.md @@ -67,9 +67,7 @@ To select a point, set the `SelectionMode` property to **Point**. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVpjnMgCpXGYJIf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Point Selection](images/selection/blazor-chart-point-selection.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVpjnMgCpXGYJIf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Point Selection](images/selection/blazor-chart-point-selection.png)" %} ## Series @@ -116,9 +114,7 @@ To select a series, set the `SelectionMode` property to **Series**. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrpXHWUCJCTRDgK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Series Selection](images/selection/blazor-chart-series-selection.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrpXHWUCJCTRDgK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Series Selection](images/selection/blazor-chart-series-selection.png)" %} ## Cluster @@ -165,9 +161,7 @@ To select the points that corresponds to the same index in all the series, set t } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhpXxsKCJCblvOv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Cluster Selection](images/selection/blazor-chart-cluster-selection.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhpXxsKCJCblvOv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Cluster Selection](images/selection/blazor-chart-cluster-selection.png)" %} ## Selection type @@ -214,9 +208,7 @@ To select multiple points or series, enable the `AllowMultiSelection` property. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVTZxiqipLEJFtn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Multiple Selection](images/selection/blazor-chart-multiple-selection.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVTZxiqipLEJFtn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Multiple Selection](images/selection/blazor-chart-multiple-selection.png)" %} ## Selection during initial loading @@ -265,9 +257,7 @@ In a 3D chart, selecting a point or series during initial loading can only be do } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJDnsqWfUAipdG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Selection during initial loading](images/selection/blazor-chart-initial-selection.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJDnsqWfUAipdG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Selection during initial loading](images/selection/blazor-chart-initial-selection.png)" %} ## Selection through legend @@ -312,6 +302,4 @@ To select a point or series through legend use the `ToggleVisibility` property. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrpDRsqiTqkPxPM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Legend Selection](images/selection/blazor-chart-legend-selection.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrpDRsqiTqkPxPM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Legend Selection](images/selection/blazor-chart-legend-selection.png)" %} diff --git a/blazor/3D-chart/tool-tip.md b/blazor/3D-chart/tool-tip.md index 2b64b945cb..9598c3fa0b 100644 --- a/blazor/3D-chart/tool-tip.md +++ b/blazor/3D-chart/tool-tip.md @@ -54,9 +54,7 @@ By default, tooltip is not visible. The tooltip can be enabled by setting the `E } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBfXHiKipfupKhA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Tooltip](images/tooltip/blazor-column-chart-tooltip.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBfXHiKipfupKhA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip](images/tooltip/blazor-column-chart-tooltip.png)" %} ## Fixed tooltip @@ -101,9 +99,7 @@ By default, tooltip track the mouse movement, but the tooltip can be set in fixe } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBzNHiACfySnnZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Fixed Tooltip](images/tooltip/blazor-column-chart-fixed-tooltip.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBzNHiACfySnnZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Fixed Tooltip](images/tooltip/blazor-column-chart-fixed-tooltip.png)" %} ## Format the tooltip @@ -149,9 +145,7 @@ By default, tooltip shows information of x and y value in points. In addition to } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBpNnsgspnNkiNQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Tooltip Format](images/tooltip/blazor-column-chart-tooltip-format.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBpNnsgspnNkiNQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip Format](images/tooltip/blazor-column-chart-tooltip-format.png)" %} @@ -208,9 +202,7 @@ Any HTML elements can be displayed within the tooltip by using the `Chart3DToolt } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhpDnCUWTxpwqMH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Tooltip Template](images/tooltip/blazor-column-chart-tooltip-template.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhpDnCUWTxpwqMH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip Template](images/tooltip/blazor-column-chart-tooltip-template.png)" %} ## Customize the appearance of tooltip @@ -255,6 +247,4 @@ The `Fill` and `Border` properties are used to customize the background color an } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrTXxsgsfmibwll?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Custom Tooltip](images/tooltip/blazor-column-chart-custom-tooltip.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrTXxsgsfmibwll?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Tooltip](images/tooltip/blazor-column-chart-custom-tooltip.png)" %} diff --git a/blazor/3D-chart/working-with-data.md b/blazor/3D-chart/working-with-data.md index 5f805222bb..6af7e4c7a6 100644 --- a/blazor/3D-chart/working-with-data.md +++ b/blazor/3D-chart/working-with-data.md @@ -54,9 +54,7 @@ An IEnumerable object can be assigned to the `DataSource` property. The list dat } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrJDdCgiIrsmTGI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Colum 3D Chart with Data Binding](images/working-data/blazor-chart-data-binding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrJDdCgiIrsmTGI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Colum 3D Chart with Data Binding](images/working-data/blazor-chart-data-binding.png)" %} N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data-binding. @@ -177,9 +175,7 @@ The remote data can be bound to the 3D chart using the [SfDataManager](https://h ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVfjxsgWyogzTfx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Remote Data Binding in Blazor 3D Chart](images/working-data/blazor-chart-remote-data-binding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVfjxsgWyogzTfx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Remote Data Binding in Blazor 3D Chart](images/working-data/blazor-chart-remote-data-binding.png)" %} ### Binding with OData services @@ -231,9 +227,7 @@ The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLztdMKsxBTngfW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor 3D Chart with WebApiAdaptor Binding](images/working-data/blazor-chart-webapi-adaptor-binding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLztdMKsxBTngfW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with WebApiAdaptor Binding](images/working-data/blazor-chart-webapi-adaptor-binding.png)" %} ### Sending additional parameters to the server @@ -311,9 +305,7 @@ The data points that uses the `null` or `undefined` as value are considered as e } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLJZHMgMnsEADrH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Empty Points](images/working-data/blazor-chart-empty-point.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLJZHMgMnsEADrH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Empty Points](images/working-data/blazor-chart-empty-point.png)" %} **Customizing empty point** @@ -360,6 +352,4 @@ The specific color for empty point can be set by the `Fill` property in `Chart3D } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhzXxiUsnqLRyNK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column 3D Chart with Customized Empty Points](images/working-data/blazor-chart-custom-empty-point.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhzXxiUsnqLRyNK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Customized Empty Points](images/working-data/blazor-chart-custom-empty-point.png)" %} \ No newline at end of file diff --git a/blazor/accumulation-chart/annotation.md b/blazor/accumulation-chart/annotation.md index 3d5e8fab7f..037d6725b1 100644 --- a/blazor/accumulation-chart/annotation.md +++ b/blazor/accumulation-chart/annotation.md @@ -51,8 +51,7 @@ Annotations are texts, shapes, or images that are used to highlight a specific r ``` -![Annotation in Blazor Accumulation Chart](images/annotation/blazor-accumulation-chart-annotation.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhqChsUTScrGTjL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhqChsUTScrGTjL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Annotation in Blazor Accumulation Chart](images/annotation/blazor-accumulation-chart-annotation.png)" %} ## Region @@ -98,8 +97,7 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu ``` -![Blazor Accumulation Chart with Region](images/annotation/blazor-accumulation-chart-region.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrKsrMATIcPtyjZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrKsrMATIcPtyjZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Region](images/annotation/blazor-accumulation-chart-region.png)" %} ## Co-ordinate units @@ -145,8 +143,7 @@ The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch ``` -![Blazor Accumulation Chart displays Co-ordinate Units](images/annotation/blazor-accumulation-chart-coordinate-unit.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgihWKpyvURKFW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgihWKpyvURKFW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays Co-ordinate Units](images/annotation/blazor-accumulation-chart-coordinate-unit.png)" %} N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. diff --git a/blazor/accumulation-chart/center-label.md b/blazor/accumulation-chart/center-label.md index 4fd6f7ff7c..eb407fb9b5 100644 --- a/blazor/accumulation-chart/center-label.md +++ b/blazor/accumulation-chart/center-label.md @@ -44,8 +44,7 @@ You can configure the text that appears in the center using the [Text](https://h } } ``` -![Blazor Accumulation Chart with Center Label](./images/center-label/blazor-accumulation-chart-with-center-label.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBetHBdgvneoPva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBetHBdgvneoPva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label](./images/center-label/blazor-accumulation-chart-with-center-label.png)" %} ## Hover Text @@ -84,8 +83,7 @@ N> Line breaks can be provided to texts in the `HoverTextFormat` property using } } ``` -![Blazor Accumulation Chart with Center Label Dynamic Text](./images/center-label/blazor-accumulation-chart-with-center-label-hover-text.gif) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBINdVRqvFzEVfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBINdVRqvFzEVfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label Dynamic Text](./images/center-label/blazor-accumulation-chart-with-center-label-hover-text.gif)" %} ## Customization @@ -125,8 +123,7 @@ The position of the center label can be adjusted using the [XOffset](https://hel } } ``` -![Blazor Accumulation Chart with Center Label Customization](./images/center-label/blazor-accumulation-chart-with-center-label-customization.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryXRrRqbOzXVbD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryXRrRqbOzXVbD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label Customization](./images/center-label/blazor-accumulation-chart-with-center-label-customization.png)" %} N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. diff --git a/blazor/accumulation-chart/chart-types/funnel.md b/blazor/accumulation-chart/chart-types/funnel.md index cdb5b2934b..3cc5cfe26e 100644 --- a/blazor/accumulation-chart/chart-types/funnel.md +++ b/blazor/accumulation-chart/chart-types/funnel.md @@ -45,8 +45,7 @@ documentation: ug ``` -![Blazor Funnel Chart](../images/funnel/blazor-funnel-chart.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhgCrCUpgfyPyNU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhgCrCUpgfyPyNU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart](../images/funnel/blazor-funnel-chart.png)" %} ## Funnel Size @@ -86,8 +85,7 @@ The size of the funnel chart can be customized by using the [Width](https://help ``` -![Customizing Funnel Size in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-size-customization.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLAWVCgfAlkvtpq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLAWVCgfAlkvtpq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Funnel Size in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-size-customization.png)" %} N> The [Blazor Funnel Chart](https://blazor.syncfusion.com/demos/chart/funnel) example can be explored to learn to render and configure the funnel chart. @@ -129,8 +127,7 @@ The neck size of the funnel chart can be customized by using the [NeckWidth](htt ``` -![Customizing Funnel Neck Size in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-neck-size.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVKshsATguqmNHu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVKshsATguqmNHu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Funnel Neck Size in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-neck-size.png)" %} ## Gap between funnel segments @@ -170,8 +167,7 @@ The neck size of the funnel chart can be customized by using the [NeckWidth](htt ``` -![Blazor Funnel Chart with Gap](../images/funnel/blazor-funnel-chart-with-gap.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgshWqpAulylIW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgshWqpAulylIW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with Gap](../images/funnel/blazor-funnel-chart-with-gap.png)" %} ## Funnel explode @@ -211,8 +207,7 @@ Points can be exploded on mouse click by setting the [Explode](https://help.sync ``` -![Explode in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-explode.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLsqzpZBowwH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLsqzpZBowwH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Explode in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-explode.png)" %} ## Smart Data Label @@ -264,8 +259,7 @@ Labels will be arranged automatically on the left side of the funnel and pyramid } ``` -![Blazor Funnel Chart with Smart Data Label](../images/funnel/blazor-funnel-chart-smart-data-label.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVKWrCqppsLzynA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVKWrCqppsLzynA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with Smart Data Label](../images/funnel/blazor-funnel-chart-smart-data-label.png)" %} ## Border radius @@ -305,8 +299,7 @@ The corners of the first data point and last data point in the funnel chart seri } } ``` -![Blazor Funnel Chart with border radius applied.](../images/funnel/blazor-funnel-border-radius.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjheDHBnqcxEcNgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjheDHBnqcxEcNgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with border radius applied.](../images/funnel/blazor-funnel-border-radius.png)" %} N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/funnel?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. diff --git a/blazor/accumulation-chart/chart-types/pie-doughnut.md b/blazor/accumulation-chart/chart-types/pie-doughnut.md index 403b034c9c..941336c5dd 100644 --- a/blazor/accumulation-chart/chart-types/pie-doughnut.md +++ b/blazor/accumulation-chart/chart-types/pie-doughnut.md @@ -47,9 +47,7 @@ The [Pie Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart ``` -![Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart.png) - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsrWqJDwACRFV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsrWqJDwACRFV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart.png)" %} ## Radius customization @@ -89,9 +87,7 @@ The radius of the pie series will be set to 80% of its size (minimum of chart wi ``` -![Customizing Radius in Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart-radius-customization.png) - -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsriKfjQmubFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsriKfjQmubFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Radius in Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart-radius-customization.png)" %} ## Pie center @@ -132,8 +128,7 @@ The center x and center y can be used to change the pie's center position. The p ``` -![Changing Blazor Pie Chart Center Position](../images/pie-dough-nut/blazor-pie-chart-center-position.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrqMLCUztbofzWG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrqMLCUztbofzWG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Pie Chart Center Position](../images/pie-dough-nut/blazor-pie-chart-center-position.png)" %} ## Various Radius Pie Chart @@ -175,8 +170,7 @@ The [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu ``` -![Blazor Pie Chart displays Various Radius](../images/pie-dough-nut/blazor-pie-chart-with-various-radius.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhAsLWATjPOLGxv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhAsLWATjPOLGxv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart displays Various Radius](../images/pie-dough-nut/blazor-pie-chart-with-various-radius.png)" %} ## Doughnut chart @@ -216,8 +210,7 @@ The doughnut chart can be created by setting the [InnerRadius](https://help.sync ``` -![Blazor Doughnut Chart](../images/pie-dough-nut/blazor-doughnut-chart.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrKCBsqzZagDOTz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrKCBsqzZagDOTz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Doughnut Chart](../images/pie-dough-nut/blazor-doughnut-chart.png)" %} ## Start and end angles @@ -258,8 +251,7 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. ``` -![Customizing Start and End angles in Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart-start-angle-customization.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhqsBCKTjkHQfyz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhqsBCKTjkHQfyz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Start and End angles in Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart-start-angle-customization.png)" %} ## Color and text mapping @@ -301,8 +293,7 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. ``` -![Blazor Pie Chart with Color and Text Mapping](../images/pie-dough-nut/blazor-pie-chart-text-mapping.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrUCrWqTiZCBNJq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrUCrWqTiZCBNJq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart with Color and Text Mapping](../images/pie-dough-nut/blazor-pie-chart-text-mapping.png)" %} ## Border radius @@ -336,8 +327,7 @@ The corners of all the slices in the pie/donut chart series can be rounded using } } ``` -![Blazor Pie Chart with border radius applied.](../images/pie-dough-nut/blazor-pie-chart-border-radius.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreZdhRKPiaFxIm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreZdhRKPiaFxIm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart with border radius applied.](../images/pie-dough-nut/blazor-pie-chart-border-radius.png)" %} ## Hide pie or doughnut border @@ -376,8 +366,7 @@ When the mouse hovers over the pie/doughnut chart, the border appears by default ``` -![Hiding Blazor Pie Chart Border](../images/pie-dough-nut/Blazor-pie-chart-disable-border.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/htVqCLWUzWZnpzJw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVqCLWUzWZnpzJw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Blazor Pie Chart Border](../images/pie-dough-nut/Blazor-pie-chart-disable-border.png)" %} N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. diff --git a/blazor/accumulation-chart/chart-types/pyramid.md b/blazor/accumulation-chart/chart-types/pyramid.md index 57f85bdded..08a3a90568 100644 --- a/blazor/accumulation-chart/chart-types/pyramid.md +++ b/blazor/accumulation-chart/chart-types/pyramid.md @@ -46,8 +46,7 @@ The [Pyramid Chart](https://www.syncfusion.com/blazor-components/blazor-charts/c ``` -![Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBKiBiKfsBiJKAT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBKiBiKfsBiJKAT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart.png)" %} ## Pyramid mode @@ -87,8 +86,7 @@ The Pyramid Chart can be rendered in both `Linear` or `Surface` modes by setting ``` -![Blazor Pyramid Chart with Surface Mode](../images/pyramid/blazor-pyramid-chart-with-surface-mode.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrAiBsKJsKsjaYg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrAiBsKJsKsjaYg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with Surface Mode](../images/pyramid/blazor-pyramid-chart-with-surface-mode.png)" %} ## Pyramid size @@ -128,8 +126,7 @@ The size of the pyramid chart can be customized by using the [Width](https://hel ``` -![Customizing Pyramid Size in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-size.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBAMLiAzszQHxDQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBAMLiAzszQHxDQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Pyramid Size in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-size.png)" %} ## Gap between pyramid segments @@ -169,8 +166,7 @@ The [Pyramid Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char ``` -![Blazor Pyramid Chart with Gap](../images/pyramid/blazor-pyramid-chart-with-gap.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVUWhiKJsShBUhS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVUWhiKJsShBUhS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with Gap](../images/pyramid/blazor-pyramid-chart-with-gap.png)" %} ## Pyramid explode @@ -210,8 +206,7 @@ By setting the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor ``` -![Explode in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-explode.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAMBMATgJWwkNT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAMBMATgJWwkNT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Explode in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-explode.png)" %} ## Border radius @@ -249,8 +244,7 @@ The corners of the first data point and last data point in the pyramid chart ser } } ``` -![Blazor Pyramid Chart with border radius applied.](../images/pyramid/blazor-pyramid-border-radius.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LthyDHBRqlAFfKbF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthyDHBRqlAFfKbF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with border radius applied.](../images/pyramid/blazor-pyramid-border-radius.png)" %} N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pyramid?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. diff --git a/blazor/accumulation-chart/data-label.md b/blazor/accumulation-chart/data-label.md index fc56b79464..81b95be65c 100644 --- a/blazor/accumulation-chart/data-label.md +++ b/blazor/accumulation-chart/data-label.md @@ -46,8 +46,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Acc ``` -![Blazor Accumulation Chart with Data Label](images/data-label/blazor-accumulation-chart-with-data-label.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBUCrWAJzilTTrb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBUCrWAJzilTTrb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Data Label](images/data-label/blazor-accumulation-chart-with-data-label.png)" %} ## Text Wrap @@ -83,8 +82,7 @@ When the data label text exceeds the container, the text can be wrapped by using } } ``` -![Text Wrap in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVUCVCgTfRsrPGK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVUCVCgTfRsrPGK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Text Wrap in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.png)" %} ## Position @@ -125,8 +123,7 @@ The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ac ``` -![Changing Data Label Position in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-label-position.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUMhsApTwpdpQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUMhsApTwpdpQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Data Label Position in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-label-position.png)" %} ## Smart Labels @@ -178,8 +175,7 @@ Data labels will be arranged smartly without overlapping with each other. The [E ``` -![Blazor Accumulation Chart with Smart Labels](images/data-label/blazor-accumulation-chart-smart-labels.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthqCrMgfzFDgIcO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthqCrMgfzFDgIcO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Smart Labels](images/data-label/blazor-accumulation-chart-smart-labels.png)" %} ## Connector line @@ -222,8 +218,7 @@ When the data label is placed [Outside](https://help.syncfusion.com/cr/blazor/Sy ``` -![Blazor Accumulation Chart with Connector Line](images/data-label/blazor-accumulation-chart-connector-line.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLqWVsqzTYnAoVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLqWVsqzTYnAoVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Connector Line](images/data-label/blazor-accumulation-chart-connector-line.png)" %} ## Text mapping @@ -264,8 +259,7 @@ The [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu ``` -![Text Mapping in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-text-mapping.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrUsrsApeCPdurG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrUsrsApeCPdurG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Text Mapping in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-text-mapping.png)" %} N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. @@ -308,8 +302,7 @@ Data label for the accumulation chart can be formatted using [Format](https://he ``` -![Format in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-format.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhqMLsqzSLpcrER?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhqMLsqzSLpcrER?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Format in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-format.png)" %} ## Template @@ -375,8 +368,7 @@ Data labels can be customized using the template element for the accumulation ch ``` -![Template in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-template.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLpZghnzXPGMCxq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLpZghnzXPGMCxq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Template in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-template.png)" %} ## See also diff --git a/blazor/accumulation-chart/empty-points.md b/blazor/accumulation-chart/empty-points.md index ccf0d76392..d70b0fcece 100644 --- a/blazor/accumulation-chart/empty-points.md +++ b/blazor/accumulation-chart/empty-points.md @@ -47,8 +47,7 @@ Data points that contain **NaN** or **null** value are considered as empty point ``` -![Empty Points in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-with-empty-point.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLUZQhRVOciwQQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLUZQhRVOciwQQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Empty Points in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-with-empty-point.png)" %} ## Customization @@ -93,8 +92,7 @@ The [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu ``` -![Customizing Empty Points in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-empty-point-customization.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVqiLMqfySLYAVU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVqiLMqfySLYAVU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Empty Points in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-empty-point-customization.png)" %} ## Handling No Data @@ -147,8 +145,7 @@ When no data is available to render in the accumulation chart, the [NoDataTempla ``` -![No Data Template in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-no-data-template.gif) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVojONbrgWPsFkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVojONbrgWPsFkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[No Data Template in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-no-data-template.gif)" %} N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/accumulation-chart/grouping.md b/blazor/accumulation-chart/grouping.md index a600d07bda..28e6b1b52b 100644 --- a/blazor/accumulation-chart/grouping.md +++ b/blazor/accumulation-chart/grouping.md @@ -55,8 +55,7 @@ The value set to the [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion. ``` -![Grouping in Blazor Accumulation Chart](images/grouping/blazor-accumulation-chart-grouping.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrqihiqTyhaAqqS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrqihiqTyhaAqqS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Accumulation Chart](images/grouping/blazor-accumulation-chart-grouping.png)" %} ## Pie Grouping @@ -110,9 +109,7 @@ The points that have been grouped together will appear as a single slice with th ``` -![Blazor Accumulation Chart with Broken Slice](images/grouping/blazor-accumulation-chart-with-broken-slice.png) - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLqihMUfoqzKvcp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLqihMUfoqzKvcp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Broken Slice](images/grouping/blazor-accumulation-chart-with-broken-slice.png)" %} **Group Mode** When the [GroupMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GroupMode) property is set to [Point](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.GroupMode.html#Syncfusion_Blazor_Charts_GroupMode_Point), the points are displayed as separate slices according to the [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GroupTo) value. The remaining points will be grouped into a single slice and displayed. @@ -163,8 +160,7 @@ The points that have been grouped together will appear as a single slice with th ``` -![Blazor Accumulation Chart with Group Mode](images/grouping/blazor-accumulation-chart-group-mode.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrqiViApefsiZXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrqiViApefsiZXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Group Mode](images/grouping/blazor-accumulation-chart-group-mode.png)" %} N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. diff --git a/blazor/accumulation-chart/legend.md b/blazor/accumulation-chart/legend.md index b8d974416c..c0169e442c 100644 --- a/blazor/accumulation-chart/legend.md +++ b/blazor/accumulation-chart/legend.md @@ -45,8 +45,7 @@ The legend is available for accumulation charts, just like it is for charts, and ``` -![Legend in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBKCBWfsHSGQTvG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBKCBWfsHSGQTvG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Legend in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend.png)" %} ## Position and alignment @@ -86,8 +85,7 @@ The legend can be placed at [Left](https://help.syncfusion.com/cr/blazor/Syncfu ``` -![Changing Position and Alignment of Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-position.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUsLCzsHdMOzRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUsLCzsHdMOzRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Position and Alignment of Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-position.png)" %} ## Legend Reverse @@ -128,8 +126,7 @@ You can reverse the order of the legend items by using the [Reverse](https://hel ``` -![Changing Legend Reverse in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-reverse.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rthqMVCpMRRynnnl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthqMVCpMRRynnnl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Reverse in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-reverse.png)" %} ## Legend shape @@ -170,8 +167,7 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts ``` -![Changing Legend Shape in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-shape.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUMhiJMxnkMBtv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUMhiJMxnkMBtv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Shape in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-shape.png)" %} ## Legend size @@ -213,8 +209,7 @@ The legend size can be customized by using the [Width](https://help.syncfusion.c ``` -![Changing Legend Size in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-size.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrqsrMpixGVWbxO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrqsrMpixGVWbxO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Size in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-size.png)" %} ## Legend shape size @@ -255,8 +250,7 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts ``` -![Changing Legend Item Size in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-item-size.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsLsTsHQSwtZv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsLsTsHQSwtZv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Item Size in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-item-size.png)" %} ## Paging for Legend @@ -297,8 +291,7 @@ When the legend items exceed legend bounds, paging will be enabled by default. E ``` -![Paging for Legend in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-paging.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVKWVWTiRwuHWFS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVKWVWTiRwuHWFS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Paging for Legend in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-paging.png)" %} ### Paging customization @@ -355,8 +348,7 @@ In legend pager, the arrow elements can be customized by using the [ArrowSize](h } ``` -![Blazor Accumulation Chart Legend Pager Customization](images/legend/blazor-accumulation-chart-legend-paging-customization.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthTZnrTBvLmyjUM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthTZnrTBvLmyjUM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart Legend Pager Customization](images/legend/blazor-accumulation-chart-legend-paging-customization.png)" %} ## Legend text wrap @@ -395,8 +387,7 @@ When the legend text exceeds the container, the text can be wrapped by using [Te ``` -![Blazor Accumulation Chart Legend with Wrap](images/legend/blazor-accumulation-chart-legend-wrap.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLqsrMJWRuPUEHB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLqsrMJWRuPUEHB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart Legend with Wrap](images/legend/blazor-accumulation-chart-legend-wrap.png)" %} N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. diff --git a/blazor/accumulation-chart/title-and-sub-title.md b/blazor/accumulation-chart/title-and-sub-title.md index 3bab2bb932..4876827710 100644 --- a/blazor/accumulation-chart/title-and-sub-title.md +++ b/blazor/accumulation-chart/title-and-sub-title.md @@ -47,8 +47,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAcc ``` -![Title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-title.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqCViTsGXMlSaD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqCViTsGXMlSaD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-title.png)" %} ## Title customization @@ -90,8 +89,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAcc ``` -![Customizing Title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-title-customization.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBUMVCpMmDIcLry?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBUMVCpMmDIcLry?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-title-customization.png)" %} ### Title position @@ -133,8 +131,7 @@ N> The subtitle, which appears below the title, will also be positioned along wi } ``` -![Position customization of title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-position.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLSZJNzBeDlhwIW?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLSZJNzBeDlhwIW?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Position customization of title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-position.png)" %} When the `Position` is set to `Custom`, the title can be positioned anywhere on the chart using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html#Syncfusion_Blazor_Charts_AccumulationChartTitleStyle_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html#Syncfusion_Blazor_Charts_AccumulationChartTitleStyle_Y) properties in [AccumulationChartTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html). This provides precise control over the title’s location, enabling customization to fit specific design or layout needs. The `X` and `Y` values specify the horizontal and vertical coordinates, respectively. @@ -172,8 +169,7 @@ When the `Position` is set to `Custom`, the title can be positioned anywhere on } ``` -![Custom position of title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-position-custom.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhoNJNQqAoFwbVK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhoNJNQqAoFwbVK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Custom position of title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-position-custom.png)" %} ## Subtitle @@ -213,8 +209,7 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf ``` -![Subtitle in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-with-subtitle.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrgMrCpiGjaRMic?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrgMrCpiGjaRMic?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Subtitle in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-with-subtitle.png)" %} ## Subtitle customization @@ -255,8 +250,7 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf ``` -![Customizing Subtitle in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-customization.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhUihWfiGMgtYfB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhUihWfiGMgtYfB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Subtitle in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-customization.png)" %} N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. diff --git a/blazor/accumulation-chart/tool-tip.md b/blazor/accumulation-chart/tool-tip.md index 3552c220fe..f874a004bb 100644 --- a/blazor/accumulation-chart/tool-tip.md +++ b/blazor/accumulation-chart/tool-tip.md @@ -47,8 +47,7 @@ The [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu ``` -![Blazor Accumulation Chart displays ToolTip](images/tool-tip/blazor-accumulation-chart-tooltip.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVUirMUTHNidTzn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVUirMUTHNidTzn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays ToolTip](images/tool-tip/blazor-accumulation-chart-tooltip.png)" %} ## Header @@ -91,8 +90,7 @@ The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu ``` -![Blazor Accumulation Chart displays ToolTip for Header](images/tool-tip/blazor-accumulation-chart-header-tooltip.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVqChsApHestEJW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVqChsApHestEJW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays ToolTip for Header](images/tool-tip/blazor-accumulation-chart-header-tooltip.png)" %} ## Tooltip format @@ -135,8 +133,7 @@ By default, tooltip shows information about x and y value in points. In addition ``` -![Customizing ToolTip Format in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-format.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsLCKzRIODYxT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsLCKzRIODYxT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing ToolTip Format in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-format.png)" %} ## Tooltip customization @@ -180,8 +177,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu ``` -![Customizing Tooltip in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-customization.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLKsriUJxRffqTe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLKsriUJxRffqTe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Tooltip in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-customization.png)" %} ## Tooltip Text Mapping @@ -230,8 +226,7 @@ By default, tooltip shows information of x and y value in points. In addition, b ``` -![ToolTip Text Mapping in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-mapping.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVUshCTCHSgEYgI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVUshCTCHSgEYgI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip Text Mapping in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-mapping.png)" %} N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. diff --git a/blazor/appbar/design.md b/blazor/appbar/design.md index 46d25f9b5b..18a3f1f828 100644 --- a/blazor/appbar/design.md +++ b/blazor/appbar/design.md @@ -30,8 +30,7 @@ The following example depicts the code to provide spacing between the home and p ``` -![Blazor AppBar with Spacer.](./images/blazor-appbar-spacer.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKWVizhrJGeHZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKWVizhrJGeHZk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Spacer.](./images/blazor-appbar-spacer.png)" %} ## Separator @@ -66,9 +65,7 @@ The following example depicts the code to provide a vertical line between a grou } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUWhizrrSDjGWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AppBar with Separator.](./images/blazor-appbar-separator.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUWhizrrSDjGWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Separator.](./images/blazor-appbar-separator.png)" %} ## Media Query @@ -114,8 +111,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t ``` -![Blazor AppBar with Media Query.](./images/blazor-appbar-media-quary.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVUWBsJrBofaJVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVUWBsJrBofaJVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Media Query.](./images/blazor-appbar-media-quary.png)" %} ## Designing AppBar with Menu **SfMenu** component can be rendered as a child content of AppBar. You can inherit the AppBar component styles by setting CSS class as `e-inherit` to SfMenu component. @@ -173,8 +169,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t ``` -![Blazor AppBar with Menu.](./images/blazor-appbar-menu.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgCrsfhVRDMsdT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgCrsfhVRDMsdT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Menu.](./images/blazor-appbar-menu.png)" %} ## Designing AppBar with Buttons @@ -209,8 +204,7 @@ Media Query is used to adjusting the AppBar for different screen sizes. Resize t ``` -![Blazor AppBar with Buttons.](./images/blazor-appbar-buttons.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVgMBMTLrdehyCb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVgMBMTLrdehyCb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Buttons.](./images/blazor-appbar-buttons.png)" %} ## Designing AppBar with SideBar @@ -370,6 +364,4 @@ AppBar toggle button used to control the expand and collapse state of **SfSideba } ``` -![Blazor AppBar with SideBar.](./images/blazor-appbar-sidebar.png) - -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVKirMTrrRbKrNE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVKirMTrrRbKrNE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with SideBar.](./images/blazor-appbar-sidebar.png)" %} \ No newline at end of file diff --git a/blazor/appbar/position.md b/blazor/appbar/position.md index 80fe46f511..9c41588da4 100644 --- a/blazor/appbar/position.md +++ b/blazor/appbar/position.md @@ -58,8 +58,7 @@ The top AppBar is the default one in which it positions the AppBar at the top of ``` -![Blazor AppBar with Top Position](./images/top_appbar.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAsrWpLhLkmLRh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAsrWpLhLkmLRh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Top Position](./images/top_appbar.png)" %} ### Bottom AppBar @@ -104,8 +103,7 @@ This position can be set to the AppBar by setting `AppBarPosition.Bottom` to the ``` -![Blazor AppBar with Bottom Position](./images/bottom_appbar.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/htBAMLMfLVArWgxb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBAMLMfLVArWgxb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Bottom Position](./images/bottom_appbar.png)" %} ### Sticky AppBar @@ -150,5 +148,4 @@ This position can be set to the AppBar by setting `true` to the property [IsStic ``` -![Blazor AppBar with Sticky Position](./images/sticky_appbar.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLKWVWzrBKSTUvH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLKWVWzrBKSTUvH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Sticky Position](./images/sticky_appbar.png)" %} \ No newline at end of file diff --git a/blazor/appbar/size-and-color.md b/blazor/appbar/size-and-color.md index 26f84e1495..e8e460ba0b 100644 --- a/blazor/appbar/size-and-color.md +++ b/blazor/appbar/size-and-color.md @@ -41,9 +41,7 @@ This mode is the default one in which the AppBar is displayed with the default h ``` -![Blazor AppBar with Regular Size](./images/regular_appbar.png) - -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVWfLtaWPHyq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVWfLtaWPHyq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Regular Size](./images/regular_appbar.png)" %} ### Prominent AppBar @@ -93,9 +91,7 @@ This height mode can be set to the AppBar by setting `AppBarMode.Prominent` to t ``` -![Blazor AppBar with Prominent Size](./images/prominent_appbar.png) - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLUChipVCDBzbVE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLUChipVCDBzbVE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Prominent Size](./images/prominent_appbar.png)" %} ### Dense AppBar @@ -121,8 +117,7 @@ This height mode can be set to the AppBar by setting `AppBarMode.Dense` to the p ``` -![Blazor AppBar with Dense Size](./images/dense_appbar.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKirWTrCLzRlMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKirWTrCLzRlMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Dense Size](./images/dense_appbar.png)" %} ## Color @@ -162,9 +157,7 @@ This color mode is the default one in which the AppBar can be displayed with a l ``` -![Blazor AppBar with Light Color](./images/light_appbar.png) - -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqsrMpVMqGpFYy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqsrMpVMqGpFYy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Light Color](./images/light_appbar.png)" %} ### Dark AppBar @@ -194,9 +187,7 @@ This color mode can be set to the AppBar by setting `AppBarColor.Dark` to the pr ``` -![Blazor AppBar with Dark Color](./images/dark_appbar.png) - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgMBCpBMfsnjes?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgMBCpBMfsnjes?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Dark Color](./images/dark_appbar.png)" %} ### Primary AppBar @@ -226,9 +217,7 @@ This color mode can be set to the AppBar by setting `AppBarColor.Primary` to the ``` -![Blazor AppBar with Primary Color](./images/primary_appbar.png) - -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBAChsTrifpmere?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBAChsTrifpmere?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Primary Color](./images/primary_appbar.png)" %} ### Inherit AppBar @@ -259,6 +248,4 @@ This color mode can be set to the AppBar by setting `AppBarColor.Inherit` to the ``` -![Blazor AppBar with Inherit Color](./images/inherit_appbar.png) - -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLgWrWJrsJagjCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLgWrWJrsJagjCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with Inherit Color](./images/inherit_appbar.png)" %} \ No newline at end of file diff --git a/blazor/appbar/style-and-appearance.md b/blazor/appbar/style-and-appearance.md index dbd0c904a8..b8c95eba84 100644 --- a/blazor/appbar/style-and-appearance.md +++ b/blazor/appbar/style-and-appearance.md @@ -45,8 +45,7 @@ CssClass is used for AppBar customization based on the custom class. In the exam ``` -![Blazor AppBar with CssClass customization](./images/cssclass_appbar.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rthgCVMTrrGSfJrV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthgCVMTrrGSfJrV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AppBar with CssClass customization](./images/cssclass_appbar.png)" %} ## HtmlAttributes diff --git a/blazor/autocomplete/data-source.md b/blazor/autocomplete/data-source.md index 86161d213b..5062b2b585 100644 --- a/blazor/autocomplete/data-source.md +++ b/blazor/autocomplete/data-source.md @@ -73,8 +73,7 @@ In the following example, `Name` column from complex data have been mapped to ``` -![Binding Blazor AutoComplete Component Items](./images/blazor-aurocomplete-binding-items.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgirWJLUUcXLNL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgirWJLUUcXLNL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding Blazor AutoComplete Component Items](./images/blazor-aurocomplete-binding-items.png)" %} ### Array of complex object @@ -123,10 +122,7 @@ In the following example, `Country.CountryID` column from complex data have be } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMhCzLUzZpqxv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Binding Complex Items with Blazor AutoComplete](./images/blazor-autocomplete-binding-complex-items.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMhCzLUzZpqxv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Binding Complex Items with Blazor AutoComplete](./images/blazor-autocomplete-binding-complex-items.png)" %} ## Bind to remote data @@ -167,9 +163,7 @@ The following sample displays the first 6 contacts from the **Customers** table } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLAsripLqTYeFHm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with Data Binding](./images/blazor-autocomplete-remote-data.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLAsripLqTYeFHm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with Data Binding](./images/blazor-autocomplete-remote-data.png)" %} ### Web API Adaptor @@ -202,10 +196,7 @@ Use the `WebApiAdaptor` to bind autocomplete with Web API created using OData. } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBUWLMJhAQvJLJV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Blazor AutoComplete with Web API Adaptor](./images/blazor-autocomplete-remote-data.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBUWLMJhAQvJLJV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with Web API Adaptor](./images/blazor-autocomplete-remote-data.png)" %} ### Custom adaptor @@ -313,10 +304,7 @@ Refer to the following example for remote data binding and enabled offline mode. } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUMBWphJDItkcZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Blazor AutoComplete Component in Offline Mode](./images/blazor-autocomplete-remote-data.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUMBWphJDItkcZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete Component in Offline Mode](./images/blazor-autocomplete-remote-data.png)" %} ### ValueTuple data binding @@ -332,10 +320,7 @@ You can bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.va ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrqCVCzLJNucIfr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Blazor AutoComplete ValueTuple Data](./images/blazor_autocomplete_valuetuple.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrqCVCzLJNucIfr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete ValueTuple Data](./images/blazor_autocomplete_valuetuple.png)" %} ## Binding ExpandoObject @@ -462,9 +447,7 @@ You can bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LthgsVWzBToAePUT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with observable collection data binding](./images/blazor_autocomplete_observable-collection.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthgsVWzBToAePUT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with observable collection data binding](./images/blazor_autocomplete_observable-collection.png)" %} ## Entity Framework diff --git a/blazor/autocomplete/filtering.md b/blazor/autocomplete/filtering.md index 88d859d88d..b382c09df5 100644 --- a/blazor/autocomplete/filtering.md +++ b/blazor/autocomplete/filtering.md @@ -68,9 +68,7 @@ In the following example, `StartsWith` filter type has been mapped to the `Filte {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBKMhipBzHIgAvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with Filter Type](./images/filtering/blazor_autocomplete_filter-type.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBKMhipBzHIgAvv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with Filter Type](./images/filtering/blazor_autocomplete_filter-type.png)" %} ## Minimum length @@ -84,9 +82,7 @@ In the following example, the remote request does not fetch the search data unti {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUsBsJhzbSDGTo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Filtering Blazor AutoComplete Items based on Character Count](./images/blazor-autocomplete-filter-based-length.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUsBsJhzbSDGTo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Filtering Blazor AutoComplete Items based on Character Count](./images/blazor-autocomplete-filter-based-length.png)" %} ## Multi column filtering @@ -148,9 +144,7 @@ Refer to the following example to restrict the suggestion list item counts as 3. {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrgMVWTLTmOENnq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Filtering Blazor AutoComplete Items based on Count](./images/blazor-autocomplete-filter-item-count.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrgMVWTLTmOENnq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Filtering Blazor AutoComplete Items based on Count](./images/blazor-autocomplete-filter-item-count.png)" %} ## AutoComplete with google search result @@ -174,9 +168,7 @@ You can highlight the search text in the suggested list items of the autocomplet {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLAMLszLyjsCNWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with highlight property](./images/filtering/blazor_autocomplete_highlight-property.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLAMLszLyjsCNWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with highlight property](./images/filtering/blazor_autocomplete_highlight-property.png)" %} ### Highlighting Search character using method @@ -193,6 +185,4 @@ You can highlight the search text in the suggested list items of the autocomplet {% endhighlight %} -![Blazor AutoComplete with HighLightSearch method](./images/filtering/blazor_dropdown_highLightSearch-method.png) - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rthUsLsphSZYvuHw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthUsLsphSZYvuHw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with HighLightSearch method](./images/filtering/blazor_dropdown_highLightSearch-method.png)" %} diff --git a/blazor/autocomplete/grouping.md b/blazor/autocomplete/grouping.md index 6a231fbf6f..b175604741 100644 --- a/blazor/autocomplete/grouping.md +++ b/blazor/autocomplete/grouping.md @@ -23,9 +23,7 @@ In the following sample, vegetables are grouped according to their category usin {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhqMhMfLJxZyQGD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete Grouping](./images/blazor-autocomplete-grouping.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhqMhMfLJxZyQGD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete Grouping](./images/blazor-autocomplete-grouping.png)" %} ## Fixed group header diff --git a/blazor/autocomplete/highlight-search.md b/blazor/autocomplete/highlight-search.md index 9046ec2c72..7cd868b836 100644 --- a/blazor/autocomplete/highlight-search.md +++ b/blazor/autocomplete/highlight-search.md @@ -17,9 +17,7 @@ You can highlight the search text in the suggested list items of the autocomplet {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLAMLszLyjsCNWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with highlight property](./images/filtering/blazor_autocomplete_highlight-property.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLAMLszLyjsCNWA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with highlight property](./images/filtering/blazor_autocomplete_highlight-property.png)" %} ## Highlight with template @@ -36,9 +34,7 @@ You can highlight the search text in the suggested list items of the autocomplet {% endhighlight %} -![Blazor AutoComplete with HighLightSearch method](./images/filtering/blazor_autocomplete_highLightSearch-method.png) - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rthUsLsphSZYvuHw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthUsLsphSZYvuHw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with HighLightSearch method](./images/filtering/blazor_autocomplete_highLightSearch-method.png)" %} ## Change the highlight style diff --git a/blazor/autocomplete/style.md b/blazor/autocomplete/style.md index f44d684ef9..3d7c8475b7 100644 --- a/blazor/autocomplete/style.md +++ b/blazor/autocomplete/style.md @@ -45,9 +45,7 @@ You can customize the text color of a disabled component by targeting its CSS cl {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLUMBspqpbhLCdp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with Disabled component text color](./images/style/blazor_autocomplete_disabled-text-color.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLUMBspqpbhLCdp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with Disabled component text color](./images/style/blazor_autocomplete_disabled-text-color.png)" %} ## Show the custom icon in dropdown icon @@ -81,9 +79,7 @@ You can customize the appearance of the container element within the autocomplet {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLKMhMJAzRFhNRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete container element customization](./images/style/blazor_autocomplete_appearance-of-container.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLKMhMJAzRFhNRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete container element customization](./images/style/blazor_autocomplete_appearance-of-container.png)" %} ## Customizing the dropdown icon’s color @@ -95,9 +91,7 @@ You can customize the dropdown [icon](https://ej2.syncfusion.com/documentation/a {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVqCVCfqzcCFPUr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete icon color](./images/style/blazor_autocomplete_icon-color.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVqCVCfqzcCFPUr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete icon color](./images/style/blazor_autocomplete_icon-color.png)" %} ## Customizing the focus color @@ -109,9 +103,7 @@ You can customize the component color when it is focused by targeting its CSS cl {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBAMVipgpQeUpvV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete focus color](./images/style/blazor_autocomplete_focus-color.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBAMVipgpQeUpvV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete focus color](./images/style/blazor_autocomplete_focus-color.png)" %} ## Customizing the outline theme's focus color @@ -123,9 +115,7 @@ You can customize the color of the autocomplete component when it is in a focuse {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgiBMzAzcPvKba?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete focusing color outline theme](./images/style/blazor_autocomplete_outline-focus-color.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgiBMzAzcPvKba?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete focusing color outline theme](./images/style/blazor_autocomplete_outline-focus-color.png)" %} ## Customizing the background color of focus, hover, and active items @@ -137,9 +127,7 @@ You can customize the background color and text color of list items within the a {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhUirWJAIjRQrXM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with customizing the focus, hover and active item color](./images/style/blazor_autocomplete_background-color.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhUirWJAIjRQrXM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with customizing the focus, hover and active item color](./images/style/blazor_autocomplete_background-color.png)" %} ## Customizing the appearance of popup element @@ -151,9 +139,7 @@ You can customize the appearance of the popup element within the autocomplete co {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVAMBMTKeChemce?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with customizing popup color](./images/style/blazor_autocomplete_appearance-of-popup.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVAMBMTKeChemce?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with customizing popup color](./images/style/blazor_autocomplete_appearance-of-popup.png)" %} ## Change the HTML attributes @@ -273,9 +259,7 @@ You can add the search icon to the AutoComplete component by overriding the cont {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrAChsTqeiSPGka?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete Search Icon](./images/blazor_searchicon_autocomplete.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrAChsTqeiSPGka?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete Search Icon](./images/blazor_searchicon_autocomplete.png)" %} ## Customizing the float label element's focusing color @@ -287,9 +271,7 @@ You can change the text color of the floating label when it is focused by target {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrgMrMfUfPwJAuJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with float label focusing color](./images/style/blazor_autocomplete_floatlabel-focus-color.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrgMrMfUfPwJAuJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with float label focusing color](./images/style/blazor_autocomplete_floatlabel-focus-color.png)" %} ## Customizing the color of the placeholder text @@ -301,9 +283,7 @@ You can change the color of the placeholder by targeting its CSS class `input.e- {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrKiLszgzkMoAhv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with color placeholder](./images/style/blazor_autocomplete_placeholder-color.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrKiLszgzkMoAhv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with color placeholder](./images/style/blazor_autocomplete_placeholder-color.png)" %} ## Customizing the placeholder to add mandatory indicator(*) @@ -315,9 +295,7 @@ The mandatory indicator `*` can be applied to the placeholder by targeting its C {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrgCBCfqpEyZQOn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with mandatory indicator placeholder](./images/style/blazor_autocomplete_placeholder-with-mandatory.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrgCBCfqpEyZQOn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with mandatory indicator placeholder](./images/style/blazor_autocomplete_placeholder-with-mandatory.png)" %} ## Customizing the text selection color @@ -329,6 +307,4 @@ The appearance of a selected item within a AutoComplete component can be customi {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVgMBsJUzucuFKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor ComboBox with customizing the focus, hover and active item color](./images/style/blazor_autocomplete_text-selection-color.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVgMBsJUzucuFKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ComboBox with customizing the focus, hover and active item color](./images/style/blazor_autocomplete_text-selection-color.png)" %} diff --git a/blazor/autocomplete/templates.md b/blazor/autocomplete/templates.md index bc3378df18..3f8611f461 100644 --- a/blazor/autocomplete/templates.md +++ b/blazor/autocomplete/templates.md @@ -23,9 +23,7 @@ In the following sample, each list item is split into two columns to display rel {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUWLCzKpNiSVjy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with ItemTemplate](./images/blazor-autocomplete-item-template.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUWLCzKpNiSVjy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with ItemTemplate](./images/blazor-autocomplete-item-template.png)" %} ## Group template @@ -39,9 +37,7 @@ In the following sample, employees are grouped according to their country. {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrqiVMzUfBbOtpn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with GroupTemplate](./images/blazor-autocomplete-group-template.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrqiVMzUfBbOtpn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with GroupTemplate](./images/blazor-autocomplete-group-template.png)" %} ## Header template @@ -55,9 +51,7 @@ In the following sample, the list items and its headers are designed and display {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVKChCfATUBVrhy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with HeaderTemplate](./images/blazor-autocomplete-header-template.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVKChCfATUBVrhy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with HeaderTemplate](./images/blazor-autocomplete-header-template.png)" %} ## Footer template @@ -71,9 +65,7 @@ In the following sample, footer element displays the total number of list items {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVKChWpApASinEn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with FooterTemplate](./images/blazor-autocomplete-footer-template.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVKChWpApASinEn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with FooterTemplate](./images/blazor-autocomplete-footer-template.png)" %} ## No records template @@ -87,9 +79,7 @@ In the following sample, suggestion list content displays the notification of no {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUWLCpKTJNdtaV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete without Data](./images/blazor-autocomplete-without-data.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUWLCpKTJNdtaV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete without Data](./images/blazor-autocomplete-without-data.png)" %} ## Action failure template diff --git a/blazor/autocomplete/virtualization.md b/blazor/autocomplete/virtualization.md index c9a89ea305..55741d0a91 100644 --- a/blazor/autocomplete/virtualization.md +++ b/blazor/autocomplete/virtualization.md @@ -21,9 +21,7 @@ This feature is applicable to both local and remote data scenarios, providing fl {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhqsLsJUSqMNRqD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor AutoComplete with virtualization](./images/blazor_autocomplete_virtualization.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhqsLsJUSqMNRqD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AutoComplete with virtualization](./images/blazor_autocomplete_virtualization.gif)" %} ## Remote data From 7d98a1379f41ec668741bcc70c43c5d6f9810025 Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Tue, 11 Nov 2025 18:57:05 +0530 Subject: [PATCH 3/5] Update preview sample output of Blazor components UG documentation --- blazor/barcode/barcodeGenerator.md | 40 ++++--------- blazor/barcode/datamatrixgenerator.md | 12 +--- blazor/barcode/qrcodegenerator.md | 12 +--- blazor/breadcrumb/breadcrumb-items.md | 12 +--- blazor/breadcrumb/getting-started.md | 4 +- blazor/breadcrumb/icons.md | 20 ++----- blazor/breadcrumb/navigation.md | 12 +--- blazor/breadcrumb/overflow.md | 20 ++----- blazor/breadcrumb/style-and-appearance.md | 4 +- blazor/breadcrumb/templates.md | 12 +--- blazor/bullet-chart/actual-bar.md | 12 +--- blazor/bullet-chart/axis-customization.md | 36 +++-------- .../bullet-chart/bullet-chart-dimensions.md | 4 +- blazor/bullet-chart/data-binding.md | 4 +- blazor/bullet-chart/ranges.md | 8 +-- blazor/button-group/selection-and-nesting.md | 16 ++--- blazor/button-group/types-and-styles.md | 18 ++---- blazor/button/how-to/create-a-block-button.md | 4 +- .../how-to/customize-button-appearance.md | 4 +- blazor/button/how-to/repeat-button.md | 4 +- blazor/button/how-to/right-to-left.md | 5 +- .../button/how-to/set-the-disabled-state.md | 4 +- blazor/button/how-to/tooltip-for-button.md | 4 +- blazor/button/native-event.md | 4 +- blazor/button/style-and-appearance.md | 4 +- blazor/button/types-and-styles.md | 26 ++------ blazor/calendar/calendar-views.md | 10 +--- blazor/calendar/date-range.md | 4 +- blazor/calendar/dateonly-support.md | 4 +- .../how-to/change-the-first-day-of-week.md | 4 +- .../render-the-calendar-with-week-numbers.md | 4 +- .../how-to/show-dates-of-other-months.md | 4 +- blazor/calendar/multi-select.md | 5 +- blazor/calendar/special-dates.md | 4 +- blazor/card/header-content.md | 4 +- blazor/card/horizontal.md | 4 +- blazor/carousel/animations-and-transitions.md | 16 ++--- blazor/carousel/navigators-and-indicators.md | 48 ++++----------- blazor/carousel/populating-items.md | 12 +--- blazor/chart/axis-customization.md | 32 +++------- blazor/chart/axis-labels.md | 59 +++++-------------- blazor/chart/chart-types/area.md | 4 +- blazor/chart/chart-types/bar.md | 13 ++-- blazor/chart/chart-types/box-whisker.md | 4 +- blazor/chart/chart-types/bubble.md | 4 +- blazor/chart/chart-types/candle.md | 4 +- blazor/chart/chart-types/column.md | 13 ++-- blazor/chart/chart-types/error-bar.md | 4 +- .../chart/chart-types/high-low-open-close.md | 4 +- blazor/chart/chart-types/high-low.md | 4 +- blazor/chart/chart-types/histogram.md | 4 +- blazor/chart/chart-types/line.md | 4 +- blazor/chart/chart-types/pare-to.md | 4 +- blazor/chart/chart-types/polar.md | 4 +- blazor/chart/chart-types/radar.md | 4 +- blazor/chart/chart-types/range-area.md | 4 +- blazor/chart/chart-types/range-column.md | 10 +--- blazor/chart/chart-types/range-step-area.md | 4 +- blazor/chart/chart-types/scatter.md | 4 +- blazor/chart/chart-types/spline-area.md | 4 +- blazor/chart/chart-types/spline-range-area.md | 4 +- blazor/chart/chart-types/spline.md | 4 +- blazor/chart/chart-types/stack-area.md | 4 +- blazor/chart/chart-types/stack-bar.md | 10 +--- blazor/chart/chart-types/stack-column.md | 10 +--- blazor/chart/chart-types/stack-line.md | 4 +- blazor/chart/chart-types/stacked-area.md | 4 +- blazor/chart/chart-types/stacked-bar.md | 10 +--- blazor/chart/chart-types/stacked-column.md | 10 +--- blazor/chart/chart-types/stacked-line.md | 4 +- blazor/chart/chart-types/step-area.md | 4 +- blazor/chart/chart-types/step-line.md | 4 +- blazor/chart/chart-types/vertical-chart.md | 4 +- blazor/chart/chart-types/waterfall.md | 10 +--- blazor/chart/how-to/lazy-loading.md | 4 +- 75 files changed, 180 insertions(+), 529 deletions(-) diff --git a/blazor/barcode/barcodeGenerator.md b/blazor/barcode/barcodeGenerator.md index 2cd120eafe..ad9c4402b5 100644 --- a/blazor/barcode/barcodeGenerator.md +++ b/blazor/barcode/barcodeGenerator.md @@ -19,9 +19,7 @@ The Code 39 character set includes the digits 0-9, the letters A-Z (upper case o ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLAWhWpKaDiwKIJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Code39 in Blazor Barcode](images/blazor-code39-barcode.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLAWhWpKaDiwKIJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Code39 in Blazor Barcode](images/blazor-code39-barcode.png)" %} ## Code39 Extended @@ -33,9 +31,7 @@ Code 39 Extended is an extended version of Code 39 that supports ASCII character ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLAWBWTUEDJqMHY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Code39 Extended in Blazor Barcode](images/blazor-code39-extended-barcode.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLAWBWTUEDJqMHY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Code39 Extended in Blazor Barcode](images/blazor-code39-extended-barcode.png)" %} ## Code 11 @@ -47,9 +43,7 @@ Code 11 is used primarily for labeling the telecommunication equipment’s. The ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhKMLWJKunSzaPB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Code11 in Blazor Barcode](images/blazor-code11-barcode.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhKMLWJKunSzaPB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Code11 in Blazor Barcode](images/blazor-code11-barcode.png)" %} ## Codabar @@ -65,9 +59,7 @@ The characters A, B, C and D are used as start and stop characters. Codabar is u ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVUWrMfTZgKRrDa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Codabar in Blazor Barcode](images/blazor-codebar-barcode.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVUWrMfTZgKRrDa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Codabar in Blazor Barcode](images/blazor-codebar-barcode.png)" %} ## Code 32 @@ -85,9 +77,7 @@ The value to be encoded must be 8 digits Pharmacode (prefix it with ‘0’ if n ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgWBWJfDKHBhkK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Code32 in Blazor Barcode](images/blazor-code32-barcode.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgWBWJfDKHBhkK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Code32 in Blazor Barcode](images/blazor-code32-barcode.png)" %} ## Code 93 @@ -99,9 +89,7 @@ Code 93 is designed to complement and improve Code 39. It can represent the enti ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBgMhszJtgvyKlX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Code 93 in Blazor Barcode](images/blazor-code93-barcode.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBgMhszJtgvyKlX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Code 93 in Blazor Barcode](images/blazor-code93-barcode.png)" %} ## Code 93 Extended @@ -127,9 +115,7 @@ The last seven characters of Code Sets A and B (character values 96 - 102) and t ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhqMrsJfNTBcTKn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Code 128 Special Characters in Blazor Barcode](images/blazor-code128-barcode.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhqMrsJfNTBcTKn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Code 128 Special Characters in Blazor Barcode](images/blazor-code128-barcode.png)" %} ## Customizing the Barcode color @@ -141,9 +127,7 @@ A page or printed media with barcode often appears colorful in the background an ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLKCVMfpZpePoSk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Blazor Barcode Color](images/blazor-barcode-color-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLKCVMfpZpePoSk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Barcode Color](images/blazor-barcode-color-customization.png)" %} ## Customizing the Barcode dimension @@ -155,9 +139,7 @@ The dimension of the barcode can be changed using the [Height](https://help.sync ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVACViTTDTFyxuE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Blazor Barcode Dimension](images/blazor-barcode-dimension-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVACViTTDTFyxuE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Barcode Dimension](images/blazor-barcode-dimension-customization.png)" %} ## Customizing the text @@ -171,9 +153,7 @@ In barcode generators, you can customize the barcode text by using display [Text ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLqiVspptosptJA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing the Text in Blazor Barcode](images/blazor-barcode-text-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLqiVspptosptJA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing the Text in Blazor Barcode](images/blazor-barcode-text-customization.png)" %} ## Enable Check Sum diff --git a/blazor/barcode/datamatrixgenerator.md b/blazor/barcode/datamatrixgenerator.md index e4292cd4f7..49417b1b81 100644 --- a/blazor/barcode/datamatrixgenerator.md +++ b/blazor/barcode/datamatrixgenerator.md @@ -19,9 +19,7 @@ documentation: ug ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrAWrMTJZbJfybQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Data Matrix Generator in Blazor Barcode](images/blazor-barcode-with-datamatrix.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrAWrMTJZbJfybQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Matrix Generator in Blazor Barcode](images/blazor-barcode-with-datamatrix.png)" %} ## Customizing the Barcode color @@ -33,9 +31,7 @@ A page or printed media with barcode often appears colorful in the background an ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrqMVCfzDOMreTm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Blazor Barcode Color in Data Matrix Generator](images/blazor-barcode-datamatrix-color-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrqMVCfzDOMreTm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Barcode Color in Data Matrix Generator](images/blazor-barcode-datamatrix-color-customization.png)" %} ## Customizing the Barcode dimension @@ -61,9 +57,7 @@ In barcode generators, you can customize the barcode text by using the display [ ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUiLMffNOmVTuG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Blazor Barcode Text in Data Matrix Generator](images/blazor-barcode-text-in-datamatrix.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUiLMffNOmVTuG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Barcode Text in Data Matrix Generator](images/blazor-barcode-text-in-datamatrix.png)" %} ## Event diff --git a/blazor/barcode/qrcodegenerator.md b/blazor/barcode/qrcodegenerator.md index 1d69a7017d..f23e983f8b 100644 --- a/blazor/barcode/qrcodegenerator.md +++ b/blazor/barcode/qrcodegenerator.md @@ -19,9 +19,7 @@ The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htBqsLMJfZxnCqnf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![QR Code in Blazor Barcode Component](images/blazor-barcode-with-qrcode.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBqsLMJfZxnCqnf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[QR Code in Blazor Barcode Component](images/blazor-barcode-with-qrcode.png)" %} ## Customizing the Barcode color @@ -33,9 +31,7 @@ A page or printed media containing a barcode often appears colorful in the backg ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBUiVMzfXduXXET?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing QR Code Color in Blazor Barcode](images/blazor-barcode-qrcode-color-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBUiVMzfXduXXET?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing QR Code Color in Blazor Barcode](images/blazor-barcode-qrcode-color-customization.png)" %} ## Customizing the Barcode dimension @@ -61,9 +57,7 @@ In barcode generators, you can customize the barcode text by using the display [ ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrKMVCTTXGflLco?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing the Text for QR Code in Blazor Barcode](images/blazor-barcode-qrcode-text-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrKMVCTTXGflLco?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing the Text for QR Code in Blazor Barcode](images/blazor-barcode-qrcode-text-customization.png)" %} ## Error Correction Level diff --git a/blazor/breadcrumb/breadcrumb-items.md b/blazor/breadcrumb/breadcrumb-items.md index 69bfd7846c..6db36308f9 100644 --- a/blazor/breadcrumb/breadcrumb-items.md +++ b/blazor/breadcrumb/breadcrumb-items.md @@ -31,9 +31,7 @@ The [Blazor Breadcrumb](https://www.syncfusion.com/blazor-components/blazor-brea ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqCLsJJBaogECl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-tag.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqCLsJJBaogECl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-tag.png)" %} ## Items based on current URL @@ -44,9 +42,7 @@ The Breadcrumb items can be generated based on the current URL of the page when ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhUWVWJzVObSwiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-current-url.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhUWVWJzVObSwiI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-current-url.png)" %} N> This output screenshot shows the [Bind to Location](https://blazor.syncfusion.com/demos/breadcrumb/bind-to-location) sample. @@ -60,9 +56,7 @@ You can generate the Breadcrumb items by providing the [Url](https://help.syncfu ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLAMBWpzqZWfPfm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-static-url.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLAMBWpzqZWfPfm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-static-url.png)" %} ## Add or remove the Breadcrumb items diff --git a/blazor/breadcrumb/getting-started.md b/blazor/breadcrumb/getting-started.md index b330a59ae4..f1bec6bacf 100644 --- a/blazor/breadcrumb/getting-started.md +++ b/blazor/breadcrumb/getting-started.md @@ -155,9 +155,7 @@ Add the Syncfusion® Blazor Breadcrumb compo * Press F5 to run the application. Then, the Syncfusion® Blazor Breadcrumb component will be rendered in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/blazor-breadcrumb-component.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpNiBSgmQNkpCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-component.png)" %} N> The Breadcrumb component will render based on the current URL, when the Breadcrumb items are not specified. diff --git a/blazor/breadcrumb/icons.md b/blazor/breadcrumb/icons.md index 684a465673..5992eb3bcc 100644 --- a/blazor/breadcrumb/icons.md +++ b/blazor/breadcrumb/icons.md @@ -27,9 +27,7 @@ To place the font icon on the Breadcrumb item, set the [IconCss](https://help.sy ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgWLMTfUsCSUjG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-items.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLgWLMTfUsCSUjG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-items.png)" %} N> By default, the icon is positioned to the left side of the item. @@ -57,9 +55,7 @@ In the Breadcrumb component, you can add images to the items using [IconCss](htt } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgsLMppKsTBQHd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/image.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgsLMppKsTBQHd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/image.png)" %} ## Breadcrumb with SVG image @@ -85,9 +81,7 @@ In the Breadcrumb component, SVG image can be added for the items using the [Ico } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrgsLCJfAixuNYA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Breadcrumb Sample](./images/svg.PNG) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrgsLCJfAixuNYA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Breadcrumb Sample](./images/svg.PNG)" %} ## Icon only @@ -106,9 +100,7 @@ In the following example, Breadcrumb items are demonstrated with only icons by p ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrgWrWTTqsOeruV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Breadcrumb Sample](./images/icon-only.PNG) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrgWrWTTqsOeruV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Breadcrumb Sample](./images/icon-only.PNG)" %} ## Show icon only for first item @@ -126,6 +118,4 @@ To show icon only for the first item in the Breadcrumb component, add icons to t ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLgChsTfKrhKYox?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-items.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLgChsTfKrhKYox?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-items.png)" %} \ No newline at end of file diff --git a/blazor/breadcrumb/navigation.md b/blazor/breadcrumb/navigation.md index e33de13812..6a355090ac 100644 --- a/blazor/breadcrumb/navigation.md +++ b/blazor/breadcrumb/navigation.md @@ -29,9 +29,7 @@ You can specify relative URL in the [Url](https://help.syncfusion.com/cr/blazor/ ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUCBsJJKhvVXTj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-relative-url.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUCBsJJKhvVXTj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-relative-url.png)" %} ## Absolute URL @@ -50,9 +48,7 @@ You can specify absolute URL in the [Url](https://help.syncfusion.com/cr/blazor/ ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhKsrifpggirdDv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-absolute-url.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhKsrifpggirdDv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-absolute-url.png)" %} ## Enable navigation for last Breadcrumb item @@ -71,6 +67,4 @@ Breadcrumb enables the navigation for the last item by setting the [EnableActive ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrKWhMpfqgKOtmL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-enable-navigation.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrKWhMpfqgKOtmL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-enable-navigation.png)" %} \ No newline at end of file diff --git a/blazor/breadcrumb/overflow.md b/blazor/breadcrumb/overflow.md index bbb55f13bb..255a287b1d 100644 --- a/blazor/breadcrumb/overflow.md +++ b/blazor/breadcrumb/overflow.md @@ -44,9 +44,7 @@ Collapsed mode shows the first and last Breadcrumb items and hides the remaining ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLsTTKpNEpBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/breadcrumb-collapsed.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLsTTKpNEpBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-collapsed.png)" %} ## Menu @@ -70,9 +68,7 @@ Menu mode shows the number of Breadcrumb items that can be accommodated within t ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBqMhszzUTTXZrh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/breadcrumb-menu.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBqMhszzUTTXZrh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-menu.png)" %} ## Wrap @@ -96,9 +92,7 @@ Wrap mode wraps the items to multiple lines when the Breadcrumb’s width exceed ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAsLCzJKeBQENj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/breadcrumb-wrap.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAsLCzJKeBQENj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-wrap.png)" %} ## Scroll @@ -124,9 +118,7 @@ Scroll mode shows an HTML scroll bar when the Breadcrumb’s width exceeds the c ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrqihCTJgoRdALp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/breadcrumb-scroll.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrqihCTJgoRdALp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-scroll.png)" %} ## Hidden @@ -150,9 +142,7 @@ Hidden mode shows the maximum number of items possible in the container space an ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVqChCzJqeEiZQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/bread-overflow-hidden.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVqChCzJqeEiZQD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/bread-overflow-hidden.png)" %} ## None diff --git a/blazor/breadcrumb/style-and-appearance.md b/blazor/breadcrumb/style-and-appearance.md index 340436db6f..11ba7d5e38 100644 --- a/blazor/breadcrumb/style-and-appearance.md +++ b/blazor/breadcrumb/style-and-appearance.md @@ -53,6 +53,4 @@ Use the following CSS to customize the background and text color of Breadcrumb. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhoZsCXAGIEezKH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} - -![Blazor Breadcrumb with Style and Appearance](./images/blazor-breadcrumb-style-and-appearance.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhoZsCXAGIEezKH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb with Style and Appearance](./images/blazor-breadcrumb-style-and-appearance.png)" %} \ No newline at end of file diff --git a/blazor/breadcrumb/templates.md b/blazor/breadcrumb/templates.md index 5b75ad02db..3497a8a7f5 100644 --- a/blazor/breadcrumb/templates.md +++ b/blazor/breadcrumb/templates.md @@ -47,9 +47,7 @@ In the following example, shopping cart details are used as Breadcrumb items and ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUsrippKxnwhYp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/blazor-Breadcrumb-item-template.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUsrippKxnwhYp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-Breadcrumb-item-template.png)" %} ## Separator template @@ -79,9 +77,7 @@ In the following example, the separators are customized with icons using [Separa } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLUsrWzJARuZSHz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/blazor-breadcrumb-separator-temp.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLUsrWzJARuZSHz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/blazor-breadcrumb-separator-temp.png)" %} ## Customize Specific Item Template @@ -148,6 +144,4 @@ The specific breadcrumb item can be customizable by adding the custom element as } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgCrsTpAvZIhgB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Breadcrumb Component](./images/breadcrumb-specific-item-template.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBgCrsTpAvZIhgB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Breadcrumb Component](./images/breadcrumb-specific-item-template.png)" %} \ No newline at end of file diff --git a/blazor/bullet-chart/actual-bar.md b/blazor/bullet-chart/actual-bar.md index 393604685c..14c355c3c0 100644 --- a/blazor/bullet-chart/actual-bar.md +++ b/blazor/bullet-chart/actual-bar.md @@ -33,9 +33,7 @@ To display the primary data or the current value of the data being measured know }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVyXuBzBauPiECo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVyXuBzBauPiECo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar.png)" %} ## Types of actual bar @@ -55,9 +53,7 @@ The shape of the actual bar can be customized using the [Type](https://help.sync N> Refer to the [code block](#actual-bar-in-blazor-bullet-chart-component) to know more about the property value of the **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVSZuLfKNDhZQsy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Bullet Chart with Dot Actual Bar](images/blazor-bullet-chart-dot-actual-bar.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVSZuLfKNDhZQsy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Dot Actual Bar](images/blazor-bullet-chart-dot-actual-bar.png)" %} ## Actual bar customization @@ -82,6 +78,4 @@ The following properties will be used to customize the actual bar. N> Refer to the [code block](#actual-bar-in-blazor-bullet-chart-component) to know more about the property value of the **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVIDEVTKZNwIDPb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar-customization.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVIDEVTKZNwIDPb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar-customization.png)" %} \ No newline at end of file diff --git a/blazor/bullet-chart/axis-customization.md b/blazor/bullet-chart/axis-customization.md index 057e57b00b..3ed4dad11d 100644 --- a/blazor/bullet-chart/axis-customization.md +++ b/blazor/bullet-chart/axis-customization.md @@ -43,9 +43,7 @@ The following properties can be used to customize [MajorTicklines](https://help. }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAshrMpzsZIqTR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Major and Minor TickLines in Blazor Bullet Chart](images/blazor-bullet-chart-tick-line-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAshrMpzsZIqTR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Major and Minor TickLines in Blazor Bullet Chart](images/blazor-bullet-chart-tick-line-customization.png)" %} ## Tick placement @@ -65,9 +63,7 @@ The major and the minor ticks can be placed [Inside](https://help.syncfusion.com N> Refer to the [code block](#majorticklines-and-minorticklines-customization) to know about the property value of **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgiLVCTTsfCtyC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Tick Position in Blazor Bullet Chart](images/blazor-bullet-chart-tick-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgiLVCTTsfCtyC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Tick Position in Blazor Bullet Chart](images/blazor-bullet-chart-tick-position.png)" %} ## Label format @@ -87,9 +83,7 @@ The axis labels support all the globalize formats and can be changed using the [ N> Refer to the [code block](#majorticklines-and-minorticklines-customization) to know about the property value of **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgMBVMpfCnRdov?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Label Format in Blazor Bullet Chart](images/blazor-bullet-chart-label-format.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgMBVMpfCnRdov?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Format in Blazor Bullet Chart](images/blazor-bullet-chart-label-format.png)" %} The following table describes the result of applying some commonly used formats to numeric axis values. @@ -179,9 +173,7 @@ To separate the groups of thousands, set the [EnableGroupSeparator](https://help } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthqsBLMzfBQwPJD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Grouping in Blazor Bullet Chart](images/blazor-bullet-chart-grouping.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthqsBLMzfBQwPJD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Bullet Chart](images/blazor-bullet-chart-grouping.png)" %} ## Custom label format @@ -201,9 +193,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. N> Refer to the [code block](#grouping-separator) to know about the property value of **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUshVCfpgssdbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Bullet Chart with Custom Label Format](images/blazor-bullet-chart-custom-label-format.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUshVCfpgssdbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Custom Label Format](images/blazor-bullet-chart-custom-label-format.png)" %} ## Label placement @@ -223,9 +213,7 @@ Label can be placed [Inside](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl N> Refer to the [code block](#grouping-separator) to know about the property value of **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUMrBWJfgftZky?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Label Position in Blazor Bullet Chart](images/blazor-bullet-chart-labels-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUMrBWJfgftZky?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Position in Blazor Bullet Chart](images/blazor-bullet-chart-labels-position.png)" %} ## Opposed position @@ -245,9 +233,7 @@ To place an axis opposite to its original position, set the [OpposedPosition](ht N> Refer to the [code block](#grouping-separator) to know about the property value of **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBqMBVWzJqnbrpi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Bullet Chart with Opposed Position](images/blazor-bullet-chart-opposed-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBqMBVWzJqnbrpi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Opposed Position](images/blazor-bullet-chart-opposed-position.png)" %} ## Category label @@ -278,9 +264,7 @@ The [Bullet Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhgsrViJpTWnjZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Bullet Chart with Category Label](images/blazor-bullet-chart-category-label.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhgsrViJpTWnjZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Category Label](images/blazor-bullet-chart-category-label.png)" %} ## Axis label and category label customization @@ -302,6 +286,4 @@ The label color, opacity, font size, font family, font weight, and font style ca N> Refer to the [code block](#category-label) to know about the property value of **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgWrLCzTJTgHRy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Axis and Category Label in Blazor Bullet Chart](images/blazor-bullet-chart-label-customization.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgWrLCzTJTgHRy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Axis and Category Label in Blazor Bullet Chart](images/blazor-bullet-chart-label-customization.png)" %} \ No newline at end of file diff --git a/blazor/bullet-chart/bullet-chart-dimensions.md b/blazor/bullet-chart/bullet-chart-dimensions.md index f5267492df..cd7ec91fcb 100644 --- a/blazor/bullet-chart/bullet-chart-dimensions.md +++ b/blazor/bullet-chart/bullet-chart-dimensions.md @@ -90,6 +90,4 @@ The [BulletChartMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. N> Refer to the [code block](#size-for-container) to know about the property value of **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBACrrWzKabABVG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Bullet Chart with Margin](images/blazor-bullet-chart-margin.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBACrrWzKabABVG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Margin](images/blazor-bullet-chart-margin.png)" %} \ No newline at end of file diff --git a/blazor/bullet-chart/data-binding.md b/blazor/bullet-chart/data-binding.md index b732b4aa4c..31a6acfbbb 100644 --- a/blazor/bullet-chart/data-binding.md +++ b/blazor/bullet-chart/data-binding.md @@ -41,6 +41,4 @@ The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVKshVizpSfJRvO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Data Binding in Blazor Bullet Chart](images/blazor-bullet-chart-data-binding.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVKshVizpSfJRvO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor Bullet Chart](images/blazor-bullet-chart-data-binding.png)" %} \ No newline at end of file diff --git a/blazor/bullet-chart/ranges.md b/blazor/bullet-chart/ranges.md index 0837c0c3ab..df8f8d7c1e 100644 --- a/blazor/bullet-chart/ranges.md +++ b/blazor/bullet-chart/ranges.md @@ -34,9 +34,7 @@ Ranges represent the quality of a specific range such as **Good**, **Bad** and * }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUiLLiTfIkQhfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Ranges in Blazor Bullet Chart](images/blazor-bullet-chart-range.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUiLLiTfIkQhfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Ranges in Blazor Bullet Chart](images/blazor-bullet-chart-range.png)" %} ## Color customization @@ -70,6 +68,4 @@ Enhance the readability of ranges with color and opacity. It can be applied usin }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBUWBrWJJHrSIXJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Ranges with Color in Blazor Bullet Chart](images/blazor-bullet-chart-range-customization.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBUWBrWJJHrSIXJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Ranges with Color in Blazor Bullet Chart](images/blazor-bullet-chart-range-customization.png)" %} \ No newline at end of file diff --git a/blazor/button-group/selection-and-nesting.md b/blazor/button-group/selection-and-nesting.md index 4ba436411d..df1d91c4b6 100644 --- a/blazor/button-group/selection-and-nesting.md +++ b/blazor/button-group/selection-and-nesting.md @@ -46,9 +46,7 @@ The following example illustrates the single selection behavior in ButtonGroup. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBzsDVOTbttngcl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor ButtonGroup with Single Selection](./images/blazor-buttongroup-single-selection.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBzsDVOTbttngcl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup with Single Selection](./images/blazor-buttongroup-single-selection.png)" %} ## Multiple selection @@ -85,9 +83,7 @@ The following example illustrates the multiple selection behavior in ButtonGroup ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLfitrYfutrvLMs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor ButtonGroup with Multiple Selection](./images/blazor-buttongroup-multiple-selection.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLfitrYfutrvLMs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup with Multiple Selection](./images/blazor-buttongroup-multiple-selection.png)" %} ## Nesting @@ -116,9 +112,7 @@ In the following example, the DropDownButton component can be added in ButtonGro ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrUsLVrClyyBbnb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor ButtonGroup with DropDown Button](./images/blazor-buttongroup-with-dropdown.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrUsLVrClyyBbnb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup with DropDown Button](./images/blazor-buttongroup-with-dropdown.png)" %} ### SplitButton @@ -140,6 +134,4 @@ In the following example, SplitButton component can be added in ButtonGroup tag. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBgMhVLilSvoAeu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor ButtonGroup with SplitButton](./images/blazor-buttongroup-with-splitbutton.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBgMhVLilSvoAeu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup with SplitButton](./images/blazor-buttongroup-with-splitbutton.png)" %} \ No newline at end of file diff --git a/blazor/button-group/types-and-styles.md b/blazor/button-group/types-and-styles.md index 02727ba228..8d6225997b 100644 --- a/blazor/button-group/types-and-styles.md +++ b/blazor/button-group/types-and-styles.md @@ -40,9 +40,7 @@ The Blazor ButtonGroup has the following predefined styles that can be defined u ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrUWrVhsFgtTPNP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor ButtonGroup with different Style](./images/blazor-buttongroup-style.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrUWrVhsFgtTPNP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ButtonGroup with different Style](./images/blazor-buttongroup-style.png)" %} N> Predefined ButtonGroup styles provide only the visual indication. So, ButtonGroup content should define the ButtonGroup style for the users of assistive technologies such as screen readers. @@ -88,9 +86,7 @@ A round ButtonGroup is shaped like a circle. Usually, it contains an icon repres ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthKWBVBCPUzgjog?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Displaying different Type of ButtonGroup Component](./images/blazor-buttongroup-type.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthKWBVBCPUzgjog?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying different Type of ButtonGroup Component](./images/blazor-buttongroup-type.png)" %} ## Icons @@ -118,10 +114,7 @@ To create ButtonGroup with icons, [IconCss](https://help.syncfusion.com/cr/blazo ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjByDhrHzXmJmyeK?appbar=true&editor=true&result=true&errorlist=true&theme=material" %} - - -![Blazor ButtonGroup with Icon](./images/blazor-buttongroup-icon.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjByDhrHzXmJmyeK?appbar=true&editor=true&result=true&errorlist=true&theme=material" backgroundimage "[Blazor ButtonGroup with Icon](./images/blazor-buttongroup-icon.png)" %} ## ButtonGroup size @@ -142,7 +135,4 @@ The two types of ButtonGroup sizes are default and small. To change the size of ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrgirVBMPpAJRYg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Changing Blazor ButtonGroup Size](./images/blazor-buttongroup-size.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrgirVBMPpAJRYg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor ButtonGroup Size](./images/blazor-buttongroup-size.png)" %} \ No newline at end of file diff --git a/blazor/button/how-to/create-a-block-button.md b/blazor/button/how-to/create-a-block-button.md index 6104871cde..14510939c8 100644 --- a/blazor/button/how-to/create-a-block-button.md +++ b/blazor/button/how-to/create-a-block-button.md @@ -20,6 +20,4 @@ You can customize a Button into a Block Button that will span the entire width o ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrKWVVBMmGAcBTQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Block Button](./../images/blazor-block-button.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrKWVVBMmGAcBTQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Block Button](./../images/blazor-block-button.png)" %} \ No newline at end of file diff --git a/blazor/button/how-to/customize-button-appearance.md b/blazor/button/how-to/customize-button-appearance.md index 5ea9aacd07..3a354e91fe 100644 --- a/blazor/button/how-to/customize-button-appearance.md +++ b/blazor/button/how-to/customize-button-appearance.md @@ -32,6 +32,4 @@ You can customize the appearance of the Button by using the Cascading Style Shee ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLKMBBBsmGcZMPJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Blazor Button Appearance](./../images/blazor-button-customization.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLKMBBBsmGcZMPJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Button Appearance](./../images/blazor-button-customization.png)" %} \ No newline at end of file diff --git a/blazor/button/how-to/repeat-button.md b/blazor/button/how-to/repeat-button.md index 28bfc5c887..ab546d3091 100644 --- a/blazor/button/how-to/repeat-button.md +++ b/blazor/button/how-to/repeat-button.md @@ -57,6 +57,4 @@ The following example explains about how to achieve Repeat Button in mouse and t ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrUCVhhiGkNFPZK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Repeat Button in Blazor Button Component](./../images/blazor-button-with-repeat-button.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrUCVhhiGkNFPZK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Repeat Button in Blazor Button Component](./../images/blazor-button-with-repeat-button.png)" %} \ No newline at end of file diff --git a/blazor/button/how-to/right-to-left.md b/blazor/button/how-to/right-to-left.md index acfc9c368a..ddc220de78 100644 --- a/blazor/button/how-to/right-to-left.md +++ b/blazor/button/how-to/right-to-left.md @@ -25,7 +25,4 @@ The following example illustrates how to enable right-to-left support in Button ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVgirrrCcOUEMiy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Right to Left in Blazor Button](./../images/blazor-button-in-right-to-left.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVgirrrCcOUEMiy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Right to Left in Blazor Button](./../images/blazor-button-in-right-to-left.png)" %} \ No newline at end of file diff --git a/blazor/button/how-to/set-the-disabled-state.md b/blazor/button/how-to/set-the-disabled-state.md index 21b7a8a507..99b9b1d24c 100644 --- a/blazor/button/how-to/set-the-disabled-state.md +++ b/blazor/button/how-to/set-the-disabled-state.md @@ -30,6 +30,4 @@ The following example demonstrates Button in `Disabled` state. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBqiBVhMGkwXmsI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Disable State in Blazor Button](./../images/blazor-button-disable-state.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBqiBVhMGkwXmsI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Disable State in Blazor Button](./../images/blazor-button-disable-state.png)" %} \ No newline at end of file diff --git a/blazor/button/how-to/tooltip-for-button.md b/blazor/button/how-to/tooltip-for-button.md index 3d3364d53e..c5df8eaaef 100644 --- a/blazor/button/how-to/tooltip-for-button.md +++ b/blazor/button/how-to/tooltip-for-button.md @@ -23,6 +23,4 @@ Tooltip can be shown on Button hover and it can be achieved by title attribute. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVqMVVLsbtDTzCr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Button displays ToolTip](./../images/blazor-button-tooltip.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVqMVVLsbtDTzCr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button displays ToolTip](./../images/blazor-button-tooltip.png)" %} diff --git a/blazor/button/native-event.md b/blazor/button/native-event.md index f168981333..f3f5314fe8 100644 --- a/blazor/button/native-event.md +++ b/blazor/button/native-event.md @@ -56,6 +56,4 @@ The `onclick` attribute is used to bind the click event for button. Here, we hav } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqMVBhCcqcrEoi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Native Event Button.](images/blazor-native-event-button.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqMVBhCcqcrEoi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Native Event Button.](images/blazor-native-event-button.png)" %} \ No newline at end of file diff --git a/blazor/button/style-and-appearance.md b/blazor/button/style-and-appearance.md index 81911f31b3..5b94f2a275 100644 --- a/blazor/button/style-and-appearance.md +++ b/blazor/button/style-and-appearance.md @@ -44,6 +44,4 @@ Use the following CSS to customize the background color of button while clicking ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLKMVhVimxEUqsl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Button with Style and Appearance](./images/blazor-button-style-and-appearance.gif) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLKMVhVimxEUqsl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button with Style and Appearance](./images/blazor-button-style-and-appearance.gif)" %} \ No newline at end of file diff --git a/blazor/button/types-and-styles.md b/blazor/button/types-and-styles.md index 2742bd71db..7163441a7b 100644 --- a/blazor/button/types-and-styles.md +++ b/blazor/button/types-and-styles.md @@ -37,9 +37,7 @@ The Blazor Button has the following predefined styles that can be defined using ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVgChrhiGfocEOi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Button Component with different Styles](./images/blazor-button-with-different-style.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVgChrhiGfocEOi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button Component with different Styles](./images/blazor-button-with-different-style.png)" %} N> Predefined Button styles provide only the visual indication. So, Button content should define the Button style for the users of assistive technologies such as screen readers. @@ -79,9 +77,7 @@ A Round Button is circular in shape. Usually, it contains an icon representing i ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUsBLBsQJYnPIv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Button with different Types](./images/blazor-button-types.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUsBLBsQJYnPIv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button with different Types](./images/blazor-button-types.png)" %} ### Primary Button @@ -93,9 +89,7 @@ The primary button is styled with background color and it is used to represent a Primary ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgCVrLWmyJUodV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Primary Button](./images/blazor-primary-button.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhgCVrLWmyJUodV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Primary Button](./images/blazor-primary-button.png)" %} ### Toggle Button @@ -140,9 +134,7 @@ A toggle Button allows you to change between the two states. The Button is activ ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBAiVVrMGexGnCy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Toggle Button](./images/blazor-toggle-button.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBAiVVrMGexGnCy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Toggle Button](./images/blazor-toggle-button.png)" %} ## Icons @@ -167,10 +159,7 @@ The Button can have an icon to provide the visual representation of the action. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUCVrVscdsTwUD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Blazor Button with Icon](./images/blazor-button-icon.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBUCVrVscdsTwUD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button with Icon](./images/blazor-button-icon.png)" %} ## Button size @@ -184,7 +173,4 @@ The two types of Button sizes are default and small. To change the size of the d ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLAWLVrWcxyVIJP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Blazor Button with different Size](./images/blazor-button-with-different-size.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLAWLVrWcxyVIJP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Button with different Size](./images/blazor-button-with-different-size.png)" %} \ No newline at end of file diff --git a/blazor/calendar/calendar-views.md b/blazor/calendar/calendar-views.md index 40a0636222..0e808923b0 100644 --- a/blazor/calendar/calendar-views.md +++ b/blazor/calendar/calendar-views.md @@ -33,10 +33,7 @@ The following example demonstrates how to set the `Year` as the start view of th } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLUsVVVhopruWLg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Changing Blazor Calendar View](./images/blazor-full-calendar-view.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLUsVVVhopruWLg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Calendar View](./images/blazor-full-calendar-view.png)" %} ## View restriction @@ -57,7 +54,4 @@ N> Depth view should always be smaller than the Start view. If the `Depth` and ` } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVgsLhhhofIigEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Restriction in Blazor Calendar](./images/blazor-calendar-restriction.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVgsLhhhofIigEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Restriction in Blazor Calendar](./images/blazor-calendar-restriction.png)" %} \ No newline at end of file diff --git a/blazor/calendar/date-range.md b/blazor/calendar/date-range.md index beeabc4093..b8f782c846 100644 --- a/blazor/calendar/date-range.md +++ b/blazor/calendar/date-range.md @@ -29,6 +29,4 @@ The following code allows you to select a date within the range of 7th to 27th d } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgMhBLLyBEcqBn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![DataRange in Blazor Calendar Component](./images/blazor-calendar-date-range.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgMhBLLyBEcqBn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[DataRange in Blazor Calendar Component](./images/blazor-calendar-date-range.png)" %} \ No newline at end of file diff --git a/blazor/calendar/dateonly-support.md b/blazor/calendar/dateonly-support.md index b6a3c0fe9e..e5448fb521 100644 --- a/blazor/calendar/dateonly-support.md +++ b/blazor/calendar/dateonly-support.md @@ -19,6 +19,4 @@ The [DateOnly](https://learn.microsoft.com/en-us/dotnet/api/system.dateonly?view {% endhighlight %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrKsVBrLeKgEwxS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Calendar with DateOnly](./images/CalendarDateOnly.gif) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrKsVBrLeKgEwxS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar with DateOnly](./images/CalendarDateOnly.gif)" %} \ No newline at end of file diff --git a/blazor/calendar/how-to/change-the-first-day-of-week.md b/blazor/calendar/how-to/change-the-first-day-of-week.md index abe8dca15d..90a9650277 100644 --- a/blazor/calendar/how-to/change-the-first-day-of-week.md +++ b/blazor/calendar/how-to/change-the-first-day-of-week.md @@ -20,6 +20,4 @@ The following code shows the Calendar with `Tuesday` as the first day of the wee ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgChhVBSnmAEDf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing First Day of Week in Blazor Calendar](../images/blazor-calendar-first-day-of-week.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBgChhVBSnmAEDf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing First Day of Week in Blazor Calendar](../images/blazor-calendar-first-day-of-week.png)" %} \ No newline at end of file diff --git a/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md b/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md index 42aea9a0ac..681b3325c1 100644 --- a/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md +++ b/blazor/calendar/how-to/render-the-calendar-with-week-numbers.md @@ -16,9 +16,7 @@ You can enable `WeekNumber` in the Calendar by using the [WeekNumber](https://he ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLAWBrVhoxzJZmT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Calendar displays Week Numbers](../images/blazor-calendar-week-number.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLAWBrVhoxzJZmT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar displays Week Numbers](../images/blazor-calendar-week-number.png)" %} ## Week rule diff --git a/blazor/calendar/how-to/show-dates-of-other-months.md b/blazor/calendar/how-to/show-dates-of-other-months.md index 9e6adbbe15..47892e8d35 100644 --- a/blazor/calendar/how-to/show-dates-of-other-months.md +++ b/blazor/calendar/how-to/show-dates-of-other-months.md @@ -32,6 +32,4 @@ The following code demonstrates how to show dates of other months. Using the sty } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVAsVLLLeSYtRiu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Displaying other Month Dates in Blazor Calendar](../images/blazor-calendar-other-month-dates.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVAsVLLLeSYtRiu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying other Month Dates in Blazor Calendar](../images/blazor-calendar-other-month-dates.png)" %} \ No newline at end of file diff --git a/blazor/calendar/multi-select.md b/blazor/calendar/multi-select.md index 629d4e7512..cdb767c883 100644 --- a/blazor/calendar/multi-select.md +++ b/blazor/calendar/multi-select.md @@ -25,7 +25,4 @@ public DateTime[] MultipleValues { get; set; } = new DateTime[] { new DateTime(D } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVqCrrrBIKclcWx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Multi Selection in Blazor Calendar Component](./images/blazor-calendar-multi-selection.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVqCrrrBIKclcWx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Multi Selection in Blazor Calendar Component](./images/blazor-calendar-multi-selection.png)" %} \ No newline at end of file diff --git a/blazor/calendar/special-dates.md b/blazor/calendar/special-dates.md index fe525baa21..863331a1a1 100644 --- a/blazor/calendar/special-dates.md +++ b/blazor/calendar/special-dates.md @@ -89,6 +89,4 @@ You can customize specific dates in a [Blazor Calendar](https://www.syncfusion.c ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVAMBLBLyofGefV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Calendar with special dates](./images/blazor_calendar_special_dates.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVAMBLBLyofGefV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Calendar with special dates](./images/blazor_calendar_special_dates.png)" %} \ No newline at end of file diff --git a/blazor/card/header-content.md b/blazor/card/header-content.md index 4831aefb13..23f56d971a 100644 --- a/blazor/card/header-content.md +++ b/blazor/card/header-content.md @@ -94,6 +94,4 @@ Card content is designed to display an image tag within it. You can wrap an imag ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBUWBrBVxCfudwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Card Component Content with Image](images/Blazor-Card-Component-Content-with-Image.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBUWBrBVxCfudwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component Content with Image](images/Blazor-Card-Component-Content-with-Image.png)" %} \ No newline at end of file diff --git a/blazor/card/horizontal.md b/blazor/card/horizontal.md index 3d9b8109d2..1b404916c7 100644 --- a/blazor/card/horizontal.md +++ b/blazor/card/horizontal.md @@ -37,9 +37,7 @@ A horizontally aligned card can push a specific column to align vertically using } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBUMVVVrHJeVdaS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Card Component with Horizontal Orientation](images/blazor-card-with-horizontal-orientation.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBUMVVVrHJeVdaS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Card Component with Horizontal Orientation](images/blazor-card-with-horizontal-orientation.png)" %} ## See also diff --git a/blazor/carousel/animations-and-transitions.md b/blazor/carousel/animations-and-transitions.md index 7b6948fe80..871dd13026 100644 --- a/blazor/carousel/animations-and-transitions.md +++ b/blazor/carousel/animations-and-transitions.md @@ -63,9 +63,7 @@ The following demo depicts the example for `Fade` animation, ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrUMrhrhmDEXNND?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel fade animation](images/fade_animation.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrUMrhrhmDEXNND?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel fade animation](images/fade_animation.gif)" %} ### Custom animation @@ -156,9 +154,7 @@ The following demo depicts the example for `parallax` custom animation ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhgWrBrLGWiDURZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel custom animation](images/custom_animation.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhgWrBrLGWiDURZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel custom animation](images/custom_animation.gif)" %} ## Intervals between slides @@ -346,9 +342,7 @@ In the carousel, slides transitions are repeated continuously when you reach the } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrgiVVhrwLArCWL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel Looping Slides](images/looping_slides.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrgiVVhrwLArCWL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Looping Slides](images/looping_slides.png)" %} ## Slide changing events @@ -509,6 +503,4 @@ The following are the different swipe modes available in the carousel: ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhgMVVVhQADiviB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel Swipe Mode](images/swipe.gif) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhgMVVVhQADiviB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Swipe Mode](images/swipe.gif)" %} \ No newline at end of file diff --git a/blazor/carousel/navigators-and-indicators.md b/blazor/carousel/navigators-and-indicators.md index c0cbf24a20..df6fb3ed6d 100644 --- a/blazor/carousel/navigators-and-indicators.md +++ b/blazor/carousel/navigators-and-indicators.md @@ -68,9 +68,7 @@ The following example depicts the code to hide the navigators in the carousel. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhKCBVhAsyEmfKw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel Navigators](images/navigators_hidden.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhKCBVhAsyEmfKw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Navigators](images/navigators_hidden.png)" %} ### Show previous and next button on hover @@ -116,9 +114,7 @@ In the carousel, you can show the previous and next buttons only on mouse hover } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrAiBrLAMdVnAce?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel Navigators OnHover](images/navigators_onhover.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrAiBrLAMdVnAce?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Navigators OnHover](images/navigators_onhover.gif)" %} ### Previous and next button template @@ -200,9 +196,7 @@ Template options are provided to customize the previous button using [PreviousBu } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVUihrBKinwfomJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel Navigators Template](images/navigators_template.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVUihrBKinwfomJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Navigators Template](images/navigators_template.png)" %} ## Indicators @@ -250,9 +244,7 @@ In indicators, the total slides and current slide state have been depicted. You } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBAsVBBgWwAAeOK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel Indicators](images/indicators_hidden.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBAsVBBgWwAAeOK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/indicators_hidden.png)" %} ### Indicators template @@ -328,9 +320,7 @@ Template option is provided to customize the indicators by using the [Indicators } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqshhrUWwRrjbh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel Indicators](images/indicators_template.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqshhrUWwRrjbh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/indicators_template.png)" %} ### Showing preview of slide in indicator @@ -405,9 +395,7 @@ You can customize the indicators by showing the preview image of each slide usin } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLAsVBBgMwagdvn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel Indicators](images/indicators_preview.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLAsVBBgMwagdvn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/indicators_preview.png)" %} ### Indicators Types @@ -462,9 +450,7 @@ A default indicator in a carousel is a set of dots that indicate the current pos } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBKsBVhKsaLlNlA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel indicators type default](images/indicator-default.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBKsBVhKsaLlNlA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel indicators type default](images/indicator-default.png)" %} #### Dynamic Indicator @@ -510,9 +496,7 @@ A dynamic indicator in a carousel provides visual cues or markers that dynamical } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqsLBhACumvJUW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel indicators type dynamic](images/indicator-dynamic.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqsLBhACumvJUW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel indicators type dynamic](images/indicator-dynamic.png)" %} #### Fraction Indicator @@ -558,9 +542,7 @@ The fraction indicator type displays the current slide index and total slide cou } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBUCBhhqVZMmiMz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel indicators type fraction](images/indicator-fraction.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBUCBhhqVZMmiMz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel indicators type fraction](images/indicator-fraction.png)" %} #### Progress Indicator @@ -606,9 +588,7 @@ The Progress Indicator type displays the current slide as a progress bar. The Pr } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgChBrqhNyvyRO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel indicators type progress](images/indicator-progress.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBgChBrqhNyvyRO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel indicators type progress](images/indicator-progress.png)" %} ## Play button @@ -656,9 +636,7 @@ In the carousel, [AutoPlay](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLUCBVrgBjuRDmo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel Indicators](images/play_button.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLUCBVrgBjuRDmo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/play_button.png)" %} ### Play button template @@ -737,6 +715,4 @@ Template option is provided to customize the play button by using the [PlayButto } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htrgsVVhgVCgSyAJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel Indicators](images/play_button_template.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrgsVVhgVCgSyAJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel Indicators](images/play_button_template.png)" %} diff --git a/blazor/carousel/populating-items.md b/blazor/carousel/populating-items.md index d6eaa1f2ae..b91683aca0 100644 --- a/blazor/carousel/populating-items.md +++ b/blazor/carousel/populating-items.md @@ -110,9 +110,7 @@ Using the [SelectedIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLgiVVLhncMgRcW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel selected slide](images/selected_index.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLgiVVLhncMgRcW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel selected slide](images/selected_index.png)" %} ### Select an item using the method @@ -237,9 +235,7 @@ The Carousel component supports to show one complete slide and a partial view of ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhqMVVLVdwQwMNf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel partial visible slide](images/partial-visible.jpg) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhqMVVLVdwQwMNf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel partial visible slide](images/partial-visible.jpg)" %} N> Slide animation only applicable if the `partialVisible` is enabled. @@ -298,9 +294,7 @@ The following example code depicts the functionality of `partialVisible` and wit ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLqMrrLhHlMnUgO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Carousel partial visible slide](images/without-loop.jpg) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLqMrrLhHlMnUgO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Carousel partial visible slide](images/without-loop.jpg)" %} ## See also diff --git a/blazor/chart/axis-customization.md b/blazor/chart/axis-customization.md index 459ab062af..f75f387aee 100644 --- a/blazor/chart/axis-customization.md +++ b/blazor/chart/axis-customization.md @@ -54,9 +54,7 @@ An axis can be positioned in the chart area using [CrossesAt](https://help.syncf } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUChLRrTftoDAz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart with Cross Axis](images/axis-customization/blazor-column-chart-cross-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUChLRrTftoDAz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Cross Axis](images/axis-customization/blazor-column-chart-cross-axis.png)" %} ## Title @@ -97,9 +95,7 @@ A title can be added to the axis using [Title](https://help.syncfusion.com/cr/bl } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUihhRhzzqpdFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUihhRhzzqpdFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.png)" %} ### Axis title alignment @@ -143,9 +139,7 @@ The axis title's position can be aligned using the `TextAlignment` property in [ } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVfDHirzNGCVAZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart with Axis Title Alignment](images/axis-customization/blazor-column-chart-axis-title-alignment.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVfDHirzNGCVAZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Axis Title Alignment](images/axis-customization/blazor-column-chart-axis-title-alignment.png)" %} ## Tick lines @@ -188,9 +182,7 @@ The width, color, and size of the minor and major tick lines can be customi } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLgiBBdLTzRploJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLgiBBdLTzRploJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.png)" %} ## Grid lines customization @@ -232,9 +224,7 @@ The width, color, and dash array of the minor and major grid lines can be c } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAWVVnBzoAhreS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAWVVnBzoAhreS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.png)" %} ## Multiple Axis @@ -279,9 +269,7 @@ The [ChartAxes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqirBHhzyoYHVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqirBHhzyoYHVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.png)" %} ## See also @@ -328,9 +316,7 @@ When an axis is inversed, the greatest value on the axis moves closer to the ori } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhgMBBRLzoOWYHq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhgMBBRLzoOWYHq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.png)" %} ## Opposed position @@ -371,9 +357,7 @@ To place an axis in the opposite position of its original position, set its [Opp } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.png)" %} N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/chart/axis-labels.md b/blazor/chart/axis-labels.md index c4ec06965b..c53f9e7f12 100644 --- a/blazor/chart/axis-labels.md +++ b/blazor/chart/axis-labels.md @@ -60,9 +60,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrUWhVxrUeUPizH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Hiding Smart Axis Label in Blazor Column Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrUWhVxrUeUPizH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Smart Axis Label in Blazor Column Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.png)" %} **Case 2:** When [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_LabelIntersectAction) is set to **Rotate45**. @@ -104,9 +102,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhUWrhdBKnQRxlc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhUWrhdBKnQRxlc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.png)" %} **Case 3:** When [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonAxis.html#Syncfusion_Blazor_Charts_ChartCommonAxis_LabelIntersectAction) is set to **Rotate90**. @@ -148,9 +144,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVKsVhHBgQNxgcg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVKsVhHBgQNxgcg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.png)" %} ## Axis labels positioning @@ -194,9 +188,7 @@ The axis labels can be put **Outside** of the axis line by default, however the } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVACVhHLgcAIDVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Axis Label Position in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVACVhHLgcAIDVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Axis Label Position in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-position.png)" %} ## Multilevel labels @@ -251,9 +243,7 @@ The [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLgMLLxrgGHhnQF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart with Multilevel Labels](images/axis-labels/blazor-column-chart-multi-labels.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLgMLLxrgGHhnQF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Multilevel Labels](images/axis-labels/blazor-column-chart-multi-labels.png)" %} ### Overflow @@ -305,9 +295,7 @@ Using the [Overflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrAirBRVqmaLxUH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart Multilevel Labels with Overflow](images/axis-labels/blazor-column-chart-axis-label-overflow.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrAirBRVqmaLxUH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Multilevel Labels with Overflow](images/axis-labels/blazor-column-chart-axis-label-overflow.png)" %} ### Alignment @@ -359,9 +347,7 @@ The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBUWLVnrqvhmHGl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Multilevel Labels Alignment in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-alignment.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBUWLVnrqvhmHGl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Multilevel Labels Alignment in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-alignment.png)" %} ### Text customization @@ -414,9 +400,7 @@ The [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartA } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAMBrHLqPoocKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Multilevel Labels Text in Blazor Column Chart](images/axis-labels/blazor-column-chart-custom-axis-label.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAMBrHLqPoocKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Multilevel Labels Text in Blazor Column Chart](images/axis-labels/blazor-column-chart-custom-axis-label.png)" %} ### Border customization @@ -469,9 +453,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVKMLLxVqlbslqT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Multilevel Labels Border in Blazor Column Chart](images/axis-labels/blazor-column-chart-label-with-custom-border.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVKMLLxVqlbslqT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Multilevel Labels Border in Blazor Column Chart](images/axis-labels/blazor-column-chart-label-with-custom-border.png)" %} ## Edge label placement @@ -519,9 +501,7 @@ The longer text labels at the axes edges may only be partially visible in the c } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqWVVHhTXtqqWR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqWVVHhTXtqqWR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.png)" %} ## Labels customization @@ -563,9 +543,7 @@ The label [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLUCVrRhftplXww?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart Axis with Custom Label](images/axis-labels/blazor-column-chart-axis-custom-label.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLUCVrRhftplXww?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Custom Label](images/axis-labels/blazor-column-chart-axis-custom-label.png)" %} ## Trim label @@ -606,9 +584,7 @@ The label can be trimmed using the [EnableTrim](https://help.syncfusion.com/cr/b } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVqMrLdVzXPKHis?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Label Trimming in Blazor Column Chart Axis](images/axis-labels/blazor-column-chart-axis-label-trim.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVqMrLdVzXPKHis?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Trimming in Blazor Column Chart Axis](images/axis-labels/blazor-column-chart-axis-label-trim.png)" %} ## Line break @@ -650,9 +626,7 @@ The `
` tag can used to separate the long axis label into multiple lines. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLgCBLdVJBNXepm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart Axis with Line break Label](images/axis-labels/blazor-column-chart-axis-line-break-label.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLgCBLdVJBNXepm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Line break Label](images/axis-labels/blazor-column-chart-axis-line-break-label.png)" %} ## Label format @@ -732,9 +706,7 @@ You can customize the axis labels by using [OnAxisLabelRender](https://help.sync } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVqCrrHLpVyohwI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart Axis with Label customization](images/axis-labels/blazor-column-chart-label-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVqCrrHLpVyohwI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Label customization](images/axis-labels/blazor-column-chart-label-customization.png)" %} ## Axis label template @@ -788,8 +760,7 @@ Within the `LabelTemplate`, the implicit parameter context provides access to la } ``` -![Blazor Column Chart Axis with Template using Text](images/axis-labels/blazor-column-chart-axis-text-template.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroXaDFiQqYQesU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroXaDFiQqYQesU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Template using Text](images/axis-labels/blazor-column-chart-axis-text-template.png)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Chart-Axis-Label-Customization). diff --git a/blazor/chart/chart-types/area.md b/blazor/chart/chart-types/area.md index 2955f4ff9c..b5cb8aee54 100644 --- a/blazor/chart/chart-types/area.md +++ b/blazor/chart/chart-types/area.md @@ -42,9 +42,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpXuWryXlXgwKd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Area Chart](../images/chart-types-images/blazor-area-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpXuWryXlXgwKd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Area Chart](../images/chart-types-images/blazor-area-chart.png)" %} N> Refer to our [Blazor Area Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Area Chart Example](https://blazor.syncfusion.com/demos/chart/area?theme=fluent) to know how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/chart/chart-types/bar.md b/blazor/chart/chart-types/bar.md index 49ad50481e..23d41c1b7a 100644 --- a/blazor/chart/chart-types/bar.md +++ b/blazor/chart/chart-types/bar.md @@ -50,9 +50,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLTNYsqpkzRkDLi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Bar Chart](../images/chart-types-images/blazor-bar-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLTNYsqpkzRkDLi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar Chart](../images/chart-types-images/blazor-bar-chart.png)" %} N> Refer to our [Blazor Bar Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Bar Chart Example](https://blazor.syncfusion.com/demos/chart/bar?theme=bootstrap5) to compare values across categories by using horizontal bars. @@ -370,8 +368,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -![Blazor Bar Chart with corner radius](../images/chart-types-images/blazor-bar-chart-corner-radius.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBINTjfrHKsRaBF?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBINTjfrHKsRaBF?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Bar Chart with corner radius](../images/chart-types-images/blazor-bar-chart-corner-radius.png)" %} We can customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -421,8 +418,7 @@ We can customize the corner radius for individual points in the chart series usi } ``` -![Blazor bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBejJXJVPrWIMKc?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBejJXJVPrWIMKc?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.png)" %} ## Bar space and width @@ -508,8 +504,7 @@ The [ColumnWidthInPixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor }; } ``` -![Blazor Bar Chart with column width set in pixel](../images/chart-types-images/blazor-bar-chart-width-in-pixels.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDreDxhnJqkknbxM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDreDxhnJqkknbxM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar Chart with column width set in pixel](../images/chart-types-images/blazor-bar-chart-width-in-pixels.png)" %} ## Grouped bar diff --git a/blazor/chart/chart-types/box-whisker.md b/blazor/chart/chart-types/box-whisker.md index 2dbe3da28f..0e049f126a 100644 --- a/blazor/chart/chart-types/box-whisker.md +++ b/blazor/chart/chart-types/box-whisker.md @@ -53,9 +53,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzjFVZSMTofoJN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Box and Whisker Charts](../images/othertypes/blazor-box-whisker-charts.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzjFVZSMTofoJN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Box and Whisker Charts](../images/othertypes/blazor-box-whisker-charts.png)" %} N> Refer to our [Blazor Box and Whisker Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/box-and-whisker-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Box and Whisker Chart Example](https://blazor.syncfusion.com/demos/chart/box-and-whisker) to know how to render and configure the box and whisker type charts. diff --git a/blazor/chart/chart-types/bubble.md b/blazor/chart/chart-types/bubble.md index 6fef39f06a..62914bc103 100644 --- a/blazor/chart/chart-types/bubble.md +++ b/blazor/chart/chart-types/bubble.md @@ -56,9 +56,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVfZlVZAFsaTHgz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Bubble Chart](../images/chart-types-images/blazor-bubble-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVfZlVZAFsaTHgz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bubble Chart](../images/chart-types-images/blazor-bubble-chart.png)" %} N> Refer to our [Blazor Bubble Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bubble-chart) feature tour page to know about its other groundbreaking feature representations and also explore our [Blazor Bubble Chart Example](https://blazor.syncfusion.com/demos/chart/bubble?theme=bootstrap5) to know how to render and configure the bubble type charts. diff --git a/blazor/chart/chart-types/candle.md b/blazor/chart/chart-types/candle.md index fd97b322d7..7a553339c1 100644 --- a/blazor/chart/chart-types/candle.md +++ b/blazor/chart/chart-types/candle.md @@ -59,9 +59,7 @@ To render a [`Candle`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpZFLtJkIBDGOn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Candle Chart](../images/financial-types/blazor-candle-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpZFLtJkIBDGOn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Candle Chart](../images/financial-types/blazor-candle-chart.png)" %} ## Binding data with series diff --git a/blazor/chart/chart-types/column.md b/blazor/chart/chart-types/column.md index 7b9348e83c..5c09e967c5 100644 --- a/blazor/chart/chart-types/column.md +++ b/blazor/chart/chart-types/column.md @@ -56,9 +56,7 @@ To render a [Column Chart](https://www.syncfusion.com/blazor-components/blazor-c } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVTDasqTXEkwQxd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor column Chart.](../images/chart-types-images/blazor-column-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVTDasqTXEkwQxd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor column Chart.](../images/chart-types-images/blazor-column-chart.png)" %} N> Refer to our [Blazor Column Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Column Charts Example](https://blazor.syncfusion.com/demos/chart/column?theme=bootstrap5) to compare **Frequency**, **Count**, **Total**, or **Average** of data in different categories. @@ -372,8 +370,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -![Blazor Column Chart with corner radius](../images/chart-types-images/blazor-column-chart-corner-radius.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZretpNTBvfSKfSg?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZretpNTBvfSKfSg?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Column Chart with corner radius](../images/chart-types-images/blazor-column-chart-corner-radius.png)" %} We can also customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -423,8 +420,7 @@ We can also customize the corner radius for individual points in the chart serie } ``` -![Blazor column chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLetfjzLvFuJDKv?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLetfjzLvFuJDKv?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor column chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.png)" %} ## Column space and width @@ -556,8 +552,7 @@ The [ColumnWidthInPixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor }; } ``` -![Blazor Column Chart with column width set in pixel](../images/chart-types-images/blazor-column-chart-width-in-pixels.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhSNxBxzUFmUfTx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhSNxBxzUFmUfTx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with column width set in pixel](../images/chart-types-images/blazor-column-chart-width-in-pixels.png)" %} ## Grouped column diff --git a/blazor/chart/chart-types/error-bar.md b/blazor/chart/chart-types/error-bar.md index 19f336f32b..c992030392 100644 --- a/blazor/chart/chart-types/error-bar.md +++ b/blazor/chart/chart-types/error-bar.md @@ -49,9 +49,7 @@ Error bars are graphical representations of the variability of data that are use } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrJXvLtoGKlZQco?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Line Chart with Error Bar](../images/othertypes/blazor-error-bar-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrJXvLtoGKlZQco?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Error Bar](../images/othertypes/blazor-error-bar-chart.png)" %} ## Error bar type diff --git a/blazor/chart/chart-types/high-low-open-close.md b/blazor/chart/chart-types/high-low-open-close.md index c169311419..241fe76c7c 100644 --- a/blazor/chart/chart-types/high-low-open-close.md +++ b/blazor/chart/chart-types/high-low-open-close.md @@ -53,9 +53,7 @@ You can learn how to create a HiloOpenClose chart using Blazor Charts by watchin } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJNlLNJmhnNTVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor High Low Open Close Chart](../images/chart-types-images/blazor-high-low-open-close-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJNlLNJmhnNTVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor High Low Open Close Chart](../images/chart-types-images/blazor-high-low-open-close-chart.png)" %} ## Binding data with series diff --git a/blazor/chart/chart-types/high-low.md b/blazor/chart/chart-types/high-low.md index 6aadf2c31f..cd7195d5a2 100644 --- a/blazor/chart/chart-types/high-low.md +++ b/blazor/chart/chart-types/high-low.md @@ -58,9 +58,7 @@ This indicates that the data should be represented as a hilo chart, which shows } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrzNPLjzSqgHuAy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Hilo Chart](../images/financial-types/blazor-hilo-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrzNPLjzSqgHuAy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Hilo Chart](../images/financial-types/blazor-hilo-chart.png)" %} N> Refer to our [Blazor Hilo Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/hilo-chart) feature tour page to know about its other groundbreaking feature representations and also explore our [Blazor Hilo Chart Example](https://blazor.syncfusion.com/demos/chart/hilo) to know how to render and configure the Hilo type series. diff --git a/blazor/chart/chart-types/histogram.md b/blazor/chart/chart-types/histogram.md index f7789e6c6d..e99cab953b 100644 --- a/blazor/chart/chart-types/histogram.md +++ b/blazor/chart/chart-types/histogram.md @@ -65,9 +65,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpXPLjednCMkiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Histogram Chart](../images/othertypes/blazor-histogram-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpXPLjednCMkiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Histogram Chart](../images/othertypes/blazor-histogram-chart.png)" %} ## Events diff --git a/blazor/chart/chart-types/line.md b/blazor/chart/chart-types/line.md index d9f4125b0f..e69987533b 100644 --- a/blazor/chart/chart-types/line.md +++ b/blazor/chart/chart-types/line.md @@ -56,9 +56,7 @@ To render a [Line](https://www.syncfusion.com/blazor-components/blazor-charts/ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLfNkWrgrqqRINz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Line Chart.](../images/chart-types-images/blazor-line-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLfNkWrgrqqRINz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart.](../images/chart-types-images/blazor-line-chart.png)" %} N> Refer to our [Blazor Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Line Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/chart/chart-types/pare-to.md b/blazor/chart/chart-types/pare-to.md index 0137ad74a3..0f9bb1a9ba 100644 --- a/blazor/chart/chart-types/pare-to.md +++ b/blazor/chart/chart-types/pare-to.md @@ -63,9 +63,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVptvWuVRmwVTbC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Pareto Chart](../images/othertypes/blazor-pareto-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVptvWuVRmwVTbC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pareto Chart](../images/othertypes/blazor-pareto-chart.png)" %} ## Binding data with series diff --git a/blazor/chart/chart-types/polar.md b/blazor/chart/chart-types/polar.md index c8859e58ef..7a88d10484 100644 --- a/blazor/chart/chart-types/polar.md +++ b/blazor/chart/chart-types/polar.md @@ -51,9 +51,7 @@ To render a [polar](https://www.syncfusion.com/blazor-components/blazor-charts/c } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthpXPhXfsXrrssZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Polar Chart](../images/polar-radar/blazor-polar-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthpXPhXfsXrrssZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Polar Chart](../images/polar-radar/blazor-polar-chart.png)" %} N> Refer to our [Blazor Polar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/polar-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Polar Chart Example](https://blazor.syncfusion.com/demos/chart/polar-line) to know how to render and configure the Polar type chart. diff --git a/blazor/chart/chart-types/radar.md b/blazor/chart/chart-types/radar.md index 0d45ec0d0d..e8fddeb635 100644 --- a/blazor/chart/chart-types/radar.md +++ b/blazor/chart/chart-types/radar.md @@ -54,9 +54,7 @@ To render a radar chart, set the series [Type](https://help.syncfusion.com/cr/bl } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXbrXfzZtZPkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Radar Chart with Line Series](../images/polar-radar/blazor-radar-chart-line-series.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXbrXfzZtZPkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Radar Chart with Line Series](../images/polar-radar/blazor-radar-chart-line-series.png)" %} N> Refer to our [Blazor Radar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/radar-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Radar Chart Example](https://blazor.syncfusion.com/demos/chart/polar-line) to know how to render and configure the Radar type chart. diff --git a/blazor/chart/chart-types/range-area.md b/blazor/chart/chart-types/range-area.md index 67bec2cd54..c9a7f94021 100644 --- a/blazor/chart/chart-types/range-area.md +++ b/blazor/chart/chart-types/range-area.md @@ -52,9 +52,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLKiLrRzNeaIzwr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Range Area Chart](../images/chart-types-images/blazor-range-area-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLKiLrRzNeaIzwr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Area Chart](../images/chart-types-images/blazor-range-area-chart.png)" %} N> Refer to our [Blazor Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Range Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-area?theme=bootstrap5) to know how to show variations in the data values for a given time. diff --git a/blazor/chart/chart-types/range-column.md b/blazor/chart/chart-types/range-column.md index 1bd6dd3527..5c75c08fa5 100644 --- a/blazor/chart/chart-types/range-column.md +++ b/blazor/chart/chart-types/range-column.md @@ -64,9 +64,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLgCLrnzdoaeqgs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Range Column Chart](../images/chart-types-images/blazor-range-column-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLgCLrnzdoaeqgs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart](../images/chart-types-images/blazor-range-column-chart.png)" %} N> Refer to our [Blazor Range Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Range Column Chart Example](https://blazor.syncfusion.com/demos/chart/range-column?theme=bootstrap5) to know how to show variations in the data values for a given time. @@ -520,8 +518,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. }; } ``` -![Blazor Range Column Chart with corner radius](../images/chart-types-images/blazor-range-column-corner-radius.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBSDTtTAfxgaRes?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBSDTtTAfxgaRes?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart with corner radius](../images/chart-types-images/blazor-range-column-corner-radius.png)" %} We can also customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -585,8 +582,7 @@ We can also customize the corner radius for individual points in the chart serie } ``` -![Blazor Range Column Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-range-column-corner-radius-onPointRender.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLejTXzqothXDiL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLejTXzqothXDiL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-range-column-corner-radius-onPointRender.png)" %} ## Empty points diff --git a/blazor/chart/chart-types/range-step-area.md b/blazor/chart/chart-types/range-step-area.md index 65292cee8a..26106a86c0 100644 --- a/blazor/chart/chart-types/range-step-area.md +++ b/blazor/chart/chart-types/range-step-area.md @@ -58,9 +58,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJZlsOgSpJondZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Range Step Area Chart](../images/chart-types-images/blazor-range-step-area.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJZlsOgSpJondZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Step Area Chart](../images/chart-types-images/blazor-range-step-area.png)" %} ## Binding data with series diff --git a/blazor/chart/chart-types/scatter.md b/blazor/chart/chart-types/scatter.md index 8ea2aa4e4d..a76ff93607 100644 --- a/blazor/chart/chart-types/scatter.md +++ b/blazor/chart/chart-types/scatter.md @@ -50,9 +50,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfXFhZrfpVHHMy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Scatter Chart](../images/chart-types-images/blazor-scatter-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfXFhZrfpVHHMy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scatter Chart](../images/chart-types-images/blazor-scatter-chart.png)" %} N> Refer to our [Blazor Scatter Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Scatter Chart Example](https://blazor.syncfusion.com/demos/chart/scatter?theme=bootstrap5) to know how to plot data with two numeric parameters. diff --git a/blazor/chart/chart-types/spline-area.md b/blazor/chart/chart-types/spline-area.md index 50f365725b..3c019ca80d 100644 --- a/blazor/chart/chart-types/spline-area.md +++ b/blazor/chart/chart-types/spline-area.md @@ -50,9 +50,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhfXaCAqYANeOoh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Spline Area Chart](../images/chart-types-images/blazor-spline-area-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhfXaCAqYANeOoh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Area Chart](../images/chart-types-images/blazor-spline-area-chart.png)" %} N> Refer to our [Blazor Spline Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Spline Area Chart Example](https://blazor.syncfusion.com/demos/chart/spline-area?theme=bootstrap5) to know how to connect the data points with smooth curves. diff --git a/blazor/chart/chart-types/spline-range-area.md b/blazor/chart/chart-types/spline-range-area.md index 296df614eb..43908aa21f 100644 --- a/blazor/chart/chart-types/spline-range-area.md +++ b/blazor/chart/chart-types/spline-range-area.md @@ -50,9 +50,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqMVBdfdNOtUiF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Spline Range Area Chart](../images/chart-types-images/blazor-spline-range-area-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqMVBdfdNOtUiF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Range Area Chart](../images/chart-types-images/blazor-spline-range-area-chart.png)" %} > Refer to our [Blazor Spline Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Spline Range Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-area?theme=bootstrap5) to know how to show variations in the data values for a given time. diff --git a/blazor/chart/chart-types/spline.md b/blazor/chart/chart-types/spline.md index 28ce66ff57..2f459cb0a9 100644 --- a/blazor/chart/chart-types/spline.md +++ b/blazor/chart/chart-types/spline.md @@ -50,9 +50,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrzNECVpIkCNalF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Spline Chart](../images/chart-types-images/blazor-spline-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrzNECVpIkCNalF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Chart](../images/chart-types-images/blazor-spline-chart.png)" %} N> Refer to our [Blazor Spline Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Spline Chart Example](https://blazor.syncfusion.com/demos/chart/spline?theme=bootstrap5) to know how to connect the data points with smooth curves. diff --git a/blazor/chart/chart-types/stack-area.md b/blazor/chart/chart-types/stack-area.md index 11a0d84274..2656296d0d 100644 --- a/blazor/chart/chart-types/stack-area.md +++ b/blazor/chart/chart-types/stack-area.md @@ -52,9 +52,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBAiVhnTxBScRGk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Area100 Chart](../images/chart-types-images/blazor-stacked-area-100-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBAiVhnTxBScRGk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Area100 Chart](../images/chart-types-images/blazor-stacked-area-100-chart.png)" %} N> Refer to our [Blazor 100% Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor 100% Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-area?theme=bootstrap5) to know how to render and configure the 100% Stacked Area type chart. diff --git a/blazor/chart/chart-types/stack-bar.md b/blazor/chart/chart-types/stack-bar.md index 5a55359407..38679d2165 100644 --- a/blazor/chart/chart-types/stack-bar.md +++ b/blazor/chart/chart-types/stack-bar.md @@ -56,9 +56,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBpNksqIVtklZvQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Bar100 Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBpNksqIVtklZvQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.png)" %} N> Refer to our [Blazor 100% Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart) feature tour page to know about its other groundbreaking feature representations. You can also explore our [Blazor 100% Stacked Bar Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-bar?theme=bootstrap5) to know how to render and configure the 100% Stacked Bar type chart. @@ -453,8 +451,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -![Blazor Stacked bar 100 with corner radius](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVejpNfAyexsHPk?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVejpNfAyexsHPk?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked bar 100 with corner radius](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.png)" %} We can also customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -511,8 +508,7 @@ We can also customize the corner radius for individual points in the chart serie } } ``` -![Blazor Stacked bar 100 with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointRender.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVSNTZzKmxcZcBe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVSNTZzKmxcZcBe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked bar 100 with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointRender.png)" %} ## Empty points diff --git a/blazor/chart/chart-types/stack-column.md b/blazor/chart/chart-types/stack-column.md index 885f178462..7a3a2fd9c9 100644 --- a/blazor/chart/chart-types/stack-column.md +++ b/blazor/chart/chart-types/stack-column.md @@ -56,9 +56,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrfZusKfwGsxziN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Column100 Chart](../images/chart-types-images/blazor-stacked-column-100-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrfZusKfwGsxziN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 Chart](../images/chart-types-images/blazor-stacked-column-100-chart.png)" %} N> Refer to our [Blazor 100% Stacked Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor 100% Stacked Column Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-column?theme=bootstrap5) to know how to render and configure the 100% Stacked Column type chart. @@ -453,8 +451,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -![Stacked Column 100 Chart with corner radius](../images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrytzZpqmFAhCEn?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrytzZpqmFAhCEn?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Stacked Column 100 Chart with corner radius](../images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.png)" %} We can also customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -511,8 +508,7 @@ We can also customize the corner radius for individual points in the chart serie } ``` -![Stacked Column 100 Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjroXTtTUvBXPRDt?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjroXTtTUvBXPRDt?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Stacked Column 100 Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.png)" %} ## Empty points diff --git a/blazor/chart/chart-types/stack-line.md b/blazor/chart/chart-types/stack-line.md index 67ae970f7e..f5ab65fa10 100644 --- a/blazor/chart/chart-types/stack-line.md +++ b/blazor/chart/chart-types/stack-line.md @@ -73,9 +73,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthfjusLTJpWigyi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Line100 Chart](../images/chart-types-images/blazor-stacked-line-100-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthfjusLTJpWigyi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Line100 Chart](../images/chart-types-images/blazor-stacked-line-100-chart.png)" %} N> Refer to our [Blazor 100% Stacked Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-line-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor 100% Stacked Line Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-line?theme=bootstrap5) to know how to render and configure the 100% Stacked Line type chart. diff --git a/blazor/chart/chart-types/stacked-area.md b/blazor/chart/chart-types/stacked-area.md index 5345b6d270..cfe603c1da 100644 --- a/blazor/chart/chart-types/stacked-area.md +++ b/blazor/chart/chart-types/stacked-area.md @@ -52,9 +52,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsVLxzRMlYUSx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Area Chart](../images/chart-types-images/blazor-stacked-area-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsVLxzRMlYUSx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Area Chart](../images/chart-types-images/blazor-stacked-area-chart.png)" %} N> Refer to our [Blazor Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-area?theme=bootstrap5) to know how to render and configure the Stacked Area type chart. diff --git a/blazor/chart/chart-types/stacked-bar.md b/blazor/chart/chart-types/stacked-bar.md index 3a025f806b..ff14981b24 100644 --- a/blazor/chart/chart-types/stacked-bar.md +++ b/blazor/chart/chart-types/stacked-bar.md @@ -56,9 +56,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTtEsUyZmdwAXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Bar Chart](../images/chart-types-images/blazor-stacked-bar-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTtEsUyZmdwAXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar Chart](../images/chart-types-images/blazor-stacked-bar-chart.png)" %} N> Refer to our [Blazor Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-bar-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Stacked Bar Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-bar?theme=bootstrap5) to know how to to render and configure the Stacked Bar type chart. @@ -453,8 +451,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -![Blazor Stacked bar chart with corner radius](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLIXzXpqbHxThSx?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLIXzXpqbHxThSx?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked bar chart with corner radius](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius.png)" %} We can also customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -510,8 +507,7 @@ We can also customize the corner radius for individual points in the chart serie } } ``` -![Blazor Stacked bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVIjTXJKkhNeecS?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVIjTXJKkhNeecS?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.png)" %} ## Stacking group diff --git a/blazor/chart/chart-types/stacked-column.md b/blazor/chart/chart-types/stacked-column.md index 565a62b9dd..952674feeb 100644 --- a/blazor/chart/chart-types/stacked-column.md +++ b/blazor/chart/chart-types/stacked-column.md @@ -62,9 +62,7 @@ To render a [stacked column](https://www.syncfusion.com/blazor-components/blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBJXasqJzvlIjSR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Column Chart](../images/chart-types-images/blazor-stacked-column-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBJXasqJzvlIjSR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column Chart](../images/chart-types-images/blazor-stacked-column-chart.png)" %} N> Refer to our [Blazor Stacked Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Stacked Column Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-column?theme=bootstrap5) to know how to render and configure the Stacked Column type chart. @@ -458,8 +456,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -![Blazor Stacked column chart with corner radius](../images/chart-types-images/blazor-stacked-column-chart-corner-radius.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZByXTjJqkyCcSge?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZByXTjJqkyCcSge?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked column chart with corner radius](../images/chart-types-images/blazor-stacked-column-chart-corner-radius.png)" %} We can also customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -516,8 +513,7 @@ We can also customize the corner radius for individual points in the chart serie } } ``` -![Blazor Stacked column chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBIZpjfKYcxqQNe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBIZpjfKYcxqQNe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked column chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.png)" %} ## Stacking group diff --git a/blazor/chart/chart-types/stacked-line.md b/blazor/chart/chart-types/stacked-line.md index 032a8a9bfd..c0d3825391 100644 --- a/blazor/chart/chart-types/stacked-line.md +++ b/blazor/chart/chart-types/stacked-line.md @@ -80,9 +80,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBzNOsLpWPFqTrE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Stacked Line Chart](../images/chart-types-images/blazor-stacked-line-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBzNOsLpWPFqTrE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Line Chart](../images/chart-types-images/blazor-stacked-line-chart.png)" %} N> Refer to our [Blazor Stacked Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-line-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Stacked Line Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-line?theme=bootstrap5) to know how to render and configure the Stacked Line type chart. diff --git a/blazor/chart/chart-types/step-area.md b/blazor/chart/chart-types/step-area.md index a1c787d95f..a9c4410460 100644 --- a/blazor/chart/chart-types/step-area.md +++ b/blazor/chart/chart-types/step-area.md @@ -47,9 +47,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsBhHTngrkaFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Step Area Chart](../images/chart-types-images/blazor-step-area-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsBhHTngrkaFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Step Area Chart](../images/chart-types-images/blazor-step-area-chart.png)" %} N> Refer to our [Blazor Step Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/step-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Step Area Chart Example](https://blazor.syncfusion.com/demos/chart/step-area?theme=bootstrap5) to know how to render and configure the Step Area type chart. diff --git a/blazor/chart/chart-types/step-line.md b/blazor/chart/chart-types/step-line.md index 352c4cf6a7..d165db5be9 100644 --- a/blazor/chart/chart-types/step-line.md +++ b/blazor/chart/chart-types/step-line.md @@ -50,9 +50,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhfXairAFPdRAGd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Step Line Chart](../images/chart-types-images/blazor-step-line-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhfXairAFPdRAGd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Step Line Chart](../images/chart-types-images/blazor-step-line-chart.png)" %} ## Binding data with series diff --git a/blazor/chart/chart-types/vertical-chart.md b/blazor/chart/chart-types/vertical-chart.md index 89b7dc349c..fd9cf295ff 100644 --- a/blazor/chart/chart-types/vertical-chart.md +++ b/blazor/chart/chart-types/vertical-chart.md @@ -44,9 +44,7 @@ One can draw a vertical chart by changing the axis orientation, and all series t } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrzXFhjSvWwRZBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Vertical Spline Chart](../images/othertypes/blazor-vertical-spline-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrzXFhjSvWwRZBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Vertical Spline Chart](../images/othertypes/blazor-vertical-spline-chart.png)" %} ## Binding data with series diff --git a/blazor/chart/chart-types/waterfall.md b/blazor/chart/chart-types/waterfall.md index d6d60c939f..31de9b5aeb 100644 --- a/blazor/chart/chart-types/waterfall.md +++ b/blazor/chart/chart-types/waterfall.md @@ -52,9 +52,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhzNbVjepXCmPUR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Waterfall Chart](../images/othertypes/blazor-waterfall-chart.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhzNbVjepXCmPUR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart](../images/othertypes/blazor-waterfall-chart.png)" %} N> Explore our [Blazor Waterfall Chart Example](https://blazor.syncfusion.com/demos/chart/waterfall?theme=bootstrap5) to know how to render and configure the Waterfall type chart. @@ -191,8 +189,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -![Blazor Waterfall Chart with corner radius](../images/chart-types-images/blazor-waterfall-chart-corner-radius.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBINztpgOESJjZh?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBINztpgOESJjZh?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart with corner radius](../images/chart-types-images/blazor-waterfall-chart-corner-radius.png)" %} We can also customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -245,8 +242,7 @@ We can also customize the corner radius for individual points in the chart serie } ``` -![Blazor Waterfall Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrSZfDfpXVcpRWL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrSZfDfpXVcpRWL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.png)" %} ## Empty points diff --git a/blazor/chart/how-to/lazy-loading.md b/blazor/chart/how-to/lazy-loading.md index 5da6dad547..c54be85415 100644 --- a/blazor/chart/how-to/lazy-loading.md +++ b/blazor/chart/how-to/lazy-loading.md @@ -98,9 +98,7 @@ else ### Line -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVpZhLxzguqSeHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![LazyLoad Column](../images/lazyload-column.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVpZhLxzguqSeHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[LazyLoad Column](../images/lazyload-column.png)" %} ### Column From 3eae4709aad6ad44920892218f2506cd87aa14cd Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Wed, 12 Nov 2025 14:03:43 +0530 Subject: [PATCH 4/5] Update preview sample output of Blazor components UG documentation --- blazor/chart/category-axis.md | 16 +++------- blazor/chart/chart-appearance.md | 6 ++-- blazor/chart/chart-dimensions.md | 12 ++----- blazor/chart/cross-hair-and-track-ball.md | 3 +- blazor/chart/date-time-axis.md | 24 ++++---------- blazor/chart/last-data-label.md | 6 ++-- blazor/chart/logarithmic-axis.md | 24 ++++---------- blazor/chart/multiple-panes.md | 16 +++------- blazor/chart/numeric-axis.md | 39 ++++++----------------- blazor/chart/selection.md | 3 +- blazor/chart/strip-line.md | 20 +++--------- blazor/chart/tool-tip.md | 6 ++-- blazor/chart/working-with-data.md | 23 ++++--------- blazor/chart/zooming.md | 9 ++---- 14 files changed, 55 insertions(+), 152 deletions(-) diff --git a/blazor/chart/category-axis.md b/blazor/chart/category-axis.md index bfdca6df7e..336f8dda5e 100644 --- a/blazor/chart/category-axis.md +++ b/blazor/chart/category-axis.md @@ -50,9 +50,7 @@ You can learn how to customize the category axis by watching the video below. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLgWrhVAEwCkOWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart with Default Axis](images/category-axis/blazor-chart-default-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLgWrhVAEwCkOWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Default Axis](images/category-axis/blazor-chart-default-axis.png)" %} ## Labels placement @@ -93,9 +91,7 @@ The category labels are positioned between ticks by default, but the [LabelPlace } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLgWVrBgOQpAjdB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Labels Position in Blazor Chart](images/category-axis/blazor-diagram-label-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLgWVrBgOQpAjdB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Labels Position in Blazor Chart](images/category-axis/blazor-diagram-label-position.png)" %} ## Range and interval @@ -136,9 +132,7 @@ The [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLqWrrhTtLJCSXT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Column Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLqWrrhTtLJCSXT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.png)" %} ## Indexed category axis @@ -187,9 +181,7 @@ The category axis can also be rendered using the data source index values. This } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVAiVrVTDrcDBLL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVAiVrVTDrcDBLL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.png)" %} N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals. diff --git a/blazor/chart/chart-appearance.md b/blazor/chart/chart-appearance.md index ef00a5ce9f..d2fe14843c 100644 --- a/blazor/chart/chart-appearance.md +++ b/blazor/chart/chart-appearance.md @@ -332,8 +332,7 @@ N> The subtitle, which appears below the title, will also be positioned along wi } ``` -![Position customization of title in Blazor Chart](images/appearance/blazor-chart-title-position.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthIjzjTrISHobHi?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthIjzjTrISHobHi?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Position customization of title in Blazor Chart](images/appearance/blazor-chart-title-position.png)" %} When the `Position` is set to `Custom`, the title can be positioned anywhere on the chart using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html#Syncfusion_Blazor_Charts_ChartTitleStyle_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html#Syncfusion_Blazor_Charts_ChartTitleStyle_Y) properties in [ChartTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html). This provides precise control over the title’s location, enabling customization to fit specific design or layout needs. The `X` and `Y` values specify the horizontal and vertical coordinates, respectively. @@ -376,8 +375,7 @@ When the `Position` is set to `Custom`, the title can be positioned anywhere on } ``` -![Custom position of title in Blazor Chart](images/appearance/blazor-chart-title-position-custom.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLoXTtfLyEQbMWr?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLoXTtfLyEQbMWr?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Custom position of title in Blazor Chart](images/appearance/blazor-chart-title-position-custom.png)" %} ## Chart subtitle diff --git a/blazor/chart/chart-dimensions.md b/blazor/chart/chart-dimensions.md index 89ce1fc0dd..127597f763 100644 --- a/blazor/chart/chart-dimensions.md +++ b/blazor/chart/chart-dimensions.md @@ -61,9 +61,7 @@ The chart can be scaled to fit the container. As shown below, the size can be s } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVqWLrhgORNWnqy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVqWLrhgORNWnqy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.png)" %} ## Size for chart @@ -107,9 +105,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfCha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLUCrhhUOHBRpDP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLUCrhhUOHBRpDP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.png)" %} ### In percentage @@ -149,9 +145,7 @@ By setting the values of [Width](https://help.syncfusion.com/cr/blazor/Syncfusio } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLUMrVLAEHSsNxA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLUMrVLAEHSsNxA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.png)" %} N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/chart/cross-hair-and-track-ball.md b/blazor/chart/cross-hair-and-track-ball.md index 107027000b..ee11a31dc4 100644 --- a/blazor/chart/cross-hair-and-track-ball.md +++ b/blazor/chart/cross-hair-and-track-ball.md @@ -274,8 +274,7 @@ The [HighlightCategory](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -![Crosshair in Blazor Line Chart with highlight background](images/crosshair/blazor-line-chart-with-highlight-background-trackball.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBIjJjJztIfQRsg?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBIjJjJztIfQRsg?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Crosshair in Blazor Line Chart with highlight background](images/crosshair/blazor-line-chart-with-highlight-background-trackball.png)" %} N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/chart/date-time-axis.md b/blazor/chart/date-time-axis.md index c305abec0b..8270132ed7 100644 --- a/blazor/chart/date-time-axis.md +++ b/blazor/chart/date-time-axis.md @@ -50,9 +50,7 @@ You can learn how to customize the DateTime axis by watching the video below. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBAMLVBfMpwmDHF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Chart with DateTime Axis](images/datetime/blazor-line-chart-datetime-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBAMLVBfMpwmDHF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with DateTime Axis](images/datetime/blazor-line-chart-datetime-axis.png)" %} ## DateTime category axis @@ -89,9 +87,7 @@ The [DateTime Category](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLAWVVVTCIjNxnP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Line Chart with DateTime Axis](images/datetime/blazor-line-chart-with-datetime-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLAWVVVTCIjNxnP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with DateTime Axis](images/datetime/blazor-line-chart-with-datetime-axis.png)" %} ### Range @@ -131,9 +127,7 @@ The axis range will be calculated automatically based on the provided data; howe } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUirVVpWyKBAAB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Line Chart DateTime Axis based on Range](images/datetime/blazor-line-chart-axis-based-on-range.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUirVVpWyKBAAB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart DateTime Axis based on Range](images/datetime/blazor-line-chart-axis-based-on-range.png)" %} ### Interval customization @@ -182,9 +176,7 @@ The [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htVgCLLrTWoQFSbR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Line Chart DateTime Axis based on Interval](images/datetime/blazor-line-chart-axis-based-on-interval.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVgCLLrTWoQFSbR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart DateTime Axis based on Interval](images/datetime/blazor-line-chart-axis-based-on-interval.png)" %} **Applying padding to the Range** @@ -229,9 +221,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrKsBVrpCdNHsgt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Line Chart without RangePadding](images/datetime/blazor-line-chart-axis-based-on-range.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrKsBVrpCdNHsgt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart without RangePadding](images/datetime/blazor-line-chart-axis-based-on-range.png)" %} **DateTime - Round** @@ -340,9 +330,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVLrzZGdUeri?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Axis Label Formatting in Blazor Line Chart](images/datetime/blazor-line-chart-axis-label-format.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVLrzZGdUeri?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Axis Label Formatting in Blazor Line Chart](images/datetime/blazor-line-chart-axis-label-format.png)" %} The table below shows the results of applying various popular date and time formats to the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_LabelFormat) property. diff --git a/blazor/chart/last-data-label.md b/blazor/chart/last-data-label.md index 06bd611a35..2e9589ad01 100644 --- a/blazor/chart/last-data-label.md +++ b/blazor/chart/last-data-label.md @@ -54,8 +54,7 @@ To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/c ``` -![Last Data Label in Blazor Column Chart](images/last-value/blazor-column-chart-last-value-label.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrotEjvfKbMpjHI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrotEjvfKbMpjHI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Last Data Label in Blazor Column Chart](images/last-value/blazor-column-chart-last-value-label.png)" %} ## Customization @@ -122,8 +121,7 @@ In the [ChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion ``` -![Last Data Label in Blazor Column Chart Customization](images/last-value/blazor-column-chart-last-value-label-customization.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVojaDbzJnZIqnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVojaDbzJnZIqnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Last Data Label in Blazor Column Chart Customization](images/last-value/blazor-column-chart-last-value-label-customization.png)" %} ## See also diff --git a/blazor/chart/logarithmic-axis.md b/blazor/chart/logarithmic-axis.md index 5e015ef81e..259bae9eeb 100644 --- a/blazor/chart/logarithmic-axis.md +++ b/blazor/chart/logarithmic-axis.md @@ -51,9 +51,7 @@ You can learn how to customize the logarithmic axis by watching the video below. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLAMLhHLhczYuye?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLAMLhHLhczYuye?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.png)" %} ## Range @@ -93,9 +91,7 @@ The axis range will be calculated automatically based on the provided data; howe } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrqChBHBgilgqlG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Line Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrqChBHBgilgqlG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png)" %} ## Logarithmic base @@ -135,9 +131,7 @@ Logarithmic base can be customized using the [LogBase](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVKWVLHhgBMKubZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Line Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVKWVLHhgBMKubZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.png)" %} ## Logarithmic interval @@ -177,9 +171,7 @@ The interval can be customized using the [Interval](https://help.syncfusion.com/ } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhqMhVdrUVPPtnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Line Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhqMhVdrUVPPtnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.png)" %} ## Label format @@ -220,9 +212,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -![Blazor Line Chart Logarithmic Axis with Label Format](images/logarithmic-axis/blazor-line-chart-axis-with-label-format.png) - -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBUWrVHBqKsJuuA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBUWrVHBqKsJuuA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Label Format](images/logarithmic-axis/blazor-line-chart-axis-with-label-format.png)" %} The table below shows the results of applying some commonly used label formats to logarithmic values. @@ -321,9 +311,7 @@ Axis also supports custom label format using placeholders such as {value}K, wher } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrAMhrnBgqGAVip?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Line Chart Logarithmic Axis with Custom Label Format](images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrAMhrnBgqGAVip?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Custom Label Format](images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.png)" %} N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/chart/multiple-panes.md b/blazor/chart/multiple-panes.md index 4b3175e879..75b44fc001 100644 --- a/blazor/chart/multiple-panes.md +++ b/blazor/chart/multiple-panes.md @@ -74,9 +74,7 @@ Use the chart's [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrKiLhHhSDlvdrE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Rows with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrKiLhHhSDlvdrE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rows with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.png)" %} The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAxis.html#Syncfusion_Blazor_Charts_StockChartCommonAxis_Span) property of the axis can be used to span the vertical axis across multiple rows. @@ -134,9 +132,7 @@ The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrAWhLdhICspjQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Row spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-span-with-rows-span.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrAWhLdhICspjQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Row spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-span-with-rows-span.png)" %} ## Columns @@ -200,9 +196,7 @@ Use the chart's [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBqirLHryWphYTs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Columns with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBqirLHryWphYTs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Columns with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.png)" %} The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAxis.html#Syncfusion_Blazor_Charts_StockChartCommonAxis_Span) property of the axis can be used to span the horizontal axis across multiple column. @@ -258,9 +252,7 @@ The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVAWBLxhoCQMrEz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Column Spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVAWBLxhoCQMrEz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Column Spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.png)" %} N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/chart/numeric-axis.md b/blazor/chart/numeric-axis.md index 4ace5dc667..e0320a73bb 100644 --- a/blazor/chart/numeric-axis.md +++ b/blazor/chart/numeric-axis.md @@ -48,9 +48,7 @@ You can learn how to customize the numeric axis by watching the video below. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLgWLhVpXofZgyo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Line Chart with Numeric Axis](images/numeric-axis/blazor-line-chart-numeric-axis.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLgWLhVpXofZgyo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Numeric Axis](images/numeric-axis/blazor-line-chart-numeric-axis.png)" %} ## Range and interval @@ -88,9 +86,7 @@ The axis range will be calculated automatically based on the provided data; howe } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgiVrhJjoSuZwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Line Chart Axis based on Range](images/numeric-axis/blazor-line-chart-axis-range.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgiVrhJjoSuZwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Axis based on Range](images/numeric-axis/blazor-line-chart-axis-range.png)" %} ## Range padding @@ -138,9 +134,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhKWVBhTjobfVue?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Line Chart without RangePadding](images/numeric-axis/blazor-line-chart-range-without-padding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhKWVBhTjobfVue?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart without RangePadding](images/numeric-axis/blazor-line-chart-range-without-padding.png)" %} **Numeric - Round** @@ -178,9 +172,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrKMLhBztnCBwWc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Line Chart with Round RangePadding](images/numeric-axis/blazor-line-chart-round-range-padding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrKMLhBztnCBwWc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Round RangePadding](images/numeric-axis/blazor-line-chart-round-range-padding.png)" %} **Numeric - Additional** @@ -218,9 +210,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhgWLrhpZRURFmO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Line Chart with Additional RangePadding](images/numeric-axis/blazor-line-chart-additional-range-padding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhgWLrhpZRURFmO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Additional RangePadding](images/numeric-axis/blazor-line-chart-additional-range-padding.png)" %} **Numeric - Normal** @@ -258,9 +248,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKsrrrpXdxUwHH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Line Chart with Normal RangePadding](images/numeric-axis/blazor-line-chart-normal-range-padding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKsrrrpXdxUwHH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Normal RangePadding](images/numeric-axis/blazor-line-chart-normal-range-padding.png)" %} **Numeric - Auto** @@ -299,9 +287,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrUChBVTtmNHCaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Line Chart with Auto RangePadding](images/numeric-axis/blazor-line-chart-auto-rangepadding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrUChBVTtmNHCaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Auto RangePadding](images/numeric-axis/blazor-line-chart-auto-rangepadding.png)" %} ## Label format @@ -344,9 +330,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUChrhpjcKDKLn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Label Formatting in Blazor Line Chart](images/numeric-axis/blazor-line-chart-label-format.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUChrhpjcKDKLn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Formatting in Blazor Line Chart](images/numeric-axis/blazor-line-chart-label-format.png)" %} The table below shows the results of applying various commonly used label formats to numeric data. @@ -456,8 +440,7 @@ To separate groups of thousands for numerical values, use the [UseGroupingSepara ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBJZqLnepVFKTog?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Grouping Separator in Blazor Line Chart](images/numeric-axis/blazor-line-chart-grouping-separator.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBJZqLnepVFKTog?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping Separator in Blazor Line Chart](images/numeric-axis/blazor-line-chart-grouping-separator.png)" %} ## Custom label format @@ -495,9 +478,7 @@ Axis also supports custom label format using placeholders such as {value}K, wher } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVLrzZGdUeri?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Line Chart with Custom Label Format](images/numeric-axis/blazor-line-chart-custom-label-format.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVLrzZGdUeri?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Custom Label Format](images/numeric-axis/blazor-line-chart-custom-label-format.png)" %} N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/chart/selection.md b/blazor/chart/selection.md index 7350145de9..cb1710a10b 100644 --- a/blazor/chart/selection.md +++ b/blazor/chart/selection.md @@ -372,8 +372,7 @@ A point or series can be selected programmatically on a chart using the [Selecte ``` -![Programmatically Selection in Blazor Column Chart](images/selection/blazor-column-chart-programmatic-selection.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVJtgBxfkYWmfSE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVJtgBxfkYWmfSE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Programmatically Selection in Blazor Column Chart](images/selection/blazor-column-chart-programmatic-selection.png)" %} ## Legend Selection diff --git a/blazor/chart/strip-line.md b/blazor/chart/strip-line.md index 3f722e1f70..0f7a4009d3 100644 --- a/blazor/chart/strip-line.md +++ b/blazor/chart/strip-line.md @@ -58,9 +58,7 @@ By adding the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhKCVVRhJcQliSp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Chart with Horizontal Striplines](images/strip-line/blazor-chart-horizontal-strip-line.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhKCVVRhJcQliSp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Horizontal Striplines](images/strip-line/blazor-chart-horizontal-strip-line.png)" %} ## Vertical striplines @@ -104,9 +102,7 @@ By adding the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLUsBBRLpbtIuIn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Chart with Vertical Striplines](images/strip-line/blazor-chart-vertical-stripline.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLUsBBRLpbtIuIn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Vertical Striplines](images/strip-line/blazor-chart-vertical-stripline.png)" %} ## Striplines customization @@ -150,9 +146,7 @@ The [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVUCVLxVfbqQNji?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Chart with Custom Striplines](images/strip-line/blazor-chart-custom-stripline.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVUCVLxVfbqQNji?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Custom Striplines](images/strip-line/blazor-chart-custom-stripline.png)" %} ## Text customization @@ -199,9 +193,7 @@ The [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgWVLHBJlQDgKI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Chart with Custom Stripline Text](images/strip-line/blazor-chart-custom-strip-text.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgWVLHBJlQDgKI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Custom Stripline Text](images/strip-line/blazor-chart-custom-strip-text.png)" %} ## Segmented stripline @@ -254,9 +246,7 @@ To create a stripline in a specific region with respect to a segment (segmented }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Chart With Segmented Stripline](../chart/images/strip-line/blazor-chart-segmented-stripline.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart With Segmented Stripline](../chart/images/strip-line/blazor-chart-segmented-stripline.png)" %} N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/chart/tool-tip.md b/blazor/chart/tool-tip.md index 56b6640383..deef4e13e8 100644 --- a/blazor/chart/tool-tip.md +++ b/blazor/chart/tool-tip.md @@ -335,8 +335,7 @@ By enabling the [EnableHighlight](https://help.syncfusion.com/cr/blazor/Syncfusi ``` -![Blazor Chart tooltip with highlight series](images/tooltip/blazor-tooltip-enable-highlight.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZretJjTJXQadkbO?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZretJjTJXQadkbO?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Chart tooltip with highlight series](images/tooltip/blazor-tooltip-enable-highlight.png)" %} ## Displaying tooltip for nearest data point @@ -391,8 +390,7 @@ N> By default, `ShowNearestTooltip` property in [ChartSeries](https://help.syncf ``` -![Blazor Chart shows nearest tooltip](images/tooltip/blazor-chart-nearest-tooltip.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBoZJtzTMXtrCZt?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBoZJtzTMXtrCZt?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Chart shows nearest tooltip](images/tooltip/blazor-chart-nearest-tooltip.png)" %} N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/chart/working-with-data.md b/blazor/chart/working-with-data.md index 24679c21d0..9235fcfbff 100644 --- a/blazor/chart/working-with-data.md +++ b/blazor/chart/working-with-data.md @@ -54,9 +54,7 @@ An IEnumerable object can be assigned to the [DataSource](https://help.syncfusio } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBKCrrVgRsckQvf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Line Chart with Data Binding](images/working-data/blazor-chart-data-binding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBKCrrVgRsckQvf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Data Binding](images/working-data/blazor-chart-data-binding.png)" %} N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data-binding. @@ -174,9 +172,7 @@ Assign service data as an instance of [SfDataManager](https://help.syncfusion.co ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBAihBrgvFhnbIU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Remote Data Binding in Blazor Chart](images/working-data/blazor-chart-remote-data-binding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBAihBrgvFhnbIU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Remote Data Binding in Blazor Chart](images/working-data/blazor-chart-remote-data-binding.png)" %} ### Binding with OData services @@ -205,9 +201,7 @@ The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVKsrVVKFPmAhzX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Chart with Web API Binding](images/working-data/blazor-chart-web-api-binding.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVKsrVVKFPmAhzX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Web API Binding](images/working-data/blazor-chart-web-api-binding.png)" %} ### Sending additional parameters to the server @@ -509,9 +503,7 @@ The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.c } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVUiLBLAkpRpchN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Chart with Web API Binding](images/working-data/observable-collection.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVUiLBLAkpRpchN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Web API Binding](images/working-data/observable-collection.png)" %} ## Empty points @@ -610,9 +602,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartE } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLgMVhLAaIiyPBB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Column Chart with Empty Points](images/working-data/blazor-chart-empty-point.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLgMVhLAaIiyPBB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Empty Points](images/working-data/blazor-chart-empty-point.png)" %} ## Handling No Data @@ -674,8 +664,7 @@ When no data is available to render in the chart, the [NoDataTemplate](https://h ``` -![No Data Template in Blazor Chart](images/working-data/blazor-chart-no-data-template.gif) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrSZEZbBiUMPlvJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrSZEZbBiUMPlvJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[No Data Template in Blazor Chart](images/working-data/blazor-chart-no-data-template.gif)" %} N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/blazor/chart/zooming.md b/blazor/chart/zooming.md index c7057841cd..5879d580b8 100644 --- a/blazor/chart/zooming.md +++ b/blazor/chart/zooming.md @@ -242,8 +242,7 @@ The zoom toolbar in the chart can be repositioned using the [ChartZoomToolbarPos }; } ``` -![Blazor Line Chart with Zooming Toolbar Positioning](./images/zoom/blazor-line-chart-zoom-toolbar-position.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroZHVnTUnzfkob?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroZHVnTUnzfkob?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Zooming Toolbar Positioning](./images/zoom/blazor-line-chart-zoom-toolbar-position.png)" %} ## Enable pan @@ -417,8 +416,7 @@ The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ch }; } ``` -![Blazor Line Chart with customized scrollbar position](./images/zoom/blazor-line-chart-scroll-bar-position.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNryXRBRpKfeaJfn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNryXRBRpKfeaJfn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with customized scrollbar position](./images/zoom/blazor-line-chart-scroll-bar-position.png)" %} ### Customization @@ -478,8 +476,7 @@ Scrollbar appearance and behavior are customizable using [ChartAxisScrollbarSett }; } ``` -![Blazor Area Chart with scrollbar customization](images/zoom/blazor-area-chart-scroll-bar-customization.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBSXaDvCHkxWpZV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBSXaDvCHkxWpZV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Area Chart with scrollbar customization](images/zoom/blazor-area-chart-scroll-bar-customization.png)" %} ## Auto interval on zooming From 504bf4dd0bb0e4e5afc1dd851d1c7522d3897acd Mon Sep 17 00:00:00 2001 From: Backiaraj Date: Wed, 12 Nov 2025 18:53:38 +0530 Subject: [PATCH 5/5] Update preview sample output of Blazor components UG documentation --- blazor/chat-ui/getting-started-webapp.md | 8 +-- blazor/chat-ui/getting-started.md | 8 +-- .../how-to/checkbox-model-binding.md | 4 +- .../check-box/how-to/customized-checkbox.md | 16 ++--- blazor/check-box/how-to/right-to-left.md | 4 +- blazor/check-box/label-and-size.md | 8 +-- blazor/chip/customization.md | 24 ++----- blazor/chip/types.md | 18 ++--- blazor/circular-gauge/annotations.md | 12 +--- blazor/circular-gauge/appearance.md | 20 ++---- blazor/circular-gauge/axes.md | 68 +++++-------------- blazor/circular-gauge/dimensions.md | 8 +-- .../place-gauge-inside-other-components.md | 4 +- blazor/circular-gauge/legend.md | 16 ++--- blazor/circular-gauge/methods.md | 4 +- blazor/circular-gauge/pointers.md | 44 +++--------- blazor/circular-gauge/ranges.md | 32 +++------ blazor/circular-gauge/user-interaction.md | 20 ++---- 18 files changed, 78 insertions(+), 240 deletions(-) diff --git a/blazor/chat-ui/getting-started-webapp.md b/blazor/chat-ui/getting-started-webapp.md index 7775545c38..c1f9e927f7 100644 --- a/blazor/chat-ui/getting-started-webapp.md +++ b/blazor/chat-ui/getting-started-webapp.md @@ -225,11 +225,9 @@ N> If the **Interactivity Location** is set to `Global`, the **Render Mode** is {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor Chat UI component will be rendered in your browser. -![Blazor Chat UI Component](./images/chat-ui-component.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI Component](./images/chat-ui-component.png)" %} ## Configure Messages and User @@ -257,6 +255,4 @@ Use the [Messages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inter {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLfWBixUbETBpmk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Chat UI default prompt](./images/default-messages.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLfWBixUbETBpmk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI default prompt](./images/default-messages.png)" %} diff --git a/blazor/chat-ui/getting-started.md b/blazor/chat-ui/getting-started.md index 1d6c15198f..f361a2c326 100644 --- a/blazor/chat-ui/getting-started.md +++ b/blazor/chat-ui/getting-started.md @@ -151,11 +151,9 @@ Add the Syncfusion® Blazor Chat UI componen * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chat UI component in your default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Chat UI component in your default web browser. -![Blazor Chat UI Component.](images/chat-ui-component.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfMLiHUEAVqRkp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI Component.](images/chat-ui-component.png)" %} ## Configure messages and user @@ -183,7 +181,5 @@ You can use the [Messages](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLfWBixUbETBpmk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Chat UI default prompt.](images/default-messages.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLfWBixUbETBpmk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chat UI default prompt.](images/default-messages.png)" %} diff --git a/blazor/check-box/how-to/checkbox-model-binding.md b/blazor/check-box/how-to/checkbox-model-binding.md index a41ff4cf96..19abcdc75d 100644 --- a/blazor/check-box/how-to/checkbox-model-binding.md +++ b/blazor/check-box/how-to/checkbox-model-binding.md @@ -46,6 +46,4 @@ In this sample, first check the option and click the submit button to post the s } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhKMVrmrJkahhmZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Model Binding in Blazor CheckBox](./../images/blazor-checkbox-model-binding.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhKMVrmrJkahhmZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Model Binding in Blazor CheckBox](./../images/blazor-checkbox-model-binding.png)" %} \ No newline at end of file diff --git a/blazor/check-box/how-to/customized-checkbox.md b/blazor/check-box/how-to/customized-checkbox.md index b9ed9de034..285a408dbb 100644 --- a/blazor/check-box/how-to/customized-checkbox.md +++ b/blazor/check-box/how-to/customized-checkbox.md @@ -76,9 +76,7 @@ The background and border color of the Checkbox is customized through the custom ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVKshBQrJbnEQzO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Appearance of Blazor CheckBox](./../images/blazor-checkbox-appearance-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVKshBQrJbnEQzO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Appearance of Blazor CheckBox](./../images/blazor-checkbox-appearance-customization.png)" %} ## Customize width and height @@ -119,9 +117,7 @@ The following section explains about how to customize the height and width of th ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUWLLGVTFECslm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Height and Width of Blazor CheckBox](./../images/blazor-checkbox-height-width-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUWLLGVTFECslm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Height and Width of Blazor CheckBox](./../images/blazor-checkbox-height-width-customization.png)" %} ## Custom frame @@ -178,9 +174,7 @@ In the following example, to-do list is displayed with round checkbox by changin ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrgirhGhJYCyqDJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Blazor CheckBox Frame](./../images/blazor-checkbox-frame-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrgirhGhJYCyqDJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor CheckBox Frame](./../images/blazor-checkbox-frame-customization.png)" %} ## Custom check icon @@ -228,6 +222,4 @@ In the following example, the check icon can be customized by changing check ico ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBgWrLGrpkSQSUL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Check Icon in Blazor CheckBox](./../images/blazor-checkbox-check-icon-customization.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBgWrLGrpkSQSUL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Check Icon in Blazor CheckBox](./../images/blazor-checkbox-check-icon-customization.png)" %} \ No newline at end of file diff --git a/blazor/check-box/how-to/right-to-left.md b/blazor/check-box/how-to/right-to-left.md index 3e1c4dab6c..537d16fddd 100644 --- a/blazor/check-box/how-to/right-to-left.md +++ b/blazor/check-box/how-to/right-to-left.md @@ -23,6 +23,4 @@ The following example illustrates how to enable right-to-left support in Checkbo } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htVgiLhmVyZvKJzz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Right to Left in Blazor CheckBox](./../images/blazor-checkbox-right-to-left.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVgiLhmVyZvKJzz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Right to Left in Blazor CheckBox](./../images/blazor-checkbox-right-to-left.png)" %} \ No newline at end of file diff --git a/blazor/check-box/label-and-size.md b/blazor/check-box/label-and-size.md index 648fd6d416..0d8b3c7609 100644 --- a/blazor/check-box/label-and-size.md +++ b/blazor/check-box/label-and-size.md @@ -27,9 +27,7 @@ The [Blazor Checkbox](https://www.syncfusion.com/blazor-components/blazor-checkb } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLgMVBmLTwBGRID?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor CheckBox with Label](./images/blazor-checkbox-label.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLgMVBmLTwBGRID?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CheckBox with Label](./images/blazor-checkbox-label.png)" %} ## Size @@ -53,9 +51,7 @@ The different Checkbox sizes available are default and small. To reduce the size ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLAiVVQVzGyDwWz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor CheckBox Size](./images/blazor-checkbox-size.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLAiVVQVzGyDwWz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor CheckBox Size](./images/blazor-checkbox-size.png)" %} ## See also diff --git a/blazor/chip/customization.md b/blazor/chip/customization.md index 0987e3277b..6943f20880 100644 --- a/blazor/chip/customization.md +++ b/blazor/chip/customization.md @@ -38,9 +38,7 @@ The Chip control has the following predefined styles that can be defined using t ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLKsrBcBIwnwbXs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Blazor Chip Styles](./images/blazor-chip-style.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLKsrBcBIwnwbXs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Chip Styles](./images/blazor-chip-style.png)" %} ## Leading icon @@ -77,9 +75,7 @@ You can add and customize the leading icon of chip using the [`LeadingIconCss`]( ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLeDksEzbMVhnKc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing LeadingIcon of Blazor Chip](./images/blazor-chip-leading-icon.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLeDksEzbMVhnKc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing LeadingIcon of Blazor Chip](./images/blazor-chip-leading-icon.gif)" %} ## Avatar @@ -136,10 +132,7 @@ You can add and customize the avatar content of chip using the [`LeadingText`](h ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrqCLrQrovxnFxf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Customizing Avatar Text of Blazor Chip](./images/blazor-chip-avatar-content.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrqCLrQrovxnFxf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Avatar Text of Blazor Chip](./images/blazor-chip-avatar-content.gif)" %} ## Trailing icon @@ -158,10 +151,7 @@ You can add and customize the trailing icon of chip using the [`TrailingIconCss` ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVUiBhwBekjUuOz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Customizing Blazor Chip TrailingIcon](./images/blazor-chip-trailing-icon.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVUiBhwBekjUuOz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Chip TrailingIcon](./images/blazor-chip-trailing-icon.png)" %} ## Outline chip @@ -179,11 +169,7 @@ Outline chip has the border with the background transparent. It can be set using ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVgshrQrokgrCJD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - - -![Blazor Outline Chip with Transparent Background](./images/blazor-outline-chip-transparent-background.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVgshrQrokgrCJD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Outline Chip with Transparent Background](./images/blazor-outline-chip-transparent-background.gif)" %} ## Template diff --git a/blazor/chip/types.md b/blazor/chip/types.md index 2fd99e0c8d..fdabdab897 100644 --- a/blazor/chip/types.md +++ b/blazor/chip/types.md @@ -33,9 +33,7 @@ Input Chip holds information in compact form. It converts user input into chips. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhotaWuJwkKgwBO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Chip with Input Items](./images/blazor-chip-input-items.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhotaWuJwkKgwBO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chip with Input Items](./images/blazor-chip-input-items.png)" %} ## Choice Chip @@ -54,9 +52,7 @@ Choice Chip allows you to select a single chip from the set of Chip/ChipItems. I ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrgihLQrIIaiZzR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Single Selection in Blazor Chip](./images/blazor-chip-single-selection.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrgihLQrIIaiZzR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Single Selection in Blazor Chip](./images/blazor-chip-single-selection.gif)" %} ## Filter Chip @@ -75,10 +71,7 @@ Filter Chip allows you to select a multiple chip from the set of Chip/ChipItems. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVUChLGrodMJCaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Multiple Selection in Blazor Chip](./images/blazor-chip-multiple-selection.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVUChLGrodMJCaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Multiple Selection in Blazor Chip](./images/blazor-chip-multiple-selection.gif)" %} ## Action Chip @@ -109,10 +102,7 @@ The Action Chip triggers the event like [`OnClick`](https://help.syncfusion.com/ } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLgCrLGBSnHjcxB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - -![Blazor Action Chip](./images/blazor-action-chip.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLgCrLGBSnHjcxB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Action Chip](./images/blazor-action-chip.gif)" %} ### Deletable Chip diff --git a/blazor/circular-gauge/annotations.md b/blazor/circular-gauge/annotations.md index 5a7f523def..146cc27701 100644 --- a/blazor/circular-gauge/annotations.md +++ b/blazor/circular-gauge/annotations.md @@ -46,9 +46,7 @@ You can place any custom element on the axis area using [ContentTemplate](https: } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLgWrBGKhmauxQC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Annotation](./images/blazor-circulargauge-annotation.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLgWrBGKhmauxQC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Annotation](./images/blazor-circulargauge-annotation.png)" %} ## Positioning the annotation @@ -89,9 +87,7 @@ The radius of an annotation takes values either in pixel or in percentage. By se } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBgsrVcKVvLKeKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Annotation Position in Blazor Circular Gauge](./images/blazor-circulargauge-annotation-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBgsrVcKVvLKeKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Annotation Position in Blazor Circular Gauge](./images/blazor-circulargauge-annotation-position.png)" %} ## Multiple annotations @@ -146,9 +142,7 @@ Using [CircularGaugeAnnotation](https://help.syncfusion.com/cr/aspnetcore-blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVKWrBQqrFpJXLX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Multiple Annotation](./images/blazor-circulargauge-multiple-annotation.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVKWrBQqrFpJXLX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Multiple Annotation](./images/blazor-circulargauge-multiple-annotation.png)" %} ## See also diff --git a/blazor/circular-gauge/appearance.md b/blazor/circular-gauge/appearance.md index 0b2631c6ec..b973223a5c 100644 --- a/blazor/circular-gauge/appearance.md +++ b/blazor/circular-gauge/appearance.md @@ -27,9 +27,7 @@ You can add a title to the Circular Gauge using the [Title](https://help.syncfus ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLytkMmVzxeMrwb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Title](./images/blazor-circulargauge-title.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLytkMmVzxeMrwb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Title](./images/blazor-circulargauge-title.png)" %} ## Circular gauge position @@ -48,9 +46,7 @@ You can set the mid point of the Circular Gauge in pixel as shown below. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBKWVrmgfzCKvPj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Circular Gauge Position based on Pixel Value](./images/blazor-circulargauge-custom-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBKWVrmgfzCKvPj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Position based on Pixel Value](./images/blazor-circulargauge-custom-position.png)" %} ### In percentage @@ -65,9 +61,7 @@ By setting the value in percentage, Circular Gauge gets its mid point with respe ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKiVBGgzfHHcXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![changing Blazor Circular Gauge Position based on Percent Value](./images/blazor-circulargauge-position-based-on-percentage.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKiVBGgzfHHcXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[changing Blazor Circular Gauge Position based on Percent Value](./images/blazor-circulargauge-position-based-on-percentage.png)" %} ## Background customization @@ -101,9 +95,7 @@ Using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBqiLLwApIVWPGg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Background and Border of Blazor Circular Gauge](./images/blazor-circulargauge-background-border-color.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBqiLLwApIVWPGg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Background and Border of Blazor Circular Gauge](./images/blazor-circulargauge-background-border-color.png)" %} ## Radius calculation based on angles @@ -121,6 +113,4 @@ You can render semi or quarter Circular Gauge by modifying the start and end ang ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqiVBmKJoTIDfY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Custom Radius and Angle](./images/blazor-circulargauge-custom-radius-angle.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqiVBmKJoTIDfY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Radius and Angle](./images/blazor-circulargauge-custom-radius-angle.png)" %} \ No newline at end of file diff --git a/blazor/circular-gauge/axes.md b/blazor/circular-gauge/axes.md index c05c55225d..2bae65d061 100644 --- a/blazor/circular-gauge/axes.md +++ b/blazor/circular-gauge/axes.md @@ -27,9 +27,7 @@ You can customize the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.B ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhACVBmKWKyenGt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Blazor Circular Gauge Axis](./images/blazor-circulargauge-axis-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhACVBmKWKyenGt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Circular Gauge Axis](./images/blazor-circulargauge-axis-customization.png)" %} ## Minimum and maximum @@ -45,9 +43,7 @@ The [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGa ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVqWLVwgsAcbrhk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge Axis with Custom Value](./images/blazor-circulargauge-custom-value.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVqWLVwgsAcbrhk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Axis with Custom Value](./images/blazor-circulargauge-custom-value.png)" %} ## Start and end angle @@ -63,9 +59,7 @@ You can sweep the Circular Gauge axis from 0 to 360 degrees. By default, the sta ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUWhLGKMTZNUsx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Custom Angle](./images/blazor-circulargauge-custom-angle.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUWhLGKMTZNUsx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Angle](./images/blazor-circulargauge-custom-angle.png)" %} ## Axis radius @@ -85,9 +79,7 @@ You can set the radius of the Circular Gauge in pixel as shown below. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqMBLwUiJBVDaN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Custom Radius](./images/blazor-circulargauge-custom-radius.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqMBLwUiJBVDaN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Radius](./images/blazor-circulargauge-custom-radius.png)" %} ### In percentage @@ -102,9 +94,7 @@ By setting value in percentage, Circular Gauge gets its dimension with respect t ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrqWVhGAWzzitMZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Circular Gauge Radius in Percentage](./images/blazor-circulargauge-percentage-radius.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrqWVhGAWzzitMZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Radius in Percentage](./images/blazor-circulargauge-percentage-radius.png)" %} ## Ticks @@ -126,9 +116,7 @@ By default, [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhgWhVmKsJHpAUv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Major and Minor Ticks in Blazor Circular Gauge](./images/blazor-circulargauge-ticks-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhgWhVmKsJHpAUv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Major and Minor Ticks in Blazor Circular Gauge](./images/blazor-circulargauge-ticks-customization.png)" %} ### Tick position @@ -158,9 +146,7 @@ The minor ticks and major ticks can be positioned using the [Offset](https://hel ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBgWVLQgCyNoNBa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Custom Tick Position](./images/blazor-circulargauge-tick-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBgWVLQgCyNoNBa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Tick Position](./images/blazor-circulargauge-tick-position.png)" %} ## Labels @@ -180,9 +166,7 @@ The labels of an axis can be customized using the [CircularGaugeAxisLabelFont](h ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrgMVVGqsSBmTLZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Blazor Circular Gauge Label](./images/blazor-circulargauge-label.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrgMVVGqsSBmTLZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Circular Gauge Label](./images/blazor-circulargauge-label.png)" %} ### Label position @@ -205,9 +189,7 @@ The labels can be moved using the [Offset](https://help.syncfusion.com/cr/blazor ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhAWBrwAWyyrioJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Label Position of Blazor Circular Gauge](./images/blazor-circulargauge-label-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhAWBrwAWyyrioJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Position of Blazor Circular Gauge](./images/blazor-circulargauge-label-position.png)" %} ### Auto angle @@ -224,9 +206,7 @@ The labels can be swept along the axis angle by enabling the [AutoAngle](https:/ ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLKsLhcgsewVlDw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge Label in AutoAngle](./images/blazor-circulargauge-auto-angle.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLKsLhcgsewVlDw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Label in AutoAngle](./images/blazor-circulargauge-auto-angle.png)" %} ### Smart labels @@ -256,9 +236,7 @@ When an axis makes a complete circle, then the first and last labels of the axis ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLqMLVcqWSOwmqY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Smart Labels](./images/blazor-circulargauge-smart-label.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLqMLVcqWSOwmqY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Smart Labels](./images/blazor-circulargauge-smart-label.png)" %} ### Label format @@ -275,9 +253,7 @@ The axis labels can be formatted using the [Format](https://help.syncfusion.com/ ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsrBGKCdWFyxB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Label Format in Blazor Circular Gauge](./images/blazor-circulargauge-label-format.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsrBGKCdWFyxB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Format in Blazor Circular Gauge](./images/blazor-circulargauge-label-format.png)" %} The following table describes the result of applying some commonly used label formats on numeric values. @@ -354,9 +330,7 @@ Axis labels support custom label format using placeholder like {value}°C, in ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrgirrcgsdzgNwu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Label in Degree Format](./images/blazor-circulargauge-label-in-degree-format.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrgirrcgsdzgNwu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Label in Degree Format](./images/blazor-circulargauge-label-in-degree-format.png)" %} ### Show last label @@ -374,9 +348,7 @@ If the maximum value does not enter the interval of major ticks, the last label ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLqsLVmKCRxmzgP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Displaying Last Label of Blazor Circular Gauge](./images/blazor-circulargauge-last-label.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLqsLVmKCRxmzgP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Last Label of Blazor Circular Gauge](./images/blazor-circulargauge-last-label.png)" %} ### Hide intersecting axis labels @@ -392,9 +364,7 @@ When the axis labels overlap with each other, you can hide the intersected label ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhAMhrmUWnkrsge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Hiding Intersecting Axis Labels in Blazor Circular Gauge](./images/blazor-circulargauge-hide-intersecting-label.PNG) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhAMhrmUWnkrsge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Intersecting Axis Labels in Blazor Circular Gauge](./images/blazor-circulargauge-hide-intersecting-label.PNG)" %} ## Axis direction @@ -413,9 +383,7 @@ You can change the axis direction of the circular gauge using [Direction](https: ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVrmUWGVddDA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Axis Direction of Blazor Circular Gauge](./images/blazor-circulargauge-axis-direction.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVrmUWGVddDA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Axis Direction of Blazor Circular Gauge](./images/blazor-circulargauge-axis-direction.png)" %} ## Multiple axes @@ -452,6 +420,4 @@ In addition to the default axis, you can add n number of axis to a gauge. Each a ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVgWhhcqiQyCvQy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Multiple Axes](./images/blazor-circulargauge-multiple-axes.png) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVgWhhcqiQyCvQy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Multiple Axes](./images/blazor-circulargauge-multiple-axes.png)" %} \ No newline at end of file diff --git a/blazor/circular-gauge/dimensions.md b/blazor/circular-gauge/dimensions.md index 070f8345c4..03fda20790 100644 --- a/blazor/circular-gauge/dimensions.md +++ b/blazor/circular-gauge/dimensions.md @@ -30,9 +30,7 @@ You can set the size of the Circular Gauge in pixel as demonstrated below. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthItOWmVBPpLJbl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Circular Gauge Size in Pixel](./images/blazor-circulargauge-size.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthItOWmVBPpLJbl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Size in Pixel](./images/blazor-circulargauge-size.png)" %} ### In percentage @@ -54,8 +52,6 @@ By setting value in percentage, gauge gets its dimension with respect to its con ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVetOicVLudqTfx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Circular Gauge Size in Percentage](./images/blazor-circulargauge-size.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVetOicVLudqTfx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Size in Percentage](./images/blazor-circulargauge-size.png)" %} N> When you do not specify the size, it takes `450` pixels as the height and window size as its width. \ No newline at end of file diff --git a/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md b/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md index 7d558c018c..c3f3358cc0 100644 --- a/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md +++ b/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md @@ -403,9 +403,7 @@ When you drag and resize the Dialog component, the Circular Gauge component is n ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLSZkicrHnxtFdb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge inside Dialog component](../images/blazor-circulargauge-with-dialog.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLSZkicrHnxtFdb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge inside Dialog component](../images/blazor-circulargauge-with-dialog.png)" %} ## Circular Gauge component inside Accordion diff --git a/blazor/circular-gauge/legend.md b/blazor/circular-gauge/legend.md index 94a2608b57..97dbedb970 100644 --- a/blazor/circular-gauge/legend.md +++ b/blazor/circular-gauge/legend.md @@ -112,9 +112,7 @@ The following code example shows how to add legend in the gauge. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVUWhBQArOwLnwY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Legend in Blazor Circular Gauge](./images/blazor-circulargauge-legend.PNG) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVUWhBQArOwLnwY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Legend in Blazor Circular Gauge](./images/blazor-circulargauge-legend.PNG)" %} @@ -151,9 +149,7 @@ The toggle option has been provided for legend. So, if you toggle the legend, th ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrKMLBcAhEahQVw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge Legend with Toggle Option](./images/blazor-circulargauge-legend-with-toggle-option.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrKMLBcAhEahQVw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Legend with Toggle Option](./images/blazor-circulargauge-legend-with-toggle-option.gif)" %} ## Paging support in legend @@ -188,9 +184,7 @@ By default, paging will be enabled if the legend items exceed the legend bounds. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhKWhLGgANsovmK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge Legend with Paging](./images/blazor-circulargauge-legend-paging.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhKWhLGgANsovmK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Legend with Paging](./images/blazor-circulargauge-legend-paging.gif)" %} ## Legend text customization @@ -225,6 +219,4 @@ You can customize the legend text using `LegendText` property in `CircularGaugeR ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBUihhmUUjgdbpV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Legend Text in Blazor Circular Gauge](./images/blazor-circulargauge-legend-text.PNG) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBUihhmUUjgdbpV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Legend Text in Blazor Circular Gauge](./images/blazor-circulargauge-legend-text.PNG)" %} \ No newline at end of file diff --git a/blazor/circular-gauge/methods.md b/blazor/circular-gauge/methods.md index 89bfd22f89..b3eac4548e 100644 --- a/blazor/circular-gauge/methods.md +++ b/blazor/circular-gauge/methods.md @@ -81,9 +81,7 @@ To change the pointer value dynamically, use the [SetPointerValueAsync](https:// } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrqsVBwKfbNwfqv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge](./images/blazor-circulargauge.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrqsVBwKfbNwfqv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge](./images/blazor-circulargauge.png)" %} ## SetRangeValue diff --git a/blazor/circular-gauge/pointers.md b/blazor/circular-gauge/pointers.md index 5beb1d75f5..f4d1590a9c 100644 --- a/blazor/circular-gauge/pointers.md +++ b/blazor/circular-gauge/pointers.md @@ -25,9 +25,7 @@ Pointers are used to indicate values on an axis. The value of a pointer can be m ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrqshBwUVzsUfys?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Pointer](./images/blazor-circulargauge-with-pointer.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrqshBwUVzsUfys?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Pointer](./images/blazor-circulargauge-with-pointer.png)" %} The Circular Gauge supports three types of pointers such as [Needle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.PointerType.html#Syncfusion_Blazor_CircularGauge_PointerType_Needle), [RangeBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.PointerType.html#Syncfusion_Blazor_CircularGauge_PointerType_RangeBar), and [Marker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.PointerType.html#Syncfusion_Blazor_CircularGauge_PointerType_Marker). You can choose any pointer using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html#Syncfusion_Blazor_CircularGauge_CircularGaugePointer_Type) property. @@ -49,9 +47,7 @@ The circular gauge's default pointer type will be needle. A needle point contain ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLgCVhcghfqMkfw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Needle Pointer](./images/blazor-circulargauge-needle-pointer.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLgCVhcghfqMkfw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Needle Pointer](./images/blazor-circulargauge-needle-pointer.png)" %} ### Customization @@ -98,9 +94,7 @@ The needle, tail and cap of the pointer can be customized with the following pro ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBAMVBcgVpSKNFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Custom Pointer](./images/blazor-circulargauge-pointer-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBAMVBcgVpSKNFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Pointer](./images/blazor-circulargauge-pointer-customization.png)" %} @@ -173,9 +167,7 @@ The range bar pointer is like a range in an axis that can be placed on gauge to ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVgWLLQqLfubBRJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Range Bar Pointer](./images/blazor-circulargauge-range-bar-pointer.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVgWLLQqLfubBRJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Range Bar Pointer](./images/blazor-circulargauge-range-bar-pointer.png)" %} ### Customization @@ -208,9 +200,7 @@ You can customize the range bar using the following properties. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhUMhrwKBosYIXk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Blazor Circular Gauge Range Bar](./images/blazor-circulargauge-range-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhUMhrwKBosYIXk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Circular Gauge Range Bar](./images/blazor-circulargauge-range-customization.png)" %} ### Rounded corners @@ -232,9 +222,7 @@ The start and end pointers of a range bar in the Circular Gauge are rounded to f ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgsrVGUhIpRJzK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge Range Bar with Rounded Corner](./images/blazor-circulargauge-range-with-round-corner.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgsrVGUhIpRJzK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range Bar with Rounded Corner](./images/blazor-circulargauge-range-with-round-corner.png)" %} ## Marker pointer @@ -264,9 +252,7 @@ The different types of marker shapes can be used to mark the pointer value in an ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBAshVGghyGCzzX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Marker Pointer](./images/blazor-circulargauge-marker-pointer.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBAshVGghyGCzzX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Marker Pointer](./images/blazor-circulargauge-marker-pointer.png)" %} ### Customization @@ -299,9 +285,7 @@ You can customize the marker pointer using the following properties. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgCVhQUhRjXeXh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Custom Marker Pointer](./images/blazor-circulargauge-custom-marker-pointer.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgCVhQUhRjXeXh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Marker Pointer](./images/blazor-circulargauge-custom-marker-pointer.png)" %} ### Image marker pointer @@ -350,9 +334,7 @@ The pointers can be dragged over the axis values by clicking and dragging the sa ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthgCLBcqhdAvjZX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Dragging Pointer](./images/blazor-circulargauge-dragging-pointer.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthgCLBcqhdAvjZX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Dragging Pointer](./images/blazor-circulargauge-dragging-pointer.gif)" %} ## Multiple pointers @@ -392,9 +374,7 @@ In addition to the default pointer, you can add n number of pointers to an axis ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgMBrGKBnvQyWB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Multiple Pointers](./images/blazor-circulargauge-multiple-pointers.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgMBrGKBnvQyWB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Multiple Pointers](./images/blazor-circulargauge-multiple-pointers.png)" %} ## Pointer animation @@ -416,9 +396,7 @@ The pointers are animated on loading the gauge using the [CircularGaugePointerAn ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVoNkWwhpogscSG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Pointer Animation](./images/blazor-circulargauge-pointer-animation.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVoNkWwhpogscSG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Pointer Animation](./images/blazor-circulargauge-pointer-animation.gif)" %} ## Gradient color diff --git a/blazor/circular-gauge/ranges.md b/blazor/circular-gauge/ranges.md index 142f34187a..fe0283ffd4 100644 --- a/blazor/circular-gauge/ranges.md +++ b/blazor/circular-gauge/ranges.md @@ -29,9 +29,7 @@ The start and end values of a range in an axis can be customized using the [Star ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLLQgiOiCXDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Custom Range](./images/blazor-circulargauge-custom-range.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLLQgiOiCXDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Range](./images/blazor-circulargauge-custom-range.png)" %} ## Start width and end width @@ -54,9 +52,7 @@ Using [StartWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Circu ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhKMVLmAMOAiUsW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Customizing Start and End Width of Range in Blazor Circular Gauge](./images/blazor-circulargauge-width-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhKMVLmAMOAiUsW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Start and End Width of Range in Blazor Circular Gauge](./images/blazor-circulargauge-width-customization.png)" %} ## Changing color @@ -81,9 +77,7 @@ The color of a range can be customized using the [Color](https://help.syncfusion ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhKiLLcqWkShlmD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge Range with Custom Color](./images/blazor-circulargauge-range-color-customization.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhKiLLcqWkShlmD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range with Custom Color](./images/blazor-circulargauge-range-color-customization.png)" %} ## Range position @@ -103,9 +97,7 @@ The ranges can be placed either inside, outside or center of the axis using the ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLqMLrcKMummhZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Changing Blazor Circular Gauge Range Position](./images/blazor-circulargauge-range-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLqMLrcKMummhZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Range Position](./images/blazor-circulargauge-range-position.png)" %} ## Rounded corners @@ -125,9 +117,7 @@ You can customize the corner radius using the [RoundedCornerRadius](https://help ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBUsrLQKVDjNwmB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge Range with Rounded Corner](./images/blazor-circulargauge-rounded-corner-range.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBUsrLQKVDjNwmB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range with Rounded Corner](./images/blazor-circulargauge-rounded-corner-range.png)" %} ## Radius @@ -151,9 +141,7 @@ You can set a radius of the range in pixel as demonstrated below. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLqCBBGKrtreVuz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge Range with Custom Radius in Pixel](./images/blazor-circulargauge-radius-in-pixel.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLqCBBGKrtreVuz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range with Custom Radius in Pixel](./images/blazor-circulargauge-radius-in-pixel.png)" %} ### In percentage @@ -173,9 +161,7 @@ By setting value in percentage, a range gets its dimension with respect to its a ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBACVLwKVXIyNlD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge Range with Custom Radius in Percentage](./images/blazor-circulargauge-radius-in-percentage.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBACVLwKVXIyNlD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range with Custom Radius in Percentage](./images/blazor-circulargauge-radius-in-percentage.png)" %} @@ -232,9 +218,7 @@ You can set the range color to ticks and labels of an axis by enabling the [UseR ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBqChVmAViGyLES?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Multiple Ranges](./images/blazor-circulargauge-multiple-ranges.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBqChVmAViGyLES?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Multiple Ranges](./images/blazor-circulargauge-multiple-ranges.png)" %} ## Gradient color diff --git a/blazor/circular-gauge/user-interaction.md b/blazor/circular-gauge/user-interaction.md index d8a0a8cee4..d68dfcabaa 100644 --- a/blazor/circular-gauge/user-interaction.md +++ b/blazor/circular-gauge/user-interaction.md @@ -59,9 +59,7 @@ By default, the tooltip is not visible. You can enable the tooltip by setting th ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLqsLVwAKXazbSU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge displays ToolTip](./images/blazor-circulargauge-tooltip.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLqsLVwAKXazbSU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge displays ToolTip](./images/blazor-circulargauge-tooltip.png)" %} ### Showing tooltip at mouse position @@ -83,9 +81,7 @@ By default tooltip will be shown on the axis, you can show the tooltip at the cu ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVqMhVcKqCWBJms?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Displaying Blazor Circular Gauge ToolTip at Cursor Position](./images/blazor-circulargauge-tooltip-at-cursor-position.png) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVqMhVcKqCWBJms?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Circular Gauge ToolTip at Cursor Position](./images/blazor-circulargauge-tooltip-at-cursor-position.png)" %} ## Tooltip for ranges @@ -171,9 +167,7 @@ The following code example shows the tooltip for the pointers, ranges, and annot public string[] TooltipType = new string[] { "Range", "Annotation", "Pointer"}; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVAiBrwUAiKegWH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge displays ToolTip for Annotation](./images/blazor-circulargauge-tooltip-annotation.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVAiBrwUAiKegWH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge displays ToolTip for Annotation](./images/blazor-circulargauge-tooltip-annotation.gif)" %} ## Dragging pointer @@ -193,9 +187,7 @@ The pointers can be dragged over the axis values by clicking and dragging the po ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBAirVGgqWoeGGU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Dragging Pointer](./images/blazor-circulargauge-dragging-pointer.gif) +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBAirVGgqWoeGGU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Dragging Pointer](./images/blazor-circulargauge-dragging-pointer.gif)" %} ## Dragging range @@ -219,6 +211,4 @@ The ranges can be dragged over the axis values by clicking and dragging the rang ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVUihrmgKWmfaRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - -![Blazor Circular Gauge with Dragging Range](./images/blazor-circulargauge-dragging-range.gif) \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVUihrmgKWmfaRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Dragging Range](./images/blazor-circulargauge-dragging-range.gif)" %} \ No newline at end of file