diff --git a/blazor/accumulation-chart/empty-points.md b/blazor/accumulation-chart/empty-points.md index d6f0eb6e66..ccf0d76392 100644 --- a/blazor/accumulation-chart/empty-points.md +++ b/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
-
No Data
-
No data available to display.
+
No data available to display.
Load Data
@@ -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. diff --git a/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-no-data-template.gif b/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-no-data-template.gif index eeabaf0358..abb535ba18 100644 Binary files a/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-no-data-template.gif and b/blazor/accumulation-chart/images/empty/blazor-accumulation-chart-no-data-template.gif differ diff --git a/blazor/chart/axis-labels.md b/blazor/chart/axis-labels.md index b9fbefb385..c4ec06965b 100644 --- a/blazor/chart/axis-labels.md +++ b/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). diff --git a/blazor/chart/images/working-data/blazor-chart-no-data-template.gif b/blazor/chart/images/working-data/blazor-chart-no-data-template.gif index 909d8a1b4f..84033157f5 100644 Binary files a/blazor/chart/images/working-data/blazor-chart-no-data-template.gif and b/blazor/chart/images/working-data/blazor-chart-no-data-template.gif differ diff --git a/blazor/chart/last-data-label.md b/blazor/chart/last-data-label.md index f02fd390a8..06bd611a35 100644 --- a/blazor/chart/last-data-label.md +++ b/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 - + @@ -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`: - + @@ -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 diff --git a/blazor/chart/working-with-data.md b/blazor/chart/working-with-data.md index 29f0c989da..24679c21d0 100644 --- a/blazor/chart/working-with-data.md +++ b/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
-
No Data
-
No data available to display.
+
No data available to display.
Load Data
- + @@ -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. diff --git a/blazor/chart/zooming.md b/blazor/chart/zooming.md index a9ccfd9aeb..c8a5d619e1 100644 --- a/blazor/chart/zooming.md +++ b/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"> - + @@ -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 diff --git a/blazor/stock-chart/last-data-label.md b/blazor/stock-chart/last-data-label.md index 4720b66f18..572d6f057c 100644 --- a/blazor/stock-chart/last-data-label.md +++ b/blazor/stock-chart/last-data-label.md @@ -9,11 +9,11 @@ documentation: ug # Last Data Label in Blazor Stock Chart 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 stock chart. The label can be enabled and customized using the `StockChartLastDataLabel` 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 stock chart. The label can be enabled and customized using the [StockChartLastDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html) property. ## Enable last data label -To enable the last data label, set the `ShowLabel` property of the `StockChartLastDataLabel` 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.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_ShowLabel) property of the `StockChartLastDataLabel` configuration to **true** within the series settings. ```cshtml @@ -63,23 +63,23 @@ To enable the last data label, set the `ShowLabel` property of the `StockChartLa The appearance of the last data label can be customized using various properties defined across different settings. In the `StockChartLastDataLabel`: -* `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 `StockChartLastDataLabelBorder`: -* `Color`: Sets the border color of the label container. -* `Width`: Sets the border width of the label container. - -In the `StockChartLastDataLabelFont`: -* `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.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_Background): Sets the background color of the last data label container. +* [LineColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_LineColor): Sets the color of the indicator line. +* [LineWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_LineWidth): Sets the width of the indicator line. +* [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_DashArray): Defines the dash pattern of the indicator line. +* [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_Rx): Sets the horizontal corner radius of the label container. +* [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html#Syncfusion_Blazor_Charts_StockChartLastDataLabel_Ry): Sets the vertical corner radius of the label container. + +In the [StockChartLastDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelBorder.html): +* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelBorder.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelBorder_Color): Sets the border color of the label container. +* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelBorder.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelBorder_Width): Sets the border width of the label container. + +In the [StockChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html): +* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelFont_Size): Sets the font size of the label text. +* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelFont_Color): Sets the font color of the label text. +* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelFont_FontFamily): Specifies the font family of the label text. +* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelFont_FontWeight): Sets the font weight of the label text. +* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_StockChartLastDataLabelFont_FontStyle): Sets the font style of the label text. ```cshtml diff --git a/blazor/stock-chart/working-with-data.md b/blazor/stock-chart/working-with-data.md index 0a3e0c146d..06dd72d51c 100644 --- a/blazor/stock-chart/working-with-data.md +++ b/blazor/stock-chart/working-with-data.md @@ -531,7 +531,7 @@ On the other hand, to configure the chart using Web API, provide the appropriate ## Handling No Data -When no data is available to render in the stock 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 stock chart, the [NoDataTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_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 @using Syncfusion.Blazor.Charts