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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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/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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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/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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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/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" %}
-
-
-
+{% 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
```
-
-
-{% 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" %}
-
-
-
+{% 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" %}
-
-
-
+{% 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" %}
-
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
-
+{% 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)" %}
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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
}
}
```
-
-{% 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
}
}
```
-
-{% 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
}
}
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
}
```
-
-{% 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
}
}
```
-
-{% 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
```
-
-
-{% 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
```
-
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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.
```
-
-{% 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.
```
-
-{% 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
}
}
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
}
}
```
-
-{% 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
```
-
-{% 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
}
}
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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.
```
-
-{% 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
```
-
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
}
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
}
```
-
-{% 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
}
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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" %}
-
-
+{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
}
```
-
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-{% 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
```
-
-
-{% 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
```
-
-
-{% 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
```
-
-{% 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
```
-
-
-{% 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
```
-
-
-{% 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
```
-
-
-{% 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
```
-
-
-{% 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
```
-
-{% 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
```
-
-{% 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" %}
-
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
-
+{% 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" %}
-
-
-
+{% 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" %}
-
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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 %}
-
-
-{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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 %}
-
-
-{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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
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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
\ 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
-
+{% 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" %}
-
-
-
\ 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" %}
-
-
\ 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" %}
-
-
\ 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" %}
-
-
\ 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" %}
-
-
-
\ 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
-
+{% 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" %}
-
-
-
\ 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" %}
-
-
-
+{% 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" %}
-
-
-
\ 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" %}
-
-
\ 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" %}
-
-
\ 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
-
\ 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" %}
-
-
\ 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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
}
```
-
-{% 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/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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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
}
```
-
-{% 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
}
```
-
-{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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/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" %}
-
-
+{% 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" %}
-
-
+{% 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.
```
-
-{% 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
}
```
-
-{% 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
};
}
```
-
-{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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.
```
-
-{% 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
}
```
-
-{% 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
};
}
```
-
-{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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.
};
}
```
-
-{% 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
}
```
-
-{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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.
}
```
-
-{% 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
}
}
```
-
-{% 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" %}
-
-
+{% 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.
```
-
-{% 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
}
```
-
-{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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.
```
-
-{% 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
}
}
```
-
-{% 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" %}
-
-
+{% 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.
}
```
-
-{% 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
}
}
```
-
-{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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.
}
```
-
-{% 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
}
```
-
-{% 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/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.
```
-
-{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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/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" %}
-
-
+{% 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
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
```
-
-{% 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
```
-
-{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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.
```
-
-
-{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
+{% 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" %}
-
-
+{% 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
```
-
-{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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
```
-
-{% 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
```
-
-{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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
```
-
-{% 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
};
}
```
-
-{% 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
};
}
```
-
-{% 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
};
}
```
-
-{% 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
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.
-
+{% 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" %}
-
-
+{% 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.
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
-
+{% 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" %}
-
-
-
+{% 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" %}
-
-
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
-
+{% 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" %}
-
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
+{% 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" %}
-
-
\ 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