970202: Updated links and preview samples.

blazor/accumulation-chart/empty-points.md

@@ -98,7 +98,7 @@ The [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu
 
 ## Handling No Data
 
-When no data is available to render in the accumulation chart, the `NoDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
+When no data is available to render in the accumulation chart, the [NoDataTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_NoDataTemplate) property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
 
 ```cshtml 
 
@@ -108,8 +108,7 @@ When no data is available to render in the accumulation chart, the `NoDataTempla
 <SfAccumulationChart @ref="accChart" Width="80%" Title="Mobile Browser Statistics" SubTitle="In the year 2014 - 2015">
     <NoDataTemplate>
     <div style="border: 2px solid orange; display: row-flex; align-items: center; justify-content: center; align-content: center; white-space: normal; text-align: center; width: inherit; height: inherit; font-weight: bolder; font-size: medium;">
-        <div><img src="images/empty/no-data.png" alt="No Data" style="height: 150px;" /></div>
-        <div style="font-size:15px;"><strong>No data available to display.</strong></div>
+        <div style="font-size:15px; margin-bottom:10px"><strong>No data available to display.</strong></div>
         <SfButton IconCss="e-icons e-refresh" OnClick="LoadData">Load Data</SfButton>
     </div>
 </NoDataTemplate>
@@ -149,6 +148,7 @@ When no data is available to render in the accumulation chart, the `NoDataTempla
 ```
 
 ![No Data Template in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-no-data-template.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVojONbrgWPsFkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 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.
 

blazor/chart/axis-labels.md

@@ -738,9 +738,9 @@ You can customize the axis labels by using [OnAxisLabelRender](https://help.sync
 
 ## Axis label template
 
-The axis label template allows you to customize axis labels by formatting them with HTML content, applying conditional styling, and including dynamic elements such as icons, images or additional data. This customization is enabled by setting the template content in the `LabelTemplate` property of the [ChartAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html) component.
+The axis label template allows you to customize axis labels by formatting them with HTML content, applying conditional styling, and including dynamic elements such as icons, images or additional data. This customization is enabled by setting the template content in the [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_LabelTemplate) property of the [ChartAxis](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html) component.
 
-Within the `LabelTemplate`, the implicit parameter context provides access to label-specific information. To utilize this data, cast context to the `ChartAxisLabelInfo` class.
+Within the `LabelTemplate`, the implicit parameter context provides access to label-specific information. To utilize this data, cast context to the [ChartAxisLabelInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxisLabelInfo.html) class.
 
 ```cshtml
 
@@ -789,6 +789,7 @@ Within the `LabelTemplate`, the implicit parameter context provides access to la
 
 ```
 ![Blazor Column Chart Axis with Template using Text](images/axis-labels/blazor-column-chart-axis-text-template.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroXaDFiQqYQesU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Chart-Axis-Label-Customization).
 

blazor/chart/last-data-label.md

@@ -9,11 +9,11 @@ documentation: ug
 
 # Last Data Label in Blazor Charts Component
 
-The last data label feature highlights the most recent data point in a series by displaying a label along with an indicator line. This enhancement improves visibility and makes it easier to identify the latest value in the chart. The label can be enabled and customized using the `ChartLastDataLabel` property.
+The last data label feature highlights the most recent data point in a series by displaying a label along with an indicator line. This enhancement improves visibility and makes it easier to identify the latest value in the chart. The label can be enabled and customized using the [ChartLastDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html) property.
 
 ## Enable last data label
 
-To enable the last data label, set the `ShowLabel` property of the `ChartLastDataLabel` configuration to **true** within the series settings.
+To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html#Syncfusion_Blazor_Charts_ChartLastDataLabel_ShowLabel) property of the `ChartLastDataLabel` configuration to **true** within the series settings.
 
 ```cshtml
 
@@ -24,7 +24,7 @@ To enable the last data label, set the `ShowLabel` property of the `ChartLastDat
     <ChartPrimaryYAxis Title="Efficiency" LabelFormat="{value}%"></ChartPrimaryYAxis>
     <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
     <ChartSeriesCollection>
-        <ChartSeries DataSource="@ProductionDetails" XName="X" YName="Y" Type="ChartSeriesType.Column">
+        <ChartSeries DataSource="@ProductionDetails" XName="X" YName="Y" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
             <ChartLastDataLabel ShowLabel="true"></ChartLastDataLabel>
             <ChartMarker>
                 <ChartDataLabel Visible="true"></ChartDataLabel>
@@ -55,29 +55,30 @@ To enable the last data label, set the `ShowLabel` property of the `ChartLastDat
 ```
 
 ![Last Data Label in Blazor Column Chart](images/last-value/blazor-column-chart-last-value-label.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrotEjvfKbMpjHI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Customization
 
 The appearance of the last data label can be customized using various properties defined across different settings.
 
 In the `ChartLastDataLabel`:
-* `Background`: Sets the background color of the last data label container.
-* `LineColor`: Sets the color of the indicator line.
-* `LineWidth`: Sets the width of the indicator line.
-* `DashArray`: Defines the dash pattern of the indicator line.
-* `Rx`: Sets the horizontal corner radius of the label container.
-* `Ry`: Sets the vertical corner radius of the label container.
-
-In the `ChartLastDataLabelBorder`:
-* `Color`: Sets the border color of the label container.
-* `Width`: Sets the border width of the label container.
-
-In the `ChartLastDataLabelFont`:
-* `Size`: Sets the font size of the label text.
-* `Color`: Sets the font color of the label text.
-* `FontFamily`: Specifies the font family of the label text.
-* `FontWeight`: Sets the font weight of the label text.
-* `FontStyle`: Sets the font style of the label text.
+* [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html#Syncfusion_Blazor_Charts_ChartLastDataLabel_Background): Sets the background color of the last data label container.
+* [LineColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html#Syncfusion_Blazor_Charts_ChartLastDataLabel_LineColor): Sets the color of the indicator line.
+* [LineWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html#Syncfusion_Blazor_Charts_ChartLastDataLabel_LineWidth): Sets the width of the indicator line.
+* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html#Syncfusion_Blazor_Charts_ChartLastDataLabel_DashArray): Defines the dash pattern of the indicator line.
+* [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html#Syncfusion_Blazor_Charts_ChartLastDataLabel_Rx): Sets the horizontal corner radius of the label container.
+* [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html#Syncfusion_Blazor_Charts_ChartLastDataLabel_Ry): Sets the vertical corner radius of the label container.
+
+In the [ChartLastDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelBorder.html):
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelBorder.html#Syncfusion_Blazor_Charts_ChartLastDataLabelBorder_Color): Sets the border color of the label container.
+* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelBorder.html#Syncfusion_Blazor_Charts_ChartLastDataLabelBorder_Width): Sets the border width of the label container.
+
+In the [ChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelFont.html):
+* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_ChartLastDataLabelFont_Size): Sets the font size of the label text.
+* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_ChartLastDataLabelFont_Color): Sets the font color of the label text.
+* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_ChartLastDataLabelFont_FontFamily): Specifies the font family of the label text.
+* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_ChartLastDataLabelFont_FontWeight): Sets the font weight of the label text.
+* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_ChartLastDataLabelFont_FontStyle): Sets the font style of the label text.
 
 ```cshtml
 
@@ -88,7 +89,7 @@ In the `ChartLastDataLabelFont`:
     <ChartPrimaryYAxis Title="Efficiency" LabelFormat="{value}%"></ChartPrimaryYAxis>
     <ChartTooltipSettings Enable="true"></ChartTooltipSettings>
     <ChartSeriesCollection>
-        <ChartSeries DataSource="@ProductionDetails" XName="X" YName="Y" Type="ChartSeriesType.Column">
+        <ChartSeries DataSource="@ProductionDetails" XName="X" YName="Y" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
             <ChartLastDataLabel ShowLabel="true" Background="#748574" LineColor="blue" LineWidth="2" DashArray="5" Rx="10" Ry="10">
                 <ChartLastDataLabelBorder Color="red" Width="2"></ChartLastDataLabelBorder>
                 <ChartLastDataLabelFont Color="#F0E68C" FontFamily="Arial" FontStyle="Italic" FontWeight="bold" Size="12px"></ChartLastDataLabelFont>
@@ -122,6 +123,7 @@ In the `ChartLastDataLabelFont`:
 ```
 
 ![Last Data Label in Blazor Column Chart Customization](images/last-value/blazor-column-chart-last-value-label-customization.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVojaDbzJnZIqnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## See also
 

blazor/chart/working-with-data.md

@@ -616,7 +616,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartE
 
 ## Handling No Data
 
-When no data is available to render in the chart, the `NoDataTemplate` property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
+When no data is available to render in the chart, the [NoDataTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_NoDataTemplate) property can be used to display a custom layout within the chart area. This layout may include a message indicating the absence of data, a relevant image, or a button to initiate data loading. Styled text, images, or interactive elements can be incorporated to maintain design consistency and improve user guidance. Once data becomes available, the chart automatically updates to display the appropriate visualization.
 
 ```cshtml
 
@@ -626,15 +626,14 @@ When no data is available to render in the chart, the `NoDataTemplate` property
 <SfChart @ref="chart" Width="80%" Title="Milk Production in US - 2025" SubTitle="Jan 2025 - Apr 2025">
     <NoDataTemplate>
     <div class="noDataTemplateContainerStyle" style="border: 2px solid orange; display: row-flex; align-items: center; justify-content: center; align-content: center; white-space: normal; text-align: center; width: inherit; height: inherit; font-weight: bolder; font-size: medium;">
-        <div><img src="images/working-data/no-data.png" alt="No Data" style="height: 150px;" /></div>
-        <div style="font-size:15px;"><strong>No data available to display.</strong></div>
+        <div style="font-size:15px; margin-bottom:10px"><strong>No data available to display.</strong></div>
         <SfButton IconCss="e-icons e-refresh" OnClick="LoadData">Load Data</SfButton>
     </div>
 </NoDataTemplate>
     <ChildContent>
         <ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category" />
         <ChartSeriesCollection>
-            <ChartSeries DataSource="@SalesReports" XName="Month" YName="Value" Type="ChartSeriesType.Column">
+            <ChartSeries DataSource="@SalesReports" XName="Month" YName="Value" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Column">
                 <ChartMarker>
                     <ChartDataLabel Visible="true" Name="Text"/>
                 </ChartMarker>
@@ -676,6 +675,7 @@ When no data is available to render in the chart, the `NoDataTemplate` property
 ```
 
 ![No Data Template in Blazor Chart](images/working-data/blazor-chart-no-data-template.gif)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrSZEZbBiUMPlvJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 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.
 

blazor/chart/zooming.md

@@ -424,13 +424,13 @@ The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ch
 
 Scrollbar appearance and behavior are customizable using [ChartAxisScrollbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxisScrollbarSettings.html):
 
-- `TrackColor`: Specifies the track color.
-- `TrackRadius`: Specifies the track corner radius.
-- `ScrollbarColor`: Specifies the scrollbar color.
-- `ScrollbarRadius`: Specifies the scrollbar corner radius.
-- `GripColor`: Specifies the grip color. The grip is the draggable handle (thumb) within the scrollbar used to move the visible range.
-- `Height`: Specifies the scrollbar height.
-- `EnableZoom`: Enables or disables zooming via the scrollbar. When enabled, arrows appear at the scrollbar ends to zoom in or out; when disabled, arrows are hidden and zooming via the scrollbar is unavailable.
+- [TrackColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonScrollbarSettings.html#Syncfusion_Blazor_Charts_ChartCommonScrollbarSettings_TrackColor): Specifies the track color.
+- [TrackRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonScrollbarSettings.html#Syncfusion_Blazor_Charts_ChartCommonScrollbarSettings_TrackRadius): Specifies the track corner radius.
+- [ScrollbarColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonScrollbarSettings.html#Syncfusion_Blazor_Charts_ChartCommonScrollbarSettings_ScrollbarColor): Specifies the scrollbar color.
+- [ScrollbarRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonScrollbarSettings.html#Syncfusion_Blazor_Charts_ChartCommonScrollbarSettings_ScrollbarRadius): Specifies the scrollbar corner radius.
+- [GripColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonScrollbarSettings.html#Syncfusion_Blazor_Charts_ChartCommonScrollbarSettings_GripColor): Specifies the grip color. The grip is the draggable handle (thumb) within the scrollbar used to move the visible range.
+- [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonScrollbarSettings.html#Syncfusion_Blazor_Charts_ChartCommonScrollbarSettings_Height): Specifies the scrollbar height.
+- [EnableZoom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonScrollbarSettings.html#Syncfusion_Blazor_Charts_ChartCommonScrollbarSettings_EnableZoom): Enables or disables zooming via the scrollbar. When enabled, arrows appear at the scrollbar ends to zoom in or out; when disabled, arrows are hidden and zooming via the scrollbar is unavailable.
 
 ```cshtml
 @using Syncfusion.Blazor.Charts
@@ -455,7 +455,7 @@ Scrollbar appearance and behavior are customizable using [ChartAxisScrollbarSett
         EnableSelectionZooming="true"></ChartZoomSettings>
 
     <ChartSeriesCollection>
-        <ChartSeries DataSource="@SalesDetails" XName="X" YName="Y" Type="ChartSeriesType.Area">
+        <ChartSeries DataSource="@SalesDetails" XName="X" YName="Y" Type="Syncfusion.Blazor.Charts.ChartSeriesType.Area">
         </ChartSeries>
     </ChartSeriesCollection>
 
@@ -479,6 +479,7 @@ Scrollbar appearance and behavior are customizable using [ChartAxisScrollbarSett
 }
 ```
 ![Blazor Area Chart with scrollbar customization](images/zoom/blazor-area-chart-scroll-bar-customization.png)
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBSXaDvCHkxWpZV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ## Auto interval on zooming