- 2025 Volume 3 - 31.*
- Weekly Release
- 31.1.17 Main Release
- 2025 Volume 2 - 30.*
- 2025 Volume 1 - 29.*
- 2024 Volume 4 - 28.*
- 2024 Volume 3 - 27.*
- 2024 Volume 2 - 26.*
- 2024 Volume 1 - 25.*
- 2023 Volume 4 - 24.*
- 2023 Volume 3 - 23.*
- 2023 Volume 2 - 22.*
- 2023 Volume 1 - 21.* +
- RELEASE NOTES
+
- 2025 Volume 3 - 31.*
- 2025 Volume 2 - 30.*
- 2025 Volume 1 - 29.*
- 2024 Volume 4 - 28.*
- 2024 Volume 3 - 27.*
- 2024 Volume 2 - 26.*
- 2024 Volume 1 - 25.*
- 2023 Volume 4 - 24.*
- 2023 Volume 3 - 23.*
- 2023 Volume 2 - 22.*
- 2023 Volume 1 - 21.*
- 2022 Volume 4 - 20.4.*
- 2022 Volume 3 - 20.3.*
- 2022 volume 2 - 20.2.*
- 2022 volume 1 - 20.1.*
- 2021 Volume 4 - 19.4.*
- 2021 volume 3 - 19.3.*
- 2021 Volume 2 - 19.2.*
- 2021 volume 1 - 19.1.*
- 2020 volume 4 - 18.4.*
- 2020 volume 3 - 18.3.* diff --git a/blazor/3D-chart/accessibility.md b/blazor/3D-chart/accessibility.md index 124bcd68d9..a9ec35d4f7 100644 --- a/blazor/3D-chart/accessibility.md +++ b/blazor/3D-chart/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor 3D Chart component and more. +description: Check out and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor 3D Chart component and more. platform: Blazor control: 3D Chart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Accessibility in Blazor 3D Chart Component -The Blazor 3D Chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor 3D Chart component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI‑ARIA roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. -The accessibility compliance for the Blazor 3D Chart component is outlined below. +The accessibility compliance for the Blazor 3D Chart component is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | @@ -33,23 +33,23 @@ The accessibility compliance for the Blazor 3D Chart component is outlined belo
-
- All features of the component meet the requirement.+
- Some features of the component do not meet the requirement. - Some features of the component do not fully meet the requirement.## WAI-ARIA attributes -WAI-ARIA(Accessibility Initiative - Accessible Rich Internet Applications) defines a way to increase the accessibility of web pages, dynamic content, and user interface components developed with AJAX, HTML, JavaScript, and related technologies. ARIA provides additional semantics to describe the role, state, and functionality of web components. +WAI‑ARIA (Web Accessibility Initiative – Accessible Rich Internet Applications) enhances the accessibility of dynamic web content and UI components by defining semantic roles, states, and properties. ARIA attributes convey the role, state, and functionality of components to assistive technologies. -Element |Default description +Element | Default description -----|----- -Datalabel |Reads the Point y value. -Legend |Click to show or hide the series. -Axis Title |Reads the axis title. -Chart Title |Reads the chart title. -Series Points |Reads the Point x: Point y value. +Datalabel | Reads the point y-value. +Legend | Click to show or hide the series. +Axis Title | Reads the axis title. +Chart Title | Reads the chart title. +Series Points | Reads the point x and point y values. -The Blazor 3D Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor 3D Chart component: +The Blazor 3D Chart component follows [WAI‑ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet accessibility requirements. The following ARIA roles and attributes are used in the Blazor 3D Chart component: * img (role) * button (role) @@ -60,23 +60,23 @@ The Blazor 3D Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/ARI ## Keyboard navigation -The Blazor 3D Chart component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor 3D Chart component. +The Blazor 3D Chart component follows the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, enabling efficient navigation for assistive technology users and full keyboard operation. The following keyboard shortcuts are supported. | Windows | Mac | Description | |-----|-----|---| -|Alt + J | ⌥ + J | Moves the focus to the chart element.| -|Tab | Tab | Moves the focus to the next element in the chart.| -|Shift + Tab | ⇧ + Tab | Moves the focus to the previous element in the chart.| -| ↓ | ↓ | Moves the focus to the data point right side from the selected point.| -| ↑ | ↑ | Moves the focus to the data point right side from the selected point.| -| ← | ← | Moves the focus to the next series in our Chart component.| -| → | → | Moves the focus to the previous series in our Chart component.| -| Enter / Space | Enter / Space | Selects the data point in the series| -| ↓ / ← | ↓ / ← | Moves the focus to the legend left side from the selected legend.| -| ↑ / → | ↑ / → | Moves the focus to the legend right side from the selected legend.| +|Alt + J | ⌥ + J | Moves focus to the chart element.| +|Tab | Tab | Moves focus to the next element in the chart.| +|Shift + Tab | ⇧ + Tab | Moves focus to the previous element in the chart.| +| ↓ | ↓ | Moves focus to the data point on the left of the selected point.| +| ↑ | ↑ | Moves focus to the data point on the right of the selected point.| +| ← | ← | Moves focus to the next series in the chart.| +| → | → | Moves focus to the previous series in the chart.| +| Enter / Space | Enter / Space | Selects the data point in the series.| +| ↓ / ← | ↓ / ← | Moves focus to the legend item to the left of the selected legend.| +| ↑ / → | ↑ / → | Moves focus to the legend item to the right of the selected legend.| | Enter / Space | Enter / Space | Toggles the visibility of the corresponding series.| -| Ctrl + P | ⌘ + P | Prints the Chart.| +| Ctrl + P | ⌘ + P | Prints the chart.| ## See also -* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) diff --git a/blazor/3D-chart/appearance.md b/blazor/3D-chart/appearance.md index 7144e8c186..57f844aef9 100644 --- a/blazor/3D-chart/appearance.md +++ b/blazor/3D-chart/appearance.md @@ -1,7 +1,7 @@ --- layout: post title: Appearance in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about Appearance Customization in Syncfusion Blazor 3D Chart component and much more. +description: Check out and learn here all about Appearance Customization in Syncfusion Blazor 3D Chart component and much more. platform: Blazor control: 3D Chart documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Custom color palette -The default color of series or points can be customized by providing a custom color palette of your choice by using the `Palettes` property. +Customize the default colors of series or points by supplying a custom palette using the `Palettes` property. ```cshtml @@ -31,7 +31,7 @@ The default color of series or points can be customized by providing a custom co -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -41,7 +41,7 @@ The default color of series or points can be customized by providing a custom co } public List
- The component does not meet the requirement.MedalDetails = new List - { + { new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, @@ -64,11 +64,11 @@ The default color of series or points can be customized by providing a custom co ## Data point customization -The color of an individual data point can be customized using the below options. +The color of an individual data point can be customized using the following options. ### Point color mapping -The color for the points can be bound from the `DataSource` for the series by utilizing the `PointColor` property. +Bind a color for each point from the series `DataSource` using the `PointColor` property. ```cshtml @@ -106,7 +106,7 @@ The color for the points can be bound from the `DataSource` for the series by ut ## Point level customization -The data label and fill color of each data point can be customized using the `PointRender` and `TextRender` events. +Customize the data label and fill color of each point using the `PointRender` and `TextRender` events. ```cshtml @@ -123,7 +123,6 @@ The data label and fill color of each data point can be customized using the `Po @code { - public String[] colors = new String[] { "#00bdae", "#404041", "#357cd2", "#e56590", "#f8b883", "#70ad47", "#dd8abd", "#7f84e8", "#7bb4eb", "#ea7a57" }; public class Chart3DData @@ -150,6 +149,7 @@ The data label and fill color of each data point can be customized using the `Po { args.Fill = colors[args.Point.Index]; } + public void TextRender(Chart3DTextRenderEventArgs args) { if (args.Point.Index == 2) @@ -174,7 +174,7 @@ The data label and fill color of each data point can be customized using the `Po **Customize the chart background** -The background color and border of the 3D chart can be customized using the `BackgroundColor` and `Chart3DBorder` properties. +Customize the chart background and border using the `BackgroundColor` and `Chart3DBorder` properties. ```cshtml @@ -191,7 +191,7 @@ The background color and border of the 3D chart can be customized using the `Bac -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -199,15 +199,15 @@ The background color and border of the 3D chart can be customized using the `Bac } public List MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50 }, - new Chart3DData { Country = "China", Gold = 40 }, - new Chart3DData { Country = "Japan", Gold = 70 }, - new Chart3DData { Country = "Australia", Gold = 60 }, - new Chart3DData { Country = "France", Gold = 50 }, - new Chart3DData { Country = "Germany", Gold = 40 }, - new Chart3DData { Country = "Italy", Gold = 40 }, - new Chart3DData { Country = "Sweden", Gold = 30 } + { + new Chart3DData { Country = "USA", Gold = 50 }, + new Chart3DData { Country = "China", Gold = 40 }, + new Chart3DData { Country = "Japan", Gold = 70 }, + new Chart3DData { Country = "Australia", Gold = 60 }, + new Chart3DData { Country = "France", Gold = 50 }, + new Chart3DData { Country = "Germany", Gold = 40 }, + new Chart3DData { Country = "Italy", Gold = 40 }, + new Chart3DData { Country = "Sweden", Gold = 30 } }; } @@ -218,7 +218,7 @@ The background color and border of the 3D chart can be customized using the `Bac **Chart margin** -The 3D chart's margin can be set from its container using the `Chart3DMargin` property. +Set the margin between the 3D chart and its container using the `Chart3DMargin` property. ```cshtml @@ -236,7 +236,7 @@ The 3D chart's margin can be set from its container using the `Chart3DMargin` pr -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -244,15 +244,15 @@ The 3D chart's margin can be set from its container using the `Chart3DMargin` pr } public List MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50 }, - new Chart3DData { Country = "China", Gold = 40 }, - new Chart3DData { Country = "Japan", Gold = 70 }, - new Chart3DData { Country = "Australia", Gold = 60 }, - new Chart3DData { Country = "France", Gold = 50 }, - new Chart3DData { Country = "Germany", Gold = 40 }, - new Chart3DData { Country = "Italy", Gold = 40 }, - new Chart3DData { Country = "Sweden", Gold = 30 } + { + new Chart3DData { Country = "USA", Gold = 50 }, + new Chart3DData { Country = "China", Gold = 40 }, + new Chart3DData { Country = "Japan", Gold = 70 }, + new Chart3DData { Country = "Australia", Gold = 60 }, + new Chart3DData { Country = "France", Gold = 50 }, + new Chart3DData { Country = "Germany", Gold = 40 }, + new Chart3DData { Country = "Italy", Gold = 40 }, + new Chart3DData { Country = "Sweden", Gold = 30 } }; } @@ -263,14 +263,14 @@ The 3D chart's margin can be set from its container using the `Chart3DMargin` pr ## Animation -To customize the animation for a particular series, the `Chart3DAnimation` property can be used. It can be enabled or disabled by using the `Enable` property. The `Duration` property specifies the duration of an animation and the `Delay` property allows us to start the animation at desire time. +Customize particular series animation using the `Chart3DAnimation` property. Enable or disable it via `Enable`. Use `Duration` to control the animation length and `Delay` to start the animation after a specified time. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -290,7 +290,7 @@ To customize the animation for a particular series, the `Chart3DAnimation` prope } public List+ @@ -280,7 +280,7 @@ To customize the animation for a particular series, the `Chart3DAnimation` prope MedalDetails = new List - { + { new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, @@ -307,14 +307,14 @@ To customize the animation for a particular series, the `Chart3DAnimation` prope ## Chart rotation -The 3D chart can be rotated by using the `EnableRotation` property. +Rotate the 3D chart by enabling the `EnableRotation` property. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -332,7 +332,7 @@ The 3D chart can be rotated by using the `EnableRotation` property. } public List+ @@ -322,7 +322,7 @@ The 3D chart can be rotated by using the `EnableRotation` property. MedalDetails = new List - { + { new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, @@ -349,7 +349,7 @@ The 3D chart can be rotated by using the `EnableRotation` property. ## Title -The 3D chart can be given a title by using `Title` property, to show the information about the data plotted. +Add a chart title using the `Title` property to describe the plotted data. ```cshtml @@ -357,8 +357,7 @@ The 3D chart can be given a title by using `Title` property, to show the informa - - +@@ -366,7 +365,7 @@ The 3D chart can be given a title by using `Title` property, to show the informa MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50 }, - new Chart3DData { Country = "China", Gold = 40 }, - new Chart3DData { Country = "Japan", Gold = 70 }, - new Chart3DData { Country = "Australia", Gold = 60 }, - new Chart3DData { Country = "France", Gold = 50 }, - new Chart3DData { Country = "Germany", Gold = 40 }, - new Chart3DData { Country = "Italy", Gold = 40 }, - new Chart3DData { Country = "Sweden", Gold = 30 } + { + new Chart3DData { Country = "USA", Gold = 50 }, + new Chart3DData { Country = "China", Gold = 40 }, + new Chart3DData { Country = "Japan", Gold = 70 }, + new Chart3DData { Country = "Australia", Gold = 60 }, + new Chart3DData { Country = "France", Gold = 50 }, + new Chart3DData { Country = "Germany", Gold = 40 }, + new Chart3DData { Country = "Italy", Gold = 40 }, + new Chart3DData { Country = "Sweden", Gold = 30 } }; } @@ -393,7 +392,7 @@ The 3D chart can be given a title by using `Title` property, to show the informa ### Title position -By using the `Position`property in `TitleStyle`, the `Title` can be positioned at left, right, top or bottom of the 3D chart. The title is positioned at the top of the 3D chart, by default. +Use the `Position` property in `TitleStyle` to place the `Title` at the left, right, top, or bottom of the chart. By default, the title appears at the top. ```cshtml @@ -401,8 +400,7 @@ By using the `Position`property in `TitleStyle`, the `Title` can be positioned - - +@@ -410,7 +408,7 @@ By using the `Position`property in `TitleStyle`, the `Title` can be positioned MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50 }, - new Chart3DData { Country = "China", Gold = 40 }, - new Chart3DData { Country = "Japan", Gold = 70 }, - new Chart3DData { Country = "Australia", Gold = 60 }, - new Chart3DData { Country = "France", Gold = 50 }, - new Chart3DData { Country = "Germany", Gold = 40 }, - new Chart3DData { Country = "Italy", Gold = 40 }, - new Chart3DData { Country = "Sweden", Gold = 30 } + { + new Chart3DData { Country = "USA", Gold = 50 }, + new Chart3DData { Country = "China", Gold = 40 }, + new Chart3DData { Country = "Japan", Gold = 70 }, + new Chart3DData { Country = "Australia", Gold = 60 }, + new Chart3DData { Country = "France", Gold = 50 }, + new Chart3DData { Country = "Germany", Gold = 40 }, + new Chart3DData { Country = "Italy", Gold = 40 }, + new Chart3DData { Country = "Sweden", Gold = 30 } }; } @@ -435,7 +433,7 @@ By using the `Position`property in `TitleStyle`, the `Title` can be positioned  -The custom option is used to position the title anywhere in the 3D chart using `X` and `Y` coordinates. +The custom option positions the title anywhere in the chart using `X` and `Y` coordinates. ```cshtml @@ -443,8 +441,7 @@ The custom option is used to position the title anywhere in the 3D chart using ` - - +@@ -452,7 +449,7 @@ The custom option is used to position the title anywhere in the 3D chart using ` MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50 }, - new Chart3DData { Country = "China", Gold = 40 }, - new Chart3DData { Country = "Japan", Gold = 70 }, - new Chart3DData { Country = "Australia", Gold = 60 }, - new Chart3DData { Country = "France", Gold = 50 }, - new Chart3DData { Country = "Germany", Gold = 40 }, - new Chart3DData { Country = "Italy", Gold = 40 }, - new Chart3DData { Country = "Sweden", Gold = 30 } + { + new Chart3DData { Country = "USA", Gold = 50 }, + new Chart3DData { Country = "China", Gold = 40 }, + new Chart3DData { Country = "Japan", Gold = 70 }, + new Chart3DData { Country = "Australia", Gold = 60 }, + new Chart3DData { Country = "France", Gold = 50 }, + new Chart3DData { Country = "Germany", Gold = 40 }, + new Chart3DData { Country = "Italy", Gold = 40 }, + new Chart3DData { Country = "Sweden", Gold = 30 } }; } @@ -477,9 +474,9 @@ The custom option is used to position the title anywhere in the 3D chart using `  -## Title alignment +### Title alignment -The title can be aligned to the near, far, or center of the 3D chart by using the `TextAlignment` property. +Align the title to the near, far, or center of the chart using the `TextAlignment` property. ```cshtml @@ -487,8 +484,7 @@ The title can be aligned to the near, far, or center of the 3D chart by using th - - +@@ -506,13 +502,13 @@ The title can be aligned to the near, far, or center of the 3D chart by using th public List MedalDetails = new List { new Chart3DData { Country = "USA", Gold = 50 }, - new Chart3DData { Country = "China", Gold = 40 }, - new Chart3DData { Country = "Japan", Gold = 70 }, - new Chart3DData { Country = "Australia", Gold = 60 }, - new Chart3DData { Country = "France", Gold = 50 }, - new Chart3DData { Country = "Germany", Gold = 40 }, - new Chart3DData { Country = "Italy", Gold = 40 }, - new Chart3DData { Country = "Sweden", Gold = 30 } + new Chart3DData { Country = "China", Gold = 40 }, + new Chart3DData { Country = "Japan", Gold = 70 }, + new Chart3DData { Country = "Australia", Gold = 60 }, + new Chart3DData { Country = "France", Gold = 50 }, + new Chart3DData { Country = "Germany", Gold = 40 }, + new Chart3DData { Country = "Italy", Gold = 40 }, + new Chart3DData { Country = "Sweden", Gold = 30 } }; } @@ -523,7 +519,7 @@ The title can be aligned to the near, far, or center of the 3D chart by using th ### Title customization -The `TitleStyle` property of the 3D chart provides options to customize the title. +Customize the title using the `TitleStyle` property of the 3D chart. ```cshtml @@ -532,8 +528,7 @@ The `TitleStyle` property of the 3D chart provides options to customize the titl - - +@@ -551,13 +546,13 @@ The `TitleStyle` property of the 3D chart provides options to customize the titl public List MedalDetails = new List { new Chart3DData { Country = "USA", Gold = 50 }, - new Chart3DData { Country = "China", Gold = 40 }, - new Chart3DData { Country = "Japan", Gold = 70 }, - new Chart3DData { Country = "Australia", Gold = 60 }, - new Chart3DData { Country = "France", Gold = 50 }, - new Chart3DData { Country = "Germany", Gold = 40 }, - new Chart3DData { Country = "Italy", Gold = 40 }, - new Chart3DData { Country = "Sweden", Gold = 30 } + new Chart3DData { Country = "China", Gold = 40 }, + new Chart3DData { Country = "Japan", Gold = 70 }, + new Chart3DData { Country = "Australia", Gold = 60 }, + new Chart3DData { Country = "France", Gold = 50 }, + new Chart3DData { Country = "Germany", Gold = 40 }, + new Chart3DData { Country = "Italy", Gold = 40 }, + new Chart3DData { Country = "Sweden", Gold = 30 } }; } @@ -566,5 +561,4 @@ The `TitleStyle` property of the 3D chart provides options to customize the titl  -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. - +N> Chart components do not use any CSS for customization. Chart elements such as axis labels, data labels, background, series palette, legend text, and tooltip text can be customized using `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..299112ea57 100644 --- a/blazor/3D-chart/axis-customization.md +++ b/blazor/3D-chart/axis-customization.md @@ -1,7 +1,7 @@ --- layout: post title: Axis Customization in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about Axis Customization in Syncfusion Blazor 3D Chart component and more. +description: Check out and learn here all about Axis Customization in Syncfusion Blazor 3D Chart component and more. platform: Blazor control: 3D Chart documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Title -The title for the axis can be added by using the `Title` property. It helps to provide quick information to the user about the data plotted in the axis. Title style can be customized using `Chart3DAxisTitleStyle` property of the axis. +The axis title can be added using the `Title` property. This provides quick information about the data plotted on the axis. The title style is customizable with the `Chart3DAxisTitleStyle` property. ```cshtml @@ -29,7 +29,7 @@ The title for the axis can be added by using the `Title` property. It helps to p ChartPoints { get; set; } = new List (); + + public class ChartData + { + public double Period { get; set; } + public double Price { get; set; } + } + protected override void OnInitialized() { GetChartPoints(50); } + private void GetChartPoints(int value) { if (ChartPoints.Count > 0) @@ -240,11 +246,6 @@ The labels will be rendered based on the count in the `MaximumLabels` property p ); } } - public class ChartData - { - public double Period { get; set; } - public double Price { get; set; } - } } ``` diff --git a/blazor/3D-chart/category-axis.md b/blazor/3D-chart/category-axis.md index e34c386516..0e6effb958 100644 --- a/blazor/3D-chart/category-axis.md +++ b/blazor/3D-chart/category-axis.md @@ -1,7 +1,7 @@ --- layout: post title: Category Axis in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about Category Axis in Syncfusion Blazor 3D Chart component and much more. +description: Check out and learn about configuring Category Axis in Syncfusion Blazor 3D Chart component and much more. platform: Blazor control: 3D Chart documentation: ug @@ -9,7 +9,7 @@ documentation: ug # Category Axis in Blazor 3D Chart Component -The category axis is the horizontal axis of a 3D chart that shows text values rather than numerical values. Compared to the vertical axis, this axis has fewer labels. The following sample shows to render the 3D chart using category axis. +The category axis is the horizontal axis of a 3D chart that displays text values instead of numerical values. Compared to the vertical axis, the category axis typically has fewer labels. The following example demonstrates rendering a 3D chart using a category axis. ```cshtml @@ -25,7 +25,7 @@ The category axis is the horizontal axis of a 3D chart that shows text values ra -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -33,7 +33,7 @@ The category axis is the horizontal axis of a 3D chart that shows text values ra } public List MedalDetails = new List - { + { new Chart3DData { X = "USA", YValue = 46 }, new Chart3DData { X = "GBR", YValue = 27 }, new Chart3DData { X = "CHN", YValue = 26 }, @@ -50,16 +50,16 @@ The category axis is the horizontal axis of a 3D chart that shows text values ra  -## Labels placement +## Label Placement -By default, category axis labels are placed between ticks in an axis. It can also be placed on ticks using the `LabelPlacement` property. +By default, category axis labels are placed on ticks. Labels can also be placed between ticks using the `LabelPlacement` property. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -76,7 +76,7 @@ By default, category axis labels are placed between ticks in an axis. It can als } public List+ @@ -68,7 +68,7 @@ By default, category axis labels are placed between ticks in an axis. It can als MedalDetails = new List - { + { new Chart3DData { X = "USA", YValue = 46 }, new Chart3DData { X = "GBR", YValue = 27 }, new Chart3DData { X = "CHN", YValue = 26 }, @@ -89,13 +89,13 @@ 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/VDVyCNZnzAjxZcLw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  ## Range -The range of the category axis can be customized using `Minimum`, `Maximum`, and `Interval` properties of the axis. +The range of the category axis can be customized using the `Minimum`, `Maximum`, and `Interval` properties. ```cshtml @@ -111,7 +111,7 @@ The range of the category axis can be customized using `Minimum`, `Maximum`, and -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -119,7 +119,7 @@ The range of the category axis can be customized using `Minimum`, `Maximum`, and } public List MedalDetails = new List - { + { new Chart3DData { X = "USA", YValue = 46 }, new Chart3DData { X = "GBR", YValue = 27 }, new Chart3DData { X = "CHN", YValue = 26 }, @@ -136,9 +136,9 @@ The range of the category axis can be customized using `Minimum`, `Maximum`, and  -## Indexed category axis +## Indexed Category Axis -The category axis can also be rendered based on the index values of the data source. This can be achieved by defining the `IsIndexed` property to **true** in the axis. +The category axis can also be rendered based on the index values of the data source. This is achieved by setting the `IsIndexed` property to **true** on the axis. ```cshtml @@ -155,7 +155,7 @@ The category axis can also be rendered based on the index values of the data sou -@code{ +@code { public class WeatherData { public string X { get; set; } @@ -163,7 +163,7 @@ The category axis can also be rendered based on the index values of the data sou } public List WeatherReports1 = new List - { + { new WeatherData { X = "Myanmar", Y = 7.3 }, new WeatherData { X = "India", Y = 7.9 }, new WeatherData { X = "Bangladesh", Y = 6.8 }, @@ -172,7 +172,7 @@ The category axis can also be rendered based on the index values of the data sou }; public List WeatherReports2 = new List - { + { new WeatherData { X = "Poland", Y = 2.7 }, new WeatherData { X = "Australia", Y = 2.5 }, new WeatherData { X = "Singapore", Y = 2.0 }, diff --git a/blazor/3D-chart/chart-dimensions.md b/blazor/3D-chart/chart-dimensions.md index ca89172535..37d92f86b6 100644 --- a/blazor/3D-chart/chart-dimensions.md +++ b/blazor/3D-chart/chart-dimensions.md @@ -1,7 +1,7 @@ --- layout: post title: Chart Dimensions in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about Chart Dimensions in Syncfusion Blazor 3D Chart component and much more. +description: Check out and learn about configuring Chart Dimensions in Syncfusion Blazor 3D Chart component and much more. platform: Blazor control: 3D Chart documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Size for container -The 3D chart can be rendered to its container size and it can be set via inline or CSS as demonstrated below. +The 3D Chart renders to fit its container. The container size can be set using inline styles or CSS, as shown below. ```cshtml @@ -28,7 +28,7 @@ The 3D chart can be rendered to its container size and it can be set via inline -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -55,11 +55,11 @@ The 3D chart can be rendered to its container size and it can be set via inline ## Size for chart -The size of the 3D chart can be set directly through `Width` and `Height` properties. +The size of the 3D Chart can be set directly using the `Width` and `Height` properties. -### In Pixel +### In Pixels -The size of the 3D chart can be set in pixel as demonstrated below. +Set the chart size in pixels as shown below. ```cshtml @@ -74,7 +74,7 @@ The size of the 3D chart can be set in pixel as demonstrated below. -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -82,7 +82,7 @@ The size of the 3D chart can be set in pixel as demonstrated below. } public List ConsumerDetails = new List - { + { new Chart3DData { X = "USA", YValue = 46 }, new Chart3DData { X = "GBR", YValue = 27 }, new Chart3DData { X = "CHN", YValue = 26 }, @@ -101,7 +101,7 @@ The size of the 3D chart can be set in pixel as demonstrated below. ### In Percentage -By setting the value in percentage, the 3D Chart gets its dimension with respect to its container. For example, when the `Height` is set to **50%**, the 3D Chart renders to half of the container height. +When the value is set in percentage, the 3D Chart dimensions are relative to its container. For example, setting `Height` to **50%** renders the chart at half the container height. ```cshtml @@ -116,7 +116,7 @@ By setting the value in percentage, the 3D Chart gets its dimension with respec -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -124,7 +124,7 @@ By setting the value in percentage, the 3D Chart gets its dimension with respec } public List ConsumerDetails = new List - { + { new Chart3DData { X = "USA", YValue = 46 }, new Chart3DData { X = "GBR", YValue = 27 }, new Chart3DData { X = "CHN", YValue = 26 }, diff --git a/blazor/3D-chart/chart-types/bar.md b/blazor/3D-chart/chart-types/bar.md index 7ead2f4e6a..e40276ac58 100644 --- a/blazor/3D-chart/chart-types/bar.md +++ b/blazor/3D-chart/chart-types/bar.md @@ -1,9 +1,9 @@ --- layout: post title: Bar Chart in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about the Bar Charts in Syncfusion Blazor 3D Chart component and much more. +description: Check out and learn how to configure and customize Bar Charts in the Syncfusion Blazor 3D Chart component. platform: Blazor -control: 3D Chart +control: 3D Chart documentation: ug --- @@ -11,15 +11,14 @@ documentation: ug ## Bar chart -To render a bar series, set series `Type` as `Bar`. +To render a bar series, set the series `Type` property to `Bar`. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -54,15 +53,14 @@ To render a bar series, set series `Type` as `Bar`. ## Bar space and width -The `ColumnSpacing` and `ColumnWidth` properties are used to customize the space between bars. +The `ColumnSpacing` and `ColumnWidth` properties customize the space and width between bars. ```cshtml @using Syncfusion.Blazor.Chart3D- +@@ -27,7 +26,7 @@ To render a bar series, set series `Type` as `Bar`. - -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -98,15 +96,15 @@ The `ColumnSpacing` and `ColumnWidth` properties are used to customize the space ## Grouped bar -The data points can be grouped in the bar type charts by using the `GroupName` property. Data points with same group name are grouped together. +Data points can be grouped in bar charts using the `GroupName` property. Data points with the same group name are grouped together. ```cshtml @using Syncfusion.Blazor.Chart3D- +@@ -70,7 +68,7 @@ The `ColumnSpacing` and `ColumnWidth` properties are used to customize the space - -@code{ +@code { public class Chart3DData { public DateTime XValue { get; set;} public double YValue {get; set;} } - + public List- ++ @@ -126,6 +124,7 @@ The data points can be grouped in the bar type charts by using the `GroupName` p public double China_Total { get; set; } public double China_Gold { get; set; } } + public List Chart3DPoints { get; set; } = new List { new ColumnData { Year = "2012", USA_Total = 104, USA_Gold = 46, UK_Total = 65, UK_Gold = 29, China_Total = 91, China_Gold = 38}, @@ -141,21 +140,29 @@ The data points can be grouped in the bar type charts by using the `GroupName` p ## Cylindrical column chart -To render a cylindrical column chart, set the `ColumnFacet` property to `Cylinder` in the chart series. +To render a cylindrical bar chart, set the `ColumnFacet` property to `Cylinder` in the chart series. ```cshtml @using Syncfusion.Blazor.Chart3D - + @code { + public class ColumnChart3DData + { + public string X { get; set; } + public double Y { get; set; } + } + public List- + + + Chart3DPoints { get; set; } = new List { new ColumnChart3DData { X = "Czechia", Y = 1.11 }, @@ -167,40 +174,33 @@ To render a cylindrical column chart, set the `ColumnFacet` property to `Cylinde new ColumnChart3DData { X = "South Korea", Y = 3.16 }, new ColumnChart3DData { X = "France", Y = 0.92 } }; - - public class ColumnChart3DData - { - public string X { get; set; } - public double Y { get; set; } - } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBfDdMAilBDiXzS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhICXNGBzdWJrIr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  ## Series customization -The following properties can be used to customize the `Bar` series. +The following properties are available to customize the `Bar` series: * `Fill` – Specifies the color of the series. -* `Opacity` – Specifies the opacity of the `Fill` color. +* `Opacity` – Specifies the opacity of the fill color. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string Country { get; set; } diff --git a/blazor/3D-chart/chart-types/column.md b/blazor/3D-chart/chart-types/column.md index 7655c3ff93..22c142c360 100644 --- a/blazor/3D-chart/chart-types/column.md +++ b/blazor/3D-chart/chart-types/column.md @@ -1,7 +1,7 @@ --- layout: post title: Column Chart in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about the Column Chart in Syncfusion Blazor 3D Chart component and much more. +description: Check out and learn how to configure and customize the Column Chart in Syncfusion Blazor 3D Chart component. platform: Blazor control: 3D Chart documentation: ug @@ -11,14 +11,14 @@ documentation: ug ## Column -To render a `Column Chart`, use series `Type` as `Column`. +To render a column chart, set the series `Type` property to `Column`. ```cshtml @using Syncfusion.Blazor.Chart3D- +- -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -55,15 +55,14 @@ To render a `Column Chart`, use series `Type` as `Column`. ## Column space and width -The `ColumnSpacing` and `ColumnWidth` properties are used to customize the space between columns. +The `ColumnSpacing` and `ColumnWidth` properties customize the space and width between columns. ```cshtml @using Syncfusion.Blazor.Chart3D+ @@ -26,7 +26,7 @@ To render a `Column Chart`, use series `Type` as `Column`. - -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -99,15 +98,15 @@ The `ColumnSpacing` and `ColumnWidth` properties are used to customize the space ## Grouped column -The data points can be grouped in the column type charts by using the `GroupName` property. Data points with same group name are grouped together. +Data points can be grouped in column charts using the `GroupName` property. Data points with the same group name are grouped together. ```cshtml @using Syncfusion.Blazor.Chart3D- +@@ -71,7 +70,7 @@ The `ColumnSpacing` and `ColumnWidth` properties are used to customize the space - -@code{ +@code { public class ColumnData { public string Year { get; set; } @@ -127,6 +126,7 @@ The data points can be grouped in the column type charts by using the `GroupName public double China_Total { get; set; } public double China_Gold { get; set; } } + public List- ++ @@ -116,7 +115,7 @@ The data points can be grouped in the column type charts by using the `GroupName Chart3DPoints { get; set; } = new List { new ColumnData { Year = "2012", USA_Total = 104, USA_Gold = 46, UK_Total = 65, UK_Gold = 29, China_Total = 91, China_Gold = 38}, @@ -149,14 +149,22 @@ To render a cylindrical column chart, set the `ColumnFacet` property to `Cylinde @using Syncfusion.Blazor.Chart3D - + @code { + public class ColumnChart3DData + { + public string X { get; set; } + public double Y { get; set; } + } + public List- + + + Chart3DPoints { get; set; } = new List { new ColumnChart3DData { X = "Czechia", Y = 1.11 }, @@ -168,11 +176,6 @@ To render a cylindrical column chart, set the `ColumnFacet` property to `Cylinde new ColumnChart3DData { X = "South Korea", Y = 3.16 }, new ColumnChart3DData { X = "France", Y = 0.92 } }; - public class ColumnChart3DData - { - public string X { get; set; } - public double Y { get; set; } - } } ``` @@ -182,25 +185,24 @@ To render a cylindrical column chart, set the `ColumnFacet` property to `Cylinde ## Series customization -The following properties can be used to customize the `Column` series. +The following properties are available to customize the `Column` series: * `Fill` – Specifies the color of the series. -* `Opacity` – Specifies the opacity of the `Fill` color. +* `Opacity` – Specifies the opacity of the fill color. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string Country { get; set; } diff --git a/blazor/3D-chart/chart-types/stack-bar.md b/blazor/3D-chart/chart-types/stack-bar.md index dfea264acd..73a0995ca2 100644 --- a/blazor/3D-chart/chart-types/stack-bar.md +++ b/blazor/3D-chart/chart-types/stack-bar.md @@ -1,7 +1,7 @@ --- layout: post title: 100% Stacked Bar in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about 100% Stacked Bar Chart in Syncfusion Blazor 3D Chart component and more. +description: Check out and learn how to configure and customize 100% Stacked Bar Chart in Syncfusion Blazor 3D Chart component. platform: Blazor control: 3D Chart documentation: ug @@ -11,14 +11,14 @@ documentation: ug ## 100% Stacked bar chart -To render a `100% Stacked Bar Chart` series, use series `Type` as `StackingBar100`. +To render a 100% stacked bar chart, set the series `Type` property to `StackingBar100`. ```cshtml @using Syncfusion.Blazor.Chart3D- +- -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -49,21 +49,21 @@ 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" %}  ## 100% Cylindrical Stacked Bar chart -To render a 100% cylindrical Stacked Bar chart, set the `ColumnFacet` property to `Cylinder` in the chart series. +To render a 100% cylindrical stacked bar chart, set the `ColumnFacet` property to `Cylinder` in the chart series. ```cshtml @using Syncfusion.Blazor.Chart3D+ @@ -28,7 +28,7 @@ To render a `100% Stacked Bar Chart` series, use series `Type` as `StackingBar10 - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -101,17 +101,17 @@ To render a 100% cylindrical Stacked Bar chart, set the `ColumnFacet` property ## Series customization -The following properties can be used to customize the `100% Stacked Bar` series. +The following properties are available to customize the `100% Stacked Bar` series: * `Fill` – Specifies the color of the series. -* `Opacity` – Specifies the opacity of `Fill`. +* `Opacity` – Specifies the opacity of the fill color. ```cshtml @using Syncfusion.Blazor.Chart3D+ @@ -72,7 +72,7 @@ To render a 100% cylindrical Stacked Bar chart, set the `ColumnFacet` property - -@code{ +@code { public class Chart3DData { public DateTime XValue { get; set;} public double YValue {get; set;} } - + public List+ @@ -142,7 +142,7 @@ 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" %}  diff --git a/blazor/3D-chart/chart-types/stack-column.md b/blazor/3D-chart/chart-types/stack-column.md index 0f2d546f8d..0ccee34288 100644 --- a/blazor/3D-chart/chart-types/stack-column.md +++ b/blazor/3D-chart/chart-types/stack-column.md @@ -1,7 +1,7 @@ --- layout: post title: 100% Stacked Column in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about 100% Stacked Column Chart in Syncfusion Blazor 3D Chart component and more. +description: Check out and learn how to configure and customize 100% Stacked Column Chart in Syncfusion Blazor 3D Chart component. platform: Blazor control: 3D Chart documentation: ug @@ -11,14 +11,14 @@ documentation: ug ## 100% Stacked column chart -To render a `100% Stacked Column Chart` series, use series `Type` as `StackingColumn100`. +To render a 100% stacked column chart, set the series `Type` property to `StackingColumn100`. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -47,7 +47,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" %}  @@ -61,7 +61,7 @@ To render a 100% cylindrical stacked column chart, set the `ColumnFacet` propert @using Syncfusion.Blazor.Chart3D+ @@ -26,7 +26,7 @@ To render a `100% Stacked Column Chart` series, use series `Type` as `StackingCo - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -99,17 +99,17 @@ To render a 100% cylindrical stacked column chart, set the `ColumnFacet` propert ## Series customization -The following properties can be used to customize the `100% Stacked Column` series. +The following properties are available to customize the `100% Stacked Column` series: * `Fill` – Specifies the color of the series. -* `Opacity` – Specifies the opacity of `Fill`. +* `Opacity` – Specifies the opacity of the fill color. ```cshtml @using Syncfusion.Blazor.Chart3D+ @@ -70,7 +70,7 @@ To render a 100% cylindrical stacked column chart, set the `ColumnFacet` propert - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -140,7 +140,7 @@ 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" %}  diff --git a/blazor/3D-chart/chart-types/stacked-bar.md b/blazor/3D-chart/chart-types/stacked-bar.md index e9743dc5f4..9b69e4ce90 100644 --- a/blazor/3D-chart/chart-types/stacked-bar.md +++ b/blazor/3D-chart/chart-types/stacked-bar.md @@ -1,7 +1,7 @@ --- layout: post title: Stacked Bar in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about Stacked Bar Chart in Syncfusion Blazor 3D Chart component and much more. +description: Check out and learn how to configure and customize Stacked Bar Chart in Syncfusion Blazor 3D Chart component. platform: Blazor control: 3D Chart documentation: ug @@ -11,14 +11,14 @@ documentation: ug ## Stacked bar chart -To render a stacked bar series, use series `Type` as `StackingBar`. +To render a stacked bar series, set the series `Type` property to `StackingBar`. ```cshtml @using Syncfusion.Blazor.Chart3D+ @@ -118,7 +118,7 @@ The following properties can be used to customize the `100% Stacked Column` seri - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -56,14 +56,14 @@ To render a stacked bar series, use series `Type` as `StackingBar`. ## Stacking group -To group the stacked bar, the `StackingGroup` property can be used. The columns with same group name are stacked on top of each other. +To group stacked bars, use the `StackingGroup` property. Bars with the same group name are stacked together. ```cshtml @using Syncfusion.Blazor.Chart3D+ @@ -28,7 +28,7 @@ To render a stacked bar series, use series `Type` as `StackingBar`. - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -94,7 +94,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" %}  @@ -108,7 +108,7 @@ To render a cylindrical stacked bar chart, set the `ColumnFacet` property to `Cy @using Syncfusion.Blazor.Chart3D+ @@ -72,7 +72,7 @@ To group the stacked bar, the `StackingGroup` property can be used. The columns - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -146,17 +146,17 @@ To render a cylindrical stacked bar chart, set the `ColumnFacet` property to `Cy ## Series customization -The following properties can be used to customize the `Stacked Bar` series. +The following properties are available to customize the `Stacked Bar` series: * `Fill` – Specifies the color of the series. -* `Opacity` – Specifies the opacity of the `Fill` color. +* `Opacity` – Specifies the opacity of the fill color. ```cshtml @using Syncfusion.Blazor.Chart3D+ @@ -117,7 +117,7 @@ To render a cylindrical stacked bar chart, set the `ColumnFacet` property to `Cy - -@code{ +@code { public class Data { public string X { get; set; } @@ -151,14 +149,14 @@ Label content can be formatted by using the template option. Inside the template ## Text mapping -Text from the data source can be mapped using the `NameField` property. +Text from the data source can be mapped to the label using the `NameField` property. ```cshtml @using Syncfusion.Blazor.Chart3D+ @@ -187,7 +187,7 @@ 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" %}  diff --git a/blazor/3D-chart/chart-types/stacked-column.md b/blazor/3D-chart/chart-types/stacked-column.md index 8fe5f49bf2..ef78112738 100644 --- a/blazor/3D-chart/chart-types/stacked-column.md +++ b/blazor/3D-chart/chart-types/stacked-column.md @@ -1,7 +1,7 @@ --- layout: post title: Stacked Column in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about Stacked Column Chart in Syncfusion Blazor 3D Chart component and more. +description: Check out and learn how to configure and customize Stacked Column Chart in Syncfusion Blazor 3D Chart component. platform: Blazor control: 3D Chart documentation: ug @@ -11,14 +11,14 @@ documentation: ug ## Stacked column chart -To render a stacked column series, use series `Type` as `StackingColumn`. +To render a stacked column series, set the series `Type` property to `StackingColumn`. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -49,21 +49,21 @@ 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" %}  ## Stacking group -To group the stacked column, the `StackingGroup` property can be used. The columns with same group name are stacked on top of each other. +To group stacked columns, use the `StackingGroup` property. Columns with the same group name are stacked together. ```cshtml @using Syncfusion.Blazor.Chart3D+ @@ -28,7 +28,7 @@ To render a stacked column series, use series `Type` as `StackingColumn`. - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -94,7 +94,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" %}  @@ -108,7 +108,7 @@ To render a cylindrical stacked column chart, set the `ColumnFacet` property to @using Syncfusion.Blazor.Chart3D+ @@ -72,7 +72,7 @@ To group the stacked column, the `StackingGroup` property can be used. The colum - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -146,10 +146,10 @@ To render a cylindrical stacked column chart, set the `ColumnFacet` property to ## Series customization -The following properties can be used to customize the `Stacked Column` series. +The following properties are available to customize the `Stacked Column` series: * `Fill` – Specifies the color of the series. -* `Opacity` – Specifies the opacity of the `Fill` color. +* `Opacity` – Specifies the opacity of the fill color. ```cshtml @@ -187,7 +187,7 @@ 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" %}  diff --git a/blazor/3D-chart/data-labels.md b/blazor/3D-chart/data-labels.md index 92ef207ab4..21bdc67176 100644 --- a/blazor/3D-chart/data-labels.md +++ b/blazor/3D-chart/data-labels.md @@ -1,7 +1,7 @@ --- layout: post title: Data Labels in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about the Data Labels in Syncfusion Blazor 3D Chart component and much more. +description: Check out and learn how to configure and customize the Data Labels in Syncfusion Blazor 3D Chart component. platform: Blazor control: 3D Chart documentation: ug @@ -9,15 +9,14 @@ documentation: ug # Data Labels in Blazor 3D Chart Component -Data labels are fields that includes information about the sample point connected to an output. It can be added to a chart series by enabling the `Visible` property in the `Chart3DDataLabel`. By default, the labels will arrange smartly without overlapping. +Data labels display information about each data point in the chart. Enable the `Visible` property in `Chart3DDataLabel` to add data labels to a chart series. By default, labels are arranged smartly to avoid overlap. ```cshtml @using Syncfusion.Blazor.Chart3D+ @@ -117,7 +117,7 @@ To render a cylindrical stacked column chart, set the `ColumnFacet` property to - -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -54,15 +53,14 @@ Data labels are fields that includes information about the sample point connecte ## Position -The `Position` property is used to place the label either on `Top`, `Middle`, or `Bottom`. +The `Position` property places the label at the `Top`, `Middle`, or `Bottom` of the data point. ```cshtml @using Syncfusion.Blazor.Chart3D- +@@ -26,7 +25,7 @@ Data labels are fields that includes information about the sample point connecte - -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -99,7 +97,7 @@ The `Position` property is used to place the label either on `Top`, `Middle`, or ## Template -Label content can be formatted by using the template option. Inside the template, the placeholder text `${point.x}` and `${point.y}` can be added to display corresponding data points x & y value. Using `Chart3DDataLabelTemplate` property, the data label template can be set. +Label content can be formatted using a template. Placeholders such as `${point.x}` and `${point.y}` display the corresponding data values. Set the template using the `Chart3DDataLabelTemplate` property. ```cshtml @@ -127,7 +125,7 @@ Label content can be formatted by using the template option. Inside the template- +@@ -71,7 +69,7 @@ The `Position` property is used to place the label either on `Top`, `Middle`, or - -@code{ +@code { public class Data { public string X { get; set; } @@ -191,14 +189,14 @@ Text from the data source can be mapped using the `NameField` property. ## Format -Data label for the chart can be formatted using the `Format` property. The global formatting options can be used as 'N1', 'P1', and 'C1'. +Data labels can be formatted using the `Format` property. Global formatting options such as 'N1', 'P1', and 'C1' are supported. ```cshtml @using Syncfusion.Blazor.Chart3D+ @@ -167,7 +165,7 @@ Text from the data source can be mapped using the `NameField` property. - -@code{ +@code { public class Chart3DData { public DateTime XValue { get; set;} public double YValue {get; set;} } - + public List+ @@ -292,14 +290,14 @@ The table below shows the results of applying various commonly used label format ## Margin -The `Margin` option can be applied to the data label to create space around the element. +The `Margin` property creates space around the data label element. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Data { public string X { get; set; } @@ -335,14 +333,14 @@ The `Margin` option can be applied to the data label to create space around the ## Customization -The `stroke` and `border` of data label can be customized using `Fill` and `Chart3DDataLabelBorder` properties. +The `Fill` and `Chart3DDataLabelBorder` properties customize the stroke and border of the data label. ```cshtml @using Syncfusion.Blazor.Chart3D+ @@ -311,7 +309,7 @@ The `Margin` option can be applied to the data label to create space around the - -@code{ +@code { public class Data { public string X { get; set; } @@ -377,25 +375,25 @@ The `stroke` and `border` of data label can be customized using `Fill` and `Char ## Customizing specific label -A specific label can be customized by using the `TextRender` event. The `TextRender` event allows you to change the label text for the point. +A specific label can be customized using the `TextRender` event, which allows changing the label text for a data point. ```cshtml @using Syncfusion.Blazor.Chart3D+ @@ -353,7 +351,7 @@ The `stroke` and `border` of data label can be customized using `Fill` and `Char - -@code{ - +@code { public class Chart3DData { public string Country { get; set; } diff --git a/blazor/3D-chart/date-time-axis.md b/blazor/3D-chart/date-time-axis.md index 8ae96241ab..3f9ae3e55d 100644 --- a/blazor/3D-chart/date-time-axis.md +++ b/blazor/3D-chart/date-time-axis.md @@ -1,7 +1,7 @@ --- layout: post title: DateTime Axis in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about DateTime Axis in Syncfusion Blazor 3D Chart component and much more. +description: Check out and learn about configuring the DateTime and DateTimeCategory Axes in Syncfusion Blazor 3D Chart component. platform: Blazor control: 3D Chart documentation: ug @@ -11,9 +11,9 @@ documentation: ug # DateTime Axis in Blazor 3D Chart Component -## DateTime axis +## DateTime Axis -`DateTime` axis uses date time scale and displays the date time values as axis labels in the specified format. +The `DateTime` axis uses a date-time scale and displays date-time values as axis labels in the specified format. ```cshtml @@ -29,22 +29,22 @@ documentation: ug+ + + WeatherReports = new List - { - new Chart3DData { XValue = new DateTime(2000, 4, 1), YValue = 10 }, - new Chart3DData { XValue = new DateTime(2002, 5, 1), YValue = 30 }, - new Chart3DData { XValue = new DateTime(2004, 6, 1), YValue = 15 }, - new Chart3DData { XValue = new DateTime(2006, 7, 1), YValue = 65 }, - new Chart3DData { XValue = new DateTime(2008, 8, 1), YValue = 90 }, - new Chart3DData { XValue = new DateTime(2010, 9, 1), YValue = 85 } - }; + { + new Chart3DData { XValue = new DateTime(2000, 4, 1), YValue = 10 }, + new Chart3DData { XValue = new DateTime(2002, 5, 1), YValue = 30 }, + new Chart3DData { XValue = new DateTime(2004, 6, 1), YValue = 15 }, + new Chart3DData { XValue = new DateTime(2006, 7, 1), YValue = 65 }, + new Chart3DData { XValue = new DateTime(2008, 8, 1), YValue = 90 }, + new Chart3DData { XValue = new DateTime(2010, 9, 1), YValue = 85 } + }; } ``` @@ -52,9 +52,9 @@ documentation: ug  -## DateTime category axis +## DateTimeCategory Axis -The `DateTimeCategory` axis is used to display the date time values with non-linear intervals. For example, the business days alone have been depicted in a week here. +The `DateTimeCategory` axis displays date-time values with non-linear intervals, such as business days within a week. ```cshtml @@ -70,20 +70,20 @@ The `DateTimeCategory` axis is used to display the date time values with non-lin WeatherReports = new List - { + { new Chart3DData { XValue = new DateTime(2005, 01, 01), YValue = 21 }, - new Chart3DData { XValue = new DateTime(2006, 02, 01), YValue = 24 }, - new Chart3DData { XValue = new DateTime(2007, 03, 01), YValue = 36 }, - new Chart3DData { XValue = new DateTime(2008, 04, 01), YValue = 38 } - }; + new Chart3DData { XValue = new DateTime(2006, 02, 01), YValue = 24 }, + new Chart3DData { XValue = new DateTime(2007, 03, 01), YValue = 36 }, + new Chart3DData { XValue = new DateTime(2008, 04, 01), YValue = 38 } + }; } ``` @@ -91,9 +91,9 @@ The `DateTimeCategory` axis is used to display the date time values with non-lin  -### Range +## Range -Range of an axis will be calculated automatically based on the provided data. You can also customize the range of an axis using `Minimum`, `Maximum`, and `Interval` properties. +The range of an axis is calculated automatically based on the provided data, but can be customized using the `Minimum`, `Maximum`, and `Interval` properties. ```cshtml @@ -111,6 +111,7 @@ Range of an axis will be calculated automatically based on the provided data. Yo @code { public DateTime minimum = new DateTime(2000, 3, 1); public DateTime maximum = new DateTime(2010, 10, 1); + public class Chart3DData { public DateTime XValue { get; set; } @@ -133,17 +134,17 @@ Range of an axis will be calculated automatically based on the provided data. Yo  -### Interval customization +## Interval Customization -Date time intervals can be customized by using the `Interval` and `IntervalType` properties of the `Axis`. For example, when you set `Interval` as **2** and `IntervalType` as **Years**, it considers 2 years as interval. DateTime axis supports following interval types, +Date-time intervals can be customized using the `Interval` and `IntervalType` properties. For example, setting `Interval` to **2** and `IntervalType` to **Years** uses a 2-year interval. Supported interval types: -* Auto -* Years -* Months -* Days -* Hours -* Minutes -* Seconds +- Auto +- Years +- Months +- Days +- Hours +- Minutes +- Seconds ```cshtml @@ -158,22 +159,22 @@ Date time intervals can be customized by using the `Interval` and `IntervalType` WeatherReports = new List - { - new Chart3DData { XValue = new DateTime(2016, 4, 1), YValue = 21 }, - new Chart3DData { XValue = new DateTime(2016, 5, 1), YValue = 24 }, - new Chart3DData { XValue = new DateTime(2016, 6, 1), YValue = 36 }, - new Chart3DData { XValue = new DateTime(2016, 7, 1), YValue = 38 }, - new Chart3DData { XValue = new DateTime(2016, 8, 1), YValue = 46 }, - new Chart3DData { XValue = new DateTime(2016, 9, 1), YValue = 28 } - }; + { + new Chart3DData { XValue = new DateTime(2016, 4, 1), YValue = 21 }, + new Chart3DData { XValue = new DateTime(2016, 5, 1), YValue = 24 }, + new Chart3DData { XValue = new DateTime(2016, 6, 1), YValue = 36 }, + new Chart3DData { XValue = new DateTime(2016, 7, 1), YValue = 38 }, + new Chart3DData { XValue = new DateTime(2016, 8, 1), YValue = 46 }, + new Chart3DData { XValue = new DateTime(2016, 9, 1), YValue = 28 } + }; } ``` @@ -181,17 +182,17 @@ Date time intervals can be customized by using the `Interval` and `IntervalType`  -**Applying padding to the Range** +**Range Padding** -The `RangePadding` property can be used to apply padding to the minimum and maximum extremes of range. The following types of padding are supported by the DateTime axis: +The `RangePadding` property applies padding to the minimum and maximum extremes of the range. Supported types for the DateTime axis: -* None -* Round -* Additional +- None +- Round +- Additional **DateTime - None** -When the `RangePadding` is set to **None**, the minimum and maximum of the axis is based on the data. +When `RangePadding` is set to **None**, the minimum and maximum of the axis are based on the data. ```cshtml @@ -232,8 +233,7 @@ When the `RangePadding` is set to **None**, the minimum and maximum of the a **DateTime - Round** -When the `RangePadding` is set to `Round`, minimum and maximum will be rounded to the nearest possible value, which is divisible by interval. For example, when the minimum is **15th Jan**, interval is **1** and interval type is **Month**, then the axis minimum will be **Jan 1st**. - +When `RangePadding` is set to **Round**, the minimum and maximum are rounded to the nearest value divisible by the interval. For example, if the minimum is January 15, the interval is 1, and the interval type is Month, the axis minimum will be January 1. ```cshtml @@ -249,22 +249,22 @@ When the `RangePadding` is set to `Round`, minimum and maximum will be rounded t -@code{ +@code { public class Chart3DData { public DateTime XValue { get; set; } public double YValue { get; set; } } - + public List WeatherReports = new List - { - new Chart3DData { XValue = new DateTime(2017, 11, 20), YValue = 21 }, + { + new Chart3DData { XValue = new DateTime(2017, 11, 20), YValue = 21 }, new Chart3DData { XValue = new DateTime(2017, 11, 21), YValue = 24 }, new Chart3DData { XValue = new DateTime(2017, 11, 22), YValue = 24 }, new Chart3DData { XValue = new DateTime(2017, 11, 26), YValue = 70 }, new Chart3DData { XValue = new DateTime(2017, 11, 27), YValue = 75 }, new Chart3DData { XValue = new DateTime(2017, 11, 29), YValue = 82 } - }; + }; } ``` @@ -274,7 +274,7 @@ When the `RangePadding` is set to `Round`, minimum and maximum will be rounded t **DateTime - Additional** -When the `RangePadding` property is set to **Additional**, the interval of an axis will be padded to the minimum and maximum of the axis. +When `RangePadding` is set to **Additional**, the interval of an axis is padded to the minimum and maximum. ```cshtml @@ -290,13 +290,13 @@ When the `RangePadding` property is set to **Additional**, the interval of an ax -@code{ +@code { public class Chart3DData { public DateTime XValue { get; set; } public double YValue { get; set; } } - + public List WeatherReports = new List { new Chart3DData { XValue = new DateTime(2017, 11, 20), YValue = 21 }, @@ -305,7 +305,7 @@ When the `RangePadding` property is set to **Additional**, the interval of an ax new Chart3DData { XValue = new DateTime(2017, 11, 26), YValue = 70 }, new Chart3DData { XValue = new DateTime(2017, 11, 27), YValue = 75 }, new Chart3DData { XValue = new DateTime(2017, 11, 29), YValue = 82 } - }; + }; } ``` @@ -313,9 +313,9 @@ When the `RangePadding` property is set to **Additional**, the interval of an ax  -## Label format +## Label Format -The date can be formatted and parsed to all globalize format using the `LabelFormat` property in an axis. +Date values can be formatted using the `LabelFormat` property in an axis. All globalize formats are supported. ```cshtml @@ -331,26 +331,26 @@ The date can be formatted and parsed to all globalize format using the `LabelFo -@code{ +@code { public class Chart3DData { public DateTime XValue { get; set; } public double YValue { get; set; } } - + public List WeatherReports = new List - { - new Chart3DData { XValue = new DateTime(2017, 11, 20), YValue = 21 }, - new Chart3DData { XValue = new DateTime(2017, 11, 21), YValue = 24 }, + { + new Chart3DData { XValue = new DateTime(2017, 11, 20), YValue = 21 }, + new Chart3DData { XValue = new DateTime(2017, 11, 21), YValue = 24 }, new Chart3DData { XValue = new DateTime(2017, 11, 22), YValue = 24 }, - new Chart3DData { XValue = new DateTime(2017, 11, 26), YValue = 70 }, - new Chart3DData { XValue = new DateTime(2017, 11, 27), YValue = 75 }, - new Chart3DData { XValue = new DateTime(2017, 12, 02), YValue = 82 }, - new Chart3DData { XValue = new DateTime(2017, 12, 03), YValue = 53 }, - new Chart3DData { XValue = new DateTime(2017, 12, 04), YValue = 54 }, - new Chart3DData { XValue = new DateTime(2017, 12, 05), YValue = 53 }, - new Chart3DData { XValue = new DateTime(2017, 12, 08), YValue = 45 } - }; + new Chart3DData { XValue = new DateTime(2017, 11, 26), YValue = 70 }, + new Chart3DData { XValue = new DateTime(2017, 11, 27), YValue = 75 }, + new Chart3DData { XValue = new DateTime(2017, 12, 02), YValue = 82 }, + new Chart3DData { XValue = new DateTime(2017, 12, 03), YValue = 53 }, + new Chart3DData { XValue = new DateTime(2017, 12, 04), YValue = 54 }, + new Chart3DData { XValue = new DateTime(2017, 12, 05), YValue = 53 }, + new Chart3DData { XValue = new DateTime(2017, 12, 08), YValue = 45 } + }; } ``` diff --git a/blazor/3D-chart/images/category-axis/blazor-diagram-label-position.png b/blazor/3D-chart/images/category-axis/blazor-diagram-label-position.png index 961b14f57f..6db054d94b 100644 Binary files a/blazor/3D-chart/images/category-axis/blazor-diagram-label-position.png and b/blazor/3D-chart/images/category-axis/blazor-diagram-label-position.png differ diff --git a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-bar-chart.png b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-bar-chart.png index 135bb6cfcb..5341cd27da 100644 Binary files a/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-bar-chart.png and b/blazor/3D-chart/images/chart-types-images/blazor-cylindricaal-bar-chart.png differ diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-exporting.png b/blazor/3D-chart/images/getting-started/blazor-chart-exporting.png index 3656c1a197..731e26d0e5 100644 Binary files a/blazor/3D-chart/images/getting-started/blazor-chart-exporting.png and b/blazor/3D-chart/images/getting-started/blazor-chart-exporting.png differ diff --git a/blazor/3D-chart/images/getting-started/blazor-chart-printing.png b/blazor/3D-chart/images/getting-started/blazor-chart-printing.png index 0caddd4c07..0c9a56927c 100644 Binary files a/blazor/3D-chart/images/getting-started/blazor-chart-printing.png and b/blazor/3D-chart/images/getting-started/blazor-chart-printing.png differ diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-paging.png b/blazor/3D-chart/images/legend/blazor-column-chart-legend-paging.png index d3f0a99b5b..b203fa97a8 100644 Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-legend-paging.png and b/blazor/3D-chart/images/legend/blazor-column-chart-legend-paging.png differ diff --git a/blazor/3D-chart/images/legend/blazor-column-chart-legend-text-wrap.png b/blazor/3D-chart/images/legend/blazor-column-chart-legend-text-wrap.png index 6c876be825..208ace27ad 100644 Binary files a/blazor/3D-chart/images/legend/blazor-column-chart-legend-text-wrap.png and b/blazor/3D-chart/images/legend/blazor-column-chart-legend-text-wrap.png differ diff --git a/blazor/3D-chart/images/working-data/blazor-chart-data-binding.png b/blazor/3D-chart/images/working-data/blazor-chart-data-binding.png index f38aff52b7..a73dba1d5f 100644 Binary files a/blazor/3D-chart/images/working-data/blazor-chart-data-binding.png and b/blazor/3D-chart/images/working-data/blazor-chart-data-binding.png differ diff --git a/blazor/3D-chart/images/working-data/blazor-chart-dynamic-object.png b/blazor/3D-chart/images/working-data/blazor-chart-dynamic-object.png index 874c35558d..4c76103ca6 100644 Binary files a/blazor/3D-chart/images/working-data/blazor-chart-dynamic-object.png and b/blazor/3D-chart/images/working-data/blazor-chart-dynamic-object.png differ diff --git a/blazor/3D-chart/images/working-data/blazor-chart-expando-object-binding.png b/blazor/3D-chart/images/working-data/blazor-chart-expando-object-binding.png index e74cc2f783..e23882a4c5 100644 Binary files a/blazor/3D-chart/images/working-data/blazor-chart-expando-object-binding.png and b/blazor/3D-chart/images/working-data/blazor-chart-expando-object-binding.png differ diff --git a/blazor/3D-chart/images/working-data/blazor-chart-odatav4-adaptor-binding.png b/blazor/3D-chart/images/working-data/blazor-chart-odatav4-adaptor-binding.png index c7ccdaec82..12bb67a0dd 100644 Binary files a/blazor/3D-chart/images/working-data/blazor-chart-odatav4-adaptor-binding.png and b/blazor/3D-chart/images/working-data/blazor-chart-odatav4-adaptor-binding.png differ diff --git a/blazor/3D-chart/images/working-data/blazor-chart-remote-data-binding.png b/blazor/3D-chart/images/working-data/blazor-chart-remote-data-binding.png index c32a41bec1..7e32e10b3d 100644 Binary files a/blazor/3D-chart/images/working-data/blazor-chart-remote-data-binding.png and b/blazor/3D-chart/images/working-data/blazor-chart-remote-data-binding.png differ diff --git a/blazor/3D-chart/legend.md b/blazor/3D-chart/legend.md index 0e53d90809..fbe2bd98ed 100644 --- a/blazor/3D-chart/legend.md +++ b/blazor/3D-chart/legend.md @@ -1,7 +1,7 @@ --- layout: post title: Legend in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about the Legends and its customization in Syncfusion Blazor 3D Chart component and much more. +description: Check out and learn how to configure and customize the Legends in Syncfusion Blazor 3D Chart component. platform: Blazor control: 3D Chart documentation: ug @@ -11,17 +11,17 @@ documentation: ug Legend provides information about the series rendered in the 3D chart. -## Position and alignment +## Position and Alignment -By using the `Position` property, the legend can be positioned at left, right, top or bottom of the 3D chart. The legend is positioned at the bottom of the 3D chart, by default. +Use the `Position` property to place the legend at the left, right, top, or bottom of the 3D chart. By default, the legend is positioned at the bottom. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ - +@code { public class Chart3DData { public string Country { get; set; } @@ -43,8 +42,8 @@ By using the `Position` property, the legend can be positioned at left, right, } public List- + + @@ -29,11 +29,10 @@ By using the `Position` property, the legend can be positioned at left, right, + MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, + { + new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, new Chart3DData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 }, @@ -52,7 +51,7 @@ By using the `Position` property, the legend can be positioned at left, right, new Chart3DData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 }, new Chart3DData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 }, new Chart3DData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 } - }; + }; } ``` @@ -60,15 +59,15 @@ By using the `Position` property, the legend can be positioned at left, right,  -The custom position helps you to position the legend anywhere in the 3D chart using x and y coordinates. +Use custom positioning to place the legend anywhere in the 3D chart by specifying X and Y pixel coordinates. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ - +@code { public class Chart3DData { public string Country { get; set; } @@ -92,8 +90,8 @@ The custom position helps you to position the legend anywhere in the 3D chart us } public List- + + @@ -77,12 +76,11 @@ The custom position helps you to position the legend anywhere in the 3D chart us - + MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, + { + new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, new Chart3DData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 }, @@ -101,7 +99,7 @@ The custom position helps you to position the legend anywhere in the 3D chart us new Chart3DData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 }, new Chart3DData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 }, new Chart3DData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 } - }; + }; } ``` @@ -111,17 +109,17 @@ The custom position helps you to position the legend anywhere in the 3D chart us -## Legend reverse +## Legend Reverse -The order of the legend items can be reversed by using the `Reverse` property. By default, legend for the first series in the collection will be placed first. +Reverse the order of legend items using the `Reverse` property. By default, the legend entry for the first series appears first. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ - +@code { public class Chart3DData { public string Country { get; set; } @@ -143,8 +140,8 @@ The order of the legend items can be reversed by using the `Reverse` property. B } public List- + + @@ -129,11 +127,10 @@ The order of the legend items can be reversed by using the `Reverse` property. B + MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, + { + new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, new Chart3DData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 }, @@ -152,7 +149,7 @@ The order of the legend items can be reversed by using the `Reverse` property. B new Chart3DData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 }, new Chart3DData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 }, new Chart3DData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 } - }; + }; } ``` @@ -160,19 +157,19 @@ The order of the legend items can be reversed by using the `Reverse` property. B  -**Legend alignment** +**Legend Alignment** -The legend can be aligned at near, far or center to the 3D chart using the `Alignment` property. +Align the legend to near, far, or center within the chosen position using the `Alignment` property. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ - +@code { public class Chart3DData { public string Country { get; set; } @@ -195,8 +190,8 @@ The legend can be aligned at near, far or center to the 3D chart using the `Alig } public List- + + @@ -180,12 +177,10 @@ The legend can be aligned at near, far or center to the 3D chart using the `Alig - +MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, + { + new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, new Chart3DData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 }, @@ -204,7 +199,7 @@ The legend can be aligned at near, far or center to the 3D chart using the `Alig new Chart3DData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 }, new Chart3DData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 }, new Chart3DData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 } - }; + }; } ``` @@ -212,17 +207,17 @@ The legend can be aligned at near, far or center to the 3D chart using the `Alig  -## Legend customization +## Legend Customization -To change the legend icon shape, `LegendShape` property in the `Series` can be used. By default, the legend icon shape is `SeriesType`. +Change the legend icon shape using the `LegendShape` property in the `Series`. By default, the legend icon shape follows the `SeriesType`. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ - +@code { public class Chart3DData { public string Country { get; set; } @@ -244,8 +238,8 @@ To change the legend icon shape, `LegendShape` property in the `Series` can be } public List- + + @@ -230,11 +225,10 @@ To change the legend icon shape, `LegendShape` property in the `Series` can be + MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, + { + new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, new Chart3DData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 }, @@ -253,7 +247,7 @@ To change the legend icon shape, `LegendShape` property in the `Series` can be new Chart3DData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 }, new Chart3DData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 }, new Chart3DData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 } - }; + }; } ``` @@ -261,17 +255,17 @@ To change the legend icon shape, `LegendShape` property in the `Series` can be  -### Legend size +### Legend Size -By default, legend takes 20% - 25% of the 3D chart's height horizontally, when it is placed on top or bottom position and 20% - 25% of the 3D chart's width vertically, when it is placed on left or right position. You can change this default legend size by using the `Height` and `Width` properties of the `LegendSettings`. +By default, the legend occupies about 20%–25% of the chart area horizontally when placed at the top or bottom, and about 20%–25% vertically when placed at the left or right. Adjust the size using the `Height` and `Width` properties of `LegendSettings`. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ - +@code { public class Chart3DData { public string Country { get; set; } @@ -295,8 +288,8 @@ By default, legend takes 20% - 25% of the 3D chart's height horizontally, when i } public List- + + @@ -280,12 +274,11 @@ By default, legend takes 20% - 25% of the 3D chart's height horizontally, when i - + MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, + { + new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, new Chart3DData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 }, @@ -304,7 +297,7 @@ By default, legend takes 20% - 25% of the 3D chart's height horizontally, when i new Chart3DData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 }, new Chart3DData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 }, new Chart3DData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 } - }; + }; } ``` @@ -312,17 +305,17 @@ By default, legend takes 20% - 25% of the 3D chart's height horizontally, when i  -### Legend item Size +### Legend Item Size -The size of the legend items can be customized by using the `ShapeHeight` and `ShapeWidth` properties. +Customize legend item dimensions using the `ShapeHeight` and `ShapeWidth` properties. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ - +@code { public class Chart3DData { public string Country { get; set; } @@ -345,8 +336,8 @@ The size of the legend items can be customized by using the `ShapeHeight` and `S } public List- + + @@ -330,12 +323,10 @@ The size of the legend items can be customized by using the `ShapeHeight` and `S - +MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, + { + new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, new Chart3DData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 }, @@ -354,7 +345,7 @@ The size of the legend items can be customized by using the `ShapeHeight` and `S new Chart3DData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 }, new Chart3DData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 }, new Chart3DData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 } - }; + }; } ``` @@ -362,31 +353,29 @@ The size of the legend items can be customized by using the `ShapeHeight` and `S  -### Paging for legend +### Paging for Legend -Paging will be enabled by default, when the legend items exceeds the legend bounds. Each legend items can be viewed by navigating between the pages using navigation buttons. +Paging is enabled automatically when legend items exceed the available bounds. Navigate between pages using the built-in navigation controls. ```cshtml @using Syncfusion.Blazor.Chart3D - @code { - public class Chart3DData { public string X { get; set; } @@ -408,21 +397,21 @@ 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/hjLeiDjQrkqTzoSA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  -### Legend text wrap +### Legend Text Wrap -When the legend text exceeds the container, the text can be wrapped by using the `TextWrap` property. End user can also wrap the legend text based on the `MaximumLabelWidth` property. +When legend text exceeds the container, wrap the text using the `TextWrap` property. Text can also be wrapped based on `MaximumLabelWidth`. ```cshtml @using Syncfusion.Blazor.Chart3D- + + - + - +- -@code{ - +@code { public class Chart3DData { public string Country { get; set; } @@ -445,8 +432,8 @@ When the legend text exceeds the container, the text can be wrapped by using the } public List- + + @@ -430,12 +419,10 @@ When the legend text exceeds the container, the text can be wrapped by using the - +MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, + { + new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, new Chart3DData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 }, @@ -454,25 +441,73 @@ When the legend text exceeds the container, the text can be wrapped by using the new Chart3DData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 }, new Chart3DData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 }, new Chart3DData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 } - }; + }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpXRsLJoJxytCf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrosZtGhOdyWASQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  -## Series selection through legend +### Legend Item Padding -By default, you can collapse the series visibility by clicking the legend. On the other hand, turn off the `ToggleVisibility` property if you must use a legend click to choose a series. +Use the `ItemPadding` property to adjust spacing between legend items. + +```cshtml + +@using Syncfusion.Blazor.Chart3D + + + + +@code { + public class Chart3DData + { + public string X { get; set; } + public double Y { get; set; } + public double Y1 { get; set; } + public double Y2 { get; set; } + public double Y3 { get; set; } + } + + public List+ + + + + ++ + + + + InternetDetails = new List + { + new Chart3DData { X = "WW", Y = 12, Y1 = 22, Y2 = 38.3, Y3 = 50 }, + new Chart3DData { X = "EU", Y = 9.9, Y1 = 26, Y2 = 45.2, Y3 = 63.6 }, + new Chart3DData { X = "APAC", Y = 4.4, Y1 = 9.3, Y2 = 18.2, Y3 = 20.9 }, + new Chart3DData { X = "LATAM", Y = 6.4, Y1 = 28, Y2 = 46.7, Y3 = 65.1 }, + new Chart3DData { X = "MEA", Y = 30, Y1 = 45.7, Y2 = 61.5, Y3 = 73 }, + new Chart3DData { X = "NA", Y = 25.3, Y1 = 35.9, Y2 = 64, Y3 = 81.4 } + }; +} + +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhTjnsVpdCodgcy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + + + +## Series Selection through Legend + +By default, clicking a legend item toggles the corresponding series visibility. To use legend clicks for selecting a series instead, disable automatic toggling using the `ToggleVisibility` property. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ - +@code { public class Chart3DData { public string Country { get; set; } @@ -495,8 +528,8 @@ By default, you can collapse the series visibility by clicking the legend. On th } public List- + + @@ -480,12 +515,10 @@ By default, you can collapse the series visibility by clicking the legend. On th - +MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, + { + new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, new Chart3DData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 }, @@ -504,7 +537,7 @@ By default, you can collapse the series visibility by clicking the legend. On th new Chart3DData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 }, new Chart3DData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 }, new Chart3DData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 } - }; + }; } ``` @@ -512,17 +545,17 @@ By default, you can collapse the series visibility by clicking the legend. On th  -## Collapsing legend item +## Collapsing Legend Item -By default, series `Name` will be displayed as legend. To skip the legend for a particular series, you can give empty string to the series `Name`. +By default, the series `Name` appears in the legend. To omit a specific legend item, set the series `Name` to an empty string. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ - + +@code { public class Chart3DData { public string Country { get; set; } @@ -544,8 +576,8 @@ By default, series `Name` will be displayed as legend. To skip the legend for a } public List- + + @@ -530,11 +563,10 @@ By default, series `Name` will be displayed as legend. To skip the legend for a - +MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, + { + new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, new Chart3DData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 }, @@ -553,7 +585,7 @@ By default, series `Name` will be displayed as legend. To skip the legend for a new Chart3DData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 }, new Chart3DData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 }, new Chart3DData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 } - }; + }; } ``` @@ -561,17 +593,17 @@ By default, series `Name` will be displayed as legend. To skip the legend for a  -## Legend title +## Legend Title -You can set title for legend using `Title` property in `LegendSettings`. The `Size`, `Color`, `Opacity`,`FontStyle`, `FontWeight`, `FontFamily`, `TextAlignment`, and `TextOverflow` of legend title can be customized by using the `TitleStyle` property in `LegendSettings`. The `TitlePosition` is used to set the legend position in `Top`, `Left` and `Right` position. The `MaximumTitleWidth` is used to set the width of the legend title. By default, it will be `100px`. +Set a legend title using the `Title` property in `LegendSettings`. Customize the title appearance with `TitleStyle` properties such as `Size`, `Color`, `Opacity`, `FontStyle`, `FontWeight`, `FontFamily`, `TextAlignment`, and `TextOverflow`. Control the title position using `TitlePosition` (Top, Left, Right) and the width using `MaximumTitleWidth`. Default value is **100px**. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ - +@code { public class Chart3DData { public string Country { get; set; } @@ -593,8 +624,8 @@ You can set title for legend using `Title` property in `LegendSettings`. The `Si } public List- + + @@ -579,11 +611,10 @@ You can set title for legend using `Title` property in `LegendSettings`. The `Si + MedalDetails = new List - { - new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, + { + new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, new Chart3DData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 }, @@ -602,7 +633,7 @@ You can set title for legend using `Title` property in `LegendSettings`. The `Si new Chart3DData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 }, new Chart3DData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 }, new Chart3DData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 } - }; + }; } ``` @@ -610,17 +641,17 @@ You can set title for legend using `Title` property in `LegendSettings`. The `Si  -## Arrow page navigation +## Arrow Page Navigation -The page number will always be visible while using legend paging. It is now possible to disable the page number and enable page navigation with the left and right arrows. The `AllowPaging` property needs to be set to **false** in order to render the arrow page navigation. +When legend paging is enabled, page numbers and arrow buttons are displayed. Arrow navigation allows moving between pages using left and right arrows. Enable paging using the `AllowPaging` property. ```cshtml @using Syncfusion.Blazor.Chart3D - @code { - public class Chart3DData { public string X { get; set; } @@ -659,53 +688,3 @@ 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" %}  - -### Legend Item Padding - -The `ItemPadding` property can be used to adjust the space between the legend items. - -```cshtml - -@using Syncfusion.Blazor.Chart3D - -- + + @@ -629,12 +660,10 @@ The page number will always be visible while using legend paging. It is now poss - +- - -@code { - - public class Chart3DData - { - public string X { get; set; } - public double Y { get; set; } - public double Y1 { get; set; } - public double Y2 { get; set; } - public double Y3 { get; set; } - } - - public List- - - - - -- - - - - -InternetDetails = new List - { - new Chart3DData { X = "WW", Y = 12, Y1 = 22, Y2 = 38.3, Y3 = 50 }, - new Chart3DData { X = "EU", Y = 9.9, Y1 = 26, Y2 = 45.2, Y3 = 63.6 }, - new Chart3DData { X = "APAC", Y = 4.4, Y1 = 9.3, Y2 = 18.2, Y3 = 20.9 }, - new Chart3DData { X = "LATAM", Y = 6.4, Y1 = 28, Y2 = 46.7, Y3 = 65.1 }, - new Chart3DData { X = "MEA", Y = 30, Y1 = 45.7, Y2 = 61.5, Y3 = 73 }, - new Chart3DData { X = "NA", Y = 25.3, Y1 = 35.9, Y2 = 64, Y3 = 81.4 } - }; -} - -``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhTjnsVpdCodgcy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - - diff --git a/blazor/3D-chart/logarithmic-axis.md b/blazor/3D-chart/logarithmic-axis.md index 1972506d37..4a8fd007b3 100644 --- a/blazor/3D-chart/logarithmic-axis.md +++ b/blazor/3D-chart/logarithmic-axis.md @@ -1,7 +1,7 @@ --- layout: post title: Logarithmic Axis in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about Logarithmic Axis in Syncfusion Blazor 3D Chart component and much more. +description: Check out and learn how to configure and customize Logarithmic Axis in Syncfusion Blazor 3D Chart component. platform: Blazor control: 3D Chart documentation: ug @@ -11,7 +11,7 @@ documentation: ug -Logarithmic axis uses logarithmic scale and it is very useful in visualizing data, when it has numerical values in both lower order of magnitude (eg: 10-6) and higher order of magnitude (eg: 106). +A logarithmic axis applies a logarithmic scale, which is effective for visualizing data with values spanning several orders of magnitude, such as from 10-6 to 106. ```cshtml @@ -20,14 +20,14 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat - + - + - + - + - + - + - + - + - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -46,50 +46,51 @@ To split the chart area vertically into number of rows, use `Rows` property of t public double Y1 { get; set; } } - public List- + + - - + + - + - - + + WeatherReports = new List - { - new Chart3DData { X = "Jan", Y = 15, Y1 = 33 }, - new Chart3DData { X = "Feb", Y = 20, Y1 = 31 }, - new Chart3DData { X = "Mar", Y = 35, Y1 = 30 }, - new Chart3DData { X = "Apr", Y = 40, Y1 = 28 }, - new Chart3DData { X = "May", Y = 80, Y1 = 29 }, - new Chart3DData { X = "Jun", Y = 70, Y1 = 30 }, - new Chart3DData { X = "Jul", Y = 65, Y1 = 33 }, - new Chart3DData { X = "Aug", Y = 55, Y1 = 32 }, - new Chart3DData { X = "Sep", Y = 50, Y1 = 34 }, - new Chart3DData { X = "Oct", Y = 30, Y1 = 32 }, - new Chart3DData { X = "Nov", Y = 35, Y1 = 32 }, - new Chart3DData { X = "Dec", Y = 35, Y1 = 31 } - }; + public List WeatherReports = new List + { + new Chart3DData { X = "Jan", Y = 15, Y1 = 33 }, + new Chart3DData { X = "Feb", Y = 20, Y1 = 31 }, + new Chart3DData { X = "Mar", Y = 35, Y1 = 30 }, + new Chart3DData { X = "Apr", Y = 40, Y1 = 28 }, + new Chart3DData { X = "May", Y = 80, Y1 = 29 }, + new Chart3DData { X = "Jun", Y = 70, Y1 = 30 }, + new Chart3DData { X = "Jul", Y = 65, Y1 = 33 }, + new Chart3DData { X = "Aug", Y = 55, Y1 = 32 }, + new Chart3DData { X = "Sep", Y = 50, Y1 = 34 }, + new Chart3DData { X = "Oct", Y = 30, Y1 = 32 }, + new Chart3DData { X = "Nov", Y = 35, Y1 = 32 }, + new Chart3DData { X = "Dec", Y = 35, Y1 = 31 } + }; } ``` -{% 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=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  -For spanning the vertical axis along multiple rows, use `Span` property of an axis. +To span a vertical axis across multiple rows, use the `Span` property of the axis. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -97,21 +98,21 @@ For spanning the vertical axis along multiple rows, use `Span` property of an a public double Y1 { get; set; } } - public List- - - + + + + + - + - - + + WeatherReports = new List - { - new Chart3DData { X = "Jan", Y = 15, Y1 = 33 }, - new Chart3DData { X = "Feb", Y = 20, Y1 = 31 }, - new Chart3DData { X = "Mar", Y = 35, Y1 = 30 }, - new Chart3DData { X = "Apr", Y = 40, Y1 = 28 }, - new Chart3DData { X = "May", Y = 80, Y1 = 29 }, - new Chart3DData { X = "Jun", Y = 70, Y1 = 30 }, - new Chart3DData { X = "Jul", Y = 65, Y1 = 33 }, - new Chart3DData { X = "Aug", Y = 55, Y1 = 32 }, - new Chart3DData { X = "Sep", Y = 50, Y1 = 34 }, - new Chart3DData { X = "Oct", Y = 30, Y1 = 32 }, - new Chart3DData { X = "Nov", Y = 35, Y1 = 32 }, - new Chart3DData { X = "Dec", Y = 35, Y1 = 31 } - }; + public List WeatherReports = new List + { + new Chart3DData { X = "Jan", Y = 15, Y1 = 33 }, + new Chart3DData { X = "Feb", Y = 20, Y1 = 31 }, + new Chart3DData { X = "Mar", Y = 35, Y1 = 30 }, + new Chart3DData { X = "Apr", Y = 40, Y1 = 28 }, + new Chart3DData { X = "May", Y = 80, Y1 = 29 }, + new Chart3DData { X = "Jun", Y = 70, Y1 = 30 }, + new Chart3DData { X = "Jul", Y = 65, Y1 = 33 }, + new Chart3DData { X = "Aug", Y = 55, Y1 = 32 }, + new Chart3DData { X = "Sep", Y = 50, Y1 = 34 }, + new Chart3DData { X = "Oct", Y = 30, Y1 = 32 }, + new Chart3DData { X = "Nov", Y = 35, Y1 = 32 }, + new Chart3DData { X = "Dec", Y = 35, Y1 = 31 } + }; } @@ -122,32 +123,32 @@ For spanning the vertical axis along multiple rows, use `Span` property of an a ## Columns -To split the chart area horizontally into number of columns, use `Columns` property of the 3D chart. +To split the chart area horizontally into multiple columns, use the `Columns` property of the 3D chart. -* The space for each column can be allocated by using the `Width` property. The given width can be either in percentage or in pixel. -* To associate a horizontal axis to a particular column, specify its index to `ColumnIndex` property of the axis. +* The space for each column is allocated using the `Width` property, which accepts values in percentage or pixels. +* To associate a horizontal axis with a specific column, set its `ColumnIndex` property. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -155,21 +156,21 @@ To split the chart area horizontally into number of columns, use `Columns` prope public double Y1 { get; set; } } - public List- + + - - + + - + - + WeatherReports = new List - { - new Chart3DData { X = "Jan", Y = 15, Y1 = 33 }, - new Chart3DData { X = "Feb", Y = 20, Y1 = 31 }, - new Chart3DData { X = "Mar", Y = 35, Y1 = 30 }, - new Chart3DData { X = "Apr", Y = 40, Y1 = 28 }, - new Chart3DData { X = "May", Y = 80, Y1 = 29 }, - new Chart3DData { X = "Jun", Y = 70, Y1 = 30 }, - new Chart3DData { X = "Jul", Y = 65, Y1 = 33 }, - new Chart3DData { X = "Aug", Y = 55, Y1 = 32 }, - new Chart3DData { X = "Sep", Y = 50, Y1 = 34 }, - new Chart3DData { X = "Oct", Y = 30, Y1 = 32 }, - new Chart3DData { X = "Nov", Y = 35, Y1 = 32 }, - new Chart3DData { X = "Dec", Y = 35, Y1 = 31 } - }; + public List WeatherReports = new List + { + new Chart3DData { X = "Jan", Y = 15, Y1 = 33 }, + new Chart3DData { X = "Feb", Y = 20, Y1 = 31 }, + new Chart3DData { X = "Mar", Y = 35, Y1 = 30 }, + new Chart3DData { X = "Apr", Y = 40, Y1 = 28 }, + new Chart3DData { X = "May", Y = 80, Y1 = 29 }, + new Chart3DData { X = "Jun", Y = 70, Y1 = 30 }, + new Chart3DData { X = "Jul", Y = 65, Y1 = 33 }, + new Chart3DData { X = "Aug", Y = 55, Y1 = 32 }, + new Chart3DData { X = "Sep", Y = 50, Y1 = 34 }, + new Chart3DData { X = "Oct", Y = 30, Y1 = 32 }, + new Chart3DData { X = "Nov", Y = 35, Y1 = 32 }, + new Chart3DData { X = "Dec", Y = 35, Y1 = 31 } + }; } ``` @@ -177,29 +178,29 @@ To split the chart area horizontally into number of columns, use `Columns` prope  -The `Span` property of the axis can be used to span the horizontal axis across multiple column. +The `Span` property of the axis can be used to span a horizontal axis across multiple columns. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string X { get; set; } @@ -207,21 +208,21 @@ The `Span` property of the axis can be used to span the horizontal axis across m public double Y1 { get; set; } } - public List- + + - - + + - + - + WeatherReports = new List - { - new Chart3DData { X = "Jan", Y = 15, Y1 = 33 }, - new Chart3DData { X = "Feb", Y = 20, Y1 = 31 }, - new Chart3DData { X = "Mar", Y = 35, Y1 = 30 }, - new Chart3DData { X = "Apr", Y = 40, Y1 = 28 }, - new Chart3DData { X = "May", Y = 80, Y1 = 29 }, - new Chart3DData { X = "Jun", Y = 70, Y1 = 30 }, - new Chart3DData { X = "Jul", Y = 65, Y1 = 33 }, - new Chart3DData { X = "Aug", Y = 55, Y1 = 32 }, - new Chart3DData { X = "Sep", Y = 50, Y1 = 34 }, - new Chart3DData { X = "Oct", Y = 30, Y1 = 32 }, - new Chart3DData { X = "Nov", Y = 35, Y1 = 32 }, - new Chart3DData { X = "Dec", Y = 35, Y1 = 31 } - }; + public List WeatherReports = new List + { + new Chart3DData { X = "Jan", Y = 15, Y1 = 33 }, + new Chart3DData { X = "Feb", Y = 20, Y1 = 31 }, + new Chart3DData { X = "Mar", Y = 35, Y1 = 30 }, + new Chart3DData { X = "Apr", Y = 40, Y1 = 28 }, + new Chart3DData { X = "May", Y = 80, Y1 = 29 }, + new Chart3DData { X = "Jun", Y = 70, Y1 = 30 }, + new Chart3DData { X = "Jul", Y = 65, Y1 = 33 }, + new Chart3DData { X = "Aug", Y = 55, Y1 = 32 }, + new Chart3DData { X = "Sep", Y = 50, Y1 = 34 }, + new Chart3DData { X = "Oct", Y = 30, Y1 = 32 }, + new Chart3DData { X = "Nov", Y = 35, Y1 = 32 }, + new Chart3DData { X = "Dec", Y = 35, Y1 = 31 } + }; } ``` diff --git a/blazor/3D-chart/numeric-axis.md b/blazor/3D-chart/numeric-axis.md index d69c81b9dc..5a763f6c1d 100644 --- a/blazor/3D-chart/numeric-axis.md +++ b/blazor/3D-chart/numeric-axis.md @@ -1,7 +1,7 @@ --- layout: post title: Numeric Axis in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about the Numeric Axis in Syncfusion Blazor 3D Chart component and much more. +description: Check out and learn about configuring the Numeric Axis in Syncfusion Blazor 3D Chart component and much more. platform: Blazor control: 3D Chart documentation: ug @@ -11,7 +11,7 @@ documentation: ug # Numeric Axis in Blazor 3D Chart Component -The numeric axis can be used to represent the numeric values of data in 3D chart. By default, the `ValueType` of an axis is `Double`. +The numeric axis is used to represent numeric values in a 3D chart. By default, the `ValueType` of an axis is `Double`. ```cshtml @@ -24,7 +24,7 @@ The numeric axis can be used to represent the numeric values of data in 3D chart -@code{ +@code { public class Chart3DData { public double XValue { get; set; } @@ -32,15 +32,15 @@ The numeric axis can be used to represent the numeric values of data in 3D chart } public List Data = new List - { - new Chart3DData { XValue = 10, YValue = 21 }, - new Chart3DData { XValue = 20, YValue = 24 }, - new Chart3DData { XValue = 30, YValue = 36 }, - new Chart3DData { XValue = 40, YValue = 38 }, - new Chart3DData { XValue = 50, YValue = 54 }, - new Chart3DData { XValue = 60, YValue = 57 }, - new Chart3DData { XValue = 70, YValue = 70 } - }; + { + new Chart3DData { XValue = 10, YValue = 21 }, + new Chart3DData { XValue = 20, YValue = 24 }, + new Chart3DData { XValue = 30, YValue = 36 }, + new Chart3DData { XValue = 40, YValue = 38 }, + new Chart3DData { XValue = 50, YValue = 54 }, + new Chart3DData { XValue = 60, YValue = 57 }, + new Chart3DData { XValue = 70, YValue = 70 } + }; } ``` @@ -50,21 +50,21 @@ The numeric axis can be used to represent the numeric values of data in 3D chart ## Range -The range of an axis will be calculated automatically based on the provided data, and it can also be customized by using the `Minimum`, `Maximum`, and `Interval` properties of the axis. +The range of an axis is calculated automatically based on the provided data, but can also be customized using the `Minimum`, `Maximum`, and `Interval` properties. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public double XValue { get; set; } @@ -72,15 +72,15 @@ The range of an axis will be calculated automatically based on the provided data } public List+ - + Data = new List - { - new Chart3DData { XValue = 10, YValue = 21 }, - new Chart3DData { XValue = 20, YValue = 24 }, - new Chart3DData { XValue = 30, YValue = 36 }, - new Chart3DData { XValue = 40, YValue = 38 }, - new Chart3DData { XValue = 50, YValue = 54 }, - new Chart3DData { XValue = 60, YValue = 57 }, - new Chart3DData { XValue = 70, YValue = 70 } - }; + { + new Chart3DData { XValue = 10, YValue = 21 }, + new Chart3DData { XValue = 20, YValue = 24 }, + new Chart3DData { XValue = 30, YValue = 36 }, + new Chart3DData { XValue = 40, YValue = 38 }, + new Chart3DData { XValue = 50, YValue = 54 }, + new Chart3DData { XValue = 60, YValue = 57 }, + new Chart3DData { XValue = 70, YValue = 70 } + }; } ``` @@ -88,34 +88,33 @@ The range of an axis will be calculated automatically based on the provided data  -## Range padding +## Range Padding -Padding can be applied to the minimum and maximum extremes of an axis range by using the `RangePadding` property. Numeric axis supports the following types of padding. -The following types of padding are supported by the numeric axis: +Padding can be applied to the minimum and maximum extremes of an axis range using the `RangePadding` property. The numeric axis supports the following types of padding: -* None -* Round -* Additional -* Normal -* Auto +- None +- Round +- Additional +- Normal +- Auto **Numeric - None** -When the `RangePadding` is set to **None**, the minimum and maximum of an axis is based on the data. +When `RangePadding` is set to **None**, the minimum and maximum of an axis are based on the data. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public double XValue { get; set; } @@ -123,15 +122,15 @@ When the `RangePadding` is set to **None**, the minimum and maximum of an ax } public List+ - + Data = new List - { - new Chart3DData { XValue = 10, YValue = 21 }, - new Chart3DData { XValue = 20, YValue = 24 }, - new Chart3DData { XValue = 30, YValue = 36 }, - new Chart3DData { XValue = 40, YValue = 38 }, - new Chart3DData { XValue = 50, YValue = 54 }, - new Chart3DData { XValue = 60, YValue = 57 }, - new Chart3DData { XValue = 70, YValue = 70 } - }; + { + new Chart3DData { XValue = 10, YValue = 21 }, + new Chart3DData { XValue = 20, YValue = 24 }, + new Chart3DData { XValue = 30, YValue = 36 }, + new Chart3DData { XValue = 40, YValue = 38 }, + new Chart3DData { XValue = 50, YValue = 54 }, + new Chart3DData { XValue = 60, YValue = 57 }, + new Chart3DData { XValue = 70, YValue = 70 } + }; } ``` @@ -141,21 +140,21 @@ When the `RangePadding` is set to **None**, the minimum and maximum of an ax **Numeric - Round** -When the `RangePadding` is set to **Round**, the minimum and maximum will be rounded to the nearest possible value divisible by interval. For example, when the minimum is 3.5 and the interval is 1, then the minimum will be rounded to 3. +When `RangePadding` is set to **Round**, the minimum and maximum are rounded to the nearest value divisible by the interval. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public double XValue { get; set; } @@ -163,15 +162,15 @@ When the `RangePadding` is set to **Round**, the minimum and maximum will be r } public List+ - + Data = new List - { - new Chart3DData { XValue = 10, YValue = 21 }, - new Chart3DData { XValue = 20, YValue = 24 }, - new Chart3DData { XValue = 30, YValue = 36 }, - new Chart3DData { XValue = 40, YValue = 38 }, - new Chart3DData { XValue = 50, YValue = 54 }, - new Chart3DData { XValue = 60, YValue = 57 }, - new Chart3DData { XValue = 70, YValue = 70 } - }; + { + new Chart3DData { XValue = 10, YValue = 21 }, + new Chart3DData { XValue = 20, YValue = 24 }, + new Chart3DData { XValue = 30, YValue = 36 }, + new Chart3DData { XValue = 40, YValue = 38 }, + new Chart3DData { XValue = 50, YValue = 54 }, + new Chart3DData { XValue = 60, YValue = 57 }, + new Chart3DData { XValue = 70, YValue = 70 } + }; } ``` @@ -181,21 +180,21 @@ When the `RangePadding` is set to **Round**, the minimum and maximum will be r **Numeric - Additional** -When the `RangePadding` is set to **Additional**, interval of an axis will be padded to the minimum and maximum of the axis. +When `RangePadding` is set to **Additional**, the interval of an axis is padded to the minimum and maximum. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public double XValue { get; set; } @@ -203,15 +202,15 @@ When the `RangePadding` is set to **Additional**, interval of an axis will be } public List+ - + Data = new List - { - new Chart3DData { XValue = 10, YValue = 21 }, - new Chart3DData { XValue = 20, YValue = 24 }, - new Chart3DData { XValue = 30, YValue = 36 }, - new Chart3DData { XValue = 40, YValue = 38 }, - new Chart3DData { XValue = 50, YValue = 54 }, - new Chart3DData { XValue = 60, YValue = 57 }, - new Chart3DData { XValue = 70, YValue = 70 } - }; + { + new Chart3DData { XValue = 10, YValue = 21 }, + new Chart3DData { XValue = 20, YValue = 24 }, + new Chart3DData { XValue = 30, YValue = 36 }, + new Chart3DData { XValue = 40, YValue = 38 }, + new Chart3DData { XValue = 50, YValue = 54 }, + new Chart3DData { XValue = 60, YValue = 57 }, + new Chart3DData { XValue = 70, YValue = 70 } + }; } ``` @@ -221,21 +220,21 @@ When the `RangePadding` is set to **Additional**, interval of an axis will be **Numeric - Normal** -When the `RangePadding` is set to **Normal**, padding is applied to the axis based on default range calculation. +When `RangePadding` is set to **Normal**, padding is applied based on the default range calculation. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public double XValue { get; set; } @@ -243,15 +242,15 @@ When the `RangePadding` is set to **Normal**, padding is applied to the axis } public List+ - + Data = new List - { - new Chart3DData { XValue = 10, YValue = 21 }, - new Chart3DData { XValue = 20, YValue = 24 }, - new Chart3DData { XValue = 30, YValue = 36 }, - new Chart3DData { XValue = 40, YValue = 38 }, - new Chart3DData { XValue = 50, YValue = 54 }, - new Chart3DData { XValue = 60, YValue = 57 }, - new Chart3DData { XValue = 70, YValue = 70 } - }; + { + new Chart3DData { XValue = 10, YValue = 21 }, + new Chart3DData { XValue = 20, YValue = 24 }, + new Chart3DData { XValue = 30, YValue = 36 }, + new Chart3DData { XValue = 40, YValue = 38 }, + new Chart3DData { XValue = 50, YValue = 54 }, + new Chart3DData { XValue = 60, YValue = 57 }, + new Chart3DData { XValue = 70, YValue = 70 } + }; } ``` @@ -261,22 +260,22 @@ When the `RangePadding` is set to **Normal**, padding is applied to the axis **Numeric - Auto** -When the `RangePadding` is set to **Auto**, horizontal numeric axis takes **None** as padding calculation, while the vertical numeric axis takes **Normal** as padding calculation. +When `RangePadding` is set to **Auto**, the horizontal numeric axis uses **None** for padding calculation, while the vertical numeric axis uses **Normal**. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public double XValue { get; set; } @@ -284,15 +283,15 @@ When the `RangePadding` is set to **Auto**, horizontal numeric axis takes **N } public List- + + - + Data = new List - { - new Chart3DData { XValue = 10, YValue = 21 }, - new Chart3DData { XValue = 20, YValue = 24 }, - new Chart3DData { XValue = 30, YValue = 36 }, - new Chart3DData { XValue = 40, YValue = 38 }, - new Chart3DData { XValue = 50, YValue = 54 }, - new Chart3DData { XValue = 60, YValue = 57 }, - new Chart3DData { XValue = 70, YValue = 70 } - }; + { + new Chart3DData { XValue = 10, YValue = 21 }, + new Chart3DData { XValue = 20, YValue = 24 }, + new Chart3DData { XValue = 30, YValue = 36 }, + new Chart3DData { XValue = 40, YValue = 38 }, + new Chart3DData { XValue = 50, YValue = 54 }, + new Chart3DData { XValue = 60, YValue = 57 }, + new Chart3DData { XValue = 70, YValue = 70 } + }; } ``` @@ -300,25 +299,23 @@ When the `RangePadding` is set to **Auto**, horizontal numeric axis takes **N  -## Label format +## Label Format -**Numeric label format** - -Numeric labels can be formatted by using the `LabelFormat` property. Also, it supports all globalize format. +Numeric labels can be formatted using the `LabelFormat` property. All globalize formats are supported. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public double X { get; set; } @@ -326,7 +323,7 @@ Numeric labels can be formatted by using the `LabelFormat` property. Also, it s } public List+ - + Data = new List - { + { new Chart3DData { X = 10, Y =7000 }, new Chart3DData { X = 20, Y = 1000 }, new Chart3DData { X = 30, Y = 12000 }, @@ -408,9 +405,9 @@ The table below shows the results of applying various commonly used label format -## Grouping separator +## Grouping Separator -To separate groups of thousands for numerical values, use the `UseGroupingSeparator` property set to true in the 3D chart to enable it. When this property is enabled, axis labels, data labels, and tooltips will display with a thousand separators. +To separate groups of thousands for numerical values, set the `UseGroupingSeparator` property to true in the 3D chart. When enabled, axis labels, data labels, and tooltips display with a thousand separator. ```cshtml @@ -433,6 +430,7 @@ To separate groups of thousands for numerical values, use the `UseGroupingSepara public DateTime PrdDate { get; set; } public double Amount { get; set; } } + public List Data = new List { new Chart3DData { PrdDate = new DateTime(2021,01,01), Amount = 1000 }, @@ -450,15 +448,15 @@ To separate groups of thousands for numerical values, use the `UseGroupingSepara  -## Custom label format +## Custom Label Format -Axis also supports custom label format using placeholders such as {value}K, where the value represents the axis label, for example, 20K. +The axis also supports custom label formats using placeholders such as {value}K, where the value represents the axis label (for example, 20K). ```cshtml @using Syncfusion.Blazor.Chart3D - + -@code{ +@code { private List@@ -477,6 +475,7 @@ Axis also supports custom label format using placeholders such as {value}K, wher public DateTime PrdDate { get; set; } public double Amount { get; set; } } + public List Data = new List { new Chart3DData { PrdDate = new DateTime(2021,01,01), Amount = 1000 }, diff --git a/blazor/3D-chart/print-export.md b/blazor/3D-chart/print-export.md index 7d7b8660c2..6578748b6c 100644 --- a/blazor/3D-chart/print-export.md +++ b/blazor/3D-chart/print-export.md @@ -1,7 +1,7 @@ --- layout: post title: Print and Export in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about Print and Export in Syncfusion Blazor 3D Chart component and much more. +description: Check out and learn how to enable and utilize the Print and Export feature in the Syncfusion Blazor 3D Chart component. platform: Blazor control: 3D Chart documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## Print -The rendered 3D chart can be printed directly from the browser by calling the public method `PrintAsync`. The ID of the 3D chart's div element must be passed as the input parameter to that method. +The rendered 3D chart can be printed directly from the browser by calling the public method `PrintAsync`. Pass the 3D chart reference so the component triggers the browser’s print dialog for the chart area. ```cshtml @@ -19,7 +19,7 @@ The rendered 3D chart can be printed directly from the browser by calling the pu @using Syncfusion.Blazor.Buttons - -@code{ +@code { public class Chart3DData { public string Month { get; set; } public double Sales { get; set; } } - + public List+ @@ -29,8 +29,7 @@ The rendered 3D chart can be printed directly from the browser by calling the pu -@code{ - +@code { SfChart3D Chart3DObj; private async Task Print(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) @@ -58,13 +57,12 @@ The rendered 3D chart can be printed directly from the browser by calling the pu } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVptnWKMUGlprdU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  ## Export -The rendered 3D chart can be exported to `JPEG`, `PNG`, `SVG`, or `PDF` format using the `ExportAsync` method. The input parameters for this method are: `type` for format and `fileName` for result. +The rendered 3D chart can be exported to `JPEG`, `PNG`, `SVG`, or `PDF` using `ExportAsync`. Provide the export `type` (format) and `fileName` (output name). ```cshtml @@ -72,7 +70,7 @@ The rendered 3D chart can be exported to `JPEG`, `PNG`, `SVG`, or `PDF` format u @using Syncfusion.Blazor.Buttons - -@code{ +@code { public class Chart3DData { public string Month { get; set; } @@ -157,7 +157,7 @@ By default, tooltip shows information of x and y value in points. In addition to ## Tooltip template -Any HTML elements can be displayed within the tooltip by using the `Chart3DTooltipTemplate` property of the `Chart3DTooltipSettings`. You can use the **data.X** and **data.Y** as place holders in the HTML element to display x and y values of the corresponding data point. +Any HTML elements can be rendered in the tooltip using the `Chart3DTooltipTemplate` property of `Chart3DTooltipSettings`. The placeholders **data.X** and **data.Y** within the template represent the x and y values for the corresponding data point. ```cshtml @@ -183,13 +183,13 @@ Any HTML elements can be displayed within the tooltip by using the `Chart3DToolt+ @@ -82,8 +80,7 @@ The rendered 3D chart can be exported to `JPEG`, `PNG`, `SVG`, or `PDF` format u -@code{ - +@code { SfChart3D Chart3DObj; private async Task Export(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) @@ -111,6 +108,5 @@ The rendered 3D chart can be exported to `JPEG`, `PNG`, `SVG`, or `PDF` format u } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhJXxCgsqbldGjc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  diff --git a/blazor/3D-chart/selection.md b/blazor/3D-chart/selection.md index 5305e5109a..986556e788 100644 --- a/blazor/3D-chart/selection.md +++ b/blazor/3D-chart/selection.md @@ -1,7 +1,7 @@ --- layout: post title: Selection in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about Selection feature in Syncfusion Blazor 3D Chart component and much more. +description: Check out and learn how to enable and configure Selection feature in the Syncfusion Blazor 3D Chart component. platform: Blazor control: 3D Chart documentation: ug @@ -11,11 +11,11 @@ documentation: ug # Selection in Blazor 3D Chart Component -The 3D chart provides selection support for the series and its data points on mouse click. +The 3D chart supports selecting series and data points on mouse click. ->When mouse is clicked on the data points, the corresponding series legend will also be selected. +> When a data point is clicked, the corresponding series legend item is also selected. -We have different types of selection mode for selecting a data. +The following selection modes are available: * None * Point @@ -31,8 +31,7 @@ To select a point, set the `SelectionMode` property to **Point**. @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -54,7 +53,7 @@ To select a point, set the `SelectionMode` property to **Point**. } public List- +@@ -44,7 +43,7 @@ To select a point, set the `SelectionMode` property to **Point**. MedalDetails = new List - { + { new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, @@ -80,8 +79,7 @@ To select a series, set the `SelectionMode` property to **Series**. @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -103,7 +101,7 @@ To select a series, set the `SelectionMode` property to **Series**. } public List- +@@ -93,7 +91,7 @@ To select a series, set the `SelectionMode` property to **Series**. MedalDetails = new List - { + { new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, @@ -122,15 +120,14 @@ To select a series, set the `SelectionMode` property to **Series**. ## Cluster -To select the points that corresponds to the same index in all the series, set the `SelectionMode` property to **Cluster**. +To select the points that correspond to the same index across all series, set the `SelectionMode` property to **Cluster**. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -152,7 +149,7 @@ To select the points that corresponds to the same index in all the series, set t } public List- +@@ -142,7 +139,7 @@ To select the points that corresponds to the same index in all the series, set t MedalDetails = new List - { + { new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, @@ -171,15 +168,14 @@ To select the points that corresponds to the same index in all the series, set t ## Selection type -To select multiple points or series, enable the `AllowMultiSelection` property. +To select multiple points or series, enable the `AllowMultiSelection` property. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -252,7 +248,7 @@ In a 3D chart, selecting a point or series during initial loading can only be do } public List- +@@ -220,15 +216,15 @@ To select multiple points or series, enable the `AllowMultiSelection` property. ## Selection during initial loading -In a 3D chart, selecting a point or series during initial loading can only be done programmatically. The `Chart3DSelectedDataIndexes` property can be used for this. +In a 3D chart, selecting a point or series during initial loading can be performed programmatically using the `Chart3DSelectedDataIndexes` property. ```cshtml @using Syncfusion.Blazor.Chart3D - - +@@ -242,7 +238,7 @@ In a 3D chart, selecting a point or series during initial loading can only be do MedalDetails = new List - { + { new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, @@ -272,15 +268,15 @@ In a 3D chart, selecting a point or series during initial loading can only be do ## Selection through legend -To select a point or series through legend use the `ToggleVisibility` property. Also, use `EnableHighlight` property for highlighting the series through legend. +To select a point or series through the legend, use the `ToggleVisibility` property. To highlight a series through the legend, use the `EnableHighlight` property. ```cshtml @using Syncfusion.Blazor.Chart3D - -@code{ +@code { public class Chart3DData { public string Country { get; set; } @@ -299,7 +295,7 @@ To select a point or series through legend use the `ToggleVisibility` property. } public List- ++ @@ -289,7 +285,7 @@ To select a point or series through legend use the `ToggleVisibility` property. MedalDetails = new List - { + { new Chart3DData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 }, new Chart3DData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 }, new Chart3DData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 }, diff --git a/blazor/3D-chart/tool-tip.md b/blazor/3D-chart/tool-tip.md index 2b64b945cb..4f601e0d78 100644 --- a/blazor/3D-chart/tool-tip.md +++ b/blazor/3D-chart/tool-tip.md @@ -1,7 +1,7 @@ --- layout: post title: Tooltip in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about Tooltip and its customization in Syncfusion Blazor 3D Chart component and much more. +description: Check out and learn how to configure and customize Tooltip in the Syncfusion Blazor 3D Chart component. platform: Blazor control: 3D Chart documentation: ug @@ -11,11 +11,11 @@ documentation: ug -The 3D Chart will display details about the points through tooltip, when the mouse is moved over the specific point. +The 3D chart displays data point details through a tooltip when the pointer hovers over a specific point. ## Default tooltip -By default, tooltip is not visible. The tooltip can be enabled by setting the `Enable` property in `Chart3DTooltipSettings` to **true**. +By default, the tooltip is not visible. Enable the tooltip by setting the `Enable` property in `Chart3DTooltipSettings` to **true**. ```cshtml @@ -35,7 +35,7 @@ By default, tooltip is not visible. The tooltip can be enabled by setting the `E public string Month { get; set; } public double Sales { get; set; } } - + public List SalesReports = new List { new Chart3DData { Month = "Jan", Sales = 35 }, @@ -60,7 +60,7 @@ By default, tooltip is not visible. The tooltip can be enabled by setting the `E ## Fixed tooltip -By default, tooltip track the mouse movement, but the tooltip can be set in fixed position by using the `Chart3DTooltipLocation` property. +By default, the tooltip tracks pointer movement. To render the tooltip at a fixed position, use the `Chart3DTooltipLocation` property. ```cshtml @@ -69,14 +69,14 @@ By default, tooltip track the mouse movement, but the tooltip can be set in fixe - + SalesReports = new List { new Chart3DData { Month = "Jan", Sales = 35 }, @@ -214,7 +214,7 @@ Any HTML elements can be displayed within the tooltip by using the `Chart3DToolt ## Customize the appearance of tooltip -The `Fill` and `Border` properties are used to customize the background color and the border of the tooltip respectively. The `ChartTooltipTextStyle` is used to customize the tooltip text. +Use the `Fill` and `Border` properties to customize the tooltip background and border. Use `ChartTooltipTextStyle` to customize the tooltip text. ```cshtml @@ -230,13 +230,13 @@ The `Fill` and `Border` properties are used to customize the background color an SalesReports = new List { new Chart3DData { Month = "Jan", Sales = 35 }, diff --git a/blazor/3D-chart/working-with-data.md b/blazor/3D-chart/working-with-data.md index 7283884c74..ad6f134bc2 100644 --- a/blazor/3D-chart/working-with-data.md +++ b/blazor/3D-chart/working-with-data.md @@ -1,7 +1,7 @@ --- layout: post title: Working with Data in Blazor 3D Chart Component | Syncfusion -description: Checkout and learn here all about working with data in Syncfusion Blazor 3D Chart component, it's elements and more. +description: Check out and learn how to work with data in the Syncfusion Blazor 3D Chart component, it's elements and more. platform: Blazor control: 3D Chart documentation: ug @@ -11,30 +11,30 @@ documentation: ug # Working with Data in Blazor 3D Chart Component -The 3D Chart uses [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which supports both RESTful JSON data services binding and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart3D.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) value can be set using either [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) property values or a list of business objects. +The Blazor 3D Chart supports flexible data binding using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which enables both RESTful JSON data services and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart3D.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property can be set using either SfDataManager or a list of business objects. -It supports the following data binding methods: -* List binding -* Remote data +Supported data binding methods include: +- List binding +- Remote data -## List binding +## List Binding -An IEnumerable object can be assigned to the `DataSource` property. The list data source can alternatively be given as an instance of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or by using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or as a component of the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or by using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). The data fields should now be mapped to the `XName` and `YName` properties. +An IEnumerable object can be assigned to the `DataSource` property. Alternatively, an instance of [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) may be used. Data fields must be mapped to the `XName` and `YName` properties. ```cshtml @using Syncfusion.Blazor.Chart3D - + -@code{ +@code { private List+ ConsumerReports = new List { - new Chart3DData { XValue = new DateTime(2005, 01, 01), YValue = 21 }, - new Chart3DData { XValue = new DateTime(2006, 01, 01), YValue = 24 }, - new Chart3DData { XValue = new DateTime(2007, 01, 01), YValue = 36 }, - new Chart3DData { XValue = new DateTime(2008, 01, 01), YValue = 38 }, - new Chart3DData { XValue = new DateTime(2009, 01, 01), YValue = 54 }, - new Chart3DData { XValue = new DateTime(2010, 01, 01), YValue = 57 }, - new Chart3DData { XValue = new DateTime(2011, 01, 01), YValue = 70 }, - }; + new Chart3DData { XValue = new DateTime(2005, 01, 01), YValue = 21 }, + new Chart3DData { XValue = new DateTime(2006, 01, 01), YValue = 24 }, + new Chart3DData { XValue = new DateTime(2007, 01, 01), YValue = 36 }, + new Chart3DData { XValue = new DateTime(2008, 01, 01), YValue = 38 }, + new Chart3DData { XValue = new DateTime(2009, 01, 01), YValue = 54 }, + new Chart3DData { XValue = new DateTime(2010, 01, 01), YValue = 57 }, + new Chart3DData { XValue = new DateTime(2011, 01, 01), YValue = 70 } + }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrJDdCgiIrsmTGI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNByCDDxquPSqbcY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  -N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data-binding. +N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data binding. ### ExpandoObject binding -Blazor 3D Chart is a generic component which is strongly bound to a model type. There are cases when the model type is unknown during compile time. In such circumstances data can be bound to the chart as a list of **ExpandoObjects**. The **ExpandoObject** can be bound to 3D Chart by assigning to the `DataSource` property. +When the model type is unknown at compile time, a list of **ExpandoObject** instances can be bound to the chart by assigning it to the `DataSource` property. ```cshtml @@ -77,10 +77,13 @@ Blazor 3D Chart is a generic component which is strongly bound to a model type. countries = new List { "South Korea", "India", "Germany", "Italy", "Russia" }; + private Random randomNum = new Random(); + public List MedalDetails { get; set; } = new List (); + protected override void OnInitialized() { MedalDetails = Enumerable.Range(0, 5).Select((x) => @@ -97,9 +100,9 @@ Blazor 3D Chart is a generic component which is strongly bound to a model type.  -### DynamicObject binding +### DynamicObject Binding -Blazor 3D Chart supports **DynamicObject** data source when the model type is unknown. The **DynamicObject** can be bound to chart by assigning to the `DataSource` property. +Blazor 3D Chart also supports **DynamicObject** as a data source when the model type is unknown. A list of DynamicObject instances can be assigned to the `DataSource` property. ```cshtml @@ -114,12 +117,14 @@ Blazor 3D Chart supports **DynamicObject** data source when the model type is un Dates = new List { new DateTime(2005, 01, 01), new DateTime(2006, 01, 01), new DateTime(2007, 01, 01), new DateTime(2008, 01, 01), new DateTime(2009, 01, 01), new DateTime(2010, 01, 01), new DateTime(2011, 01, 01) }; public DateTime[] Value = new DateTime[] { new DateTime(2006, 01, 01), new DateTime(2008, 01, 01) }; + private Random randomNum = new Random(); public List MedalDetails = new List () { }; + protected override void OnInitialized() { MedalDetails = Enumerable.Range(0, 5).Select((x) => @@ -130,6 +135,7 @@ Blazor 3D Chart supports **DynamicObject** data source when the model type is un return d; }).Cast ().ToList (); } + public class DynamicDictionary : DynamicObject { Dictionary GetDynamicMemberNames() { return this.dictionary?.Keys; @@ -155,9 +163,9 @@ Blazor 3D Chart supports **DynamicObject** data source when the model type is un  -## Remote data +## Remote Data -The remote data can be bound to the 3D chart using the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). The `DataManager` requires minimal information like web service URL, adaptor and cross domain to interact with service endpoint properly. Assign the instance of the `DataManager` to the `DataSource` property in series and map the fields of data to `XName` and `YName` properties. +Remote data is bound to the 3D Chart using [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). The DataManager requires information such as the web service URL, adaptor, and cross-domain settings. Assign the DataManager instance to the `DataSource` property and map the data fields to `XName` and `YName`. ```cshtml @@ -177,15 +185,16 @@ 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/BZVyMjZnJtcqffcX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  -### Binding with OData services +### Binding with OData Services -[OData](https://www.odata.org/documentation/odata-version-3-0/) is a standardized data creation and consumption protocol. The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can be used to retrieve data from an [OData](https://www.odata.org/documentation/odata-version-3-0/) service. For remote data binding using the [OData](https://www.odata.org/documentation/odata-version-3-0/) service, see the code below. +[OData](https://www.odata.org/documentation/odata-version-3-0/) is a standardized protocol for data creation and consumption. The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) retrieves data from OData services. -### Binding with OData v4 services +**Binding with OData v4 services** The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can retrieve and consume OData v4 services, which is an upgraded version of OData protocols. Refer to the [OData documentation](https://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197) for additional information on OData v4 services. To bind an OData v4 service, use the **ODataV4Adaptor**. @@ -207,13 +216,12 @@ The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhpXnrpAccANHLf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  ### Web API -The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WebApiAdaptor.html) can be used to bind a chart to a Web API created using an [OData](https://www.odata.org/documentation/odata-version-3-0/) endpoint. +The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.WebApiAdaptor.html) enables binding to a Web API endpoint. ```cshtml @@ -236,13 +244,12 @@ The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data  -### Sending additional parameters to the server - -To create a data request with a custom parameter, add additional parameters to the `Query` object and assign it to the chart's Query property. +### Sending Additional Parameters to the Server -The following sample code shows how to send parameters using the Query property in the series. +To send custom parameters with a data request, add them to a `Query` object and assign the object to the chart's `Query` property. ```cshtml + @using Syncfusion.Blazor.Data @using Syncfusion.Blazor.Chart3D @@ -263,14 +270,13 @@ The following sample code shows how to send parameters using the Query property { ChartQuery = new Query().Take(10).Where("Freight", "GreaterThan", 300, false); } - } + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVzNxLfUlNVErCr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Empty points +## Empty Points -The data points that uses the `null` or `undefined` as value are considered as empty points. The empty data points are ignored and is not plotted in the chart. When the data is provided by using the points property, by using `Chart3DEmptyPointSettings` property in series, the empty can be customized. The default `Mode` of the empty point is **Gap**. +Data points with `null` or `undefined` values are considered empty points. These points are ignored and not plotted. The appearance of empty points can be customized using the `Chart3DEmptyPointSettings` property in the series. The default `Mode` is **Gap**. ```cshtml @@ -288,7 +294,7 @@ The data points that uses the `null` or `undefined` as value are considered as e -@code{ +@code { public class Chart3DData { public string Month { get; set; } @@ -317,9 +323,9 @@ The data points that uses the `null` or `undefined` as value are considered as e  -**Customizing empty point** +### Customizing Empty Points -The specific color for empty point can be set by the `Fill` property in `Chart3DEmptyPointSettings`. +A specific color for empty points can be set using the `Fill` property in `Chart3DEmptyPointSettings`. ```cshtml @@ -364,4 +370,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 + diff --git a/blazor/Release-Notes/31.1.17.md b/blazor/Release-Notes/31.1.17.md index 01bf2e3c8a..051c9d0551 100644 --- a/blazor/Release-Notes/31.1.17.md +++ b/blazor/Release-Notes/31.1.17.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio® for Blazor - v31.1.17 Release Notes -{% include release-info.html date="September 05, 2025" version="v31.1.17" passed="187126" failed="0" %} +{% include release-info.html date="September 05, 2025" version="v31.1.17" passed="69913" failed="0" %} {% directory path: _includes/release-notes/v31.1.17 %} @@ -19,17 +19,19 @@ documentation: ug | Component Name | Test Cases | Passed | Failed | Remarks | |---------------|------------|--------|--------|---------| -| 3DChart | 202 | 202 | 0 | All Passed | +| 3DChart | 198 | 198 | 0 | All Passed | | Accordion | 232 | 232 | 0 | All Passed | -| AiAssistView | 300 | 300 | 0 | All Passed | +| AiAssistView | 297 | 297 | 0 | All Passed | | Appbar | 102 | 102 | 0 | All Passed | | Autocomplete | 444 | 444 | 0 | All Passed | +| BarcodeGenerator | 440 | 440 | 0 | All Passed | +| Breadcrumb | 137 | 137 | 0 | All Passed | | Bulletchart | 237 | 237 | 0 | All Passed | | Button | 255 | 255 | 0 | All Passed | | Calendar | 146 | 146 | 0 | All Passed | | Carousel | 174 | 174 | 0 | All Passed | | Charts | 3917 | 3917 | 0 | All Passed | -| ChatUI | 130 | 130 | 0 | All Passed | +| ChatUI | 102 | 102 | 0 | All Passed | | Chips | 196 | 196 | 0 | All Passed | | CircularGauge | 927 | 927 | 0 | All Passed | | ColorPicker | 113 | 113 | 0 | All Passed | @@ -37,12 +39,11 @@ documentation: ug | DashboardLayout | 252 | 252 | 0 | All Passed | | DataForm | 547 | 547 | 0 | All Passed | | DataGrid | 4896 | 4896 | 0 | All Passed | -| DatePicker | 574 | 574 | 0 | All Passed | +| DatePicker | 573 | 573 | 0 | All Passed | | DateRangePicker | 365 | 365 | 0 | All Passed | | DateTimePicker | 474 | 474 | 0 | All Passed | | Diagram | 15098 | 15098 | 0 | All Passed | -| Dialog | 389 | 389 | 0 | All Passed | -| DocumentEditor | 1929 | 1929 | 0 | All Passed | +| Dialog | 481 | 481 | 0 | All Passed | | DropdownList | 577 | 577 | 0 | All Passed | | Dropdowntree | 131 | 131 | 0 | All Passed | | FileManager | 3104 | 3104 | 0 | All Passed | @@ -52,14 +53,16 @@ documentation: ug | HeatMap | 337 | 337 | 0 | All Passed | | ImageEditor | 3561 | 3561 | 0 | All Passed | | InPlaceEditor | 763 | 763 | 0 | All Passed | -| Kanban | 388 | 388 | 0 | All Passed | +| InputMask | 168 | 168 | 0 | All Passed | +| Kanban | 330 | 330 | 0 | All Passed | | LinearGauge | 797 | 797 | 0 | All Passed | | ListBox | 138 | 138 | 0 | All Passed | | ListView | 439 | 439 | 0 | All Passed | | Maps | 1570 | 1570 | 0 | All Passed | | Mention | 150 | 150 | 0 | All Passed | -| Message | 242 | 242 | 0 | All Passed | -| MultiselectDropdown | 379 | 379 | 0 | All Passed | +| Menu | 398 | 398 | 0 | All Passed | +| Message | 211 | 211 | 0 | All Passed | +| MultiselectDropdown | 376 | 376 | 0 | All Passed | | NumericTextbox | 440 | 440 | 0 | All Passed | | OtpInput | 123 | 123 | 0 | All Passed | | PivotTable | 1371 | 1371 | 0 | All Passed | @@ -71,32 +74,21 @@ documentation: ug | Ribbon | 440 | 440 | 0 | All Passed | | RichTextEditor | 2150 | 2150 | 0 | All Passed | | Scheduler | 5183 | 5183 | 0 | All Passed | -| SfPdfViewer2 | 12313 | 12313 | 0 | All Passed | -| Sidebar | 105 | 105 | 0 | All Passed | -| Signature | 106 | 106 | 0 | All Passed | -| Skeleton | 247 | 247 | 0 | All Passed | -| Slider | 200 | 200 | 0 | All Passed | -| SmithChart | 212 | 212 | 0 | All Passed | -| SpeechToText | 112 | 112 | 0 | All Passed | -| SpeedDial | 278 | 278 | 0 | All Passed | -| Spinner | 184 | 184 | 0 | All Passed | -| Splitter | 538 | 538 | 0 | All Passed | -| Stepper | 285 | 285 | 0 | All Passed | -| StockChart | 211 | 211 | 0 | All Passed | -| Switch | 724 | 724 | 0 | All Passed | -| Tabs | 287 | 287 | 0 | All Passed | -| TextArea | 165 | 165 | 0 | All Passed | -| Textbox | 698 | 698 | 0 | All Passed | -| Timeline | 236 | 236 | 0 | All Passed | -| TimePicker | 346 | 346 | 0 | All Passed | -| Toast | 262 | 262 | 0 | All Passed | -| Toolbar | 164 | 164 | 0 | All Passed | -| Tooltip | 474 | 474 | 0 | All Passed | +| Sidebar | 144 | 144 | 0 | All Passed | +| Slider | 269 | 269 | 0 | All Passed | +| SmithChart | 259 | 259 | 0 | All Passed | +| SparklineChart | 228 | 228 | 0 | All Passed | +| SpeedDial | 353 | 353 | 0 | All Passed | +| Splitter | 190 | 190 | 0 | All Passed | +| Stepper | 215 | 215 | 0 | All Passed | +| StockChart | 333 | 333 | 0 | All Passed | +| Tabs | 934 | 934 | 0 | All Passed | +| TextArea | 126 | 126 | 0 | All Passed | +| Textbox | 652 | 652 | 0 | All Passed | +| Timeline | 182 | 182 | 0 | All Passed | +| TimePicker | 419 | 419 | 0 | All Passed | +| Toast | 232 | 232 | 0 | All Passed | +| Toolbar | 230 | 230 | 0 | All Passed | | TreeGrid | 3923 | 3923 | 0 | All Passed | -| TreeMap | 174 | 174 | 0 | All Passed | -| TreeView | 1565 | 1565 | 0 | All Passed | -| DocIO | 16538 | 16538 | 0 | All Passed | -| Metafilerenderer | 863 | 863 | 0 | All Passed | -| PDF | 13522 | 13522 | 0 | All Passed | -| Presentation | 54312 | 54312 | 0 | All Passed | -| XlsIO | 17351 | 17351 | 0 | All Passed | \ No newline at end of file +| TreeMap | 704 | 704 | 0 | All Passed | +| TreeView | 611 | 611 | 0 | All Passed | diff --git a/blazor/Release-Notes/31.1.18.md b/blazor/Release-Notes/31.1.18.md index c4c3f6c5be..e89e82e844 100644 --- a/blazor/Release-Notes/31.1.18.md +++ b/blazor/Release-Notes/31.1.18.md @@ -7,7 +7,7 @@ documentation: ug # Essential Studio® for Blazor - v31.1.18 Release Notes -{% include release-info.html date="September 10, 2025" version="v31.1.18" passed="71646" failed="0" %} +{% include release-info.html date="September 10, 2025" version="v31.1.18" passed="70138" failed="0" %} {% directory path: _includes/release-notes/v31.1.18 %} @@ -19,14 +19,16 @@ documentation: ug | Component Name | Test Cases | Passed | Failed | Remarks | |---------------|------------|--------|--------|---------| -| 3DChart | 197 | 197 | 0 | All Passed | +| 3DChart | 198 | 198 | 0 | All Passed | | Accordion | 232 | 232 | 0 | All Passed | -| AiAssistView | 300 | 300 | 0 | All Passed | +| AiAssistView | 297 | 297 | 0 | All Passed | | Appbar | 102 | 102 | 0 | All Passed | | Autocomplete | 444 | 444 | 0 | All Passed | +| BarcodeGenerator | 440 | 440 | 0 | All Passed | +| Breadcrumb | 137 | 137 | 0 | All Passed | | Bulletchart | 237 | 237 | 0 | All Passed | | Button | 255 | 255 | 0 | All Passed | -| Calendar | 150 | 150 | 0 | All Passed | +| Calendar | 146 | 146 | 0 | All Passed | | Carousel | 174 | 174 | 0 | All Passed | | Charts | 3917 | 3917 | 0 | All Passed | | ChatUI | 102 | 102 | 0 | All Passed | @@ -41,8 +43,7 @@ documentation: ug | DateRangePicker | 365 | 365 | 0 | All Passed | | DateTimePicker | 474 | 474 | 0 | All Passed | | Diagram | 15298 | 15298 | 0 | All Passed | -| Dialog | 388 | 388 | 0 | All Passed | -| DocumentEditor | 1933 | 1933 | 0 | All Passed | +| Dialog | 481 | 481 | 0 | All Passed | | DropdownList | 577 | 577 | 0 | All Passed | | Dropdowntree | 131 | 131 | 0 | All Passed | | FileManager | 3104 | 3104 | 0 | All Passed | @@ -53,12 +54,14 @@ documentation: ug | ImageEditor | 3561 | 3561 | 0 | All Passed | | InPlaceEditor | 763 | 763 | 0 | All Passed | | InputMask | 168 | 168 | 0 | All Passed | -| LinearGauge | 572 | 572 | 0 | All Passed | +| Kanban | 330 | 330 | 0 | All Passed | +| LinearGauge | 797 | 797 | 0 | All Passed | | ListBox | 138 | 138 | 0 | All Passed | | ListView | 439 | 439 | 0 | All Passed | | Maps | 1570 | 1570 | 0 | All Passed | | Mention | 150 | 150 | 0 | All Passed | -| Message | 242 | 242 | 0 | All Passed | +| Menu | 398 | 398 | 0 | All Passed | +| Message | 211 | 211 | 0 | All Passed | | MultiselectDropdown | 376 | 376 | 0 | All Passed | | NumericTextbox | 440 | 440 | 0 | All Passed | | OtpInput | 123 | 123 | 0 | All Passed | @@ -71,25 +74,21 @@ documentation: ug | Ribbon | 440 | 440 | 0 | All Passed | | RichTextEditor | 2150 | 2150 | 0 | All Passed | | Scheduler | 5183 | 5183 | 0 | All Passed | -| Sidebar | 105 | 105 | 0 | All Passed | -| Signature | 106 | 106 | 0 | All Passed | -| Skeleton | 247 | 247 | 0 | All Passed | -| Slider | 200 | 200 | 0 | All Passed | -| SmithChart | 212 | 212 | 0 | All Passed | -| SpeechToText | 112 | 112 | 0 | All Passed | -| SpeedDial | 278 | 278 | 0 | All Passed | -| Spinner | 184 | 184 | 0 | All Passed | -| Splitter | 440 | 440 | 0 | All Passed | -| Stepper | 285 | 285 | 0 | All Passed | -| StockChart | 211 | 211 | 0 | All Passed | -| Switch | 724 | 724 | 0 | All Passed | -| Tabs | 287 | 287 | 0 | All Passed | -| TextArea | 165 | 165 | 0 | All Passed | -| Textbox | 698 | 698 | 0 | All Passed | -| TimePicker | 346 | 346 | 0 | All Passed | -| Toast | 262 | 262 | 0 | All Passed | -| Toolbar | 164 | 164 | 0 | All Passed | -| Tooltip | 474 | 474 | 0 | All Passed | +| Sidebar | 144 | 144 | 0 | All Passed | +| Slider | 269 | 269 | 0 | All Passed | +| SmithChart | 259 | 259 | 0 | All Passed | +| SparklineChart | 228 | 228 | 0 | All Passed | +| SpeedDial | 353 | 353 | 0 | All Passed | +| Splitter | 190 | 190 | 0 | All Passed | +| Stepper | 215 | 215 | 0 | All Passed | +| StockChart | 333 | 333 | 0 | All Passed | +| Tabs | 934 | 934 | 0 | All Passed | +| TextArea | 126 | 126 | 0 | All Passed | +| Textbox | 652 | 652 | 0 | All Passed | +| Timeline | 182 | 182 | 0 | All Passed | +| TimePicker | 419 | 419 | 0 | All Passed | +| Toast | 232 | 232 | 0 | All Passed | +| Toolbar | 230 | 230 | 0 | All Passed | | TreeGrid | 3932 | 3932 | 0 | All Passed | -| TreeMap | 177 | 177 | 0 | All Passed | -| TreeView | 1565 | 1565 | 0 | All Passed | \ No newline at end of file +| TreeMap | 704 | 704 | 0 | All Passed | +| TreeView | 611 | 611 | 0 | All Passed | diff --git a/blazor/Release-Notes/31.1.20.md b/blazor/Release-Notes/31.1.20.md new file mode 100644 index 0000000000..6398fc3a0e --- /dev/null +++ b/blazor/Release-Notes/31.1.20.md @@ -0,0 +1,94 @@ +--- +title: Essential Studio® for Blazor Release Notes - v31.1.20 +description: Essential Studio® for Blazor Weekly Release - Release Notes - v31.1.20 +platform: blazor +documentation: ug +--- + +# Essential Studio® for Blazor - v31.1.20 Release Notes + +{% include release-info.html date="September 17, 2025" version="v31.1.20" passed="70429" failed="0" %} + +{% directory path: _includes/release-notes/v31.1.20 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3DChart | 198 | 198 | 0 | All Passed | +| Accordion | 232 | 232 | 0 | All Passed | +| AiAssistView | 297 | 297 | 0 | All Passed | +| Appbar | 102 | 102 | 0 | All Passed | +| Autocomplete | 444 | 444 | 0 | All Passed | +| BarcodeGenerator | 440 | 440 | 0 | All Passed | +| Breadcrumb | 137 | 137 | 0 | All Passed | +| Bulletchart | 237 | 237 | 0 | All Passed | +| Button | 255 | 255 | 0 | All Passed | +| Calendar | 146 | 146 | 0 | All Passed | +| Carousel | 174 | 174 | 0 | All Passed | +| Charts | 3917 | 3917 | 0 | All Passed | +| ChatUI | 102 | 102 | 0 | All Passed | +| Chips | 196 | 196 | 0 | All Passed | +| CircularGauge | 927 | 927 | 0 | All Passed | +| ColorPicker | 113 | 113 | 0 | All Passed | +| ComboBox | 242 | 242 | 0 | All Passed | +| DashboardLayout | 252 | 252 | 0 | All Passed | +| DataForm | 547 | 547 | 0 | All Passed | +| DataGrid | 4896 | 4896 | 0 | All Passed | +| DatePicker | 573 | 573 | 0 | All Passed | +| DateRangePicker | 365 | 365 | 0 | All Passed | +| DateTimePicker | 474 | 474 | 0 | All Passed | +| Diagram | 15298 | 15298 | 0 | All Passed | +| Dialog | 481 | 481 | 0 | All Passed | +| DropdownList | 577 | 577 | 0 | All Passed | +| Dropdowntree | 131 | 131 | 0 | All Passed | +| FileManager | 3104 | 3104 | 0 | All Passed | +| FileUpload | 328 | 328 | 0 | All Passed | +| FloatingActionButton | 128 | 128 | 0 | All Passed | +| Gantt | 4743 | 4743 | 0 | All Passed | +| HeatMap | 337 | 337 | 0 | All Passed | +| ImageEditor | 3561 | 3561 | 0 | All Passed | +| InPlaceEditor | 763 | 763 | 0 | All Passed | +| InputMask | 168 | 168 | 0 | All Passed | +| Kanban | 330 | 330 | 0 | All Passed | +| LinearGauge | 797 | 797 | 0 | All Passed | +| ListBox | 138 | 138 | 0 | All Passed | +| ListView | 439 | 439 | 0 | All Passed | +| Maps | 1570 | 1570 | 0 | All Passed | +| Mention | 150 | 150 | 0 | All Passed | +| Menu | 398 | 398 | 0 | All Passed | +| Message | 211 | 211 | 0 | All Passed | +| MultiselectDropdown | 376 | 376 | 0 | All Passed | +| NumericTextbox | 440 | 440 | 0 | All Passed | +| OtpInput | 123 | 123 | 0 | All Passed | +| PivotTable | 1378 | 1378 | 0 | All Passed | +| ProgressBar | 198 | 198 | 0 | All Passed | +| progressbutton | 101 | 101 | 0 | All Passed | +| QueryBuilder | 584 | 584 | 0 | All Passed | +| RangeNavigator | 196 | 196 | 0 | All Passed | +| Rating | 106 | 106 | 0 | All Passed | +| Ribbon | 440 | 440 | 0 | All Passed | +| RichTextEditor | 2150 | 2150 | 0 | All Passed | +| Scheduler | 5183 | 5183 | 0 | All Passed | +| Sidebar | 144 | 144 | 0 | All Passed | +| Slider | 269 | 269 | 0 | All Passed | +| SmithChart | 259 | 259 | 0 | All Passed | +| SparklineChart | 228 | 228 | 0 | All Passed | +| SpeedDial | 353 | 353 | 0 | All Passed | +| Splitter | 190 | 190 | 0 | All Passed | +| Stepper | 215 | 215 | 0 | All Passed | +| StockChart | 333 | 333 | 0 | All Passed | +| Tabs | 934 | 934 | 0 | All Passed | +| TextArea | 126 | 126 | 0 | All Passed | +| Textbox | 652 | 652 | 0 | All Passed | +| Timeline | 182 | 182 | 0 | All Passed | +| TimePicker | 419 | 419 | 0 | All Passed | +| Toast | 232 | 232 | 0 | All Passed | +| Toolbar | 230 | 230 | 0 | All Passed | +| TreeGrid | 4155 | 4155 | 0 | All Passed | +| TreeMap | 704 | 704 | 0 | All Passed | +| TreeView | 611 | 611 | 0 | All Passed | diff --git a/blazor/Release-Notes/31.1.21.md b/blazor/Release-Notes/31.1.21.md new file mode 100644 index 0000000000..845b840f90 --- /dev/null +++ b/blazor/Release-Notes/31.1.21.md @@ -0,0 +1,94 @@ +--- +title: Essential Studio® for Blazor Release Notes - v31.1.21 +description: Learn here about the controls in the Essential Studio® for Blazor Weekly Release - Release Notes - v31.1.21 +platform: blazor +documentation: ug +--- + +# Essential Studio® for Blazor - v31.1.21 Release Notes + +{% include release-info.html date="September 23, 2025" version="v31.1.21" passed="71024" failed="0" %} + +{% directory path: _includes/release-notes/v31.1.21 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3DChart | 198 | 198 | 0 | All Passed | +| Accordion | 232 | 232 | 0 | All Passed | +| AiAssistView | 297 | 297 | 0 | All Passed | +| Appbar | 102 | 102 | 0 | All Passed | +| Autocomplete | 444 | 444 | 0 | All Passed | +| BarcodeGenerator | 440 | 440 | 0 | All Passed | +| Breadcrumb | 137 | 137 | 0 | All Passed | +| Bulletchart | 237 | 237 | 0 | All Passed | +| Button | 255 | 255 | 0 | All Passed | +| Calendar | 146 | 146 | 0 | All Passed | +| Carousel | 174 | 174 | 0 | All Passed | +| Charts | 3938 | 3938 | 0 | All Passed | +| ChatUI | 102 | 102 | 0 | All Passed | +| Chips | 196 | 196 | 0 | All Passed | +| CircularGauge | 927 | 927 | 0 | All Passed | +| ColorPicker | 113 | 113 | 0 | All Passed | +| ComboBox | 248 | 248 | 0 | All Passed | +| DashboardLayout | 252 | 252 | 0 | All Passed | +| DataForm | 547 | 547 | 0 | All Passed | +| DataGrid | 4941 | 4941 | 0 | All Passed | +| DatePicker | 574 | 574 | 0 | All Passed | +| DateRangePicker | 365 | 365 | 0 | All Passed | +| DateTimePicker | 474 | 474 | 0 | All Passed | +| Diagram | 15298 | 15298 | 0 | All Passed | +| Dialog | 481 | 481 | 0 | All Passed | +| DropdownList | 580 | 580 | 0 | All Passed | +| Dropdowntree | 133 | 133 | 0 | All Passed | +| FileManager | 3108 | 3108 | 0 | All Passed | +| FileUpload | 329 | 329 | 0 | All Passed | +| FloatingActionButton | 128 | 128 | 0 | All Passed | +| Gantt | 4743 | 4743 | 0 | All Passed | +| HeatMap | 337 | 337 | 0 | All Passed | +| ImageEditor | 3561 | 3561 | 0 | All Passed | +| InPlaceEditor | 764 | 764 | 0 | All Passed | +| InputMask | 168 | 168 | 0 | All Passed | +| Kanban | 330 | 330 | 0 | All Passed | +| LinearGauge | 799 | 799 | 0 | All Passed | +| ListBox | 138 | 138 | 0 | All Passed | +| ListView | 440 | 440 | 0 | All Passed | +| Maps | 1570 | 1570 | 0 | All Passed | +| Mention | 151 | 151 | 0 | All Passed | +| Menu | 398 | 398 | 0 | All Passed | +| Message | 211 | 211 | 0 | All Passed | +| MultiselectDropdown | 380 | 380 | 0 | All Passed | +| NumericTextbox | 441 | 441 | 0 | All Passed | +| OtpInput | 123 | 123 | 0 | All Passed | +| PivotTable | 1378 | 1378 | 0 | All Passed | +| ProgressBar | 198 | 198 | 0 | All Passed | +| progressbutton | 101 | 101 | 0 | All Passed | +| QueryBuilder | 584 | 584 | 0 | All Passed | +| RangeNavigator | 196 | 196 | 0 | All Passed | +| Rating | 106 | 106 | 0 | All Passed | +| Ribbon | 451 | 451 | 0 | All Passed | +| RichTextEditor | 2763 | 2763 | 0 | All Passed | +| Scheduler | 5188 | 5188 | 0 | All Passed | +| Sidebar | 144 | 144 | 0 | All Passed | +| Slider | 269 | 269 | 0 | All Passed | +| SmithChart | 259 | 259 | 0 | All Passed | +| SparklineChart | 228 | 228 | 0 | All Passed | +| SpeedDial | 353 | 353 | 0 | All Passed | +| Splitter | 190 | 190 | 0 | All Passed | +| Stepper | 215 | 215 | 0 | All Passed | +| StockChart | 333 | 333 | 0 | All Passed | +| Tabs | 934 | 934 | 0 | All Passed | +| TextArea | 126 | 126 | 0 | All Passed | +| Textbox | 652 | 652 | 0 | All Passed | +| Timeline | 182 | 182 | 0 | All Passed | +| TimePicker | 419 | 419 | 0 | All Passed | +| Toast | 232 | 232 | 0 | All Passed | +| Toolbar | 230 | 230 | 0 | All Passed | +| TreeGrid | 4036 | 4036 | 0 | All Passed | +| TreeMap | 704 | 704 | 0 | All Passed | +| TreeView | 611 | 611 | 0 | All Passed | diff --git a/blazor/Release-Notes/31.1.22.md b/blazor/Release-Notes/31.1.22.md new file mode 100644 index 0000000000..0aaf1d1dda --- /dev/null +++ b/blazor/Release-Notes/31.1.22.md @@ -0,0 +1,94 @@ +--- +title: Essential Studio® for Blazor Release Notes - v31.1.22 +description: Learn here about the controls in the Essential Studio® for Blazor Weekly Release - Release Notes - v31.1.22 +platform: blazor +documentation: ug +--- + +# Essential Studio® for Blazor - v31.1.22 Release Notes + +{% include release-info.html date="October 01, 2025" version="v31.1.22" passed="71543" failed="0" %} + +{% directory path: _includes/release-notes/v31.1.22 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3DChart | 198 | 198 | 0 | All Passed | +| Accordion | 232 | 232 | 0 | All Passed | +| AiAssistView | 297 | 297 | 0 | All Passed | +| Appbar | 102 | 102 | 0 | All Passed | +| Autocomplete | 444 | 444 | 0 | All Passed | +| BarcodeGenerator | 440 | 440 | 0 | All Passed | +| Breadcrumb | 137 | 137 | 0 | All Passed | +| Bulletchart | 237 | 237 | 0 | All Passed | +| Button | 255 | 255 | 0 | All Passed | +| Calendar | 146 | 146 | 0 | All Passed | +| Carousel | 174 | 174 | 0 | All Passed | +| Charts | 4168 | 4168 | 0 | All Passed | +| ChatUI | 102 | 102 | 0 | All Passed | +| Chips | 196 | 196 | 0 | All Passed | +| CircularGauge | 927 | 927 | 0 | All Passed | +| ColorPicker | 113 | 113 | 0 | All Passed | +| ComboBox | 248 | 248 | 0 | All Passed | +| DashboardLayout | 252 | 252 | 0 | All Passed | +| DataForm | 547 | 547 | 0 | All Passed | +| DataGrid | 4992 | 4992 | 0 | All Passed | +| DatePicker | 575 | 575 | 0 | All Passed | +| DateRangePicker | 366 | 366 | 0 | All Passed | +| DateTimePicker | 474 | 474 | 0 | All Passed | +| Diagram | 15298 | 15298 | 0 | All Passed | +| Dialog | 481 | 481 | 0 | All Passed | +| DropdownList | 580 | 580 | 0 | All Passed | +| Dropdowntree | 133 | 133 | 0 | All Passed | +| FileManager | 3108 | 3108 | 0 | All Passed | +| FileUpload | 329 | 329 | 0 | All Passed | +| FloatingActionButton | 128 | 128 | 0 | All Passed | +| Gantt | 4799 | 4799 | 0 | All Passed | +| HeatMap | 337 | 337 | 0 | All Passed | +| ImageEditor | 3561 | 3561 | 0 | All Passed | +| InPlaceEditor | 764 | 764 | 0 | All Passed | +| InputMask | 168 | 168 | 0 | All Passed | +| Kanban | 330 | 330 | 0 | All Passed | +| LinearGauge | 799 | 799 | 0 | All Passed | +| ListBox | 138 | 138 | 0 | All Passed | +| ListView | 440 | 440 | 0 | All Passed | +| Maps | 1570 | 1570 | 0 | All Passed | +| Mention | 151 | 151 | 0 | All Passed | +| Menu | 398 | 398 | 0 | All Passed | +| Message | 211 | 211 | 0 | All Passed | +| MultiselectDropdown | 380 | 380 | 0 | All Passed | +| NumericTextbox | 441 | 441 | 0 | All Passed | +| OtpInput | 123 | 123 | 0 | All Passed | +| PivotTable | 1378 | 1378 | 0 | All Passed | +| ProgressBar | 199 | 199 | 0 | All Passed | +| progressbutton | 101 | 101 | 0 | All Passed | +| QueryBuilder | 584 | 584 | 0 | All Passed | +| RangeNavigator | 196 | 196 | 0 | All Passed | +| Rating | 106 | 106 | 0 | All Passed | +| Ribbon | 451 | 451 | 0 | All Passed | +| RichTextEditor | 2755 | 2755 | 0 | All Passed | +| Scheduler | 5215 | 5215 | 0 | All Passed | +| Sidebar | 144 | 144 | 0 | All Passed | +| Slider | 269 | 269 | 0 | All Passed | +| SmithChart | 259 | 259 | 0 | All Passed | +| SparklineChart | 228 | 228 | 0 | All Passed | +| SpeedDial | 353 | 353 | 0 | All Passed | +| Splitter | 190 | 190 | 0 | All Passed | +| Stepper | 215 | 215 | 0 | All Passed | +| StockChart | 333 | 333 | 0 | All Passed | +| Tabs | 934 | 934 | 0 | All Passed | +| TextArea | 126 | 126 | 0 | All Passed | +| Textbox | 652 | 652 | 0 | All Passed | +| Timeline | 182 | 182 | 0 | All Passed | +| TimePicker | 419 | 419 | 0 | All Passed | +| Toast | 232 | 232 | 0 | All Passed | +| Toolbar | 230 | 230 | 0 | All Passed | +| TreeGrid | 4188 | 4188 | 0 | All Passed | +| TreeMap | 704 | 704 | 0 | All Passed | +| TreeView | 611 | 611 | 0 | All Passed | \ No newline at end of file diff --git a/blazor/Release-Notes/31.1.23.md b/blazor/Release-Notes/31.1.23.md new file mode 100644 index 0000000000..c4bb6c3b44 --- /dev/null +++ b/blazor/Release-Notes/31.1.23.md @@ -0,0 +1,94 @@ +--- +title: Essential Studio® for Blazor Release Notes - v31.1.23 +description: Learn here about the controls in the Essential Studio® for Blazor Weekly Release - Release Notes - v31.1.23 +platform: blazor +documentation: ug +--- + +# Essential Studio® for Blazor - v31.1.23 Release Notes + +{% include release-info.html date="October 07, 2025" version="v31.1.23" passed="71647" failed="0" %} + +{% directory path: _includes/release-notes/v31.1.23 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3DChart | 198 | 198 | 0 | All Passed | +| Accordion | 232 | 232 | 0 | All Passed | +| AiAssistView | 297 | 297 | 0 | All Passed | +| Appbar | 102 | 102 | 0 | All Passed | +| Autocomplete | 444 | 444 | 0 | All Passed | +| BarcodeGenerator | 440 | 440 | 0 | All Passed | +| Breadcrumb | 137 | 137 | 0 | All Passed | +| Bulletchart | 237 | 237 | 0 | All Passed | +| Button | 255 | 255 | 0 | All Passed | +| Calendar | 146 | 146 | 0 | All Passed | +| Carousel | 174 | 174 | 0 | All Passed | +| Charts | 4167 | 4167 | 0 | All Passed | +| ChatUI | 102 | 102 | 0 | All Passed | +| Chips | 196 | 196 | 0 | All Passed | +| CircularGauge | 927 | 927 | 0 | All Passed | +| ColorPicker | 113 | 113 | 0 | All Passed | +| ComboBox | 248 | 248 | 0 | All Passed | +| DashboardLayout | 252 | 252 | 0 | All Passed | +| DataForm | 547 | 547 | 0 | All Passed | +| DataGrid | 4992 | 4992 | 0 | All Passed | +| DatePicker | 575 | 575 | 0 | All Passed | +| DateRangePicker | 366 | 366 | 0 | All Passed | +| DateTimePicker | 474 | 474 | 0 | All Passed | +| Diagram | 15298 | 15298 | 0 | All Passed | +| Dialog | 481 | 481 | 0 | All Passed | +| DropdownList | 580 | 580 | 0 | All Passed | +| Dropdowntree | 133 | 133 | 0 | All Passed | +| FileManager | 3108 | 3108 | 0 | All Passed | +| FileUpload | 329 | 329 | 0 | All Passed | +| FloatingActionButton | 128 | 128 | 0 | All Passed | +| Gantt | 4797 | 4797 | 0 | All Passed | +| HeatMap | 338 | 338 | 0 | All Passed | +| ImageEditor | 3561 | 3561 | 0 | All Passed | +| InPlaceEditor | 764 | 764 | 0 | All Passed | +| InputMask | 168 | 168 | 0 | All Passed | +| Kanban | 380 | 380 | 0 | All Passed | +| LinearGauge | 799 | 799 | 0 | All Passed | +| ListBox | 138 | 138 | 0 | All Passed | +| ListView | 440 | 440 | 0 | All Passed | +| Maps | 1570 | 1570 | 0 | All Passed | +| Mention | 151 | 151 | 0 | All Passed | +| Menu | 398 | 398 | 0 | All Passed | +| Message | 211 | 211 | 0 | All Passed | +| MultiselectDropdown | 380 | 380 | 0 | All Passed | +| NumericTextbox | 441 | 441 | 0 | All Passed | +| OtpInput | 123 | 123 | 0 | All Passed | +| PivotTable | 1378 | 1378 | 0 | All Passed | +| ProgressBar | 199 | 199 | 0 | All Passed | +| progressbutton | 101 | 101 | 0 | All Passed | +| QueryBuilder | 584 | 584 | 0 | All Passed | +| RangeNavigator | 196 | 196 | 0 | All Passed | +| Rating | 106 | 106 | 0 | All Passed | +| Ribbon | 451 | 451 | 0 | All Passed | +| RichTextEditor | 2764 | 2764 | 0 | All Passed | +| Scheduler | 5337 | 5337 | 0 | All Passed | +| Sidebar | 144 | 144 | 0 | All Passed | +| Slider | 269 | 269 | 0 | All Passed | +| SmithChart | 259 | 259 | 0 | All Passed | +| SparklineChart | 150 | 150 | 0 | All Passed | +| SpeedDial | 353 | 353 | 0 | All Passed | +| Splitter | 190 | 190 | 0 | All Passed | +| Stepper | 215 | 215 | 0 | All Passed | +| StockChart | 335 | 335 | 0 | All Passed | +| Tabs | 934 | 934 | 0 | All Passed | +| TextArea | 126 | 126 | 0 | All Passed | +| Textbox | 652 | 652 | 0 | All Passed | +| Timeline | 182 | 182 | 0 | All Passed | +| TimePicker | 419 | 419 | 0 | All Passed | +| Toast | 232 | 232 | 0 | All Passed | +| Toolbar | 230 | 230 | 0 | All Passed | +| TreeGrid | 4189 | 4189 | 0 | All Passed | +| TreeMap | 704 | 704 | 0 | All Passed | +| TreeView | 611 | 611 | 0 | All Passed | \ No newline at end of file diff --git a/blazor/Release-Notes/31.2.2.md b/blazor/Release-Notes/31.2.2.md new file mode 100644 index 0000000000..d1c62f0a2f --- /dev/null +++ b/blazor/Release-Notes/31.2.2.md @@ -0,0 +1,94 @@ +--- +title: Essential Studio for Blazor Release Notes +description: Learn here about the controls in the Essential Studio for Blazor 2025 Volume 2 SP Release - Release Notes +platform: blazor +documentation: ug +--- + +# Essential Studio for Blazor - v31.2.2 Release Notes + +{% include release-info.html date="October 15, 2025" version="v31.2.2" passed="73141" failed="0" %} + +{% directory path: _includes/release-notes/v31.2.2 %} + +{% include {{file.url}} %} + +{% enddirectory %} + +## Test Results + +| Component Name | Test Cases | Passed | Failed | Remarks | +|---------------|------------|--------|--------|---------| +| 3DChart | 198 | 198 | 0 | All Passed | +| Accordion | 232 | 232 | 0 | All Passed | +| AiAssistView | 297 | 297 | 0 | All Passed | +| Appbar | 102 | 102 | 0 | All Passed | +| Autocomplete | 444 | 444 | 0 | All Passed | +| BarcodeGenerator | 440 | 440 | 0 | All Passed | +| Breadcrumb | 137 | 137 | 0 | All Passed | +| Bulletchart | 237 | 237 | 0 | All Passed | +| Button | 255 | 255 | 0 | All Passed | +| Calendar | 146 | 146 | 0 | All Passed | +| Carousel | 174 | 174 | 0 | All Passed | +| Charts | 4167 | 4167 | 0 | All Passed | +| ChatUI | 102 | 102 | 0 | All Passed | +| Chips | 196 | 196 | 0 | All Passed | +| CircularGauge | 927 | 927 | 0 | All Passed | +| ColorPicker | 113 | 113 | 0 | All Passed | +| ComboBox | 248 | 248 | 0 | All Passed | +| DashboardLayout | 252 | 252 | 0 | All Passed | +| DataForm | 547 | 547 | 0 | All Passed | +| DataGrid | 5734 | 5734 | 0 | All Passed | +| DatePicker | 576 | 576 | 0 | All Passed | +| DateRangePicker | 366 | 366 | 0 | All Passed | +| DateTimePicker | 474 | 474 | 0 | All Passed | +| Diagram | 15305 | 15305 | 0 | All Passed | +| Dialog | 481 | 481 | 0 | All Passed | +| DropdownList | 580 | 580 | 0 | All Passed | +| Dropdowntree | 133 | 133 | 0 | All Passed | +| FileManager | 3108 | 3108 | 0 | All Passed | +| FileUpload | 329 | 329 | 0 | All Passed | +| FloatingActionButton | 128 | 128 | 0 | All Passed | +| Gantt | 4797 | 4797 | 0 | All Passed | +| HeatMap | 338 | 338 | 0 | All Passed | +| ImageEditor | 3561 | 3561 | 0 | All Passed | +| InPlaceEditor | 764 | 764 | 0 | All Passed | +| InputMask | 168 | 168 | 0 | All Passed | +| Kanban | 380 | 380 | 0 | All Passed | +| LinearGauge | 799 | 799 | 0 | All Passed | +| ListBox | 138 | 138 | 0 | All Passed | +| ListView | 440 | 440 | 0 | All Passed | +| Maps | 1570 | 1570 | 0 | All Passed | +| Mention | 151 | 151 | 0 | All Passed | +| Menu | 398 | 398 | 0 | All Passed | +| Message | 211 | 211 | 0 | All Passed | +| MultiselectDropdown | 380 | 380 | 0 | All Passed | +| NumericTextbox | 441 | 441 | 0 | All Passed | +| OtpInput | 123 | 123 | 0 | All Passed | +| PivotTable | 1378 | 1378 | 0 | All Passed | +| ProgressBar | 199 | 199 | 0 | All Passed | +| progressbutton | 101 | 101 | 0 | All Passed | +| QueryBuilder | 584 | 584 | 0 | All Passed | +| RangeNavigator | 196 | 196 | 0 | All Passed | +| Rating | 106 | 106 | 0 | All Passed | +| Ribbon | 451 | 451 | 0 | All Passed | +| RichTextEditor | 2766 | 2766 | 0 | All Passed | +| Scheduler | 5337 | 5337 | 0 | All Passed | +| Sidebar | 144 | 144 | 0 | All Passed | +| Slider | 269 | 269 | 0 | All Passed | +| SmithChart | 259 | 259 | 0 | All Passed | +| SparklineChart | 150 | 150 | 0 | All Passed | +| SpeedDial | 353 | 353 | 0 | All Passed | +| Splitter | 190 | 190 | 0 | All Passed | +| Stepper | 215 | 215 | 0 | All Passed | +| StockChart | 335 | 335 | 0 | All Passed | +| Tabs | 934 | 934 | 0 | All Passed | +| TextArea | 126 | 126 | 0 | All Passed | +| Textbox | 652 | 652 | 0 | All Passed | +| Timeline | 182 | 182 | 0 | All Passed | +| TimePicker | 419 | 419 | 0 | All Passed | +| Toast | 233 | 233 | 0 | All Passed | +| Toolbar | 230 | 230 | 0 | All Passed | +| TreeGrid | 4930 | 4930 | 0 | All Passed | +| TreeMap | 704 | 704 | 0 | All Passed | +| TreeView | 611 | 611 | 0 | All Passed | \ No newline at end of file diff --git a/blazor/accordion/accessibility.md b/blazor/accordion/accessibility.md index b9f3727882..b45bc28225 100644 --- a/blazor/accordion/accessibility.md +++ b/blazor/accordion/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor Accordion Component | Syncfusion -description: Checkout and learn here all about Accessibility in Syncfusion Blazor Accordion component and much more. +description: Checkout and learn here all about Accessibility in Syncfusion Blazor Accordion component, including WAI-ARIA support, keyboard interaction, and compliance with WCAG, Section 508, and ADA standards. platform: Blazor control: Accordion documentation: ug @@ -41,18 +41,20 @@ The accessibility compliance for the Blazor Accordion component is outlined belo ## WAI-ARIA attributes +The Syncfusion Blazor Accordion component automatically applies the following WAI-ARIA attributes to its elements to enhance accessibility: + | Attributes | Purpose | |----------------------|---------------| -| role | **Button:** Attribute is set to the Accordion header elements to indicate that the element can be used to toggle the visibility of the associated content section, describing the actual role of the element.
**Region:** Attribute is set to the Accordion panel elements to create a landmark region that contains the currently expanded accordion panel, describing the actual role of the element. | -| aria-labelledby | Attribute is set to content (panel) and it points to the corresponding Accordion header.| -| aria-controls | Attribute is set to the header and it points to the corresponding Accordion content. | -| aria-expanded | Attribute is set to the Accordion header elements to indicates the expand state of the Accordion Item. Default value of this attribute is `false`. If an item is expanded, the attribute value changes to ‘true’. | -| aria-hidden | Attribute is set to the Accordion panel elements to indicates the content visible state of the Accordion Item. Default value of this attribute is `true`. If an item content is visible, the attribute value changes to `false`. | +| role | **Button:** Applied to the Accordion header elements, indicating they function as interactive buttons that toggle the visibility of their associated content sections.
**Region**: Applied to the Accordion panel elements, defining them as landmark regions that contain the currently expanded content, making them discoverable by assistive technologies. | +| aria-labelledby | This attribute is set on the Accordion content (panel) and points to the `id` of its corresponding Accordion header. This establishes a programmatic relationship, allowing screen readers to announce the header as the label for the content. | +| aria-controls | This attribute is set on the Accordion header and points to the `id` of its corresponding Accordion content. This indicates that the header controls the visibility of the specified content panel. | +| aria-expanded | Applied to the Accordion header elements, this attribute communicates the current expansion state of the Accordion item to assistive technologies. It has a default value of `false` (collapsed). When an item expands, its value programmatically changes to `true`. | +| aria-hidden | Applied to the Accordion panel elements, this attribute indicates whether the content is visible or hidden. A value of `true` means the content is hidden and not exposed to assistive technologies. Conversely, `false` means the content is visible. The default value is `true` for collapsed content, changing to `false` when the content becomes visible. | | aria-disabled | It indicates the disabled state of the Accordion and its items. | ## Keyboard interaction -Keyboard navigation is enabled by default. The possible keys are: +Keyboard navigation is a fundamental aspect of accessibility and comes enabled by default in the Blazor Accordion. Users can navigate and interact with the Accordion items using the following keys: | Windows | Mac | Description | |---------------|-----------|--------| diff --git a/blazor/accordion/animations.md b/blazor/accordion/animations.md index 2da03ec21e..ec462fc8a5 100644 --- a/blazor/accordion/animations.md +++ b/blazor/accordion/animations.md @@ -1,7 +1,7 @@ --- layout: post title: Animations in Blazor Accordion Component | Syncfusion -description: Checkout and learn here all about Animations in Syncfusion Blazor Accordion component and much more. +description: Customize expand and collapse animations in Syncfusion Blazor Accordion component using various effects, durations, and easing options for enhanced user experience. platform: Blazor control: Accordion documentation: ug @@ -13,7 +13,7 @@ The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accor By default, the accordion uses `SlideDown` animation for expanding panels (set through the [Expand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionAnimationSettings.html#Syncfusion_Blazor_Navigations_AccordionAnimationSettings_Expand) property) and `SlideUp` animation for collapsing panels (set through the [Collapse](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionAnimationSettings.html#Syncfusion_Blazor_Navigations_AccordionAnimationSettings_Collapse) property). You can disable animations completely by setting the animation [Effect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionAnimationCollapse.html#Syncfusion_Blazor_Navigations_AccordionAnimationCollapse_Effect) to `None`. -The following example demonstrates various animation types that can be applied to the Accordion component: +The following example demonstrates how to apply and select various animation types for both the expand and collapse actions of the Accordion component using interactive dropdowns: ```cshtml @using Syncfusion.Blazor @@ -73,15 +73,15 @@ The following example demonstrates various animation types that can be applied t this.CollapseEffect = args.Value; } ListAnimationData = new List { - new Effect() { ID= AnimationEffect.SlideDown, Text= "SlideDown" }, - new Effect() { ID= AnimationEffect.SlideUp, Text= "SlideUp" }, - new Effect() { ID= AnimationEffect.FadeIn, Text= "FadeIn" }, - new Effect() { ID= AnimationEffect.FadeOut, Text= "FadeOut" }, - new Effect() { ID= AnimationEffect.FadeZoomIn, Text= "FadeZoomIn" }, - new Effect() { ID= AnimationEffect.FadeZoomOut, Text= "FadeZoomOut" }, - new Effect() { ID= AnimationEffect.ZoomIn, Text= "ZoomIn" }, - new Effect() { ID= AnimationEffect.ZoomOut, Text= "ZoomOut" }, - new Effect() { ID= AnimationEffect.None, Text= "None" } + new Effect() { ID = AnimationEffect.SlideDown, Text = "SlideDown" }, + new Effect() { ID = AnimationEffect.SlideUp, Text = "SlideUp" }, + new Effect() { ID = AnimationEffect.FadeIn, Text = "FadeIn" }, + new Effect() { ID = AnimationEffect.FadeOut, Text = "FadeOut" }, + new Effect() { ID = AnimationEffect.FadeZoomIn, Text = "FadeZoomIn" }, + new Effect() { ID = AnimationEffect.FadeZoomOut, Text = "FadeZoomOut" }, + new Effect() { ID = AnimationEffect.ZoomIn, Text = "ZoomIn" }, + new Effect() { ID = AnimationEffect.ZoomOut, Text = "ZoomOut" }, + new Effect() { ID = AnimationEffect.None, Text = "None" } }; public class Effect { diff --git a/blazor/accordion/content-render-mode.md b/blazor/accordion/content-render-mode.md index 33d887621f..06b59453c0 100644 --- a/blazor/accordion/content-render-mode.md +++ b/blazor/accordion/content-render-mode.md @@ -9,7 +9,7 @@ documentation: ug # Content Render Mode in Blazor Accordion Component -The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component provides support for rendering the content of all [AccordionItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html) elements at initial load, which will be maintained in the DOM. To enable this behavior, set the [LoadOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAccordion.html#Syncfusion_Blazor_Navigations_SfAccordion_LoadOnDemand) property to `false`. +The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component offers flexibility in how the content of its [AccordionItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html) elements is rendered into the HTML Document Object Model (DOM). To enable this behavior, set the [LoadOnDemand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAccordion.html#Syncfusion_Blazor_Navigations_SfAccordion_LoadOnDemand) property to `false`. > The default value of the `LoadOnDemand` property is `true`. diff --git a/blazor/accordion/data-binding.md b/blazor/accordion/data-binding.md index 81a802fab9..81de411ceb 100644 --- a/blazor/accordion/data-binding.md +++ b/blazor/accordion/data-binding.md @@ -1,7 +1,7 @@ --- layout: post title: Data binding in Blazor Accordion Component | Syncfusion -description: Checkout and learn here all about Data binding in Syncfusion Blazor Accordion component and much more. +description: Checkout and learn here all about Data binding in Syncfusion Blazor Accordion component and dynamic rendering of headers and content from custom data models. platform: Blazor control: Accordion documentation: ug @@ -9,7 +9,8 @@ documentation: ug # Data Binding in Blazor Accordion Component -The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component provides an option to populate accordion items from local data. This can be accomplished by iterating through accordion items using a conditional **foreach** loop. The Accordion component currently supports only local data for data binding. The [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_HeaderTemplate) and [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_ContentTemplate) properties can be used to render the accordion header and content respectively. +The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component provides an option to populate accordion items from local data. This allows you to generate `AccordionItem` elements based on a collection of structured data, making your UI components flexible and data-driven. The Accordion component is designed to work with local data collections for its primary data binding. +You can achieve data binding by iterating through your data collection using a standard Blazor `@foreach` loop. The Accordion component currently supports only local data for data binding. The [HeaderTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_HeaderTemplate) and [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_ContentTemplate) properties can be used to render the accordion header and content respectively. The following example demonstrates how to initialize accordion items using `templates`: diff --git a/blazor/accordion/expand-mode.md b/blazor/accordion/expand-mode.md index ee29e9eb78..3455935852 100644 --- a/blazor/accordion/expand-mode.md +++ b/blazor/accordion/expand-mode.md @@ -9,14 +9,18 @@ documentation: ug # Expand Mode in Blazor Accordion Component - The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) supports the two listed types of expand modes while expanding or collapsing the item. + The [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component offers flexible control over how its items expand and collapse. You can configure the Accordion to allow only one item to be open at a time or to permit multiple items to remain expanded simultaneously. This behavior is managed through the [ExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAccordion.html#Syncfusion_Blazor_Navigations_SfAccordion_ExpandMode) property. -* Single -* Multiple +The Accordion supports two primary types of expand modes: -## Single +* **Single**: Only one Accordion item can be expanded at any given time. +* **Multiple**: Allows more than one Accordion item to be expanded concurrently. -The property enables to expand only one Accordion item at a time. If you expand any new item, the previously expanded one is collapsed and new item changed to expanded state. +## Single Expand Mode + +The `Single` expand mode ensures that only one `AccordionItem` is expanded at a time. If a new item is expanded, any previously expanded item automatically collapses, maintaining a focused view for the user. This is ideal for scenarios where screen space is limited or when the content of each item requires exclusive attention. + +To enable this mode, set the `ExpandMode` property of the `SfAccordion` component to `ExpandMode.Single`. ```cshtml @@ -39,6 +43,7 @@ The property enables to expand only one Accordion item at a time. If you expand ## Multiple The default [ExpandMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfAccordion.html#Syncfusion_Blazor_Navigations_SfAccordion_ExpandMode) of the Accordion is `Multiple`. It enables you to expand more than one Accordion item at a time. Expand/collapse action can also be toggled by clicking on it again. For example, expanded item is collapsed when you click on it again. +To enable this mode, you can either explicitly set `ExpandMode="ExpandMode.Multiple"` (though it's the default) or omit the ExpandMode property entirely. ```cshtml diff --git a/blazor/accordion/getting-started-with-web-app.md b/blazor/accordion/getting-started-with-web-app.md index 7b98fd95f4..e8c80efa26 100644 --- a/blazor/accordion/getting-started-with-web-app.md +++ b/blazor/accordion/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Accordion in Blazor Web App -This section briefly explains about how to include [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section provides a concise guide on how to seamlessly integrate the Syncfusion [Blazor Accordion](https://www.syncfusion.com/blazor-components/blazor-accordion) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -243,11 +243,11 @@ 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/rZroNEVLAafNNVqB?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 -1. [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Accordion example](https://blazor.syncfusion.com/demos/accordion/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Accordion. diff --git a/blazor/accordion/getting-started.md b/blazor/accordion/getting-started.md index ca28adf590..f14133977b 100644 --- a/blazor/accordion/getting-started.md +++ b/blazor/accordion/getting-started.md @@ -172,12 +172,12 @@ 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/rZroNEVLAafNNVqB?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 -1. [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) N> You can also explore our [Blazor Accordion example](https://blazor.syncfusion.com/demos/accordion/default-functionalities?theme=bootstrap5) that shows you how to render and configure the Accordion. 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..bd6741a584 100644 --- a/blazor/accordion/how-to/add-icon-to-accordion-header.md +++ b/blazor/accordion/how-to/add-icon-to-accordion-header.md @@ -1,7 +1,7 @@ --- layout: post title: Add Icon to Header in Blazor Accordion Component | Syncfusion -description: Checkout and learn here all about how to add Icon to Header in Syncfusion Blazor Accordion component and more. +description: Learn how to enhance your Blazor Accordion component by adding custom icons to headers using the IconCss property and related CSS styling. Includes default behavior comparison and best practices. platform: Blazor control: Accordion documentation: ug @@ -9,7 +9,9 @@ documentation: ug # Add Icon to Header in Blazor Accordion Component -You can add custom icons to the Accordion header by using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_IconCss) property. You can also apply CSS styles to the defined class. The accordion icon element is rendered before the header text in the DOM. + By default, header display a simple expand/collapse icon. You can customize the header of each Accordion item by adding your own unique icons. This is achieved using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_IconCss) property of the `AccordionItem`. + +When you specify a value for `IconCss`, the custom icon will be rendered in place of the default expand/collapse indicator. The specified CSS class(es) are applied to an element that precedes the header text in the Document Object Model (DOM), providing a straightforward way to integrate custom iconography. ```cshtml @using Syncfusion.Blazor.Navigations diff --git a/blazor/accordion/how-to/add-nested-accordion.md b/blazor/accordion/how-to/add-nested-accordion.md index 1175b6da9b..02567a023d 100644 --- a/blazor/accordion/how-to/add-nested-accordion.md +++ b/blazor/accordion/how-to/add-nested-accordion.md @@ -1,7 +1,7 @@ --- layout: post title: Add Nested Accordion in Blazor Accordion Component | Syncfusion -description: Checkout and learn here all about how to add Nested Accordion in Syncfusion Blazor Accordion component and more. +description: Learn the straightforward method for implementing nested Accordions within the Syncfusion Blazor Accordion component using the ContentTemplate property, with code examples and best practices. platform: Blazor control: Accordion documentation: ug @@ -9,8 +9,14 @@ documentation: ug # Add Nested Accordion in Blazor Accordion Component -The Accordion component supports to render the nested level of Accordion by using the [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_ContentTemplate) property. To render the nested Accordion, define the nested Accordion elements within the `ContentTemplate` property of the parent Accordion. +The Accordion component supports to render the nested level of Accordion by using the [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_ContentTemplate) property. +## Implementing Nested Accordions +To achieve nesting, you simply include a complete ` ` component inside the ` ` of an `AccordionItem` that belongs to a parent `SfAccordion`. Each nested `SfAccordion` functions independently, allowing for distinct content and structure at each level. + +### Example: Multiple Levels of Nesting + +This example demonstrates how to create a two-level nested Accordion structure. ```cshtml @using Syncfusion.Blazor.Navigations @@ -18,6 +24,7 @@ The Accordion component supports to render the nested level of Accordion by usin + @@ -28,12 +35,14 @@ The Accordion component supports to render the nested level of Accordion by usin + + @@ -48,6 +57,7 @@ The Accordion component supports to render the nested level of Accordion by usin + diff --git a/blazor/accordion/how-to/add-remove-accordion-items.md b/blazor/accordion/how-to/add-remove-accordion-items.md index 58eb8329cf..14a3b633b1 100644 --- a/blazor/accordion/how-to/add-remove-accordion-items.md +++ b/blazor/accordion/how-to/add-remove-accordion-items.md @@ -1,13 +1,13 @@ --- layout: post -title: Add/Remove Accordion items in Blazor Accordion Component | Syncfusion -description: Checkout and learn here all about how to add/remove Accordion items in Syncfusion Blazor Accordion component and more. +title: Dynamically Add or Remove Accordion items in Blazor Accordion Component | Syncfusion +description: Learn how to dynamically add and remove items in the Syncfusion Blazor Accordion component by manipulating data sources and leveraging Blazor's data binding for real-time updates. platform: Blazor control: Accordion documentation: ug --- -# Add/Remove Accordion Items in Blazor Accordion Component +# Dynamically Add or Remove Accordion Items in Blazor Accordion Component You can dynamically add or remove Accordion items by iterating through the Accordion Items using a conditional **foreach** loop. diff --git a/blazor/accordion/how-to/create-wizard-using-accordion.md b/blazor/accordion/how-to/create-wizard-using-accordion.md index d6d4530803..5a3f2e97a8 100644 --- a/blazor/accordion/how-to/create-wizard-using-accordion.md +++ b/blazor/accordion/how-to/create-wizard-using-accordion.md @@ -7,7 +7,7 @@ control: Accordion documentation: ug --- -# Create Wizard in Blazor Accordion Component +# Create Wizard Interface with Blazor Accordion Component You can create a wizard-like interface using the Accordion component by dynamically controlling the expansion and disabled states of accordion items. This is accomplished through the accordion item's [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_Disabled) and [Expanded](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_Expanded) properties. @@ -223,7 +223,9 @@ The following example demonstrates a simple payment module that enables or disab ``` -In this example, we've created a three-step wizard using the Accordion component: +In this example, we've created a three-step wizard using the Syncfusion Blazor Accordion component. Each step corresponds to an accordion item, providing a guided user experience for sequential data entry or process flow. + +### Wizard Flow: 1. **Sign In** - Collects user credentials 2. **Delivery Address** - Gathers shipping information @@ -237,6 +239,6 @@ The wizard functions by: - Providing back navigation between steps - Displaying a confirmation dialog upon successful completion -This pattern can be customized to create multi-step forms, registration processes, or any sequential workflow in your Blazor applications. +This pattern can be customized to create multi-step forms, registration processes, or any sequential workflow in your Blazor applications using Syncfusion Accordion components. {% previewsample "https://blazorplayground.syncfusion.com/embed/VNBgWVMgUGQmZvwB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/accordion/how-to/enable-disable-accordion-item.md b/blazor/accordion/how-to/enable-disable-accordion-item.md index a218fd1ec7..3f3283d3b6 100644 --- a/blazor/accordion/how-to/enable-disable-accordion-item.md +++ b/blazor/accordion/how-to/enable-disable-accordion-item.md @@ -9,9 +9,9 @@ documentation: ug # Enable or Disable Item in Blazor Accordion Component -The Accordion component provides support to enable or disable specific accordion items using the accordion item's [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_Disabled) property. +The Syncfusion Blazor Accordion component provides robust support for managing its items, including the ability to dynamically enable or disable specific accordion items. This functionality is controlled through the accordion item's [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_Disabled) property. When an item is disabled, it typically becomes non-interactive (e.g., cannot be expanded or collapsed by user clicks) and might display a different visual state (e.g., greyed out) to indicate its unavailability. -In the following example, the first accordion item is enabled or disabled dynamically when the **Enable/Disable First Item** button is clicked. +In the following example, the first accordion item is dynamically enabled or disabled when the **Enable/Disable First Item** button is clicked, demonstrating how to toggle its interactive state. ```cshtml @using Syncfusion.Blazor.Navigations 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..c708afd536 100644 --- a/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md +++ b/blazor/accordion/how-to/integrate-treeview-inside-the-accordion.md @@ -7,11 +7,11 @@ control: Accordion documentation: ug --- -# Treeview Integration in Blazor Accordion Component +# TreeView Integration in Blazor Accordion Component -The Accordion component allows you to embed other Blazor components within its panels using the [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_ContentTemplate) property. This capability enables you to create rich, nested UI structures that help organize complex information. +The Syncfusion Blazor Accordion component is highly flexible, allowing you to embed other Blazor components within its panels using the [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_ContentTemplate) property of an `AccordionItem`. This powerful capability enables you to create rich, nested UI structures that efficiently organize complex information and enhance user experience. -You can integrate a TreeView component inside an Accordion panel by placing the TreeView component within the ContentTemplate as shown below: +Integrating a TreeView component inside an Accordion panel is a common and effective way to present hierarchical data contextually. You achieve this by simply placing the `SfTreeView` component within the `ContentTemplate` of your desired `AccordionItem`, as shown in the snippet below: ```cshtml @@ -19,7 +19,7 @@ You can integrate a TreeView component inside an Accordion panel by placing the ``` -The following example shows how to render a TreeView within the Accordion. +The following example demonstrates how to render multiple TreeView components, each within a separate Accordion panel, to categorize and display different sets of hierarchical data like document folders, download lists, and picture galleries. ```cshtml @using Syncfusion.Blazor.Navigations 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..5ba5a2ea12 100644 --- a/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md +++ b/blazor/accordion/how-to/prevent-expand-collapse-accordion-item.md @@ -7,20 +7,20 @@ control: Accordion documentation: ug --- -# Prevent the Expand or Collapse Item in Blazor Accordion Component +# Prevent Expand or Collapse Actions in Blazor Accordion Items -You can prevent the expand and collapse actions of an accordion item for specific conditions. For example, if there is a button in the accordion header, clicking on it should prevent the accordion item from expanding or collapsing. +The Syncfusion Blazor Accordion component allows you to control the expand and collapse behavior of its items under specific conditions. This functionality is crucial when you have interactive elements within the Accordion item headers, such as buttons or dropdowns, and you want their interaction to prevent the Accordion item itself from changing its expanded state. -This can be achieved by adding conditional logic in the Accordion's [Expanding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionEvents.html#Syncfusion_Blazor_Navigations_AccordionEvents_Expanding) and [Collapsing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionEvents.html#Syncfusion_Blazor_Navigations_AccordionEvents_Collapsing) events. +This controlled behavior is achieved by utilizing the Accordion component's [Expanding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionEvents.html#Syncfusion_Blazor_Navigations_AccordionEvents_Expanding) and [Collapsing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionEvents.html#Syncfusion_Blazor_Navigations_AccordionEvents_Collapsing) events. These events provide an `EventArgs` object with a `Cancel` property. Setting `args.Cancel = true;` within these event handlers will effectively stop the Accordion item from expanding or collapsing. -The following code example demonstrates how to prevent expand and collapse actions when interacting with controls inside the accordion header: +The following code example demonstrates how to prevent expand and collapse actions when interacting with controls embedded directly inside the Accordion item headers: -* **DropDownList** - Prevents accordion item expand/collapse when: - * Opening the dropdown using the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnOpen) event - * Closing the dropdown using the [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) event - * Selecting an item using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event +* **DropDownList**: The Accordion item's expand/collapse is prevented when: + * The dropdown is opened using the [OnOpen](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnOpen) event. + * The dropdown is closed using the [OnClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_OnClose) event. + * An item is selected using the [ValueChange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.DropDownListEvents-2.html#Syncfusion_Blazor_DropDowns_DropDownListEvents_2_ValueChange) event. -* **Button** - Prevents accordion item expand/collapse when clicking the button using the `onclick` event +* **Button**: The Accordion item's expand/collapse is prevented when clicking the button using its `onclick` event. ```cshtml diff --git a/blazor/accordion/how-to/show-hide-accordion-item.md b/blazor/accordion/how-to/show-hide-accordion-item.md index 871ce641ea..6c2593a963 100644 --- a/blazor/accordion/how-to/show-hide-accordion-item.md +++ b/blazor/accordion/how-to/show-hide-accordion-item.md @@ -9,16 +9,13 @@ documentation: ug # Show/Hide Accordion Item in Blazor Accordion Component -The Accordion component provides support to show or hide specific accordion items using two approaches: - -* Using conditional rendering -* Using the Visible property +The Syncfusion Blazor Accordion component provides robust mechanisms to dynamically control the visibility of its items. This is particularly useful for building adaptive user interfaces where content needs to be conditionally displayed or hidden based on user actions, permissions, or application state. There are primarily two approaches to achieve this: using conditional rendering (`@if`) or leveraging the `Visible` property of the `AccordionItem`. ## Using conditional rendering -You can dynamically show or hide specific accordion items using the conditional **if** statement. +Conditional rendering involves using a Blazor `@if` statement around an `AccordionItem`. When the condition evaluates to `false`, the `AccordionItem` is completely removed from the DOM (Document Object Model). This means the item is not rendered at all, and its associated resources are released. -In the following example, the specified accordion item will toggle between showing and hiding when the **Show/Hide Item** button is clicked. +In the following example, an `AccordionItem` will be toggled between being present and completely absent from the DOM when the **Show/Hide item** button is clicked. ```cshtml @using Syncfusion.Blazor.Navigations @@ -82,7 +79,7 @@ In the following example, the specified accordion item will toggle between showi You can dynamically show or hide specific accordion items using the accordion item's [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.AccordionItem.html#Syncfusion_Blazor_Navigations_AccordionItem_Visible) property. -In the following example, the specified accordion item will toggle between showing and hiding when the **Show/Hide Item** button is clicked. +In the following example, the specified `AccordionItem` will be toggled between visible and hidden states using its Visible property when the **Show/Hide item** button is clicked. ```cshtml @using Syncfusion.Blazor.Navigations diff --git a/blazor/accordion/style.md b/blazor/accordion/style.md index ba51a02a7b..996606fd9e 100644 --- a/blazor/accordion/style.md +++ b/blazor/accordion/style.md @@ -9,7 +9,7 @@ documentation: ug # Style and Appearance in Blazor Accordion Component -The following content provides the exact CSS structure that can be used to modify the control’s appearance based on the user preference. +The Syncfusion Blazor Accordion component is highly customizable, allowing you to tailor its visual style to match your application's design language. This document provides CSS classes and examples to modify the control's appearance, focusing on various parts of the Accordion. ## Customizing accordion diff --git a/blazor/accumulation-chart/accessibility.md b/blazor/accumulation-chart/accessibility.md index 3a8dcf6010..7191a9d89c 100644 --- a/blazor/accumulation-chart/accessibility.md +++ b/blazor/accumulation-chart/accessibility.md @@ -1,7 +1,7 @@ --- layout: post title: Accessibility in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Accumulation Chart component and more. +description: Check out and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Accessibility in Blazor Accumulation Chart Component -The Blazor Accumulation Chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor Accumulation Chart component adheres to accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) commonly used to evaluate accessibility. -The accessibility compliance for the Blazor Accumulation Chart component is outlined below. +Accessibility compliance for the Blazor Accumulation Chart component is outlined below. | Accessibility Criteria | Compatibility | | -- | -- | @@ -32,15 +32,12 @@ The accessibility compliance for the Blazor Accumulation Chart component is outl- - All features of the component meet the requirement.- - Some features of the component do not meet the requirement.+## WAI-ARIA Attributes -## WAI-ARIA attributes - -The Blazor Accumulation Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Accumulation Chart component: +The Blazor Accumulation Chart component follows [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to ensure accessibility. The following ARIA attributes are used: * img (role) * button (role) @@ -49,30 +46,29 @@ The Blazor Accumulation Chart component followed the [WAI-ARIA](https://www.w3.o * aria-hidden (attribute) * aria-pressed (attribute) -## Keyboard interaction +## Keyboard Interaction -The Blazor Accumulation Chart component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Accumulation Chart component. +The component supports [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guidelines, making navigation easy for users of assistive technologies and those relying on keyboard navigation. The following keyboard shortcuts are supported: | Windows | Mac | Description | | --- | --- | --- | -| Alt + J | ⌥ + J | Moves the focus to the Accumulation Chart element. | -| Tab | Tab | Moves the focus to the next element in the Accumulation Chart. | -| Shift + Tab | ⇧ + Tab | Moves the focus to the previous element in the Accumulation Chart. | -| ↓ | ↓ | Moves the focus to the data point left side from the selected point. | -| ↑ | ↑ | Moves the focus to the data point right side from the selected point. | -| ↓ / ← | ↓ / ← | Moves the focus to the legend left side from the selected legend. | -| ↑ / → | ↑ / → | Moves the focus to the legend right side from the selected legend. | -| Enter / Space | Enter / Space | Toggles the visibility of the corresponding series. | -| ESC | Esc | Cancel the tooltip for the data point. | +| Alt + J | ⌥ + J | Moves focus to the Accumulation Chart element. | +| Tab | Tab | Moves focus to the next element in the Accumulation Chart. | +| Shift + Tab | ⇧ + Tab | Moves focus to the previous element in the Accumulation Chart. | +| ↓ | ↓ | Moves focus to the data point left side from the selected point. | +| ↑ | ↑ | Moves focus to the data point right side from the selected point. | +| ↓ / ← | ↓ / ← | Moves focus to the legend left side from the selected legend. | +| ↑ / → | ↑ / → | Moves focus to the legend right side from the selected legend. | +| Enter / Space | Enter / Space | Toggles visibility of the corresponding series. | +| ESC | Esc | Cancels the tooltip for the data point. | | Ctrl + P | ⌘ + P | Prints the Accumulation Chart. | -## Ensuring accessibility - -The Blazor Accumulation Chart component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. +## Ensuring Accessibility -The accessibility compliance of the Blazor Accumulation Chart component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/accumulation-chart) in a new window to evaluate the accessibility of the Blazor Accumulation Chart component with accessibility tools. +Accessibility levels are validated using [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) tools during automated testing. +Accessibility compliance for the Blazor Accumulation Chart component can be evaluated in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/accumulation-chart) in a new window to review accessibility features with accessibility tools. ## See also -* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) diff --git a/blazor/accumulation-chart/adaptive-layout.md b/blazor/accumulation-chart/adaptive-layout.md index c1e7375d08..90a14b9572 100644 --- a/blazor/accumulation-chart/adaptive-layout.md +++ b/blazor/accumulation-chart/adaptive-layout.md @@ -1,7 +1,7 @@ --- layout: post title: Adaptive Layout in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Adaptive Layout in Syncfusion Blazor Accumulation Chart component and more. +description: Check out and learn how to configure and utilize the Adaptive Layout in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Adaptive Layout in Blazor Accumulation Chart Component -When viewing the accumulation chart on a mobile device, some elements may not be displayed properly due to limited screen space. This is where the **Syncfusion Accumulation Chart Adaptive Layout** feature proves invaluable. Adaptive rendering dynamically adjusts chart elements to optimize their display based on the available screen size and orientation. By enabling the `EnableAdaptiveRendering` property, the chart automatically adapts to container size changes, ensuring clear alignment and proper visibility of elements such as the legend, data labels, chart title, and more. +When viewing the accumulation chart on mobile devices, some elements may not display properly due to limited screen space. The **Syncfusion® Accumulation Chart Adaptive Layout** feature dynamically adjusts chart elements for optimal display based on screen size and orientation. Enable the `EnableAdaptiveRendering` property to allow the chart to automatically adapt to container size changes, ensuring clear alignment and visibility of elements such as the legend, data labels, chart title, and more. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -44,7 +44,7 @@ When viewing the accumulation chart on a mobile device, some elements may not be new PieData { Browser = "Safari", Users = 4.73, DataLabelMappingName = "Safari: 4.73%" }, new PieData { Browser = "Opera", Users = 3.12, DataLabelMappingName = "Opera: 3.12%" }, new PieData { Browser = "Edge", Users = 7.48, DataLabelMappingName = "Edge: 7.48%" }, - new PieData { Browser = "Others", Users = 9.57, DataLabelMappingName = "Others: 9.57%" }, + new PieData { Browser = "Others", Users = 9.57, DataLabelMappingName = "Others: 9.57%" } }; } @@ -52,19 +52,19 @@ When viewing the accumulation chart on a mobile device, some elements may not be  -The table below outlines the behavior of various chart elements under specific conditions determined by the chart's height and width: +The table below outlines the behavior of chart elements under specific conditions determined by chart height and width: | Element | Size | Behavior | -|--------------|------------------ |---------------------| +|--------------|-------------------|------------------| | Title | Height < 200 / Width < 200 | Accumulation chart title is disabled | | Sutitle | Height < 300 / Width < 300 | Accumulation chart subtitle is disabled | -| Datalabel | Radius < 300 / Radius < 200 | Datalabel moves inside / Datalabel is disabled | -| Legend | Height < 300 / Width < 300 | Moves the bottom or top legend to the right if the width is greater than 200px; otherwise, it is disabled / Moves the right or left legend to the bottom if the height is greater than 200px; otherwise, it is disabled | +| Datalabel | Radius < 300 / Radius < 200 | Data label moves inside / Datalabel is disabled | +| Legend | Height < 300 / Width < 300 | Moves bottom or top legend to the right if width is greater than 200px; otherwise, disabled / Moves right or left legend to bottom if height is greater than 200px; otherwise, disabled | 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. ## See also -* [Data Label](./data-labels) +* [Data label](./data-labels) * [Tooltip](./tool-tip) -* [Legend](./legend) \ No newline at end of file +* [Legend](./legend) diff --git a/blazor/accumulation-chart/animation.md b/blazor/accumulation-chart/animation.md index 18e26cc649..19fb1d0b67 100644 --- a/blazor/accumulation-chart/animation.md +++ b/blazor/accumulation-chart/animation.md @@ -1,7 +1,7 @@ --- layout: post title: Animation in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Animation in Syncfusion Blazor Accumulation Chart component and more. +description: Check out and learn how to configure and control Animation in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -9,9 +9,10 @@ documentation: ug # Animation in Blazor Accumulation Chart Component -You can customize animation for a series using [`Animation`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html) property. You can enable or disable animation of the series using [`Enable`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Enable) property. [`Duration`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Duration) specifies the duration of an animation and [`Delay`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Delay) allows us to start the animation at desire time. +Customize series animation using the [`Animation`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html) property. Enable or disable series animation with the [`Enable`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Enable) property. The [`Duration`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Duration) property sets the animation duration, and [`Delay`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Delay) specifies when the animation should start. + +```cshtml -```cshtml @using Syncfusion.Blazor.Charts - The component does not meet the requirement.@@ -26,7 +27,7 @@ You can customize animation for a series using [`Animation`](https://help.syncfu -@code{ +@code { public class Statistics { public string Browser; @@ -40,16 +41,18 @@ You can customize animation for a series using [`Animation`](https://help.syncfu new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } + ``` -## Disable animation on programmatic refresh +## Disable Animation on Programmatic Refresh -You can programmatically refrsh chart using [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Refresh_System_Boolean_) method. You can enable or disable animation by passing boolean parameter to `Refresh` method. +Refresh the chart programmatically using the [Refresh](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Refresh_System_Boolean_) method. Control animation by passing a boolean parameter to the `Refresh` method. + +```cshtml -```cshtml @using Syncfusion.Blazor.Charts@@ -61,7 +64,7 @@ You can programmatically refrsh chart using [Refresh](https://help.syncfusion.co -@code{ +@code { SfAccumulationChart accumulationChart; public class Statistics { @@ -84,6 +87,9 @@ You can programmatically refrsh chart using [Refresh](https://help.syncfusion.co accumulationChart.Refresh(false); } } + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBAWrMgzIuHCzXH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBAWrMgzIuHCzXH?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 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. \ No newline at end of file diff --git a/blazor/accumulation-chart/annotation.md b/blazor/accumulation-chart/annotation.md index 3b1b9f2583..71ad273218 100644 --- a/blazor/accumulation-chart/annotation.md +++ b/blazor/accumulation-chart/annotation.md @@ -1,7 +1,7 @@ --- layout: post title: Annotation in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Annotation in Syncfusion Blazor Accumulation Chart component and more. +description: Check out and learn how to configure and use Annotations in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Annotation in Blazor Accumulation Chart Component -Annotations are texts, shapes, or images that are used to highlight a specific region of interest in a chart. The [AccumulationChartAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnnotation.html) property allows to add annotations to the chart. Specify the element that needs to be displayed in the accumulation chart area by using the [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnnotation.html#Syncfusion_Blazor_Charts_AccumulationChartAnnotation_Content) property of the annotation. +Annotations are text, shapes, or images used to emphasize specific regions of interest in a chart. The [AccumulationChartAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnnotation.html) property enables adding annotations to the chart. Use the [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnnotation.html#Syncfusion_Blazor_Charts_AccumulationChartAnnotation_Content) property to specify the element displayed in the accumulation chart area. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -31,7 +31,7 @@ Annotations are texts, shapes, or images that are used to highlight a specific r -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -45,7 +45,7 @@ Annotations are texts, shapes, or images that are used to highlight a specific r new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -56,9 +56,9 @@ Annotations are texts, shapes, or images that are used to highlight a specific r ## Region -The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnnotation.html#Syncfusion_Blazor_Charts_AccumulationChartAnnotation_Region) property can be used to insert annotations in relation to a series or a chart. By default, it is positioned with respect to a [Accumulation Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Regions.html#Syncfusion_Blazor_Charts_Regions_Chart). +The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnnotation.html#Syncfusion_Blazor_Charts_AccumulationChartAnnotation_Region) property allows annotations to be positioned relative to a series or the chart. By default, annotations are placed with respect to the [Accumulation Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Regions.html#Syncfusion_Blazor_Charts_Regions_Chart). -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -78,7 +78,7 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -92,7 +92,7 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -101,11 +101,11 @@ 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" %} -## Co-ordinate units +## Co-ordinate Units -The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnnotation.html#Syncfusion_Blazor_Charts_AccumulationChartAnnotation_CoordinateUnits) property allows to specify the annotation's coordinate units either in [Pixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Units.html#Syncfusion_Blazor_Charts_Units_Pixel) or [Point](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Units.html#Syncfusion_Blazor_Charts_Units_Point). +The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnnotation.html#Syncfusion_Blazor_Charts_AccumulationChartAnnotation_CoordinateUnits) property specifies the annotation's coordinate units as either [Pixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Units.html#Syncfusion_Blazor_Charts_Units_Pixel) or [Point](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Units.html#Syncfusion_Blazor_Charts_Units_Point). -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -125,7 +125,7 @@ The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -139,7 +139,7 @@ The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -152,6 +152,6 @@ N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also -* [Data Label](./data-labels) +* [Data label](./data-labels) * [Tooltip](./tool-tip) -* [Legend](./legend) \ No newline at end of file +* [Legend](./legend) diff --git a/blazor/accumulation-chart/center-label.md b/blazor/accumulation-chart/center-label.md index 4fd6f7ff7c..5af8f7d972 100644 --- a/blazor/accumulation-chart/center-label.md +++ b/blazor/accumulation-chart/center-label.md @@ -1,7 +1,7 @@ --- layout: post title: Center Label in Blazor Pie and Donut Chart Component | Syncfusion -description: Checkout and learn here all about Center Label in Syncfusion Blazor Pie and Donut Chart component and more. +description: Check out and learn how to configure and customize Center Label in Syncfusion Blazor Pie and Donut Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -9,11 +9,12 @@ documentation: ug # Center Label in Blazor Pie and Donut Chart Component -The center label feature allows you to place custom text in the middle of pie and donut charts using the [AccumulationChartCenterLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html). This is especially useful for displaying the chart's title, percentage distribution, or other key metrics pertinent to the visualized data. +The center label feature enables custom text placement in the middle of pie and donut charts using the [AccumulationChartCenterLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html). This is useful for displaying chart titles, percentage distributions or other key metrics relevant to the data. -You can configure the text that appears in the center using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html#Syncfusion_Blazor_Charts_AccumulationChartCenterLabel_Text) property within the `AccumulationChartCenterLabel`. +Configure the center text using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html#Syncfusion_Blazor_Charts_AccumulationChartCenterLabel_Text) property within `AccumulationChartCenterLabel`. ```cshtml + @using Syncfusion.Blazor.Charts@@ -27,33 +28,37 @@ You can configure the text that appears in the center using the [Text](https://h @code { - public ListDonutChartPoints { get; set; } = new List - { - new DonutData { Browser = "Chrome", Users = 63.5, DataLabelMappingName = "Chrome: 63.5%"}, - new DonutData { Browser = "Safari", Users = 25.0, DataLabelMappingName = "Safari: 25.0%"}, - new DonutData { Browser = "Samsung Internet", Users = 6.0, DataLabelMappingName = "Samsung Internet: 6.0%"}, - new DonutData { Browser = "UC Browser", Users = 2.5, DataLabelMappingName = "UC Browser: 2.5%"}, - new DonutData { Browser = "Opera", Users = 1.5, DataLabelMappingName = "Opera: 1.5%"}, - new DonutData { Browser = "Others", Users = 1.5, DataLabelMappingName = "Others: 1.5%"} - }; public class DonutData { public string Browser { get; set; } public double Users { get; set; } public string DataLabelMappingName { get; set; } } + + public List DonutChartPoints { get; set; } = new List + { + new DonutData { Browser = "Chrome", Users = 63.5, DataLabelMappingName = "Chrome: 63.5%" }, + new DonutData { Browser = "Safari", Users = 25.0, DataLabelMappingName = "Safari: 25.0%" }, + new DonutData { Browser = "Samsung Internet", Users = 6.0, DataLabelMappingName = "Samsung Internet: 6.0%" }, + new DonutData { Browser = "UC Browser", Users = 2.5, DataLabelMappingName = "UC Browser: 2.5%"}, + new DonutData { Browser = "Opera", Users = 1.5, DataLabelMappingName = "Opera: 1.5%" }, + new DonutData { Browser = "Others", Users = 1.5, DataLabelMappingName = "Others: 1.5%" } + }; } + ``` +  {% previewsample "https://blazorplayground.syncfusion.com/embed/hZBetHBdgvneoPva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Hover Text -The center label text can be dynamically updated when hovering over pie or donut chart slices using the [HoverTextFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html#Syncfusion_Blazor_Charts_AccumulationChartCenterLabel_HoverTextFormat) property. This interactive feature enhances user engagement by offering relevant information about specific segments during the exploration of the visualization. +Dynamically update the center label text when hovering over pie or donut chart slices using the [HoverTextFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html#Syncfusion_Blazor_Charts_AccumulationChartCenterLabel_HoverTextFormat) property. This interactive feature provides relevant information about specific segments during chart exploration. -N> Line breaks can be provided to texts in the `HoverTextFormat` property using the `
` tag. +N> Line breaks can be added to texts in the `HoverTextFormat` property using the `
` tag. ```cshtml + @using Syncfusion.Blazor.Charts@@ -67,33 +72,37 @@ N> Line breaks can be provided to texts in the `HoverTextFormat` property using @code { - public ListDonutChartPoints { get; set; } = new List - { - new DonutData { Browser = "Chrome", Users = 63.5, DataLabelMappingName = "Chrome: 63.5%"}, - new DonutData { Browser = "Safari", Users = 25.0, DataLabelMappingName = "Safari: 25.0%"}, - new DonutData { Browser = "Samsung Internet", Users = 6.0, DataLabelMappingName = "Samsung Internet: 6.0%"}, - new DonutData { Browser = "UC Browser", Users = 2.5, DataLabelMappingName = "UC Browser: 2.5%"}, - new DonutData { Browser = "Opera", Users = 1.5, DataLabelMappingName = "Opera: 1.5%"}, - new DonutData { Browser = "Others", Users = 1.5, DataLabelMappingName = "Others: 1.5%"} - }; public class DonutData { public string Browser { get; set; } public double Users { get; set; } public string DataLabelMappingName { get; set; } } + + public List DonutChartPoints { get; set; } = new List + { + new DonutData { Browser = "Chrome", Users = 63.5, DataLabelMappingName = "Chrome: 63.5%" }, + new DonutData { Browser = "Safari", Users = 25.0, DataLabelMappingName = "Safari: 25.0%" }, + new DonutData { Browser = "Samsung Internet", Users = 6.0, DataLabelMappingName = "Samsung Internet: 6.0%" }, + new DonutData { Browser = "UC Browser", Users = 2.5, DataLabelMappingName = "UC Browser: 2.5%" }, + new DonutData { Browser = "Opera", Users = 1.5, DataLabelMappingName = "Opera: 1.5%" }, + new DonutData { Browser = "Others", Users = 1.5, DataLabelMappingName = "Others: 1.5%" } + }; } + ``` +  {% previewsample "https://blazorplayground.syncfusion.com/embed/hNBINdVRqvFzEVfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Customization -The appearance of the center label can be customized by using the [AccumulationChartCenterLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabelFont.html), which allows you to modify font properties such as size, font-family, font-style, font-weight, and color to enhance the visual presentation of the text displayed in the center of the chart. +Customize the center label's appearance using [AccumulationChartCenterLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabelFont.html), which allows modification of font size, family, style, weight and color for enhanced visual presentation. -The position of the center label can be adjusted using the [XOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html#Syncfusion_Blazor_Charts_AccumulationChartCenterLabel_XOffset) and [YOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html#Syncfusion_Blazor_Charts_AccumulationChartCenterLabel_YOffset) properties in the `AccumulationChartCenterLabel`. +Adjust the center label's position using the [XOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html#Syncfusion_Blazor_Charts_AccumulationChartCenterLabel_XOffset) and [YOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html#Syncfusion_Blazor_Charts_AccumulationChartCenterLabel_YOffset) properties in `AccumulationChartCenterLabel`. ```cshtml + @using Syncfusion.Blazor.Charts @@ -108,23 +117,26 @@ The position of the center label can be adjusted using the [XOffset](https://hel @code { - public ListDonutChartPoints { get; set; } = new List - { - new DonutData { Browser = "Chrome", Users = 63.5, DataLabelMappingName = "Chrome: 63.5%"}, - new DonutData { Browser = "Safari", Users = 25.0, DataLabelMappingName = "Safari: 25.0%"}, - new DonutData { Browser = "Samsung Internet", Users = 6.0, DataLabelMappingName = "Samsung Internet: 6.0%"}, - new DonutData { Browser = "UC Browser", Users = 2.5, DataLabelMappingName = "UC Browser: 2.5%"}, - new DonutData { Browser = "Opera", Users = 1.5, DataLabelMappingName = "Opera: 1.5%"}, - new DonutData { Browser = "Others", Users = 1.5, DataLabelMappingName = "Others: 1.5%"} - }; public class DonutData { public string Browser { get; set; } public double Users { get; set; } public string DataLabelMappingName { get; set; } } + + public List DonutChartPoints { get; set; } = new List + { + new DonutData { Browser = "Chrome", Users = 63.5, DataLabelMappingName = "Chrome: 63.5%" }, + new DonutData { Browser = "Safari", Users = 25.0, DataLabelMappingName = "Safari: 25.0%" }, + new DonutData { Browser = "Samsung Internet", Users = 6.0, DataLabelMappingName = "Samsung Internet: 6.0%" }, + new DonutData { Browser = "UC Browser", Users = 2.5, DataLabelMappingName = "UC Browser: 2.5%" }, + new DonutData { Browser = "Opera", Users = 1.5, DataLabelMappingName = "Opera: 1.5%" }, + new DonutData { Browser = "Others", Users = 1.5, DataLabelMappingName = "Others: 1.5%" } + }; } + ``` +  {% previewsample "https://blazorplayground.syncfusion.com/embed/VZryXRrRqbOzXVbD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} @@ -132,6 +144,6 @@ N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also -* [Data Label](./data-label) +* [Data label](./data-label) * [Title and Subtitle](./title-and-sub-title) * [Annotation](./annotation) diff --git a/blazor/accumulation-chart/chart-print.md b/blazor/accumulation-chart/chart-print.md index 51a4fc0884..fef88a310d 100644 --- a/blazor/accumulation-chart/chart-print.md +++ b/blazor/accumulation-chart/chart-print.md @@ -1,7 +1,7 @@ --- layout: post title: Print and Export in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Print and Export in Syncfusion Blazor Accumulation Chart component and more. +description: Check out and learn how to utilize Print and Export feature in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -11,9 +11,9 @@ documentation: ug ## Print -The `PrintAsync` method can be used to print a rendered chart directly from the browser. +Use the `PrintAsync` method to print a rendered chart directly from the browser. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @using Syncfusion.Blazor.Buttons @@ -31,7 +31,7 @@ The `PrintAsync` method can be used to print a rendered chart directly from the -@code{ +@code { SfAccumulationChart ChartObj; private async Task Click() @@ -52,24 +52,23 @@ The `PrintAsync` method can be used to print a rendered chart directly from the new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } ```  -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVAihWziQWkSrxQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Export -Using the `ExportAsync` method, the rendered chart can be exported to [JPEG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html#Syncfusion_Blazor_Charts_ExportType_JPEG), [PNG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html#Syncfusion_Blazor_Charts_ExportType_PNG), [SVG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html#Syncfusion_Blazor_Charts_ExportType_SVG), [PDF](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html#Syncfusion_Blazor_Charts_ExportType_PDF), [XLSX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html#Syncfusion_Blazor_Charts_ExportType_XLSX) or [CSV](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html#Syncfusion_Blazor_Charts_ExportType_CSV) format. The [ExportType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html) specifies the file format and `FileName` specifies the name of the exported file. Both of these parameters are required input parameters for this method. +Export the rendered chart using the `ExportAsync` method to [JPEG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html#Syncfusion_Blazor_Charts_ExportType_JPEG), [PNG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html#Syncfusion_Blazor_Charts_ExportType_PNG), [SVG](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html#Syncfusion_Blazor_Charts_ExportType_SVG), [PDF](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html#Syncfusion_Blazor_Charts_ExportType_PDF), [XLSX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html#Syncfusion_Blazor_Charts_ExportType_XLSX), or [CSV](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html#Syncfusion_Blazor_Charts_ExportType_CSV) formats. The [ExportType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html) specifies the file format, and `FileName` sets the exported file name. Both are required parameters. -The optional parameters for this method are, -* `Orientation` - Specifies the portrait or landscape orientation in the PDF document. -* `AllowDownload`: Set this parameter to **true** to enable the browser's download prompt to download the chart in the specified format, and **false** to get the chart as a `DataUrl` string. +Optional parameters: +* `Orientation`: Sets portrait or landscape orientation for PDF export. +* `AllowDownload`: Set to **true** to prompt browser download, or **false** to get a `DataUrl` string. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @using Syncfusion.Blazor.Buttons @@ -91,7 +90,7 @@ The optional parameters for this method are, -@code{ +@code { SfAccumulationChart ChartObj; private async Task Click() @@ -112,7 +111,7 @@ The optional parameters for this method are, new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -120,22 +119,23 @@ The optional parameters for this method are, {% previewsample "https://blazorplayground.syncfusion.com/embed/BZBAshMJWGLIalWX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Customizing the exported chart using Exporting event +## Customizing the Exported Chart Using Exporting Event -The [Exporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_Exporting) event allows users to customize the exported accumulation chart before it is generated. The [ChartExportEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartExportEventArgs.html) class provides the following options for customizing the exported accumulation chart: +The [Exporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_Exporting) event allows customization of the exported chart before generation. The [ChartExportEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartExportEventArgs.html) class provides options: -* `Cancel`: This property cancels the export process when set to **true**. -* `Height`: This property specifies the height of the exported chart. When the value is changed, the chart's height is updated. It is not applicable for **XLSX** and **CSV** formats. -* `Width`: This property specifies the width of the exported chart. Changing the value updates the chart's width. It is not applicable for **XLSX** and **CSV** formats. -* `Workbook`: Represents the workbook generated during export, applicable only for **XLSX** and **CSV** formats. +* `Cancel`: Cancels the export process when set to **true**. +* `Height`: Sets the exported chart height (not applicable for **XLSX** and **CSV**). +* `Width`: Sets the exported chart width (not applicable for **XLSX** and **CSV**). +* `Workbook`: Represents the workbook for **XLSX** and **CSV** formats. -### Customizing the exported Excel documents +### Customizing Exported Excel Documents -The [Workbook](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartExportEventArgs.html#Syncfusion_Blazor_Charts_ChartExportEventArgs_Workbook) property in the event argument of [Exporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_Exporting) event allows the users to customize the exported Excel sheet by modifying the properties of rows, columns, and cells, such as changing the font color, font size, font name, making the text bold, setting a background color, and center-aligning the text within the cells, before the file is generated. +Use the [Workbook](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartExportEventArgs.html#Syncfusion_Blazor_Charts_ChartExportEventArgs_Workbook) property in the [Exporting](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_Exporting) event to customize the Excel sheet before file generation. Modify row, column, and cell properties, such as font color, size, name, boldness, background color, and alignment. -In the code example below, the accumulation chart is exported to Excel format. The exported Excel document is customized using the `Exporting` event. If the [ExportType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html) parameter in the [ExportAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_ExportAsync_Syncfusion_Blazor_Charts_ExportType_System_String_System_Nullable_Syncfusion_PdfExport_PdfPageOrientation__System_Boolean_) method is set to something other than **XLSX** or **CSV**, the `Workbook` property will be **null**, and the chart's width will be set to **500px**. +If [ExportType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportType.html) is not **XLSX** or **CSV**, the `Workbook` property is **null**, and the chart width is set to **500px**. ```cshtml + @using Syncfusion.Blazor.Charts @using Microsoft.AspNetCore.Components.Web; @using Syncfusion.PdfExport; @@ -163,39 +163,51 @@ In the code example below, the accumulation chart is exported to Excel format. T @code { + private SfAccumulationChart accumulationChart; + public int ExplodeIndex { get; set; } = 1; public string ExplodeRadius = "10%"; public string Radius { get; set; } = "60%"; public string ConnectorLength { get; set; } = "20px"; public int StartAngle = 30; public string Size { get; set; } = "12px"; - public List PieChartPoints { get; set; } = new List - { - new PieData { Browser = "Chrome", Users = 59.28, DataLabelMappingName = "Chrome: 59.28%"}, - new PieData { Browser = "UC Browser", Users = 4.37, DataLabelMappingName = "UC Browser: 4.37%"}, - new PieData { Browser = "Internet Explorer", Users = 6.12, DataLabelMappingName = "Internet Explorer: 6.12%"}, - new PieData { Browser = "Sogou Explorer", Users = 1.37, DataLabelMappingName = "Sogou Explorer: 1.37%"}, - new PieData { Browser = "QQ", Users = 3.96, DataLabelMappingName = "QQ: 3.96%"}, - new PieData { Browser = "Safari", Users = 4.73, DataLabelMappingName = "Safari: 4.73%"}, - new PieData { Browser = "Opera", Users = 3.12, DataLabelMappingName = "Opera: 3.12%"}, - new PieData { Browser = "Edge", Users = 7.48, DataLabelMappingName = "Edge: 7.48%"}, - new PieData { Browser = "Others", Users = 9.57, DataLabelMappingName = "Others: 9.57%"}, - }; - - public class PieData + public class Statistics { public string Browser { get; set; } public double Users { get; set; } - public string DataLabelMappingName { get; set; } } - private SfAccumulationChart accumulationChart; - public class Statistics + + public class PieData { public string Browser { get; set; } public double Users { get; set; } + public string DataLabelMappingName { get; set; } } + public List StatisticsDetails = new List + { + new Statistics { Browser = "Chrome", Users = 37 }, + new Statistics { Browser = "UC Browser", Users = 17 }, + new Statistics { Browser = "iPhone", Users = 19 }, + new Statistics { Browser = "Others", Users = 4 }, + new Statistics { Browser = "Opera", Users = 11 }, + new Statistics { Browser = "Android", Users = 12 } + }; + + public List PieChartPoints { get; set; } = new List + { + new PieData { Browser = "Chrome", Users = 59.28, DataLabelMappingName = "Chrome: 59.28%" }, + new PieData { Browser = "UC Browser", Users = 4.37, DataLabelMappingName = "UC Browser: 4.37%" }, + new PieData { Browser = "Internet Explorer", Users = 6.12, DataLabelMappingName = "Internet Explorer: 6.12%" }, + new PieData { Browser = "Sogou Explorer", Users = 1.37, DataLabelMappingName = "Sogou Explorer: 1.37%" }, + new PieData { Browser = "QQ", Users = 3.96, DataLabelMappingName = "QQ: 3.96%" }, + new PieData { Browser = "Safari", Users = 4.73, DataLabelMappingName = "Safari: 4.73%" }, + new PieData { Browser = "Opera", Users = 3.12, DataLabelMappingName = "Opera: 3.12%" }, + new PieData { Browser = "Edge", Users = 7.48, DataLabelMappingName = "Edge: 7.48%" }, + new PieData { Browser = "Others", Users = 9.57, DataLabelMappingName = "Others: 9.57%" } + }; + public async Task ExportChart(Microsoft.AspNetCore.Components.Web.MouseEventArgs args) { await accumulationChart.ExportAsync(Syncfusion.Blazor.Charts.ExportType.XLSX, "Statistics"); @@ -224,25 +236,15 @@ In the code example below, the accumulation chart is exported to Excel format. T args.Width = 500; } } - - public List StatisticsDetails = new List - { - new Statistics { Browser = "Chrome", Users = 37 }, - new Statistics { Browser = "UC Browser", Users = 17 }, - new Statistics { Browser = "iPhone", Users = 19 }, - new Statistics { Browser = "Others", Users = 4 }, - new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, - }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htryXJtGrZTUKjJB?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htryXJtGrZTUKjJB?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 various chart types and how to represent time-dependent data, showing trends at equal intervals. ## See also -* [Data Label](./data-labels) +* [Data label](./data-labels) * [Tooltip](./tool-tip) -* [Legend](./legend) \ No newline at end of file +* [Legend](./legend) diff --git a/blazor/accumulation-chart/chart-types/funnel.md b/blazor/accumulation-chart/chart-types/funnel.md index cdb5b2934b..c110129c26 100644 --- a/blazor/accumulation-chart/chart-types/funnel.md +++ b/blazor/accumulation-chart/chart-types/funnel.md @@ -1,7 +1,7 @@ --- layout: post title: Funnel in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Funnel in Syncfusion Blazor Accumulation Chart component and more. +description: Check out and learn how to configure and customize Funnel Chart in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Funnel in Blazor Accumulation Chart Component -[Funnel Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/funnel-chart) is often used to represent stages in a sales process and to show the amount of potential revenue for each stage. To render the [Funnel Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/funnel-chart), set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Type) as [Funnel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationType.html#Syncfusion_Blazor_Charts_AccumulationType_Funnel). +[Funnel Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/funnel-chart) is used to represent stages in a sales process and show the amount of potential revenue for each stage. To render the Funnel Chart, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Type) as Funnel. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -25,7 +25,7 @@ documentation: ug -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -39,7 +39,7 @@ documentation: ug new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -50,9 +50,9 @@ documentation: ug ## Funnel Size -The size of the funnel chart can be customized by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Height) properties. +Customize the funnel chart size using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Height) properties. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -66,7 +66,7 @@ The size of the funnel chart can be customized by using the [Width](https://help -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -80,7 +80,7 @@ The size of the funnel chart can be customized by using the [Width](https://help new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -93,9 +93,9 @@ N> The [Blazor Funnel Chart](https://blazor.syncfusion.com/demos/chart/funnel) e ## Funnel neck size -The neck size of the funnel chart can be customized by using the [NeckWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_NeckWidth) and [NeckHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_NeckHeight) properties. +Customize the neck size using the [NeckWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_NeckWidth) and [NeckHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_NeckHeight) properties. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -109,7 +109,7 @@ The neck size of the funnel chart can be customized by using the [NeckWidth](htt -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -123,7 +123,7 @@ The neck size of the funnel chart can be customized by using the [NeckWidth](htt new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -134,9 +134,9 @@ The neck size of the funnel chart can be customized by using the [NeckWidth](htt ## Gap between funnel segments -[Funnel chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationType.html#Syncfusion_Blazor_Charts_AccumulationType_Funnel) provides options to customize the space between the segments by using the [GapRatio](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GapRatio) property of the series. It accepts the values ranging from 0 to 1. +Customize the space between segments using the [GapRatio](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GapRatio) property. It accepts the values ranging from 0 to 1. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -150,7 +150,7 @@ The neck size of the funnel chart can be customized by using the [NeckWidth](htt -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -164,7 +164,7 @@ The neck size of the funnel chart can be customized by using the [NeckWidth](htt new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -175,9 +175,9 @@ The neck size of the funnel chart can be customized by using the [NeckWidth](htt ## Funnel explode -Points can be exploded on mouse click by setting the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Explode) property to **true**. The point on load can be exploded using [ExplodeIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_ExplodeIndex). Explode distance can be set by using [ExplodeOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_ExplodeOffset) property. +Explode points on mouse click by setting the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Explode) property to **true**. Use [ExplodeIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_ExplodeIndex) and [ExplodeOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_ExplodeOffset) for further customization. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -191,7 +191,7 @@ Points can be exploded on mouse click by setting the [Explode](https://help.sync -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -205,7 +205,7 @@ Points can be exploded on mouse click by setting the [Explode](https://help.sync new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -216,9 +216,9 @@ Points can be exploded on mouse click by setting the [Explode](https://help.sync ## Smart Data Label -Labels will be arranged automatically on the left side of the funnel and pyramid chart when they overlap with each other. +Labels are automatically arranged on the left side of the funnel and pyramid chart when they overlap. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -235,7 +235,7 @@ Labels will be arranged automatically on the left side of the funnel and pyramid -@code{ +@code { public class Statistics { public string Country { get; set; } @@ -259,7 +259,7 @@ Labels will be arranged automatically on the left side of the funnel and pyramid new Statistics { Country = "Philippines", Users = 104918090 }, new Statistics { Country = "Egypt", Users = 97553151 }, new Statistics { Country = "Vietnam", Users = 95540800 }, - new Statistics { Country = "Germany", Users = 82114224 }, + new Statistics { Country = "Germany", Users = 82114224 } }; } ``` @@ -269,9 +269,10 @@ Labels will be arranged automatically on the left side of the funnel and pyramid ## Border radius -The corners of the first data point and last data point in the funnel chart series can be rounded using the [BorderRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_BorderRadius) property within the [AccumulationChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html). +Round the corners of the first and last data points using the [BorderRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_BorderRadius) property. ```cshtml + @using Syncfusion.Blazor.Charts @@ -287,24 +288,26 @@ The corners of the first data point and last data point in the funnel chart seri @code { - public ListFunnelChartPoints { get; set; } = new List - { - new FunnelData { InterviewProcess = "Hired", Candidates = 55, DataLabelMappingName="Hired: 55"}, - new FunnelData { InterviewProcess = "Personal Interview", Candidates = 58, DataLabelMappingName="Personal Interview: 58"}, - new FunnelData { InterviewProcess = "Telephonic Interview", Candidates = 85, DataLabelMappingName="Telephonic Interview: 85"}, - new FunnelData { InterviewProcess = "Screening", Candidates = 105, DataLabelMappingName="Screening: 105"}, - new FunnelData { InterviewProcess = "Initial Validation", Candidates = 145, DataLabelMappingName="Initial Validation: 145"}, - new FunnelData { InterviewProcess = "Candidates Applied", Candidates = 250, DataLabelMappingName="Candidates Applied: 250"}, - }; - public class FunnelData { public string InterviewProcess { get; set; } public double Candidates { get; set; } public string DataLabelMappingName { get; set; } } + + public List FunnelChartPoints { get; set; } = new List + { + new FunnelData { InterviewProcess = "Hired", Candidates = 55, DataLabelMappingName = "Hired: 55" }, + new FunnelData { InterviewProcess = "Personal Interview", Candidates = 58, DataLabelMappingName = "Personal Interview: 58" }, + new FunnelData { InterviewProcess = "Telephonic Interview", Candidates = 85, DataLabelMappingName = "Telephonic Interview: 85" }, + new FunnelData { InterviewProcess = "Screening", Candidates = 105, DataLabelMappingName = "Screening: 105" }, + new FunnelData { InterviewProcess = "Initial Validation", Candidates = 145, DataLabelMappingName = "Initial Validation: 145" }, + new FunnelData { InterviewProcess = "Candidates Applied", Candidates = 250, DataLabelMappingName = "Candidates Applied: 250" } + }; } + ``` +  {% previewsample "https://blazorplayground.syncfusion.com/embed/LjheDHBnqcxEcNgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/accumulation-chart/chart-types/pie-doughnut.md b/blazor/accumulation-chart/chart-types/pie-doughnut.md index 403b034c9c..28c6f29651 100644 --- a/blazor/accumulation-chart/chart-types/pie-doughnut.md +++ b/blazor/accumulation-chart/chart-types/pie-doughnut.md @@ -1,7 +1,7 @@ --- layout: post title: Pie and Doughnut in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Pie and Doughnut in Syncfusion Blazor Accumulation Chart component and more. +description: Learn how to configure and customize Pie and Doughnut Charts in Syncfusion Blazor Accumulation Chart. platform: Blazor control: Accumulation Chart documentation: ug @@ -11,9 +11,9 @@ documentation: ug ## Pie Chart -The [Pie Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) is used to represent numeric proportional data in divided slices. To render a [Pie Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationType.html#Syncfusion_Blazor_Charts_AccumulationType_Pie), set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Type) as [Pie](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationType.html#Syncfusion_Blazor_Charts_AccumulationType_Pie). +The [Pie Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pie-chart) visualizes numeric proportional data in divided slices. To render a [Pie Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationType.html#Syncfusion_Blazor_Charts_AccumulationType_Pie), set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Type) as Pie. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -27,7 +27,7 @@ The [Pie Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -41,21 +41,20 @@ The [Pie Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } ```  - {% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsrWqJDwACRFV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Radius customization -The radius of the pie series will be set to 80% of its size (minimum of chart width and height) by default. The [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Radius) property of the series can be used to customize the radius of the pie chart. +Customize the pie series radius using the [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Radius) property. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -69,7 +68,7 @@ The radius of the pie series will be set to 80% of its size (minimum of chart wi -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -83,21 +82,20 @@ The radius of the pie series will be set to 80% of its size (minimum of chart wi new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } ```  - {% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsriKfjQmubFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Pie center -The center x and center y can be used to change the pie's center position. The pie series' center x and center y are set to 50% by default. The [AccumulationChartCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenter.html) property of the series can be used to customize this. +Change the pie's center position using the [AccumulationChartCenter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenter.html) property. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -109,10 +107,9 @@ The center x and center y can be used to change the pie's center position. The p - -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -126,7 +123,7 @@ The center x and center y can be used to change the pie's center position. The p new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -137,9 +134,9 @@ The center x and center y can be used to change the pie's center position. The p ## Various Radius Pie Chart -The [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Radius) mapping can be used to render the slice with different radius. +Render slices with different radii using the [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Radius) mapping. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -153,7 +150,7 @@ The [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -163,13 +160,13 @@ The [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu public List StatisticsDetails = new List { - new Statistics { Browser = "Argentina", Users = 505370, R = "100"}, - new Statistics { Browser = "Belgium", Users = 551500, R = "118.7"}, - new Statistics { Browser = "Cuba", Users = 312685 , R = "124.6"}, - new Statistics { Browser = "Dominican Republic", Users = 350000 , R = "137.5"}, - new Statistics { Browser = "Egypt", Users = 301000 , R = "150.8"}, - new Statistics { Browser = "Kazakhstan", Users = 300000, R = "155.5"}, - new Statistics { Browser = "Somalia", Users = 357022, R = "160.6"} + new Statistics { Browser = "Argentina", Users = 505370, R = "100" }, + new Statistics { Browser = "Belgium", Users = 551500, R = "118.7" }, + new Statistics { Browser = "Cuba", Users = 312685 , R = "124.6" }, + new Statistics { Browser = "Dominican Republic", Users = 350000 , R = "137.5" }, + new Statistics { Browser = "Egypt", Users = 301000 , R = "150.8" }, + new Statistics { Browser = "Kazakhstan", Users = 300000, R = "155.5" }, + new Statistics { Browser = "Somalia", Users = 357022, R = "160.6" } }; } @@ -180,9 +177,9 @@ The [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu ## Doughnut chart -The doughnut chart can be created by setting the [InnerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_InnerRadius) property of the [Pie Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationType.html#Syncfusion_Blazor_Charts_AccumulationType_Pie) to a value ranging from 0% to 100%. +Create a doughnut chart by setting the [InnerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_InnerRadius) property. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -196,7 +193,7 @@ The doughnut chart can be created by setting the [InnerRadius](https://help.sync -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -210,7 +207,7 @@ The doughnut chart can be created by setting the [InnerRadius](https://help.sync new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -221,9 +218,9 @@ The doughnut chart can be created by setting the [InnerRadius](https://help.sync ## Start and end angles -The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_StartAngle) and [EndAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_EndAngle) properties can be used to customize the start and end angles of the pie series. StartAngle is set to 0 degrees by default, and EndAngle is set to 360 degrees by default. Semi-pie series can be achieved by customizing these properties. +Customize the start and end angles of the pie series using [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_StartAngle) and [EndAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_EndAngle). -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -238,7 +235,7 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -252,7 +249,7 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -263,9 +260,9 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. ## Color and text mapping -[PointColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_PointColorMapping) in series and [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Name) in datalabel can be used to map the fill color and text from the data source to the chart. +Map fill color and text from the data source using [PointColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_PointColorMapping) and [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Name). -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -279,7 +276,7 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -289,13 +286,13 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } public List StatisticsDetails = new List -{ - new Statistics { Browser = "Chrome", Users = 37, Text= "37%", Fill="#498fff" }, - new Statistics { Browser = "UC Browser", Users = 17, Text= "17%", Fill="#ffa060" }, - new Statistics { Browser = "iPhone", Users = 19, Text= "19%", Fill="#ff68b6" }, - new Statistics { Browser = "Others", Users = 4, Text= "4%", Fill="#81e2a1" }, - new Statistics { Browser = "Opera", Users = 11, Text= "11%", Fill="#ffb980" }, - new Statistics { Browser = "Android", Users = 12, Text= "12%", Fill="#09e1e8" }, + { + new Statistics { Browser = "Chrome", Users = 37, Text = "37%", Fill = "#498fff" }, + new Statistics { Browser = "UC Browser", Users = 17, Text = "17%", Fill = "#ffa060" }, + new Statistics { Browser = "iPhone", Users = 19, Text = "19%", Fill = "#ff68b6" }, + new Statistics { Browser = "Others", Users = 4, Text = "4%", Fill = "#81e2a1" }, + new Statistics { Browser = "Opera", Users = 11, Text = "11%", Fill = "#ffb980" }, + new Statistics { Browser = "Android", Users = 12, Text = "12%", Fill = "#09e1e8" } }; } @@ -306,9 +303,10 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. ## Border radius -The corners of all the slices in the pie/donut chart series can be rounded using the [BorderRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_BorderRadius) property within the [AccumulationChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html). +Round the corners of pie/doughnut chart slices using the [BorderRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_BorderRadius) property. ```cshtml + @using Syncfusion.Blazor.Charts @@ -320,30 +318,33 @@ The corners of all the slices in the pie/donut chart series can be rounded using @code { - public ListDonutChartPoints { get; set; } = new List - { - new DonutData { Food = "Milk", Amount = 10, DataLabelMappingName = "Milk: 10%"}, - new DonutData { Food = "Rice", Amount = 30, DataLabelMappingName = "Rice: 30%"}, - new DonutData { Food = "Cereals", Amount = 20, DataLabelMappingName = "Cereals: 20%"}, - new DonutData { Food = "Water", Amount = 15, DataLabelMappingName = "Water: 15%"}, - new DonutData { Food = "Vegetables", Amount = 25, DataLabelMappingName = "Vegetables: 25%"}, - }; public class DonutData { public string Food { get; set; } public double Amount { get; set; } public string DataLabelMappingName { get; set; } } + + public List DonutChartPoints { get; set; } = new List + { + new DonutData { Food = "Milk", Amount = 10, DataLabelMappingName = "Milk: 10%" }, + new DonutData { Food = "Rice", Amount = 30, DataLabelMappingName = "Rice: 30%" }, + new DonutData { Food = "Cereals", Amount = 20, DataLabelMappingName = "Cereals: 20%" }, + new DonutData { Food = "Water", Amount = 15, DataLabelMappingName = "Water: 15%" }, + new DonutData { Food = "Vegetables", Amount = 25, DataLabelMappingName = "Vegetables: 25%" } + }; } + ``` +  {% previewsample "https://blazorplayground.syncfusion.com/embed/BjreZdhRKPiaFxIm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Hide pie or doughnut border -When the mouse hovers over the pie/doughnut chart, the border appears by default. The border can be turned off by setting the [EnableBorderOnMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_EnableBorderOnMouseMove) property to **false**. +Disable the border on mouse hover by setting [EnableBorderOnMouseMove](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_EnableBorderOnMouseMove) to **false**. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -356,7 +357,7 @@ When the mouse hovers over the pie/doughnut chart, the border appears by default -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -370,7 +371,7 @@ When the mouse hovers over the pie/doughnut chart, the border appears by default new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -384,4 +385,4 @@ N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also * [Data label](../data-label) -* [Grouping](../grouping) \ No newline at end of file +* [Grouping](../grouping) diff --git a/blazor/accumulation-chart/chart-types/pyramid.md b/blazor/accumulation-chart/chart-types/pyramid.md index 57f85bdded..d06b59ea3a 100644 --- a/blazor/accumulation-chart/chart-types/pyramid.md +++ b/blazor/accumulation-chart/chart-types/pyramid.md @@ -1,7 +1,7 @@ --- layout: post title: Pyramid in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Pyramid in Syncfusion Blazor Accumulation Chart component and more. +description: Check out and learn how to configure and customize Pyramid Chart in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Pyramid in Blazor Accumulation Chart Component -The [Pyramid Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pyramid-chart) is used to visualize the hierarchical data in upside triangle shape with horizontally divided section. To render the `Pyramid Chart`, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Type) as `Pyramid`. +The [Pyramid Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pyramid-chart) visualizes hierarchical data in an upside triangle shape with horizontally divided sections. To render a Pyramid Chart, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Type) as `Pyramid`. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -25,7 +25,7 @@ The [Pyramid Chart](https://www.syncfusion.com/blazor-components/blazor-charts/c -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -39,21 +39,20 @@ The [Pyramid Chart](https://www.syncfusion.com/blazor-components/blazor-charts/c new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } ``` -  {% previewsample "https://blazorplayground.syncfusion.com/embed/rtBKiBiKfsBiJKAT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Pyramid mode -The Pyramid Chart can be rendered in both `Linear` or `Surface` modes by setting [PyramidMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_PyramidMode) property. The default mode is `Linear`. +Render the Pyramid Chart in `Linear` or `Surface` modes using the [PyramidMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_PyramidMode) property. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -67,7 +66,7 @@ The Pyramid Chart can be rendered in both `Linear` or `Surface` modes by setting -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -81,7 +80,7 @@ The Pyramid Chart can be rendered in both `Linear` or `Surface` modes by setting new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -92,9 +91,9 @@ The Pyramid Chart can be rendered in both `Linear` or `Surface` modes by setting ## Pyramid size -The size of the pyramid chart can be customized by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Height) properties. +Customize the pyramid chart size using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Height) properties. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -108,7 +107,7 @@ The size of the pyramid chart can be customized by using the [Width](https://hel -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -122,7 +121,7 @@ The size of the pyramid chart can be customized by using the [Width](https://hel new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -133,9 +132,9 @@ The size of the pyramid chart can be customized by using the [Width](https://hel ## Gap between pyramid segments -The [Pyramid Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationType.html#Syncfusion_Blazor_Charts_AccumulationType_Pyramid) provides options to customize the space between the segments by using the [GapRatio](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GapRatio) property of the series. It accepts values ranging from 0 to 1. +Customize the space between segments using the [GapRatio](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GapRatio) property. It accepts values ranging from 0 to 1. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -149,7 +148,7 @@ The [Pyramid Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -163,7 +162,7 @@ The [Pyramid Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -174,9 +173,9 @@ The [Pyramid Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char ## Pyramid explode -By setting the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Explode) property to **true**, points can be exploded on mouse click. Using the [ExplodeIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_ExplodeIndex) property, expand the point on load. The [ExplodeOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_ExplodeOffset) property can be used to set the distance between explosions. +Explode points on mouse click by setting the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Explode) property to **true**. Use [ExplodeIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_ExplodeIndex) and [ExplodeOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_ExplodeOffset) for further customization. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -190,7 +189,7 @@ By setting the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -204,7 +203,7 @@ By setting the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -218,6 +217,7 @@ By setting the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor The corners of the first data point and last data point in the pyramid chart series can be rounded using the [BorderRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_BorderRadius) property within the [AccumulationChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html). ```cshtml + @using Syncfusion.Blazor.Charts @@ -232,6 +232,13 @@ The corners of the first data point and last data point in the pyramid chart ser @code { + public class PyramidData + { + public string Foods { get; set; } + public double Percentage { get; set; } + public string DataLabelMappingName { get; set; } + } + public ListPyramidChartPoints { get; set; } = new List { new PyramidData { Foods = "Oils", Percentage = 2, DataLabelMappingName = "Oils: 2%" }, @@ -241,20 +248,16 @@ The corners of the first data point and last data point in the pyramid chart ser new PyramidData { Foods = "Vegetables", Percentage = 23, DataLabelMappingName = "Vegetables: 23%" }, new PyramidData { Foods = "Grains", Percentage = 27, DataLabelMappingName = "Grains: 27%"} }; - public class PyramidData - { - public string Foods { get; set; } - public double Percentage { get; set; } - public string DataLabelMappingName { get; set; } - } } + ``` +  {% previewsample "https://blazorplayground.syncfusion.com/embed/LthyDHBRqlAFfKbF?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 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. +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/pyramid?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. ## See also * [Data label](../data-label) -* [Grouping](../grouping) \ No newline at end of file +* [Grouping](../grouping) diff --git a/blazor/accumulation-chart/data-label.md b/blazor/accumulation-chart/data-label.md index 72ae3b8282..30e8138949 100644 --- a/blazor/accumulation-chart/data-label.md +++ b/blazor/accumulation-chart/data-label.md @@ -1,7 +1,7 @@ --- layout: post title: Data Label in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Data Label in Syncfusion Blazor Accumulation Chart component and more. +description: Check out and learn how to configure and customize Data Labels in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Data Label in Blazor Accumulation Chart Component -The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Visible) property in the [AccumulationDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html) can be used to add a data label to a series point. +The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Visible) property in [AccumulationDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html) adds a data label to a series point. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -25,22 +25,21 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Acc -@code{ +@code { public class Statistics { public string Browser { get; set;} public double Users { get; set; } public string Text { get; set; } public string Fill { get; set; } - } public List StatisticsDetails = new List { - new Statistics { Browser = "Chrome", Users = 37, Text= "37%", Fill="#498fff"}, - new Statistics { Browser = "UC Browser", Users = 17, Text= "17%", Fill="#ffa060"}, - new Statistics { Browser = "iPhone", Users = 19, Text= "19%", Fill="#ff68b6"}, - new Statistics { Browser = "Others", Users = 4 , Text= "4%", Fill="#81e2a1"}, + new Statistics { Browser = "Chrome", Users = 37, Text = "37%", Fill = "#498fff" }, + new Statistics { Browser = "UC Browser", Users = 17, Text = "17%", Fill = "#ffa060" }, + new Statistics { Browser = "iPhone", Users = 19, Text = "19%", Fill = "#ff68b6" }, + new Statistics { Browser = "Others", Users = 4 , Text = "4%", Fill = "#81e2a1" } }; } @@ -51,46 +50,48 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Acc ## Text Wrap -When the data label text exceeds the container, the text can be wrapped by using [TextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_TextWrap) Property. End user can also wrap the data label text based on the [MaxWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_MaxWidth) property. +Wrap data label text using [TextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_TextWrap) and [MaxWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_MaxWidth). + +```cshtml -```cshtml @using Syncfusion.Blazor.Charts - - + +@code { public class PieData { public string Browser { get; set; } public double Users { get; set; } public string DataLabelMappingName { get; set; } } + + public List+ + - -@code{ - public List- - -- -- -PieChartPoints { get; set; } = new List - { - new PieData { Browser = "Opera Mini", Users = 80, DataLabelMappingName = "Opera Mini (80M) 32%" }, - new PieData { Browser = "UC Browser", Users = 80, DataLabelMappingName = "UC Browser (80M) 32%" }, - new PieData { Browser = "Internet Explorer", Users = 90, DataLabelMappingName = "Chromium (90M) 36%" }, - }; - + + ++ ++ +PieChartPoints { get; set; } = new List + { + new PieData { Browser = "Opera Mini", Users = 80, DataLabelMappingName = "Opera Mini (80M) 32%" }, + new PieData { Browser = "UC Browser", Users = 80, DataLabelMappingName = "UC Browser (80M) 32%" }, + new PieData { Browser = "Internet Explorer", Users = 90, DataLabelMappingName = "Chromium (90M) 36%" } + }; } + ```  {% previewsample "https://blazorplayground.syncfusion.com/embed/hjVUCVCgTfRsrPGK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Position -The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Position) property in the [AccumulationDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html) allows the data label to be placed either [Inside](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationLabelPosition.html#Syncfusion_Blazor_Charts_AccumulationLabelPosition_Inside) or [Outside](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationLabelPosition.html#Syncfusion_Blazor_Charts_AccumulationLabelPosition_Outside) of the chart. +Set the data label position using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Position) property. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -104,22 +105,21 @@ The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ac -@code{ +@code { public class Statistics { public string Browser { get; set; } public double Users { get; set; } public string Text { get; set; } public string Fill { get; set; } - } public List StatisticsDetails = new List { - new Statistics { Browser = "Chrome", Users = 37, Text= "37%", Fill="#498fff"}, - new Statistics { Browser = "UC Browser", Users = 17, Text= "17%", Fill="#ffa060"}, - new Statistics { Browser = "iPhone", Users = 19, Text= "19%", Fill="#ff68b6"}, - new Statistics { Browser = "Others", Users = 4 , Text= "4%", Fill="#81e2a1"}, + new Statistics { Browser = "Chrome", Users = 37, Text = "37%", Fill = "#498fff" }, + new Statistics { Browser = "UC Browser", Users = 17, Text = "17%", Fill = "#ffa060" }, + new Statistics { Browser = "iPhone", Users = 19, Text = "19%", Fill = "#ff68b6" }, + new Statistics { Browser = "Others", Users = 4 , Text = "4%", Fill = "#81e2a1" } }; } @@ -130,9 +130,9 @@ The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ac ## Smart Labels -Data labels will be arranged smartly without overlapping with each other. The [EnableSmartLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_EnableSmartLabels) property can be used to enable or disable this feature. +Arrange data labels smartly without overlap using [EnableSmartLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_EnableSmartLabels). -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -148,7 +148,7 @@ Data labels will be arranged smartly without overlapping with each other. The [E -@code{ +@code { public class Statistics { public string Country { get; set; } @@ -172,7 +172,7 @@ Data labels will be arranged smartly without overlapping with each other. The [E new Statistics { Country = "Philippines", Users = 104918090 }, new Statistics { Country = "Egypt", Users = 97553151 }, new Statistics { Country = "Vietnam", Users = 95540800 }, - new Statistics { Country = "Germany", Users = 82114224 }, + new Statistics { Country = "Germany", Users = 82114224 } }; } @@ -183,9 +183,9 @@ Data labels will be arranged smartly without overlapping with each other. The [E ## Connector line -When the data label is placed [Outside](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationLabelPosition.html#Syncfusion_Blazor_Charts_AccumulationLabelPosition_Outside) the chart, the connector line will be visible. The [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartConnector.html#Syncfusion_Blazor_Charts_AccumulationChartConnector_Type), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartConnector.html#Syncfusion_Blazor_Charts_AccumulationChartConnector_Color), [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartConnector.html#Syncfusion_Blazor_Charts_AccumulationChartConnector_Width), [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartConnector.html#Syncfusion_Blazor_Charts_AccumulationChartConnector_Length) and [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartConnector.html#Syncfusion_Blazor_Charts_AccumulationChartConnector_DashArray) properties can be used to customize the connector line. +Customize connector lines for outside labels using [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartConnector.html#Syncfusion_Blazor_Charts_AccumulationChartConnector_Type), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartConnector.html#Syncfusion_Blazor_Charts_AccumulationChartConnector_Color), [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartConnector.html#Syncfusion_Blazor_Charts_AccumulationChartConnector_Width), [Length](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartConnector.html#Syncfusion_Blazor_Charts_AccumulationChartConnector_Length), and [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartConnector.html#Syncfusion_Blazor_Charts_AccumulationChartConnector_DashArray). -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -201,22 +201,21 @@ When the data label is placed [Outside](https://help.syncfusion.com/cr/blazor/Sy -@code{ +@code { public class Statistics { public string Browser { get; set; } public double Users { get; set; } public string Text { get; set; } public string Fill { get; set; } - } public List StatisticsDetails = new List { - new Statistics { Browser = "Chrome", Users = 37, Text= "37%", Fill="#498fff"}, - new Statistics { Browser = "UC Browser", Users = 17, Text= "17%", Fill="#ffa060"}, - new Statistics { Browser = "iPhone", Users = 19, Text= "19%", Fill="#ff68b6"}, - new Statistics { Browser = "Others", Users = 4 , Text= "4%", Fill="#81e2a1"}, + new Statistics { Browser = "Chrome", Users = 37, Text = "37%", Fill = "#498fff" }, + new Statistics { Browser = "UC Browser", Users = 17, Text = "17%", Fill = "#ffa060" }, + new Statistics { Browser = "iPhone", Users = 19, Text = "19%", Fill = "#ff68b6" }, + new Statistics { Browser = "Others", Users = 4 , Text = "4%", Fill = "#81e2a1" } }; } @@ -227,9 +226,9 @@ When the data label is placed [Outside](https://help.syncfusion.com/cr/blazor/Sy ## Text mapping -The [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Name) property can be used to map text from a data source to a data label. +Map text from the data source using the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Name) property. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -244,7 +243,7 @@ The [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -255,10 +254,10 @@ The [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu public List StatisticsDetails = new List { - new Statistics { Browser = "Chrome", Users = 37, Text= "37%", Fill="#498fff"}, - new Statistics { Browser = "UC Browser", Users = 17, Text= "17%", Fill="#ffa060"}, - new Statistics { Browser = "iPhone", Users = 19, Text= "19%", Fill="#ff68b6"}, - new Statistics { Browser = "Others", Users = 4 , Text= "4%", Fill="#81e2a1"}, + new Statistics { Browser = "Chrome", Users = 37, Text = "37%", Fill = "#498fff" }, + new Statistics { Browser = "UC Browser", Users = 17, Text = "17%", Fill = "#ffa060" }, + new Statistics { Browser = "iPhone", Users = 19, Text = "19%", Fill = "#ff68b6" }, + new Statistics { Browser = "Others", Users = 4 , Text = "4%", Fill = "#81e2a1" } }; } @@ -267,11 +266,9 @@ 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" %} -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. - ## Format -Data label for the accumulation chart can be formatted using [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Format) property. You can use the global formatting options, such as 'N1', 'P1', and 'C1'. +Format data labels using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Format) property. The global formatting options include 'N1', 'P1', and 'C1'. ```cshtml @@ -289,7 +286,7 @@ Data label for the accumulation chart can be formatted using [Format](https://he -@code{ +@code { public class ChartData { public string XValue { get; set; } @@ -302,7 +299,7 @@ Data label for the accumulation chart can be formatted using [Format](https://he new ChartData { XValue = "Redmi", YValue = 19 }, new ChartData { XValue = "Realme", YValue = 17 }, new ChartData { XValue = "Oneplus", YValue = 12 }, - new ChartData { XValue = "Samsung", YValue = 15 }, + new ChartData { XValue = "Samsung", YValue = 15 } }; } @@ -313,9 +310,10 @@ Data label for the accumulation chart can be formatted using [Format](https://he ## Template -Data labels can be customized using the template element for the accumulation chart. The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Template) allows for the customization of data labels using HTML elements, unlike a standard data label. Within the template, you can access the context value as an [AccumulationChartDataPointInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartDataPointInfo.html) and customize it accordingly. This allows you to access data point values such as x, y, label, percentage, as well as data point information like point index, point text, series name, and series index. +Customize data labels using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Template) property and HTML elements. ```cshtml + @{ @@ -355,7 +353,7 @@ Data labels can be customized using the template element for the accumulation ch -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -369,7 +367,7 @@ Data labels can be customized using the template element for the accumulation ch new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -378,7 +376,10 @@ 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" %} +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. + ## See also * [Tooltip](./tool-tip) -* [Legend](./legend) \ No newline at end of file +* [Legend](./legend) +* [Dynamically Switch Themes](https://support.syncfusion.com/kb/article/21357/how-to-dynamically-switch-themes-in-a-blazor-accumulation-chart) \ No newline at end of file diff --git a/blazor/accumulation-chart/empty-points.md b/blazor/accumulation-chart/empty-points.md index ccf0d76392..88c3882896 100644 --- a/blazor/accumulation-chart/empty-points.md +++ b/blazor/accumulation-chart/empty-points.md @@ -1,7 +1,7 @@ --- layout: post title: Empty Points in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Empty Points in Syncfusion Blazor Accumulation Chart component and more. +description: Check out and learn how to handle and customize Empty Points in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Empty Points in Blazor Accumulation Chart Component -Data points that contain **NaN** or **null** value are considered as empty points. The empty data points can be ignored or not plotted in the chart. Those points can be customized using the [AccumulationChartEmptyPointSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEmptyPointSettings.html) in series. +Data points with **NaN** or **null** values are considered empty points. These can be ignored or not plotted in the chart, and customized using [AccumulationChartEmptyPointSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEmptyPointSettings.html) in the series. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -25,7 +25,7 @@ Data points that contain **NaN** or **null** value are considered as empty point -@code{ +@code { public EmptyPointMode Mode = EmptyPointMode.Gap; public class Statistics @@ -38,10 +38,10 @@ Data points that contain **NaN** or **null** value are considered as empty point public List StatisticsDetails = new List { - new Statistics { Browser = "Chrome", Users = 37, Text= "37%", Fill="#498fff"}, - new Statistics { Browser = "UC Browser", Users = 17, Text= "17%", Fill="#ffa060"}, - new Statistics { Browser = "iPhone", Users = 19, Text= "19%", Fill="#ff68b6"}, - new Statistics { Browser = "Others", Users = 4 , Text= "4%", Fill="#81e2a1"}, + new Statistics { Browser = "Chrome", Users = 37, Text = "37%", Fill = "#498fff"}, + new Statistics { Browser = "UC Browser", Users = 17, Text = "17%", Fill = "#ffa060"}, + new Statistics { Browser = "iPhone", Users = 19, Text = "19%", Fill = "#ff68b6"}, + new Statistics { Browser = "Others", Users = 4 , Text = "4%", Fill = "#81e2a1"} }; } @@ -52,9 +52,9 @@ Data points that contain **NaN** or **null** value are considered as empty point ## Customization -The [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_AccumulationChartEmptyPointSettings_Mode) property can be used to handle the visibility of the empty points. The default mode of the empty point is **Gap**. Other supported modes are **Average**, **Drop** and **Zero**. The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_AccumulationChartEmptyPointSettings_Fill) property can be used to set a specific color for an empty point, and the [Border](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_AccumulationChartEmptyPointSettings_Border) property can be used to set the border for an empty point. +Handle empty points using the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_AccumulationChartEmptyPointSettings_Mode) property. Supported modes: **Gap** (default), **Average**, **Drop**, and **Zero**. Use [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_AccumulationChartEmptyPointSettings_Fill) and [Border](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_AccumulationChartEmptyPointSettings_Border) to style empty points. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -70,7 +70,6 @@ The [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu - @code{ public EmptyPointMode Mode = EmptyPointMode.Average; @@ -84,10 +83,10 @@ The [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu public List StatisticsDetails = new List { - new Statistics { Browser = "Chrome", Users = 37, Text= "37%", Fill="#498fff"}, - new Statistics { Browser = "UC Browser", Users = null, Text= "17%", Fill="#ffa060"}, - new Statistics { Browser = "iPhone", Users = 19, Text= "19%", Fill="#ff68b6"}, - new Statistics { Browser = "Others", Users = 4 , Text= "4%", Fill="#81e2a1"}, + new Statistics { Browser = "Chrome", Users = 37, Text = "37%", Fill = "#498fff"}, + new Statistics { Browser = "UC Browser", Users = 17, Text = "17%", Fill = "#ffa060"}, + new Statistics { Browser = "iPhone", Users = 19, Text = "19%", Fill = "#ff68b6"}, + new Statistics { Browser = "Others", Users = 4 , Text = "4%", Fill = "#81e2a1"} }; } @@ -98,20 +97,20 @@ 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](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. +When no data is available, use the [NoDataTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_NoDataTemplate) property to display a custom layout in the chart area. This can include a message, image, or button to load data. The chart updates automatically when data becomes available. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @using Syncfusion.Blazor.Buttons - +--No data available to display.-Load Data -++No data available to display.+Load Data +@@ -123,12 +122,15 @@ When no data is available to render in the accumulation chart, the [NoDataTempla @code { private SfAccumulationChart accChart; + public class Statistics { public string Browser { get; set; } public double Users { get; set; } } + public List StatisticsDetails = new List (); + private void LoadData() { StatisticsDetails = new List @@ -138,7 +140,7 @@ When no data is available to render in the accumulation chart, the [NoDataTempla new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; if (accChart != null) accChart.Refresh(); @@ -154,6 +156,6 @@ N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also -* [Data Label](./data-labels) +* [Data label](./data-labels) * [Tooltip](./tool-tip) -* [Legend](./legend) \ No newline at end of file +* [Legend](./legend) diff --git a/blazor/accumulation-chart/events.md b/blazor/accumulation-chart/events.md index df20c08269..0dd7bd81e8 100644 --- a/blazor/accumulation-chart/events.md +++ b/blazor/accumulation-chart/events.md @@ -1,7 +1,7 @@ --- layout: post title: Events in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor Accumulation Chart component and more. +description: Check out and learn how to configure and utilize Events in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -9,55 +9,27 @@ documentation: ug # Events in Blazor Accumulation Chart Component -In this section, the list of events of Accumulation Chart component is provided which will be triggered for appropriate accumulation chart actions. - -The events should be provided to the Accumulation Chart using [AccumulationChartEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html) component. - -N> From `v18.4.*`, a few additional following events are added to the Accumulation Chart component. - -Event Name| ------| -[OnDataLabelRender](events#ondatalabelrender)| -[OnLegendItemRender](events#onlegenditemrender)| -[OnPointRender](events#onpointrender)| - -N> From `v18.4.*`, some event names are different from the previous releases. The following are the event name changes from `v18.3.*` to `v18.4.*` - -Event Name(`v18.3.*`) |Event Name(`v18.4.*`) ------|----- -AfterExport |[OnExportComplete](events#onexportcomplete) -OnPrint |[OnPrintComplete](events#onprintcomplete) -Resized |[SizeChanged](events#sizechanged) - -N> From `v18.4.*`, the following previous release events are removed from the Accumulation Chart component. - -Event Name| ------| -OnChartMouseClick| -OnChartMouseDown| -OnChartMouseLeave| -OnChartMouseMove| -OnChartMouseUp| -PointMoved| +This section lists the events available in the Accumulation Chart component, which are triggered for specific chart actions. ## OnDataLabelRender -[OnDataLabelRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_OnDataLabelRender) event triggers, before datalabel for series is rendered. +[OnDataLabelRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_OnDataLabelRender) triggers before a series data label is rendered. ### Arguments -The following properties are available in the [AccumulationTextRenderEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationTextRenderEventArgs.html). +Properties in [AccumulationTextRenderEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationTextRenderEventArgs.html): * [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationTextRenderEventArgs.html#Syncfusion_Blazor_Charts_AccumulationTextRenderEventArgs_Color) – Specifies the color for the data label text. -* [Border](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationTextRenderEventArgs.html#Syncfusion_Blazor_Charts_AccumulationTextRenderEventArgs_Border) – Specifies the color and the width of the data label border. +* [Border](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationTextRenderEventArgs.html#Syncfusion_Blazor_Charts_AccumulationTextRenderEventArgs_Border) – Specifies the color and width of the data label border. * [Font](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationTextRenderEventArgs.html#Syncfusion_Blazor_Charts_AccumulationTextRenderEventArgs_Font) – Specifies the font information of the data label. * [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationTextRenderEventArgs.html#Syncfusion_Blazor_Charts_AccumulationTextRenderEventArgs_Text) – Specifies the text to be displayed in the data label. -```cshtml +```cshtml + @using Syncfusion.Blazor.Charts - -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -80,7 +52,7 @@ The following properties are available in the [AccumulationTextRenderEventArgs]( new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; public void DataLabelRenderEvent(AccumulationTextRenderEventArgs args) @@ -88,25 +60,27 @@ The following properties are available in the [AccumulationTextRenderEventArgs]( // Here, you can customize your code. } } + ``` ## OnLegendItemRender -[OnLegendItemRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_OnLegendItemRender) event triggers, before legend getting rendered. +[OnLegendItemRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_OnLegendItemRender) triggers before the legend is rendered. ### Arguments -The following properties are available in the [AccumulationLegendRenderEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationLegendRenderEventArgs.html). +Properties in [AccumulationLegendRenderEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationLegendRenderEventArgs.html): * [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationLegendRenderEventArgs.html#Syncfusion_Blazor_Charts_AccumulationLegendRenderEventArgs_Fill) – Specifies the fill color of the legend item's icon. * [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationLegendRenderEventArgs.html#Syncfusion_Blazor_Charts_AccumulationLegendRenderEventArgs_Shape) – Specifies the shape of the legend item's icon. * [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationLegendRenderEventArgs.html#Syncfusion_Blazor_Charts_AccumulationLegendRenderEventArgs_Text) – Specifies the text to be displayed in the legend item. -```cshtml +```cshtml + @using Syncfusion.Blazor.Charts+ @@ -66,7 +38,7 @@ The following properties are available in the [AccumulationTextRenderEventArgs]( - -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -131,7 +105,7 @@ The following properties are available in the [AccumulationLegendRenderEventArgs new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; public void LegendRenderEvent(AccumulationLegendRenderEventArgs args) @@ -139,24 +113,26 @@ The following properties are available in the [AccumulationLegendRenderEventArgs // Here, you can customize your code. } } + ``` ## OnPointRender -[OnPointRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_OnPointRender) event triggers before each point for the accumulation chart is rendered. +[OnPointRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_OnPointRender) triggers before each chart point is rendered. ### Arguments -The following properties are available in the [AccumulationPointRenderEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationPointRenderEventArgs.html). +Properties in [AccumulationPointRenderEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationPointRenderEventArgs.html): * [Border](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationPointRenderEventArgs.html#Syncfusion_Blazor_Charts_AccumulationPointRenderEventArgs_Border) – Specifies the color and the width of the point border. * [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationPointRenderEventArgs.html#Syncfusion_Blazor_Charts_AccumulationPointRenderEventArgs_Fill) – Specifies the fill color of the point. -```cshtml +```cshtml + @using Syncfusion.Blazor.Charts+ - -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -178,7 +154,7 @@ The following properties are available in the [AccumulationPointRenderEventArgs] new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; public void PointRenderEvent(AccumulationPointRenderEventArgs args) @@ -186,24 +162,26 @@ The following properties are available in the [AccumulationPointRenderEventArgs] // Here, you can customize your code. } } + ``` ## OnExportComplete -[OnExportComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_OnExportComplete) event triggers after exporting the accumulation chart. +[OnExportComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_OnExportComplete) triggers after exporting the chart. ### Arguments -The following field is available in the [ExportEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportEventArgs.html). +Field in [ExportEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportEventArgs.html): * [DataUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ExportEventArgs.html#Syncfusion_Blazor_Charts_ExportEventArgs_DataUrl) – Specifies the DataUrl of the exported file. -```cshtml +```cshtml + @using Syncfusion.Blazor.Charts+ @@ -164,7 +140,7 @@ The following properties are available in the [AccumulationPointRenderEventArgs] - -@code{ +@code { SfAccumulationChart AccChart; + public class Statistics { public string Browser { get; set; } @@ -226,7 +205,7 @@ The following field is available in the [ExportEventArgs](https://help.syncfusio new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; public void Export() @@ -239,26 +218,29 @@ The following field is available in the [ExportEventArgs](https://help.syncfusio // Here, you can customize your code. } } + ``` ## OnPrintComplete -`OnPrintComplete` event triggers after printing the accumulation chart. +`OnPrintComplete` triggers after printing the chart. + +```cshtml -```cshtml @using Syncfusion.Blazor.Charts+ @@ -211,8 +189,9 @@ The following field is available in the [ExportEventArgs](https://help.syncfusio - -@code{ +@code { SfAccumulationChart AccChart; + public class Statistics { public string Browser { get; set; } @@ -272,7 +254,7 @@ The following field is available in the [ExportEventArgs](https://help.syncfusio new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; public void Print() @@ -285,25 +267,27 @@ The following field is available in the [ExportEventArgs](https://help.syncfusio // Here, you can customize your code. } } + ``` ## SizeChanged -[SizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_SizeChanged) event is triggered when the accumulation chart is resized. +[SizeChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_SizeChanged) triggers when the chart is resized. ### Arguments -The following fields are available in the [AccumulationResizeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationResizeEventArgs.html). +Fields in [AccumulationResizeEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationResizeEventArgs.html): * [Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationResizeEventArgs.html#Syncfusion_Blazor_Charts_AccumulationResizeEventArgs_Chart) – Specifies the current accumulation chart instance. * [CurrentSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationResizeEventArgs.html#Syncfusion_Blazor_Charts_AccumulationResizeEventArgs_CurrentSize) – Specifies the current size of the accumulation chart. * [PreviousSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationResizeEventArgs.html#Syncfusion_Blazor_Charts_AccumulationResizeEventArgs_PreviousSize) – Specifies the previous size of the accumulation chart. -```cshtml +```cshtml + @using Syncfusion.Blazor.Charts+ - -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -325,7 +309,7 @@ The following fields are available in the [AccumulationResizeEventArgs](https:// new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; public void SizeChangedEvent(AccumulationResizeEventArgs args) @@ -333,17 +317,19 @@ The following fields are available in the [AccumulationResizeEventArgs](https:// // Here, you can customize your code. } } + ``` ## Loaded -`Loaded` event triggers after accumulation chart is loaded. +`Loaded` triggers after the chart is loaded. + +```cshtml -```cshtml @using Syncfusion.Blazor.Charts+ @@ -311,7 +295,7 @@ The following fields are available in the [AccumulationResizeEventArgs](https:// - -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -365,7 +351,7 @@ The following fields are available in the [AccumulationResizeEventArgs](https:// new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; public void LoadHandler(AccumulationLoadedEventArgs args) @@ -373,15 +359,16 @@ The following fields are available in the [AccumulationResizeEventArgs](https:// // Here, you can customize your code. } } + ``` ## OnPointClick -[OnPointClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_OnPointClick) event triggers on point click. +[OnPointClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_OnPointClick) triggers on point click. ### Arguments -The following fields are available in the [AccumulationPointEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationPointEventArgs.html). +Fields in [AccumulationPointEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationPointEventArgs.html): * [PageX](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationPointEventArgs.html#Syncfusion_Blazor_Charts_AccumulationPointEventArgs_PageX) – Specifies the current window page x location. * [PageY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationPointEventArgs.html#Syncfusion_Blazor_Charts_AccumulationPointEventArgs_PageY) – Specifies the current window page y location. @@ -392,11 +379,12 @@ The following fields are available in the [AccumulationPointEventArgs](https://h * [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationPointEventArgs.html#Syncfusion_Blazor_Charts_AccumulationPointEventArgs_Y) – Specifies the y coordinate of the current mouse click. -```cshtml +```cshtml + @using Syncfusion.Blazor.Charts+ @@ -351,7 +337,7 @@ The following fields are available in the [AccumulationResizeEventArgs](https:// - -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -418,7 +406,7 @@ The following fields are available in the [AccumulationPointEventArgs](https://h new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; public void PointClick(AccumulationPointEventArgs args) @@ -426,24 +414,26 @@ The following fields are available in the [AccumulationPointEventArgs](https://h // Here, you can customize your code. } } + ``` ## TooltipRender -[TooltipRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_TooltipRender) event triggers before the tooltip for series is rendered. +[TooltipRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEvents.html#Syncfusion_Blazor_Charts_AccumulationChartEvents_TooltipRender) triggers before the tooltip for a series is rendered. ### Arguments -The following property is available in the [TooltipRenderEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TooltipRenderEventArgs.html). +Property in [TooltipRenderEventArgs](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TooltipRenderEventArgs.html): * [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TooltipRenderEventArgs.html#Syncfusion_Blazor_Charts_TooltipRenderEventArgs_HeaderText) – Specifies the header text for the tooltip. * [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TooltipRenderEventArgs.html#Syncfusion_Blazor_Charts_TooltipRenderEventArgs_Text) – Specifies the text for the tooltip. -```cshtml +```cshtml + @using Syncfusion.Blazor.Charts+ @@ -404,7 +392,7 @@ The following fields are available in the [AccumulationPointEventArgs](https://h - -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -467,7 +457,7 @@ The following property is available in the [TooltipRenderEventArgs](https://help new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; public void TooltipRenderEvent(TooltipRenderEventArgs args) @@ -475,4 +465,5 @@ The following property is available in the [TooltipRenderEventArgs](https://help // Here, you can customize your code. } } + ``` \ No newline at end of file diff --git a/blazor/accumulation-chart/getting-started-with-web-app.md b/blazor/accumulation-chart/getting-started-with-web-app.md index 31266c8b9b..c9e3896983 100644 --- a/blazor/accumulation-chart/getting-started-with-web-app.md +++ b/blazor/accumulation-chart/getting-started-with-web-app.md @@ -357,5 +357,5 @@ Legend is used for the accumulation chart by setting the [Visible](https://help. ## See also -1. [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/accumulation-chart/getting-started.md b/blazor/accumulation-chart/getting-started.md index bb3fb23f3b..ac72a3e579 100644 --- a/blazor/accumulation-chart/getting-started.md +++ b/blazor/accumulation-chart/getting-started.md @@ -287,5 +287,5 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/blazor/accumulation-chart/grouping.md b/blazor/accumulation-chart/grouping.md index 38036d3108..66635fb796 100644 --- a/blazor/accumulation-chart/grouping.md +++ b/blazor/accumulation-chart/grouping.md @@ -1,7 +1,7 @@ --- layout: post title: Grouping in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Grouping in Syncfusion Blazor Accumulation Chart component and more. +description: Check out and learn how to group and visualize data points in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -11,14 +11,16 @@ documentation: ug # Grouping in Blazor Accumulation Chart Component -The value set to the [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GroupTo) property can be used to club/group a few points in the series. Points with a value less than [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GroupTo) are grouped together and displayed as a single point with the label **Others**. In addition, the property value can be set in percentage (percentage of total data points value). +## Grouping -```cshtml +The [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GroupTo) property can be used to group points in the series. Points with a value less than `GroupTo` are grouped and displayed as a single point labeled **Others**. The property value can also be set as a percentage of the total data points value. + +```cshtml @using Syncfusion.Blazor.Charts+ @@ -453,7 +443,7 @@ The following property is available in the [TooltipRenderEventArgs](https://help - -@code{ +@code { public class ChartData { public string XValue { get; set; } @@ -60,18 +62,18 @@ The value set to the [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion. ## Pie Grouping -**Broken Slice** +### Broken Slice -The points that have been grouped together will appear as a single slice with the label **Others**, which will explode and break into separate slices when clicked. +Grouped points appear as a single slice labeled **Others**, which explodes and breaks into separate slices when clicked. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts+ @@ -28,7 +30,7 @@ The value set to the [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion. - -@code{ +@code { public class ChartData { public string XValue { get; set; } @@ -111,20 +113,20 @@ 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" %} -**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. +### Group Mode + +When [GroupMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GroupMode) is set to [Point](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.GroupMode.html#Syncfusion_Blazor_Charts_GroupMode_Point), points are displayed as separate slices according to the `GroupTo` value. Remaining points are grouped into a single slice. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts+ - + @@ -83,7 +85,7 @@ The points that have been grouped together will appear as a single slice with th - -@code{ +@code { public class ChartData { public string XValue { get; set; } @@ -168,6 +170,6 @@ The points that have been grouped together will appear as a single slice with th 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. -* [Data Label](./data-labels) +* [Data label](./data-labels) * [Tooltip](./tool-tip) -* [Legend](./legend) \ No newline at end of file +* [Legend](./legend) diff --git a/blazor/accumulation-chart/how-to/do-nut.md b/blazor/accumulation-chart/how-to/do-nut.md index 86d15a4c7a..94f8d35aeb 100644 --- a/blazor/accumulation-chart/how-to/do-nut.md +++ b/blazor/accumulation-chart/how-to/do-nut.md @@ -1,48 +1,53 @@ --- layout: post -title: Text placing center of Blazor Doughnut Chart Component | Syncfusion -description: Learn here all about Text placing center of the doughnut in Syncfusion Blazor Accumulation Chart component and more. +title: Text Placing Center of Blazor Doughnut Chart Component | Syncfusion +description: Learn how to place text at the center of the doughnut chart in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug --- -# Text placing center of the Blazor Doughnut Chart Component +# Text Placing Center of the Blazor Doughnut Chart Component -The annotation is used to place text, shapes or images in the center of the doughnut chart. +Annotations are used to place text, shapes, or images in the center of the doughnut chart. -The [AccumulationChartAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnnotation.html) property allows to add annotations to the chart. Specify the content that needs to be displayed in the accumulation chart area by using the [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnnotation.html#Syncfusion_Blazor_Charts_AccumulationChartAnnotation_ContentTemplate) property of the annotation. +The [AccumulationChartAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnnotation.html) property allows adding annotations to the chart. Specify the content to display in the chart area using the [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnnotation.html#Syncfusion_Blazor_Charts_AccumulationChartAnnotation_ContentTemplate) property of the annotation. **Step 1:** Render a doughnut chart with the required series using the [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html). ```cshtml ++ - + @@ -136,7 +138,7 @@ The points that have been grouped together will appear as a single slice with th @@ -50,15 +55,16 @@ Since the text need to be placed in the center of the doughnut chart the [Region - -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -39,7 +39,7 @@ The legend is available for accumulation charts, just like it is for charts, and new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -48,11 +48,11 @@ 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" %} -## Position and alignment +## Position and Alignment -The legend can be placed at [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Left), [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Right), [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Top) or [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Bottom) [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Custom) position of the chart using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Position) property. The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Alignment) property can also be used to align the legend to the chart's [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Center), [Far](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Far) or [Near](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Near). +Place the legend at the [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Left), [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Right), [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Top), [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Bottom), or [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Custom) position using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Position) property. Align the legend with the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Alignment) property: [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Center), [Far](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Far), or [Near](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Near). -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -66,7 +66,7 @@ The legend can be placed at [Left](https://help.syncfusion.com/cr/blazor/Syncfu+ @@ -80,12 +86,13 @@ The complete code snippet for the preceding steps is as follows. @code { + private Random rnd = new Random(); + public class MyDataModel { public int XValue { get; set; } public int YValue { get; set; } } - private Random rnd = new Random(); public List chartData = new List (); protected override async Task OnInitializedAsync() diff --git a/blazor/accumulation-chart/legend.md b/blazor/accumulation-chart/legend.md index b8d974416c..0d611bb868 100644 --- a/blazor/accumulation-chart/legend.md +++ b/blazor/accumulation-chart/legend.md @@ -1,7 +1,7 @@ --- layout: post title: Legend in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Legend in Syncfusion Blazor Accumulation Chart component and more. +description: Check out and learn how to configure and customize Legend in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Legend in Blazor Accumulation Chart Component -The legend is available for accumulation charts, just like it is for charts, and it provides information about the points. If the chart's width is large, the legend will be placed on the right, and if the chart's height is large, the legend will be placed on the bottom. The legend for a point can be collapsed by assigning an empty string to the point's x value. +Legends in accumulation charts provide information about data points, similar to standard charts. If the chart's width is large, the legend appears on the right; if the height is large, the legend appears at the bottom. To collapse a legend for a point, assign an empty string to the point's x value. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -25,7 +25,7 @@ The legend is available for accumulation charts, just like it is for charts, and -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -122,7 +122,7 @@ You can reverse the order of the legend items by using the [Reverse](https://hel new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -131,11 +131,11 @@ 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" %} -## Legend shape +## Legend Shape -The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_LegendShape) property in the [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#properties) can be used to change the shape of the legend icon. The default icon shape for legends is [SeriesType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendShape.html#Syncfusion_Blazor_Charts_LegendShape_SeriesType). +Change the legend icon shape using the [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_LegendShape) property in the [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#properties). The default icon shape is [SeriesType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendShape.html#Syncfusion_Blazor_Charts_LegendShape_SeriesType). -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -150,7 +150,7 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -164,7 +164,7 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -173,11 +173,11 @@ 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" %} -## Legend size +## Legend Size -The legend size can be customized by using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Height) properties of the [AccumulationChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html). +Customize the legend size using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_Height) properties of [AccumulationChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html). -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -193,7 +193,7 @@ The legend size can be customized by using the [Width](https://help.syncfusion.c -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -207,7 +207,7 @@ The legend size can be customized by using the [Width](https://help.syncfusion.c new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -216,11 +216,11 @@ 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" %} -## Legend shape size +## Legend Shape Size -The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_ShapeHeight) and [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_ShapeWidth) properties can be used to adjust the dimensions of the legend shape. +Adjust the legend shape dimensions using the [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_ShapeHeight) and [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_ShapeWidth) properties. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -235,7 +235,7 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -249,7 +249,7 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -260,9 +260,9 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts ## Paging for Legend -When the legend items exceed legend bounds, paging will be enabled by default. End user can view each legend item using the navigation buttons to navigate between pages. +When legend items exceed the legend bounds, paging is enabled by default. Users can navigate between legend pages using navigation buttons. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -277,7 +277,7 @@ When the legend items exceed legend bounds, paging will be enabled by default. E -@code{ +@code { public class Statistics { public string Browser{ get; set; } @@ -291,7 +291,7 @@ When the legend items exceed legend bounds, paging will be enabled by default. E new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -300,11 +300,11 @@ 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" %} -### Paging customization +### Paging Customization -In legend pager, the arrow elements can be customized by using the [ArrowSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendPageSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendPageSettings_ArrowSize) property in the [AccumulationChartLegendPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendPageSettings.html) and the page numbers can be customized by using the [AccumulationChartLegendPageSettingsTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendPageSettingsTextStyle.html). +Customize legend pager arrow elements using the [ArrowSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendPageSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendPageSettings_ArrowSize) property in [AccumulationChartLegendPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendPageSettings.html). Customize page numbers with [AccumulationChartLegendPageSettingsTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendPageSettingsTextStyle.html). -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -330,37 +330,38 @@ In legend pager, the arrow elements can be customized by using the [ArrowSize](h public Syncfusion.Blazor.Charts.LegendPosition position { get; set; } = Syncfusion.Blazor.Charts.LegendPosition.Right; public double MaxLabel { get; set; } = 100; - public List PieChartPoints { get; set; } = new List - { - new PieData { ExpenseCategory = "IE", ExpensePercentage = 6.12, DataLabelMappingName = "6.12%" }, - new PieData { ExpenseCategory = "Chrome", ExpensePercentage = 37.28, DataLabelMappingName = "57.28%" }, - new PieData { ExpenseCategory = "Firefox", ExpensePercentage = 20, DataLabelMappingName = "57.28%" }, - new PieData { ExpenseCategory = "Safari", ExpensePercentage = 4.73, DataLabelMappingName = "4.73%" }, - new PieData { ExpenseCategory = "QQ", ExpensePercentage = 5.96, DataLabelMappingName = "5.96%" }, - new PieData { ExpenseCategory = "UC Browser", ExpensePercentage = 4.37, DataLabelMappingName = "4.37%" }, - new PieData { ExpenseCategory = "Edge", ExpensePercentage = 7.48, DataLabelMappingName = "7.48%" }, - new PieData { ExpenseCategory = "Opera", ExpensePercentage = 3.06, DataLabelMappingName = "14.06%" }, - new PieData { ExpenseCategory = "Brave", ExpensePercentage = 2.06, DataLabelMappingName = "14.06%" }, - new PieData { ExpenseCategory = "Maxthon", ExpensePercentage = 3.06, DataLabelMappingName = "14.06%" }, - new PieData { ExpenseCategory = "UC", ExpensePercentage = 3.06, DataLabelMappingName = "14.06%" }, - new PieData { ExpenseCategory = "Falkon", ExpensePercentage = 3.06, DataLabelMappingName = "14.06%" }, - }; - public class PieData { public string ExpenseCategory { get; set; } public double ExpensePercentage { get; set; } public string DataLabelMappingName { get; set; } } + + public List PieChartPoints { get; set; } = new List + { + new PieData { ExpenseCategory = "IE", ExpensePercentage = 6.12, DataLabelMappingName = "6.12%" }, + new PieData { ExpenseCategory = "Chrome", ExpensePercentage = 37.28, DataLabelMappingName = "57.28%" }, + new PieData { ExpenseCategory = "Firefox", ExpensePercentage = 20, DataLabelMappingName = "57.28%" }, + new PieData { ExpenseCategory = "Safari", ExpensePercentage = 4.73, DataLabelMappingName = "4.73%" }, + new PieData { ExpenseCategory = "QQ", ExpensePercentage = 5.96, DataLabelMappingName = "5.96%" }, + new PieData { ExpenseCategory = "UC Browser", ExpensePercentage = 4.37, DataLabelMappingName = "4.37%" }, + new PieData { ExpenseCategory = "Edge", ExpensePercentage = 7.48, DataLabelMappingName = "7.48%" }, + new PieData { ExpenseCategory = "Opera", ExpensePercentage = 3.06, DataLabelMappingName = "14.06%" }, + new PieData { ExpenseCategory = "Brave", ExpensePercentage = 2.06, DataLabelMappingName = "14.06%" }, + new PieData { ExpenseCategory = "Maxthon", ExpensePercentage = 3.06, DataLabelMappingName = "14.06%" }, + new PieData { ExpenseCategory = "UC", ExpensePercentage = 3.06, DataLabelMappingName = "14.06%" }, + new PieData { ExpenseCategory = "Falkon", ExpensePercentage = 3.06, DataLabelMappingName = "14.06%" } + }; } ``` +  {% previewsample "https://blazorplayground.syncfusion.com/embed/VthTZnrTBvLmyjUM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Legend text wrap +## Legend Text Wrap -When the legend text exceeds the container, the text can be wrapped by using [TextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_TextWrap) Property. End user can also wrap the legend text based on the [MaximumLabelWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_MaximumLabelWidth) property. +Wrap legend text that exceeds the container using the [TextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_TextWrap) property. Wrap legend text based on the [MaximumLabelWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartLegendSettings.html#Syncfusion_Blazor_Charts_AccumulationChartLegendSettings_MaximumLabelWidth) property. ```cshtml @@ -374,23 +375,24 @@ When the legend text exceeds the container, the text can be wrapped by using [Te -@code{ - public List PieChartPoints { get; set; } = new List - { - new PieData { ExpenseCategory = "Net-tution", ExpensePercentage = 21, DataLabelMappingName = "21%" }, - new PieData { ExpenseCategory = "Private Gifts", ExpensePercentage = 8, DataLabelMappingName = "8%" }, - new PieData { ExpenseCategory = "All Other", ExpensePercentage = 9, DataLabelMappingName = "9%" }, - new PieData { ExpenseCategory = "Local Revenue", ExpensePercentage = 4, DataLabelMappingName = "4%" }, - new PieData { ExpenseCategory = "State Revenue", ExpensePercentage = 21, DataLabelMappingName = "21%" }, - new PieData { ExpenseCategory = "Federal Revenue", ExpensePercentage = 16, DataLabelMappingName = "16%" }, - new PieData { ExpenseCategory = "Self-supporting Operations", ExpensePercentage = 21, DataLabelMappingName = "21%" }, - }; +@code { public class PieData { public string ExpenseCategory { get; set; } public double ExpensePercentage { get; set; } public string DataLabelMappingName { get; set; } } + + public List PieChartPoints { get; set; } = new List + { + new PieData { ExpenseCategory = "Net-tution", ExpensePercentage = 21, DataLabelMappingName = "21%" }, + new PieData { ExpenseCategory = "Private Gifts", ExpensePercentage = 8, DataLabelMappingName = "8%" }, + new PieData { ExpenseCategory = "All Other", ExpensePercentage = 9, DataLabelMappingName = "9%" }, + new PieData { ExpenseCategory = "Local Revenue", ExpensePercentage = 4, DataLabelMappingName = "4%" }, + new PieData { ExpenseCategory = "State Revenue", ExpensePercentage = 21, DataLabelMappingName = "21%" }, + new PieData { ExpenseCategory = "Federal Revenue", ExpensePercentage = 16, DataLabelMappingName = "16%" }, + new PieData { ExpenseCategory = "Self-supporting Operations", ExpensePercentage = 21, DataLabelMappingName = "21%" } + }; } ``` diff --git a/blazor/accumulation-chart/title-and-sub-title.md b/blazor/accumulation-chart/title-and-sub-title.md index 3bab2bb932..9817a7a0b2 100644 --- a/blazor/accumulation-chart/title-and-sub-title.md +++ b/blazor/accumulation-chart/title-and-sub-title.md @@ -1,7 +1,7 @@ --- layout: post title: Title and Subtitle in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Title and Subtitle in Syncfusion Blazor Accumulation Chart component and more. +description: Check out and learn how to add and customize Title and Subtitle in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -11,9 +11,9 @@ documentation: ug # Title and Subtitle in Blazor Accumulation Chart Component -The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Title) property can be used to give the accumulation chart a title in-order to provide information about the data displayed. +Use the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Title) property to provide a title for the accumulation chart, offering context about the displayed data. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -27,7 +27,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAcc -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -41,7 +41,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAcc new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -50,11 +50,11 @@ 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" %} -## Title customization +## Title Customization -The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Title) can be customized to be defined in the [AccumulationChartTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html). +Customize the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Title) using [AccumulationChartTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html). -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -70,7 +70,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAcc -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -84,7 +84,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAcc new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -93,13 +93,13 @@ 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" %} -### Title position +### Title Position -The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html#Syncfusion_Blazor_Charts_AccumulationChartTitleStyle_Position) property customizes the placement of the accumulation chart title. It supports the following options: [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Right), [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Left), [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Bottom), [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Top), and [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Custom), providing flexible title alignment based on layout requirements. By default, the accumulation chart title appears at the top of the chart. +Customize the title placement using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html#Syncfusion_Blazor_Charts_AccumulationChartTitleStyle_Position) property. Supported options: [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Right), [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Left), [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Bottom), [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Top), and [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Custom). By default, the title appears at the top. N> The subtitle, which appears below the title, will also be positioned along with the title when the `Position` property is set. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -114,7 +114,7 @@ N> The subtitle, which appears below the title, will also be positioned along wi -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -128,17 +128,18 @@ N> The subtitle, which appears below the title, will also be positioned along wi new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } ``` +  -{% 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=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -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. +Set the `Position` to `Custom` to place the title 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. This allows precise control over the title’s location. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -153,7 +154,7 @@ When the `Position` is set to `Custom`, the title can be positioned anywhere on -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -167,20 +168,20 @@ When the `Position` is set to `Custom`, the title can be positioned anywhere on new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } ``` - -{% 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=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Subtitle -The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_SubTitle) property can be used to give the accumulation chart a subtitle in-order to provide an additional information about the data displayed. +Use the [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_SubTitle) property to add a subtitle, providing additional information about the chart data. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -193,7 +194,7 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -207,7 +208,7 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -216,11 +217,11 @@ 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" %} -## Subtitle customization +## Subtitle Customization -The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_SubTitle) can be customized to be defined in the [AccumulationChartSubTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSubTitleStyle.html). +Customize the [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_SubTitle) using [AccumulationChartSubTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSubTitleStyle.html). -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -235,7 +236,7 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -249,7 +250,7 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -263,4 +264,4 @@ N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also * [Grouping](./grouping) -* [Data label](./data-label) \ No newline at end of file +* [Data label](./data-label) diff --git a/blazor/accumulation-chart/tool-tip.md b/blazor/accumulation-chart/tool-tip.md index 3552c220fe..4b6c401ec6 100644 --- a/blazor/accumulation-chart/tool-tip.md +++ b/blazor/accumulation-chart/tool-tip.md @@ -1,7 +1,7 @@ --- layout: post title: Tooltip in Blazor Accumulation Chart Component | Syncfusion -description: Checkout and learn here all about Tooltip in Syncfusion Blazor Accumulation Chart component and more. +description: Check out and learn how to configure and customize Tooltip in Syncfusion Blazor Accumulation Chart component. platform: Blazor control: Accumulation Chart documentation: ug @@ -9,9 +9,9 @@ documentation: ug # Tooltip in Blazor Accumulation Chart Component -The [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Enable) property in [AccumulationChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html) can be set to **true** to enable the tooltip. +Enable tooltips by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Enable) property in [AccumulationChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html) to **true**. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -27,7 +27,7 @@ The [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -41,7 +41,7 @@ The [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -52,9 +52,9 @@ The [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu ## Header -The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Header) property in [AccumulationChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html) can be used to specify the tooltip's header. +Specify the tooltip's header using the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Header) property in [AccumulationChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html). -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -70,7 +70,7 @@ The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -85,7 +85,7 @@ The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -94,11 +94,11 @@ 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" %} -## Tooltip format +## Tooltip Format -By default, tooltip shows information about x and y value in points. In addition, further customization can be done in the tooltip. For example, the format `${point.x} : ${point.y}%` shows point x value and customized point y value. +By default, the tooltip displays information about the x and y values of points. Customize the tooltip format as needed. For example, the format `${point.x} : ${point.y}%` shows the x value and a customized y value. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -114,12 +114,11 @@ By default, tooltip shows information about x and y value in points. In addition -@code{ +@code { public class Statistics { public string Browser { get; set; } public double Users { get; set; } - } public List StatisticsDetails = new List @@ -129,7 +128,7 @@ By default, tooltip shows information about x and y value in points. In addition new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -138,11 +137,11 @@ 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" %} -## Tooltip customization +## Tooltip Customization -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Fill) and [AccumulationChartTooltipBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipBorder.html) are used to customize the background color and the border of the tooltip respectively. The [AccumulationChartTooltipTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipTextStyle.html) in the tooltip is used to customize the font size of the tooltip text. The [HighlightColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_HighlightColor) property can be used to change the color of the data point when hovering. +Customize the tooltip background color using the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Fill) property and the border using [AccumulationChartTooltipBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipBorder.html). Adjust the font size with [AccumulationChartTooltipTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipTextStyle.html). Change the color of the data point on hover using the [HighlightColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_HighlightColor) property. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -160,7 +159,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu -@code{ +@code { public class Statistics { public string Browser { get; set; } @@ -174,7 +173,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu new Statistics { Browser = "iPhone", Users = 19 }, new Statistics { Browser = "Others", Users = 4 }, new Statistics { Browser = "Opera", Users = 11 }, - new Statistics { Browser = "Android", Users = 12 }, + new Statistics { Browser = "Android", Users = 12 } }; } @@ -185,9 +184,9 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu ## Tooltip Text Mapping -By default, tooltip shows information of x and y value in points. In addition, by using the [TooltipMappingName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_TooltipMappingName), more information from the datasource can be displayed in the tooltip. To display the specified tooltip content, **$point.tooltip** can be used as a placeholder. +Display additional information from the data source in the tooltip using the [TooltipMappingName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_TooltipMappingName) property. Use **$point.tooltip** as a placeholder to show the specified tooltip content. -```cshtml +```cshtml @using Syncfusion.Blazor.Charts @@ -203,7 +202,7 @@ By default, tooltip shows information of x and y value in points. In addition, b -@code{ +@code { public class ChartData { public string XValue { get; set; } @@ -213,18 +212,18 @@ By default, tooltip shows information of x and y value in points. In addition, b public List StatisticsDetails = new List { - new ChartData { XValue = "Jan", YValue = 3, Text= "Jan: 3M" }, - new ChartData { XValue = "Feb", YValue = 3.5, Text= "Feb: 3.5M" }, - new ChartData { XValue = "Mar", YValue = 7, Text= "Mar: 7M" }, - new ChartData { XValue = "Apr", YValue = 3.5, Text= "Apr: 13.5M" }, - new ChartData { XValue = "May", YValue = 19, Text= "May: 19M" }, - new ChartData { XValue = "Jun", YValue = 23.5, Text= "Jun: 23.5M" }, - new ChartData { XValue = "Jul", YValue = 26, Text= "Jul: 26M" }, - new ChartData { XValue = "Aug", YValue = 25, Text= "Aug: 25M" }, - new ChartData { XValue = "Sep", YValue = 21, Text= "Sep: 21M" }, - new ChartData { XValue = "Oct", YValue = 15, Text= "Oct: 15M" }, - new ChartData { XValue = "Nov", YValue = 9, Text= "Nov: 9M" }, - new ChartData { XValue = "Dec", YValue = 13.5, Text= "Dec: 3.5M" } + new ChartData { XValue = "Jan", YValue = 3, Text = "Jan: 3M" }, + new ChartData { XValue = "Feb", YValue = 3.5, Text = "Feb: 3.5M" }, + new ChartData { XValue = "Mar", YValue = 7, Text = "Mar: 7M" }, + new ChartData { XValue = "Apr", YValue = 3.5, Text = "Apr: 13.5M" }, + new ChartData { XValue = "May", YValue = 19, Text = "May: 19M" }, + new ChartData { XValue = "Jun", YValue = 23.5, Text = "Jun: 23.5M" }, + new ChartData { XValue = "Jul", YValue = 26, Text = "Jul: 26M" }, + new ChartData { XValue = "Aug", YValue = 25, Text = "Aug: 25M" }, + new ChartData { XValue = "Sep", YValue = 21, Text = "Sep: 21M" }, + new ChartData { XValue = "Oct", YValue = 15, Text = "Oct: 15M" }, + new ChartData { XValue = "Nov", YValue = 9, Text = "Nov: 9M" }, + new ChartData { XValue = "Dec", YValue = 13.5, Text = "Dec: 3.5M" } }; } @@ -238,4 +237,4 @@ N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also * [Grouping](./grouping) -* [Data label](./data-label) \ No newline at end of file +* [Data label](./data-label) diff --git a/blazor/ai-assistview/accessibility.md b/blazor/ai-assistview/accessibility.md index 62c66c5b97..521742f697 100644 --- a/blazor/ai-assistview/accessibility.md +++ b/blazor/ai-assistview/accessibility.md @@ -7,11 +7,11 @@ control: AI AssistView documentation: ug --- -# Accessibility in Blazor AI AssistView component +# Accessibility in the Blazor AI AssistView component -The Blazor AI AssistView component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The Blazor AI AssistView component follows established accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. -The accessibility compliance for the Blazor AI AssistView component is outlined below. +The component’s accessibility compliance is summarized below. | Accessibility Criteria | Compatibility | | -- | -- | @@ -45,7 +45,7 @@ The following ARIA attributes are used in the AI AssistView component: | ------------ | ----------------------- | | `role=button` | Indicates that the element is clickable and triggers an action when activated by the user. | | `role=toolbar` | Specifies that the element is a toolbar. | -| `aria-label` | Defines a string value that labels an interactive element for accessibility. | +| `aria-label` | Provides an accessible name for interactive elements (for example, buttons, toolbar, or prompt input). | | `aria-orientation` | Specifies the orientation of the toolbar. | | `aria-disabled` | Indicates whether the toolbar or element is currently disabled and not interactive. | | `aria-multiline` | Indicates that a textbox accepts multiple lines of input or only a single line. | @@ -57,14 +57,14 @@ The following keyboard shortcuts are supported by the AI AssistView component. | Windows | Mac | Actions | | --- | --- | --- | | Enter | Enter | Select the focused item. | -| Tab | Tab | Moves focus forward through the interactive elements. | -| Shift + Tab | ⇧ + Tab | Moves focus backward through the interactive elements. | -AI AssistView Toolbars||| -| ← | ← | Focuses the previous toolbar element. | -| → | → | Focuses the next toolbar element. | +| Tab | Tab | Move focus forward through interactive elements. | +| Shift + Tab | ⇧ + Tab | Move focus backward through interactive elements. | +AI AssistView toolbar||| +| ← | ← | Move focus to the previous toolbar element. | +| → | → | Move focus to the next toolbar element. | | Enter / Space | Enter / Space | Select the focused item or activate the selected option. | -| Home | Home | Moves focus to the first toolbar element. | -| End | End | Moves focus to the last toolbar element. | +| Home | Home | Move focus to the first toolbar element. | +| End | End | Move focus to the last toolbar element. | ## Ensuring accessibility @@ -72,4 +72,4 @@ The Blazor AI AssistView component's accessibility levels are ensured through an ## See also -* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) +* Accessibility in Syncfusion® Blazor components (https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file diff --git a/blazor/ai-assistview/ai-integrations/gemini-integration.md b/blazor/ai-assistview/ai-integrations/gemini-integration.md new file mode 100644 index 0000000000..3aa30cbb7a --- /dev/null +++ b/blazor/ai-assistview/ai-integrations/gemini-integration.md @@ -0,0 +1,146 @@ +--- +layout: post +title: Gemini Integration with Blazor AI AssistView Component | Syncfusion +description: Checkout and learn about gemini integration with Blazor AI AssistView component in Blazor WebAssembly Application. +platform: Blazor +control: AI AssistView +documentation: ug +--- + +# Integrate Gemini AI With Blazor AI AssistView component + +The AI AssistView component integrates with Google’s [Gemini](https://ai.google.dev/gemini-api/docs/quickstart) API to deliver intelligent conversational interfaces. It leverages advanced natural language understanding to interpret user input, maintain context throughout interactions, and provide accurate, relevant responses. By configuring secure authentication and data handling, developers can unlock powerful AI-driven communication features that elevate user engagement and streamline support experiences. + +## Prerequisites + +Before starting, ensure you have the following: + +* **Google Account**: For generating a Gemini API key. + +* **Syncfusion AI AssistView**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package: For parsing Markdown responses. + +## Set Up the AI AssistView Component + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView component in the application and that prerequisites are met. + +## Install Dependencies + +Install the required packages: + +1. Install the `Gemini AI` nuget package in the application. + +```bash + +Nuget\Install-Package Mscc.GenerativeAI + +``` + +2. Install the `Markdig` nuget packages in the application. + +```bash + +Nuget\Install-Package Markdig + +``` + +## Generate API Key + +1. **Access Google AI Studio**: Instructs users to sign into [Google AI Studio](https://aistudio.google.com/app/apikey) with a Google account or create a new account if needed. + +2. **Navigate to API Key Creation**: Go to the `Get API Key` option in the left-hand menu or top-right corner of the dashboard. Click the `Create API Key` button. + +3. **Project Selection**: Choose an existing Google Cloud project or create a new one. + +4. **API Key Generation**: After project selection, the API key is generated. Users are instructed to copy and store the key securely, as it is shown only once. + +> Security note: Advises against committing the API key to version control and recommends using environment variables or a secret manager in production. + +## Gemini AI with AI AssistView + +Modify the Razor file to integrate the Gemini AI with the AI AssistView component. + +* update your Gemini API key securely in the configuration: + +```bash + +const string GeminiApiKey = 'Place your API key here'; + +``` + +{% tabs %} +{% highlight razor %} + +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Navigations +@using Mscc.GenerativeAI +@using Markdig + + +// Initializes the AI Assist component ++ +@code { + private SfAIAssistView sfAIAssistView = new SfAIAssistView(); + private List+ ++ ++ ++ + ++ ++ + promptSuggestions = new List + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + // Initialize Gemini API + private readonly string geminiApiKey = ""; + // Handle user prompt: call Gemini model + private async Task OnPromptRequest(AssistViewPromptRequestedEventArgs args) + { + try + { + var gemini = new GoogleAI(apiKey: geminiApiKey); // Replace with your Gemini API key + var model = gemini.GenerativeModel(model: "gemini-2.5-flash"); // Select the Gemini model (update model name as needed) + var response = await model.GenerateContent(args.Prompt); + var responseText = response.Text; + var pipeline = new MarkdownPipelineBuilder() + .UseAdvancedExtensions() + .UsePipeTables() + .UseTaskLists() + .Build(); + // Add the response to the AIAssistView + await Task.Delay(1000); // Simulate delay as in original code + args.Response = Markdown.ToHtml(responseText, pipeline); + } + catch (Exception ex) + { + Console.WriteLine($"Error fetching Gemini response: {ex.Message}"); + await Task.Delay(1000); + args.Response = "⚠️ Something went wrong while connecting to the AI service. Please check your API key or try again later."; + } + } + + private void ToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args) + { + sfAIAssistView.Prompts.Clear(); + StateHasChanged(); + } +} + +{% endhighlight %} +{% endtabs %} + + \ No newline at end of file diff --git a/blazor/ai-assistview/ai-integrations/openai-integration.md b/blazor/ai-assistview/ai-integrations/openai-integration.md new file mode 100644 index 0000000000..661836d8a6 --- /dev/null +++ b/blazor/ai-assistview/ai-integrations/openai-integration.md @@ -0,0 +1,256 @@ +--- +layout: post +title: Azure OpenAI with Blazor AI AssistView Component | Syncfusion +description: Checkout and learn about Azure OpenAI with Blazor AI AssistView component in Blazor WebAssembly Application. +platform: Blazor +control: AI AssistView +documentation: ug +--- + +# Integrate Azure OpenAI with Blazor AI AssistView component + +The AI AssistView component integrates with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) to enable advanced conversational AI features in your applications. The component acts as a user interface, where user prompts are sent to the Azure OpenAI service via API calls, providing natural language understanding and context-aware responses. + +## Prerequisites + +Before starting, ensure you have the following: + +* **An Azure account**: with access to [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai) services and a generated API key. + +* **Syncfusion AI AssistView**: Package [Syncfusion Blazor package](https://www.nuget.org/packages/Syncfusion.Blazor.InteractiveChat) installed. + +* [Markdig](https://www.nuget.org/packages/Markdig) package available in the project for Markdown-to-HTML conversion (required by the sample code). + +## Set Up the AI AssistView Component + +Follow the Syncfusion AI AssistView [Getting Started](../getting-started) guide to configure and render the AI AssistView component in the application and that prerequisites are met. + +## Install Dependencies + +Install the required packages: + +1. Install the `OpenAI` and `Azure` nuget packages in the application. + +```bash + +NuGet\Install-Package OpenAI +NuGet\Install-Package Azure.AI.OpenAI +NuGet\Install-Package Azure.Core + +``` + +2. Install the `Markdig` nuget packages in the application. + +```bash + +Nuget\Install-Package Markdig + +``` + +Note: The sample below uses HttpClient directly and does not require the Azure/OpenAI SDKs. + +## Configure Azure OpenAI + +1. Log in to the [Azure Portal](https://portal.azure.com/#home) and navigate to your Azure OpenAI resource. + +2. Under resource Management, select keys and endpoint to retrieve your API key and endpoint URL. + +3. Note the following values: + - API key + - Endpoint + - API version (must be supported by your resource) + - Deployment name (for example, gpt-4o-mini) + +4. Store these values securely, as they will be used in your application. + +> `Security Note`: expose your API key in client-side code for production applications. Use a server-side proxy or environment variables to manage sensitive information securely. + +## Azure OpenAI with AI AssistView + +- Configure your Azure OpenAI endpoint, API key, and deployment name in your **Program.cs** (or using your preferred configuration mechanism). + +- Register the service for dependency injection. + +- Inject and use the service in your Razor component. + +Modify the razor file to integrate the Azure OpenAI with the AI AssistView component. + +{% tabs %} +{% highlight c# tabtitle="razor" %} + +@using AIAssistView_AzureAI.Components.Services +@using Syncfusion.Blazor.InteractiveChat +@using Syncfusion.Blazor.Navigations +@inject AzureOpenAIService OpenAIService + +// Initialize AI AssistView component + ++ +@code { + private SfAIAssistView assistView; + private string finalResponse { get; set; } + private List+ ++ ++ ++ + ++ ++ + promptSuggestions = new List + { + "What are the best tools for organizing my tasks?", + "How can I maintain work-life balance effectively?" + }; + + // Handle user prompt: call Azure OpenAI Chat Completions + private async Task PromptRequest(AssistViewPromptRequestedEventArgs args) + { + // Reset the response for this prompt + var lastIdx = assistView.Prompts.Count - 1; + assistView.Prompts[lastIdx].Response = string.Empty; + finalResponse = string.Empty; + try + { + await foreach (var chunk in OpenAIService.GetChatResponseStreamAsync(args.Prompt)) + { + await UpdateResponse(args, chunk); + } + + args.Response = finalResponse; + } + catch (Exception ex) + { + args.Response = $"Error: {ex.Message}"; + } + } + + private async Task UpdateResponse(AssistViewPromptRequestedEventArgs args, string response) + { + var lastIdx = assistView.Prompts.Count - 1; + await Task.Delay(10); // Small delay for UI updates + assistView.Prompts[lastIdx].Response += response.Replace("\n", "
"); + finalResponse = assistView.Prompts[lastIdx].Response; + StateHasChanged(); + } + + private void ToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args) + { + assistView.Prompts.Clear(); + StateHasChanged(); + } +} + +{% endhighlight %} +{% highlight c# tabtitle="cs" %} + +using System.Text.Json; +using Markdig; +using System.Text.RegularExpressions; + +namespace AIAssistView_AzureAI.Components.Services +{ + public class AzureOpenAIService + { + private readonly HttpClient _httpClient; + private readonly string _endpoint; + private readonly string _apiKey; + private readonly string _deploymentName; + + public AzureOpenAIService(HttpClient httpClient, string endpoint, string apiKey, string deploymentName) + { + _httpClient = httpClient; + _endpoint = endpoint; + _apiKey = apiKey; + _deploymentName = deploymentName; + } + + public async IAsyncEnumerableGetChatResponseStreamAsync(string prompt) + { + var request = new + { + messages = new[] { new { role = "user", content = prompt } }, + max_tokens = 500, + }; + + var url = $"{_endpoint}/openai/deployments/{_deploymentName}/chat/completions?api-version=2024-02-15-preview"; + _httpClient.DefaultRequestHeaders.Add("api-key", _apiKey); + + Stream responseStream = null; + List results = new List (); + + try + { + var response = await _httpClient.PostAsJsonAsync(url, request); + + if (response.IsSuccessStatusCode) + { + responseStream = await response.Content.ReadAsStreamAsync(); + using var jsonDocument = JsonDocument.Parse(responseStream); + var choices = jsonDocument.RootElement.GetProperty("choices"); + if (choices.GetArrayLength() > 0) + { + var content = choices[0].GetProperty("message").GetProperty("content").GetString(); + var htmlContent = Markdown.ToHtml(content); + htmlContent = Regex.Replace(htmlContent, @"\s+", " ").Trim(); + // Collect each character to the results list before yielding + foreach (var chunk in htmlContent) + { + results.Add(chunk.ToString()); + } + } + else + { + results.Add("Error: No choices returned in the response."); + } + } + else + { + var error = await response.Content.ReadAsStringAsync(); + results.Add($"Error: {error}"); + } + } + catch (Exception ex) + { + // Collect the error message to be yielded later + results.Add($"Error: {ex.Message}"); + } + finally + { + if (responseStream != null) + { + responseStream.Dispose(); + } + } + + // Now yield each collected result + foreach (var result in results) + { + yield return result; + } + } + } +} + +{% endhighlight %} +{% highlight c# tabtitle="Server(~/_Program.cs)" %} + +// Initialize Azure OpenAI +var endpoint = "https://azure-testresource.openai.azure.com"; +var apiKey = " "; // Replace with your API key; +var deploymentName = "gpt-4o-mini"; + +{% endhighlight %} +{% endtabs %} + + diff --git a/blazor/ai-assistview/appearance.md b/blazor/ai-assistview/appearance.md index db5d769412..606098dcbf 100644 --- a/blazor/ai-assistview/appearance.md +++ b/blazor/ai-assistview/appearance.md @@ -9,6 +9,8 @@ documentation: ug # Appearance in Blazor AI AssistView component +Customize the AI AssistView appearance by configuring width and height and by applying custom styles through the CssClass property. + ## Setting width You can use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Width) property to set the width of the AI AssistView. The default value is `100%`. diff --git a/blazor/ai-assistview/assist-view.md b/blazor/ai-assistview/assist-view.md index e7c6d00932..b62dd131e1 100644 --- a/blazor/ai-assistview/assist-view.md +++ b/blazor/ai-assistview/assist-view.md @@ -11,7 +11,7 @@ documentation: ug ## Setting prompt text -You can use the [Prompt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Prompt) property to define the prompt text for the AI AssistView component. +Use the [Prompt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Prompt) property to define the initial prompt text displayed in the AI AssistView component. This value is sent when the prompt is requested and can be processed to generate a response. ```cshtml @@ -36,7 +36,7 @@ You can use the [Prompt](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor ## Setting prompt placeholder -You can use the [PromptPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptPlaceholder) property to set the placeholder text for the prompt textarea. The default value is `Type prompt for assistance...`. +Use the [PromptPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptPlaceholder) property to set the placeholder text in the prompt text area. The default placeholder is displayed when the text area is empty. The default value is `Type prompt for assistance...`. ```cshtml @@ -61,9 +61,9 @@ You can use the [PromptPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfu ## Prompt-response collection -You can use the [Prompts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Prompts) property to initialize the component with the configured data as a collection of prompts and responses or individual entries. +Use the [Prompts](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Prompts) property to initialize the component with a predefined collection of prompts and responses, or with individual entries. -The `Prompts` collection stores all the prompts and responses generated. +The `Prompts` collection stores all prompts and responses generated during the session. ```cshtml @@ -93,7 +93,7 @@ The `Prompts` collection stores all the prompts and responses generated. ## Adding prompt suggestions -You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property, to add the suggestions in both initial and on-demand which help users to refine their prompts. Additionally, custom header can be set for suggestions further enhancing the user experience. +Use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to provide suggested prompts on initial load and on demand, helping users refine their input. Additionally, a custom header can be set for suggestions to enhance usability. ```cshtml @@ -121,7 +121,7 @@ You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfu ### Adding suggestion headers -You can use the [PromptSuggestionsHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestionsHeader) property to set the header text for the prompt suggestions in the AI AssistView. +Use the [PromptSuggestionsHeader](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestionsHeader) property to set the header text for the prompt suggestions displayed in the AI AssistView. ```cshtml @@ -149,7 +149,7 @@ You can use the [PromptSuggestionsHeader](https://help.syncfusion.com/cr/blazor/ ## Adding prompt iconCss -You can customize the appearance of the prompter avatar by using the [PromptIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptIconCss) property. +Customize the appearance of the prompter avatar using the [PromptIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptIconCss) property. ```cshtml @@ -179,7 +179,7 @@ You can customize the appearance of the prompter avatar by using the [PromptIcon ## Adding response iconCss -You can use the [ResponseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_ResponseIconCss) property to customize the appearance of the responder avatar. By default, the `e-assistview-icon` class is added as the built-in AI AssistView response icon. +Use the [ResponseIconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_ResponseIconCss) property to customize the appearance of the responder avatar. By default, the `e-assistview-icon` class is applied as the built-in AI AssistView response icon. ```cshtml diff --git a/blazor/ai-assistview/custom-view.md b/blazor/ai-assistview/custom-view.md index 21081a8c86..99ec4ac524 100644 --- a/blazor/ai-assistview/custom-view.md +++ b/blazor/ai-assistview/custom-view.md @@ -11,11 +11,11 @@ documentation: ug ## Adding custom views -The Blazor AI AssistView allows you to add different views available for user interaction. +The Blazor AI AssistView supports multiple views for user interaction, including the built-in AssistView and customizable CustomView types. #### Setting view type -You can set the type of view by using the [AssistView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html) and [CustomView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.CustomView.html) tag directive. +Set the view type by using the [AssistView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html) and [CustomView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.CustomView.html) tag directives. ```cshtml @@ -49,7 +49,7 @@ You can set the type of view by using the [AssistView](https://help.syncfusion.c ### Setting name -You can use the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_Header) property to specifies the header name of the `Assist` or `Custom` views in the AI AssistView. +Use the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_Header) property to specify the header text for the `AssistView` or `CustomView` in the AI AssistView. ```cshtml @@ -83,7 +83,7 @@ You can use the [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor ### Setting iconCss -You can customize the view icons by using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_IconCss) property. By default the `e-assistview-icon` class is added as built-in header icon for the AI AssistView. +Customize the view icon by using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_IconCss) property. By default, the `e-assistview-icon` class is added as the built-in header icon for the AI AssistView. ```cshtml @@ -117,7 +117,7 @@ You can customize the view icons by using the [IconCss](https://help.syncfusion. ### Setting view template -You can use the [ViewTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_ViewTemplate) tag directive to add the view content of the multiple views added in the AI AssistView. +Use the [ViewTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_ViewTemplate) tag directive to define the content template for each view added to the AI AssistView. ```cshtml @@ -154,7 +154,7 @@ You can use the [ViewTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion. #### Show or hide clear button -You can use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_ShowClearButton) property using the `AssistView` tag directive to show or hide the clear button. By default, its value is `false`, when the clear button is clicked, the prompt text entered will be cleared. +Use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_ShowClearButton) property on the `AssistView` tag to show or hide the clear button. The default value is `false`. When enabled and clicked, it clears the prompt text entered in the input area. ```cshtml @@ -183,7 +183,7 @@ You can use the [ShowClearButton](https://help.syncfusion.com/cr/blazor/Syncfusi ## Setting active view -You can use the [ActiveView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_ActiveView) property set the active view in the AI AssistView. By default, the value is `0`. +Use the [ActiveView](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_ActiveView) property to set the initially active view in the AI AssistView. By default, the value is `0`. ```cshtml diff --git a/blazor/ai-assistview/events.md b/blazor/ai-assistview/events.md index 1de41ecbaa..4942ce09b2 100644 --- a/blazor/ai-assistview/events.md +++ b/blazor/ai-assistview/events.md @@ -13,7 +13,7 @@ This section describes the AI AssistView events that will be triggered when appr ## Created -The AI AssistView component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Created) event when the component rendering is completed. +The AI AssistView component triggers the [Created](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_Created) event after the component has completed its initial rendering. ```cshtml @using Syncfusion.Blazor.InteractiveChat @@ -38,7 +38,7 @@ The AI AssistView component triggers the [Created](https://help.syncfusion.com/c ## PromptRequested -The [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event is triggered when the prompt request is made in the AI AssistView component. +The [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event is triggered when a prompt is submitted in the AI AssistView component. ```cshtml @using Syncfusion.Blazor.InteractiveChat @@ -59,7 +59,7 @@ The [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.In ## PromptChanged -The [PromptChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptChanged) event is triggered when the prompt text is changed in the AI AssistView component. +The [PromptChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptChanged) event is triggered when the prompt text changes in the AI AssistView component. ```cshtml @using Syncfusion.Blazor.InteractiveChat @@ -117,7 +117,7 @@ The [AttachmentUploadStart](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla ## AttachmentUploadSuccess -The [AttachmentUploadSuccess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_AttachmentUploadSuccess) event is triggered when the attached file is successfully uploaded in the AI AssistView. +The [AttachmentUploadSuccess](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_AttachmentUploadSuccess) event is triggered when an attached file is successfully uploaded in the AI AssistView. ```cshtml @@ -150,7 +150,7 @@ The [AttachmentUploadSuccess](https://help.syncfusion.com/cr/blazor/Syncfusion.B ## AttachmentUploadFailed -The [AttachmentUploadFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_AttachmentUploadFailed) event is triggered when the attached file upload fails in the AI AssistView. +The [AttachmentUploadFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_AttachmentUploadFailed) event is triggered when an attached file upload fails in the AI AssistView. ```cshtml @@ -212,4 +212,4 @@ The [AttachmentRemoved](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. args.Response = defaultResponse; } } -``` +``` \ No newline at end of file diff --git a/blazor/ai-assistview/file-attachments.md b/blazor/ai-assistview/file-attachments.md index 0a43a6c681..a7c21579cf 100644 --- a/blazor/ai-assistview/file-attachments.md +++ b/blazor/ai-assistview/file-attachments.md @@ -9,9 +9,9 @@ documentation: ug # Attachments in Blazor AI AssistView component -The `Attachment` support in AI AssistView specifies user to include file attachments along with their prompts in the AI AssistView. This enhances the interaction by allowing users to provide additional context through files. You can enable and customize this feature and its behavior using the `AttachmentSettings` configuration. +`Attachment` support in the AI AssistView allows users to include files with their prompts, providing additional context to improve responses. Configure this behavior using the `AttachmentSettings` property, which controls enabling, allowed file types, size limits, and the server endpoints used for upload and removal. -You can use the `AttachmentSettings` property to configure the attachments in the AI AssistView. +The `AttachmentSettings` property can be used to configure attachments in the AI AssistView component. ### Enabling attachment @@ -71,7 +71,7 @@ You can use the `SaveUrl` and `RemoveUrl` property to add the save and remove th ### Setting file type -You can use the `AllowedFileTypes` property to upload the specific file types in the attachment. +Use the AllowedFileTypes property to restrict uploads to specific file extensions. Provide one or more extensions (for example, ".png" or ".png,.jpg,.pdf"). ```cshtml @using Syncfusion.Blazor.InteractiveChat @@ -100,7 +100,7 @@ You can use the `AllowedFileTypes` property to upload the specific file types in ### Setting file size -You can use the `MaxFileSize` property to allow the maximum file size of the upload file in the AI AssistView. By default, its value is `2000000` bytes. +Use the MaxFileSize property to define the maximum allowed upload size in bytes. By default, the value is 2000000 bytes (approximately 2 MB). ```cshtml @using Syncfusion.Blazor.InteractiveChat diff --git a/blazor/ai-assistview/getting-started-webapp.md b/blazor/ai-assistview/getting-started-webapp.md index 13107514e1..11d0ae6952 100644 --- a/blazor/ai-assistview/getting-started-webapp.md +++ b/blazor/ai-assistview/getting-started-webapp.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor AI AssistView in Blazor Web App -This section briefly explains about how to include [Blazor AI AssistView](https://www.syncfusion.com/blazor-components/blazor-ai-assistview) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to add the [Blazor AI AssistView](https://www.syncfusion.com/blazor-components/blazor-ai-assistview) component to a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -23,15 +23,15 @@ This section briefly explains about how to include [Blazor AI AssistView](https: You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +When creating the application, configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) to ensure proper behavior of Blazor components. ## Install Syncfusion® Blazor InteractiveChat and Themes NuGet in the App -To add **Blazor AI AssistView** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install `Syncfusion.Blazor.InteractiveChat` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor AI AssistView** component, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search for and install `Syncfusion.Blazor.InteractiveChat` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following commands in the Package Manager Console: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +42,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete list of available packages. {% endtabcontent %} @@ -56,9 +56,9 @@ N> Syncfusion® Blazor components are availa You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +When creating the application, you must configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc). -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. +For instance, to create a Blazor Web App with the `Auto` interactive render mode, use the following commands: {% tabs %} {% highlight c# tabtitle="Blazor Web App" %} @@ -92,7 +92,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete list of available packages. {% endtabcontent %} @@ -100,12 +100,12 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -| Interactive Render Mode | Description | -| -- | -- | -| WebAssembly or Auto | Open **~/_Imports.razor** file from the client project.| -| Server | Open **~/_import.razor** file, which is located in the `Components` folder.| +First, import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespace. -Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespace. +| Interactive Render Mode | File Location | +|---|---| +| `WebAssembly` or `Auto` | `~/_Imports.razor` (Client Project) | +| `Server` | `~/Components/_Imports.razor` (Server Project) | {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -173,9 +173,9 @@ var app = builder.Build(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section and the script reference at the end of the `` in the **~/Components/App.razor** file as shown below: +Reference the theme stylesheet and script from the NuGet package using [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Add the stylesheet link in the `` section and the script reference at the end of the `` in the `~/Components/App.razor` file. ```html @@ -189,18 +189,18 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references. -## Add Syncfusion® Blazor AI AssistView component +## Add Syncfusion® Blazor AI AssistView Component Add the Syncfusion® Blazor AI AssistView component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: -| Interactivity location | RenderMode | Code | +| Interactivity Location | RenderMode | Code Snippet | | --- | --- | --- | -| Per page/component | Auto | @rendermode InteractiveAuto | -| | WebAssembly | @rendermode InteractiveWebAssembly | -| | Server | @rendermode InteractiveServer | -| | None | --- | +| Per page/component | Auto | `@rendermode InteractiveAuto` | +| | WebAssembly | `@rendermode InteractiveWebAssembly` | +| | Server | `@rendermode InteractiveServer` | +| Global | Not required | --- | N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. @@ -223,13 +223,13 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor AI AssistView component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor AI AssistView component will be rendered in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rZrfCjiMCTRHTGzR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AI AssistView Component](./images/ai-assistview-component.png)" %} -## Configure suggestions and responses +## Configure Suggestions and Responses -You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to add prompt suggestions and the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed. +Use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to define a list of interactive prompts for users. Handle the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event to provide a custom response when a prompt is submitted. If no matching prompt is found, a default response can be displayed. {% tabs %} {% highlight razor %} diff --git a/blazor/ai-assistview/getting-started.md b/blazor/ai-assistview/getting-started.md index 315c1e6dee..7ac54b019d 100644 --- a/blazor/ai-assistview/getting-started.md +++ b/blazor/ai-assistview/getting-started.md @@ -9,9 +9,9 @@ documentation: ug # Getting Started with Blazor AI AssistView Component -This section briefly explains about how to include [Blazor AI AssistView](https://www.syncfusion.com/blazor-components/blazor-ai-assistview) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to add the Syncfusion [Blazor AI AssistView](https://www.syncfusion.com/blazor-components/blazor-ai-assistview) component to a Blazor WebAssembly application using Visual Studio or Visual Studio Code. -To get started quickly with Blazor AI AssistView component, you can check out this video: +To get started quickly with the Blazor AI AssistView component, you can check out this video: {% youtube "https://www.youtube.com/watch?v=VCr01E-EPHw" %} {% tabcontents %} @@ -28,7 +28,9 @@ You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft T ## Install Syncfusion® Blazor InteractiveChat and Themes NuGet in the App -To add **Blazor AI AssistView** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install `Syncfusion.Blazor.InteractiveChat` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +The **Blazor AI AssistView** component is distributed through the `Syncfusion.Blazor.InteractiveChat` NuGet package. To add it to your app, open the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install `Syncfusion.Blazor.InteractiveChat` and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). + + Alternatively, use the following Package Manager command: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -39,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a complete list of available packages and their corresponding components. {% endtabcontent %} @@ -51,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +A **Blazor WebAssembly App** can be created in Visual Studio Code using either the [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, a WebAssembly application can be created using the following command in the terminal (Ctrl+`): {% tabs %} @@ -92,7 +94,7 @@ N> Syncfusion® Blazor components are availa ## Register Syncfusion® Blazor Service -Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespace. +Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.InteractiveChat` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -103,7 +105,7 @@ Open **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusio {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Next, register the Syncfusion® Blazor service in the **~/Program.cs** file of your Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -125,9 +127,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `` section of the **~/index.html** file. +The theme stylesheet and script can be accessed from the NuGet package through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script within the `` section of the **~/index.html** file. ```html @@ -136,7 +138,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, review the [Adding Script References](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references. ## Add Syncfusion® Blazor AI AssistView component @@ -156,9 +158,9 @@ Add the Syncfusion® Blazor AI AssistView co {% previewsample "https://blazorplayground.syncfusion.com/embed/rZrfCjiMCTRHTGzR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor AI AssistView Component](./images/ai-assistview-component.png)" %} -## Configure suggestions and responses +## Configure Suggestions and Responses -You can use the [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property to add prompt suggestions and the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event to add responses when the prompt matches the specified prompts data otherwise, the default response will be displayed. +The [PromptSuggestions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptSuggestions) property is used to define a list of interactive prompt suggestions in the AI AssistView component. To handle user input, the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event can be used to provide a custom response. If the input does not match any predefined prompts, a default response will be displayed. {% tabs %} {% highlight razor %} diff --git a/blazor/ai-assistview/how-to/integration-with-ai.md b/blazor/ai-assistview/how-to/integration-with-ai.md index b60d0c3fa6..ffe866f901 100644 --- a/blazor/ai-assistview/how-to/integration-with-ai.md +++ b/blazor/ai-assistview/how-to/integration-with-ai.md @@ -1,30 +1,30 @@ --- layout: post -title: Integration of Microsoft.Extensions.AI with the Blazor AI AssistView component | Syncfusion +title: Integration | Blazor AI AssistView component | Syncfusion description: Checkout and learn about Integration with Microsoft.Extensions.AI and Keyboard interaction with Blazor AI AssistView component and more details. platform: Blazor control: AI AssistView documentation: ug --- -# Integration of Microsoft.Extensions.AI with the Blazor AI AssistView component +# Integration of Microsoft.Extensions.AI with AI AssistView component -The Syncfusion AI AssistView component supports integration with the `Microsoft.Extensions.AI` framework, enabling seamless communication with various large language models (LLMs) such as `Azure OpenAI`, `OpenAI`, and more. +The Syncfusion® AI AssistView component supports integration with the `Microsoft.Extensions.AI` framework, enabling seamless communication with various large language models (LLMs) such as `Azure OpenAI`, `OpenAI`, and more. -`The Microsoft.Extensions.AI` simplifies integration with different models, requiring minimal configuration changes depending on the provider. The following example demonstrates integration using `Azure OpenAI`. +`Microsoft.Extensions.AI` simplifies integration with different providers and typically requires only minimal configuration changes based on the selected model. The following example demonstrates integration using `Azure OpenAI`. -N> The Microsoft AI extension libraries are currently in preview, and breaking changes may occur. Ensure that you use compatible versions to avoid integration issues. +N> The Microsoft AI extension libraries are currently in preview and may include breaking changes. Use compatible versions of all referenced packages to prevent integration issues. ### Getting started with AI AssistView -Before integrating `AI AssistView` with `Microsoft.Extensions.AI`, ensure the SfAIAssistView component is rendered by following the appropriate project guideline: +Before integrating `AI AssistView` with `Microsoft.Extensions.AI`, ensure the `SfAIAssistView` component is rendered by following the appropriate project guidelines: * [Blazor Web App](../getting-started-webapp) * [Blazor WASM App](../getting-started) ### Prerequisites for Microsoft.Extensions.AI integration -To add the required NuGet packages, use the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*) search and install the following: +To add the required NuGet packages, use the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), then search for and install the following packages: * `Azure.AI.OpenAI` * `Azure.Identity` @@ -48,7 +48,7 @@ dotnet add package Markdig ### Configure services in Program.cs -Register the `Azure OpenAI` client and Syncfusion AI Assistview component within the Blazor application. +Register the `Azure OpenAI` client and the Syncfusion® AI AssistView component within the Blazor application. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -88,9 +88,9 @@ var app = builder.Build(); ### AI AssistView with IChatClient -The Syncfusion `AI AssistView` component is built to seamlessly integrate with external AI services. When the `IChatClient` is registered via `Microsoft.Extensions.AI`, the component automatically uses it to handle user prompts without any additional configuration. +The Syncfusion® AI AssistView component is designed to integrate seamlessly with external AI services. When an `IChatClient` is registered via Microsoft.Extensions.AI, the component automatically uses it to process user prompts without additional component configuration. -In the following example, the user input is processed using the injected `IChatClient`. The AI model's response is returned in Markdown format which is converted to HTML using the `Markdig` library before rendering in the AI AssistView component. +In the following example, user input is sent to the injected `IChatClient`. The AI model’s response is returned in Markdown, converted to HTML using the `Markdig` library, and rendered in the AI AssistView component. {% tabs %} {% highlight razor %} diff --git a/blazor/ai-assistview/images/assist-stt.png b/blazor/ai-assistview/images/assist-stt.png new file mode 100644 index 0000000000..215df87431 Binary files /dev/null and b/blazor/ai-assistview/images/assist-stt.png differ diff --git a/blazor/ai-assistview/images/assist-tts.png b/blazor/ai-assistview/images/assist-tts.png new file mode 100644 index 0000000000..fa6ff48ba1 Binary files /dev/null and b/blazor/ai-assistview/images/assist-tts.png differ diff --git a/blazor/ai-assistview/images/gemini-integration.png b/blazor/ai-assistview/images/gemini-integration.png new file mode 100644 index 0000000000..baf6321dab Binary files /dev/null and b/blazor/ai-assistview/images/gemini-integration.png differ diff --git a/blazor/ai-assistview/images/openai-integration.png b/blazor/ai-assistview/images/openai-integration.png new file mode 100644 index 0000000000..baf6321dab Binary files /dev/null and b/blazor/ai-assistview/images/openai-integration.png differ diff --git a/blazor/ai-assistview/methods.md b/blazor/ai-assistview/methods.md index de81574535..56ddbf0642 100644 --- a/blazor/ai-assistview/methods.md +++ b/blazor/ai-assistview/methods.md @@ -11,7 +11,7 @@ documentation: ug ## Executing prompt -You can use the [ExecutePromptAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_ExecutePromptAsync_System_String_) method to execute the prompts dynamically in the AI AssistView. It accepts prompts as string values, which triggers the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested) event and performs the callback actions. +Use the [ExecutePromptAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_ExecutePromptAsync_System_String_) method to programmatically execute prompts in the AI AssistView. This method accepts a prompt as a string and raises the [PromptRequested](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.SfAIAssistView.html#Syncfusion_Blazor_InteractiveChat_SfAIAssistView_PromptRequested), where the application can process the request, call an AI provider, and assign the response to the event arguments. ```cshtml @using Syncfusion.Blazor.InteractiveChat diff --git a/blazor/ai-assistview/speech/speech-to-text.md b/blazor/ai-assistview/speech/speech-to-text.md new file mode 100644 index 0000000000..026ab515de --- /dev/null +++ b/blazor/ai-assistview/speech/speech-to-text.md @@ -0,0 +1,273 @@ +--- +layout: post +title: Speech-to-Text with Blazor AI AssistView Component | Syncfusion +description: Checkout and learn about Speech-to-Text configuration with Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App. +platform: Blazor +control: AI AssistView +documentation: ug +--- + +# Speech-to-Text in Blazor AI AssistView + +The Syncfusion Blazor AI AssistView component supports `Speech-to-Text` functionality through the browser's [Web Speech API](https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API), enabling conversion of spoken words into text using the device's microphone. + +## Prerequisites + +Before integrating `Speech-to-Text`, ensure the following: + +1. The Syncfusion AI AssistView component is properly set up in your Blazor application. + - [Blazor Getting Started Guide](../getting-started) + +2. The AI AssistView component is integrated with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai). + - [Integration of Azure OpenAI With Blazor AI AssistView component](../ai-integrations/openai-integration.md) + +## Configure Speech-to-Text + +To enable Speech-to-Text functionality, modify the `Home.razor` file to incorporate the Web Speech API. The [SpeechToText](https://blazor.syncfusion.com/documentation/speech-to-text/getting-started-web-app) component listens for microphone input, transcribes spoken words, and updates the AI AssistView's editable footer with the transcribed text. The transcribed text is then sent as a prompt to the Azure OpenAI service via the AI AssistView component. + +The `speechtotext.js` file handles operations related to the content of the editable footer, such as checking for meaningful input, clearing existing text, and updating the content with the transcribed value. Meanwhile, the `speechtotext.css` file styles the AI AssistView layout and ensures the component remains responsive across different screen sizes and devices. + +{% tabs %} +{% highlight c# tabtitle="razor" %} + +@using Syncfusion.Blazor.InteractiveChat +@using AssistView_OpenAI.Components.Services +@using Syncfusion.Blazor.Navigations +@using Syncfusion.Blazor.Inputs +@using Syncfusion.Blazor.Buttons +@inject AzureOpenAIService OpenAIService +@inject IJSRuntime JSRuntime + + ++ +@code { + private SfAIAssistView assistView; + private string finalResponse { get; set; } + private string AssistViewFooterValue = String.Empty; + private ElementReference EditableDiv; + private string FooterContent = String.Empty; + private string SpeechToTextCssClass = "visible"; + private string ButtonCssClass = String.Empty; + + private async void OnTranscriptChange(TranscriptChangeEventArgs args) + { + AssistViewFooterValue = args.Transcript; + await JSRuntime.InvokeVoidAsync("updateContentEditableDiv", EditableDiv, AssistViewFooterValue); + await InvokeAsync(StateHasChanged); + } + private async Task UpdateContent() + { + FooterContent = await JSRuntime.InvokeAsync+ ++ ++ ++ + ++ + ++ ++ + + ("isFooterContainsValue", EditableDiv); + ToggleVisibility(); + } + private async Task HandleStopRecognition() + { + FooterContent = AssistViewFooterValue; + ToggleVisibility(); + await InvokeAsync(StateHasChanged); + } + private void ToggleVisibility() + { + ButtonCssClass = string.IsNullOrWhiteSpace(FooterContent) ? "" : "visible"; + SpeechToTextCssClass = string.IsNullOrWhiteSpace(FooterContent) ? "visible" : ""; + } + private async Task PromptRequest(AssistViewPromptRequestedEventArgs args) + { + AssistViewFooterValue = String.Empty; + await JSRuntime.InvokeVoidAsync("emptyFooterValue", EditableDiv); + await UpdateContent(); + var lastIdx = assistView.Prompts.Count - 1; + assistView.Prompts[lastIdx].Response = string.Empty; + finalResponse = string.Empty; + try + { + await foreach (var chunk in OpenAIService.GetChatResponseStreamAsync(args.Prompt)) + { + await UpdateResponse(args, chunk); + } + + args.Response = finalResponse; + } + catch (Exception ex) + { + args.Response = $"Error: {ex.Message}"; + } + ToggleVisibility(); + } + + private async Task UpdateResponse(AssistViewPromptRequestedEventArgs args, string response) + { + var lastIdx = assistView.Prompts.Count - 1; + await Task.Delay(30); // Small delay for UI updates + assistView.Prompts[lastIdx].Response += response.Replace("\n", "
"); + finalResponse = assistView.Prompts[lastIdx].Response; + StateHasChanged(); + } + + private async Task SendButtonClicked() + { + await assistView.ExecutePromptAsync(FooterContent); + } + private void ToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args) + { + if (args.Item.IconCss == "e-icons e-refresh") + { + assistView.Prompts.Clear(); + } + } + private async Task OnKeyDown(KeyboardEventArgs e) + { + if (e.Key == "Enter" && !e.ShiftKey) + { + await SendButtonClicked(); + } + } + private async void PromptToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args) + { + if (args.Item.IconCss == "e-icons e-assist-edit") { + AssistViewFooterValue = assistView.Prompts[args.DataIndex].Prompt; + await JSRuntime.InvokeVoidAsync("updateContentEditableDiv", EditableDiv, AssistViewFooterValue); + await UpdateContent(); + } + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="speechtotext.js" %} + +// Checks if the content editable element contains meaningful text and cleans up. +function isFooterContainsValue(elementref) { + if (!elementref.innerText.trim() !== '') { + if ((elementref.innerHTML === '
' || elementref.innerHTML.trim() === '')) { + elementref.innerHTML = ''; + } + } + return elementref.innerText || ""; +} +// Clears the text content of a content editable element. +function emptyFooterValue(elementref) { + if (elementref) { + elementref.innerText = ""; + } +} +// Updates the text content of a content editable element with a specified value. +function updateContentEditableDiv(element, value) { + if (element) { + element.innerText = value; + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="speechtotext.css" %} + +.integration-speechtotext-section { + height: 350px; + width: 650px; + margin: 0 auto; +} + +.integration-speechtotext-section .banner-content .e-listen-icon:before { + font-size: 25px; +} + +.integration-speechtotext-section .e-view-container { + margin: auto; +} + +.integration-speechtotext-section .banner-content { + display: flex; + flex-direction: column; + gap: 10px; + text-align: center; +} + +.integration-speechtotext-section #assistview-sendButton { + width: 40px; + height: 40px; + font-size: 20px; + border: none; + background: none; + cursor: pointer; +} + +.integration-speechtotext-section #speechToText.visible, +.integration-speechtotext-section #assistview-sendButton.visible { + display: inline-block; +} + +.integration-speechtotext-section #speechToText, +.integration-speechtotext-section #assistview-sendButton { + display: none; +} + +@media only screen and (max-width: 750px) { + .integration-speechtotext-section { + width: 100%; + } +} + +.integration-speechtotext-section .e-footer-wrapper { + display: flex; + border: 1px solid #c1c1c1; + padding: 5px 5px 5px 10px; + margin: 5px 5px 0 5px; + border-radius: 30px; +} + +.integration-speechtotext-section .content-editor { + width: 100%; + overflow-y: auto; + font-size: 14px; + min-height: 25px; + max-height: 200px; + padding: 10px; +} + +.integration-speechtotext-section .content-editor[contentEditable=true]:empty:before { + content: attr(placeholder); + color: #6b7280; +} + +.integration-speechtotext-section .option-container { + align-self: flex-end; +} + +{% endhighlight %} + +{% endtabs %} + + + +## See Also + +* [Text-to-Speech](./text-to-speech.md) \ No newline at end of file diff --git a/blazor/ai-assistview/speech/text-to-speech.md b/blazor/ai-assistview/speech/text-to-speech.md new file mode 100644 index 0000000000..4ee445379d --- /dev/null +++ b/blazor/ai-assistview/speech/text-to-speech.md @@ -0,0 +1,255 @@ +--- +layout: post +title: Text-to-Speech with Blazor AI AssistView Component | Syncfusion +description: Checkout and learn about Text-to-Speech configuration with Blazor AI AssistView component in Blazor Server App and Blazor WebAssembly App. +platform: Blazor +control: AI AssistView +documentation: ug +--- + +# Text-to-Speech in Blazor AI AssistView + +The Syncfusion Blazor AI AssistView component supports `Text-to-Speech` (TTS) functionality using the browser's Web Speech API specifically using the [SpeechSynthesisUtterance](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance) interface, to convert AI-generated responses into spoken audio. + +## Prerequisites + +Before integrating `Text-to-Speech`, ensure the following: + +1. The Syncfusion AI AssistView component is properly set up in your Blazor application. + - [Blazor Getting Started Guide](../getting-started) + +2. The AI AssistView component is integrated with [Azure OpenAI](https://microsoft.github.io/PartnerResources/skilling/ai-ml-academy/resources/openai). + - [Integration of Azure OpenAI With Blazor AI AssistView component](../ai-integrations/openai-integration.md) + +## Configure Text-to-Speech + +To enable Text-to-Speech functionality, modify the `Home.razor` file to incorporate the Web Speech API. A custom `Read Aloud` button is added to the response toolbar using the [ResponseToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbarItem.html) tag directive. When clicked, the [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html#Syncfusion_Blazor_InteractiveChat_ResponseToolbar_ItemClicked) event extracts plain text from the generated AI response and uses the browser's SpeechSynthesis API to read it aloud. + +The `texttospeech.js` file handles the core speech logic—extracting text from HTML, initiating speech synthesis, and cancel ongoing speech when needed. Meanwhile, the `texttospeech.css` file styles the AI AssistView layout and ensures the component remains responsive across different screen sizes and devices. + +{% tabs %} +{% highlight c# tabtitle="razor" %} + +@using Syncfusion.Blazor.InteractiveChat +@using AssistView_OpenAI.Components.Services +@using Syncfusion.Blazor.Navigations +@inject AzureOpenAIService OpenAIService +@inject IJSRuntime JSRuntime +@implements IDisposable + +++ +@code { + private SfAIAssistView assistView; + private string finalResponse { get; set; } + private string audioIconCss = "e-icons e-audio"; + private string audioTooltip = "Read Aloud"; + private bool IsSpeaking = false; + // If component class name isn’t Home (file is not Home.razor), update DotNetObjectReference to match the actual component type. + private DotNetObjectReference+ ++ ++ ++ + ++ ++ + + ++ + + + ? dotNetRef; + + protected override void OnInitialized() + { + dotNetRef = DotNetObjectReference.Create(this); + } + + private async Task PromptRequest(AssistViewPromptRequestedEventArgs args) + { + var lastIdx = assistView.Prompts.Count - 1; + assistView.Prompts[lastIdx].Response = string.Empty; + finalResponse = string.Empty; + try + { + await foreach (var chunk in OpenAIService.GetChatResponseStreamAsync(args.Prompt)) + { + await UpdateResponse(args, chunk); + } + + args.Response = finalResponse; + } + catch (Exception ex) + { + args.Response = $"Error: {ex.Message}"; + } + } + + private async Task UpdateResponse(AssistViewPromptRequestedEventArgs args, string response) + { + var lastIdx = assistView.Prompts.Count - 1; + await Task.Delay(30); // Small delay for UI updates + assistView.Prompts[lastIdx].Response += response.Replace("\n", "
"); + finalResponse = assistView.Prompts[lastIdx].Response; + StateHasChanged(); + } + + private void ToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args) + { + if (args.Item.IconCss == "e-icons e-refresh") + { + assistView.Prompts.Clear(); + } + } + + // Handles toolbar item clicks to toggle text-to-speech functionality for AI responses + private async void ResponseToolbarItemClicked(AssistViewToolbarItemClickedEventArgs args) + { + var prompts = assistView.Prompts; + if (prompts.Count > args.DataIndex && prompts[args.DataIndex].Response != null) + { + string responseHtml = prompts[args.DataIndex].Response; + string text = await JSRuntime.InvokeAsync("extractTextFromHtml", responseHtml); + + if (args.Item.IconCss == "e-icons e-audio" || args.Item.IconCss == "e-icons e-assist-stop") + { + if (IsSpeaking) + { + await JSRuntime.InvokeVoidAsync("cancel"); + IsSpeaking = false; + audioIconCss = "e-icons e-audio"; + audioTooltip = "Read Aloud"; + } + else if (!string.IsNullOrEmpty(text)) + { + IsSpeaking = await JSRuntime.InvokeAsync ("speak", text, dotNetRef); + if (IsSpeaking) + { + audioIconCss = "e-icons e-assist-stop"; + audioTooltip = "Stop"; + } + else + { + await JSRuntime.InvokeVoidAsync("console.warn", "Failed to start speech synthesis."); + } + } + await InvokeAsync(StateHasChanged); + } + } + } + + [JSInvokable] + public void OnSpeechEnd() + { + IsSpeaking = false; + audioIconCss = "e-icons e-audio"; + audioTooltip = "Read Aloud"; + StateHasChanged(); + } + + public void Dispose() + { + dotNetRef?.Dispose(); + dotNetRef = null; + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="texttospeech.js" %} + +// Initialize the speechSynthesisInterop object to store speech-related data if it doesn't exist. +window.speechSynthesisInterop = window.speechSynthesisInterop || {}; + +// Converts HTML content to plain text by stripping HTML tags. +function extractTextFromHtml(html) { + const tempDiv = document.createElement('div'); + tempDiv.innerHTML = html; + return (tempDiv.textContent || tempDiv.innerText || '').trim(); +} + +// Initiates text-to-speech synthesis to read the provided text aloud. +function speak(text, dotNetRef) { + // Check if the browser supports the Web Speech API + if ('speechSynthesis' in window) { + // Create a new speech synthesis utterance with the provided text + const utterance = new SpeechSynthesisUtterance(text); + // Call the Blazor OnSpeechEnd method when speech ends + utterance.onend = () => { + dotNetRef.invokeMethodAsync('OnSpeechEnd'); + }; + utterance.onerror = (event) => { + console.error('Speech synthesis error:', event); + dotNetRef.invokeMethodAsync('OnSpeechEnd'); + }; + // Start speaking the utterance + window.speechSynthesis.speak(utterance); + // Store the utterance in the global interop object for cancellation + window.speechSynthesisInterop.currentUtterance = utterance; + return Promise.resolve(true); + } else { + console.warn('Web Speech API is not supported.'); + return Promise.resolve(false); + } +} + +// Cancels any ongoing speech synthesis. +function cancel() { + if ('speechSynthesis' in window) { + // Stop any active speech synthesis + window.speechSynthesis.cancel(); + // Clear the stored utterance reference + window.speechSynthesisInterop.currentUtterance = null; + } +} + +{% endhighlight %} + +{% highlight c# tabtitle="texttospeech.css" %} + +.integration-texttospeech-section { + height: 350px; + width: 650px; + margin: 0 auto; +} + +.integration-texttospeech-section .banner-content .e-audio:before { + font-size: 25px; +} + +.integration-texttospeech-section .e-view-container { + margin: auto; +} + +.integration-texttospeech-section .banner-content { + display: flex; + flex-direction: column; + gap: 10px; + text-align: center; +} +@media only screen and (max-width: 750px) { + .integration-texttospeech-section { + width: 100%; + } +} + +{% endhighlight %} + +{% endtabs %} + + + +## See Also + +* [Speech-to-Text](./speech-to-text.md) diff --git a/blazor/ai-assistview/templates.md b/blazor/ai-assistview/templates.md index 26f7bcacd1..e975852a1d 100644 --- a/blazor/ai-assistview/templates.md +++ b/blazor/ai-assistview/templates.md @@ -9,11 +9,11 @@ documentation: ug # Templates in Blazor AI AssistView component -The AI AssistView provides several template options to customize the banner, prompt, response, suggestions and footer items. +The AI AssistView supports templates to customize the banner, prompt, response, suggestion, and footer areas. ## Banner template -You can use the [BannerTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_BannerTemplate) tag directive to display additional information, such as a welcome note, and more in the AI AssistView. This banner is positioned at the top of the prompt and response conversation area within the AI AssistView. +Use the [BannerTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_BannerTemplate) tag directive to display additional contextual content (for example, a welcome note) at the top of the prompt and response conversation area in the AI AssistView. ```cshtml @@ -66,7 +66,7 @@ You can use the [BannerTemplate](https://help.syncfusion.com/cr/blazor/Syncfusio ## Prompt item template -You can use the [PromptItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_PromptItemTemplate) tag directive to customize the prompt items in the AI AssistView. The template context includes `Prompt`, `ToolbarItems` and `Index` items. +Use the [PromptItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_PromptItemTemplate) tag directive to customize how prompt items are rendered. The template context exposes `Prompt`, `ToolbarItems`, and `Index`. ```cshtml @@ -136,7 +136,7 @@ You can use the [PromptItemTemplate](https://help.syncfusion.com/cr/blazor/Syncf ## Response item template -You can use the [ResponseItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_ResponseItemTemplate) tag directive to customize response items within the AI AssistView. The template context includes the `Prompt`, `Response`, `Index`, `ToolbarItems` and `Output` items. +Use the [ResponseItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_ResponseItemTemplate) tag directive to customize response items. The template context exposes `Prompt`, `Response`, `Index`, `ToolbarItems`, and `Output`. ```cshtml @@ -207,7 +207,7 @@ You can use the [ResponseItemTemplate](https://help.syncfusion.com/cr/blazor/Syn ## Prompt suggestion item template -You can use the [PromptSuggestionItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_PromptSuggestionItemTemplate) tag directive to customize the prompt suggestion items in the AI AssistView. The template context includes the `Index` and `PromptSuggestion`. +Use the [PromptSuggestionItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_PromptSuggestionItemTemplate) tag directive to customize the appearance of prompt suggestions. The template context provides `Index` and `PromptSuggestion`. ```cshtml @using Syncfusion.Blazor.InteractiveChat @@ -269,7 +269,7 @@ You can use the [PromptSuggestionItemTemplate](https://help.syncfusion.com/cr/bl ## Footer template -You can use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_FooterTemplate) tag directive to customize the default footer area and manage prompt request actions in the AI AssistView. This allows users to create unique footers that meet their specific needs. +Use the [FooterTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistView.html#Syncfusion_Blazor_InteractiveChat_AssistView_FooterTemplate) tag directive to customize the default footer area and control prompt submission behavior in the AI AssistView. This enables building tailored input experiences while integrating with prompt request actions. ```cshtml @using Syncfusion.Blazor.InteractiveChat diff --git a/blazor/ai-assistview/toolbar-items.md b/blazor/ai-assistview/toolbar-items.md index c38adfacbb..4f4370b50a 100644 --- a/blazor/ai-assistview/toolbar-items.md +++ b/blazor/ai-assistview/toolbar-items.md @@ -9,7 +9,7 @@ documentation: ug # Toolbar items in Blazor AI AssistView component -You can render the AI AssistView toolbar items by using the [AssistViewToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html), [PromptToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbarItem.html) & [ResponseToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbarItem.html) tag directives. +Toolbar items in the AI AssistView component can be rendered using the [AssistViewToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html), [PromptToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbarItem.html), and [ResponseToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbarItem.html) tag directives. ## Adding header toolbar items @@ -17,11 +17,11 @@ The AI AssistView component allows you to add header toolbar items using the [As ### Items -Items can be constructed with the following built-in command types or item template. +Toolbar items can be configured using the following properties: #### Adding iconCss -You can customize the toolbar icons by using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_IconCss) property. +An Icons can be added to toolbar items using the [IconCss](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_IconCss) property. ```cshtml @@ -50,11 +50,11 @@ You can customize the toolbar icons by using the [IconCss](https://help.syncfusi  -#### Setting item type +#### Set the item type -You can change the toolbar item type by using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Type) property. The `Type` supports three types of items such as `Button`, `Separator`, `Spacer` and `Input`. By default, the type is `Button`. +The [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Type) property is used to specify the type of a toolbar item in the AI AssistView component. Supported item types includes `Button`, `Separator`, `Spacer`, and `Input`. The default value is `Button`. -In the following example, toolbar item type is set as `Button`. +In the following example, the toolbar item type is set to `Button`. ```cshtml @@ -84,9 +84,9 @@ In the following example, toolbar item type is set as `Button`.  -#### Setting text +#### Set the display text -You can use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Text) property to set the text for the toolbar item. +The [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Text) property is used to set the display text for a toolbar item in the AI AssistView component. ```cshtml @@ -117,7 +117,7 @@ You can use the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.I #### Show or hide toolbar item -You can use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Visible) property to specify whether to show or hide the toolbar item. By default, its value is `true`. +The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Visible) property can be used to control the visibility of a toolbar item. Its default value is `true`. ```cshtml @@ -180,9 +180,9 @@ You can use the [Disabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz  -#### Setting tooltip text +#### Set a tooltip -You can use the [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Tooltip) property to specify the tooltip text to be displayed on hovering the toolbar item. +The [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Tooltip) property specifies the text to be displayed when hovering over a toolbar item. ```cshtml @@ -211,7 +211,7 @@ You can use the [Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo #### Setting cssClass -You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_CssClass) property to customize the toolbar item. +The [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_CssClass) property allows the application of a custom CSS class to a toolbar item for styling purposes. ```cshtml @@ -250,13 +250,15 @@ You can use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz  -#### Enabling tab key navigation in toolbar +#### Enable tab key navigation -You can use the [TabIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_TabIndex) property of a Toolbar item to enable tab key navigation for the item. By default, the user can switch between items using the arrow keys, but the `TabIndex` property allows you to switch between items using the `Tab` and `Shift+Tab` keys as well. +The [TabIndex](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_TabIndex) property is used to manage keyboard navigation for toolbar items via the `Tab` key. -To use the `TabIndex` property, set it for each Toolbar item which you want to enable tab key navigation. The `TabIndex` property should be set to a positive integer value. A value of `0` or a negative value will disable tab key navigation for the item. +* A positive `TabIndex` value sets a specific order for tab navigation. +* A `TabIndex` value of `0` allows the item to be focused in its natural order within the document. +* A negative `TabIndex` value removes the item from the tab navigation sequence. -For example, to enable tab key navigation for two Toolbar items you can use the following code: +By default, users navigate between items with arrow keys. Setting `TabIndex` enables navigation with both `Tab` and `Shift+Tab`. ```cshtml @@ -296,7 +298,7 @@ If you set the `TabIndex` value to 0 for all Toolbar items, tab key navigation w #### Setting template -You can use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Template) tag directive to add custom toolbar item in the AI AssistView component. Template property can be given as the `HTML element` or `RenderFragment`. +The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbarItem.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbarItem_Template) tag directive enables rendering of a custom component or HTML element as a toolbar item. ```cshtml @@ -341,9 +343,9 @@ You can use the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz  -### Item clicked +### Handle item clicks -You can define [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbar.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbar_ItemClicked) event in the [AssistViewToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbar.html) tag directive which will be triggered when the header toolbar item is clicked. +Use the [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbar.html#Syncfusion_Blazor_InteractiveChat_AssistViewToolbar_ItemClicked) event on the [AssistViewToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.AssistViewToolbar.html) tag directive to handle click actions on header toolbar items. ```cshtml @@ -377,7 +379,7 @@ You can define [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl ### Prompt -By default, the prompt toolbar renders the built-in items such as `edit` and `copy` items. These allow users to edit the prompt text or copy as needed. +By default, the prompt toolbar includes built-in `edit` and `copy` items, allowing users to modify or copy the prompt text. In the following example, AI AssistView component rendered with built-in toolbar items such as `edit` and `copy` items. @@ -407,9 +409,9 @@ In the following example, AI AssistView component rendered with built-in toolbar  -#### Setting width +#### Set the width -You can use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html#Syncfusion_Blazor_InteractiveChat_PromptToolbar_Width) property using [PromptToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html) tag directive to set the width of the prompt toolbar in the AI AssistView. +The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html#Syncfusion_Blazor_InteractiveChat_PromptToolbar_Width) property in the [PromptToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html) tag directive is used to set the width of the prompt toolbar. ```cshtml @@ -437,9 +439,9 @@ You can use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -#### Item clicked +#### Handle item clicks -You can define [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html#Syncfusion_Blazor_InteractiveChat_PromptToolbar_ItemClicked) event in the [PromptToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html) tag directive which will be triggered when the prompt toolbar item is clicked. +Use the [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html#Syncfusion_Blazor_InteractiveChat_PromptToolbar_ItemClicked) event on the [PromptToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html) tag directive to handle clicks on prompt toolbar items. ```cshtml @@ -473,7 +475,7 @@ You can define [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl ### Response -By default, the response toolbar renders the built-in items like `copy`, `like`, and `dislike` items to perform response copy and perform rating actions. +By default, the response toolbar includes `copy`, `like`, and `dislike` items to let users copy the response or provide feedback. In the following example, AI AssistView renders with built-in toolbar items. @@ -503,9 +505,9 @@ In the following example, AI AssistView renders with built-in toolbar items.  -#### Setting width +#### Set the width -You can use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html#Syncfusion_Blazor_InteractiveChat_ResponseToolbar_Width) property using [ResponseToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html) tag directive to set the width of the response toolbar in the AI AssistView. +The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html#Syncfusion_Blazor_InteractiveChat_ResponseToolbar_Width) property in the [ResponseToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html) tag directive is used to set the width of the response toolbar. ```cshtml @@ -533,9 +535,9 @@ You can use the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -#### Item clicked +#### Handle item clicks -You can define [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html#Syncfusion_Blazor_InteractiveChat_ResponseToolbar_ItemClicked) event in the [ResponseToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html) tag directive which will be triggered when the response toolbar item is clicked. +Use the [ItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html#Syncfusion_Blazor_InteractiveChat_ResponseToolbar_ItemClicked) event on the [ResponseToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html) tag directive to handle clicks on response toolbar items. ```cshtml @@ -573,9 +575,9 @@ You can also add custom toolbar items in the AI AssistView by using the [AssistV ### Prompt -You can use the [PromptToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbarItem.html) tag directive within the [PromptToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html) to add custom items for the prompt toolbar in the AI AssistView. +Use the [PromptToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbarItem.html) tag directive inside the [PromptToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.PromptToolbar.html) to add custom items to the prompt toolbar. -> To know more about the items, please refer to the [Items](./toolbar-items#items) section. +For more information on item configuration, please refer to the [Items](./toolbar-items#items) properties section. ```cshtml @@ -609,9 +611,9 @@ You can use the [PromptToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfu ### Response -You can use the [ResponseToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbarItem.html) tag directive within the [ResponseToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html) to add custom response toolbar in the AI AssistView. +Use the [ResponseToolbarItem](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbarItem.html) tag directive inside the [ResponseToolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.InteractiveChat.ResponseToolbar.html) to add custom items to the response toolbar. -> To know more about the items, please refer to the [Items](./toolbar-items#items) section. +For more information on item configuration, please refer to the [Items](./toolbar-items#items) section. ```cshtml diff --git a/blazor/ai-coding-assistants/copilot-extension.md b/blazor/ai-coding-assistants/copilot-extension.md new file mode 100644 index 0000000000..623ec76ed3 --- /dev/null +++ b/blazor/ai-coding-assistants/copilot-extension.md @@ -0,0 +1,99 @@ +--- +layout: post +title: SyncfusionBlazor GitHub Copilot Extension | Syncfusion +description: Learn how the SyncfusionBlazor GitHub Copilot extension enhances your Blazor development with intelligent code suggestions, best practices, contextual guidance. +control: Getting started with SyncfusionBlazor copilot extension +platform: Blazor +documentation: ug +--- + +# SyncfusionBlazor GitHub Copilot Extension + +## Overview + +The [SyncfusionBlazor GitHub Copilot Extension](https://github.com/apps/syncfusionblazor) provides intelligent assistance for developers using Syncfusion's Blazor component libraries. This extension seamlessly integrates with GitHub Copilot to enhance your development workflow. + +### What is a GitHub Copilot Extension? + +A GitHub Copilot extension enhances Copilot's capabilities by integrating specialized, third-party tools and knowledge directly into the chat interface. It allows Copilot to access specific data, APIs, and services—such as a component vendor's official documentation—to provide more accurate, context-aware, and relevant assistance for a developer's specific technology stack. + +### Key Benefits + +* Smart code suggestions for Syncfusion® Blazor components. +* Best practice guidance for component usage and configuration. +* Context-aware troubleshooting for complex scenarios. + +## Prerequisites + +Before using this extension, ensure you have: + +* [Github copilot](https://github.com/copilot/) +* An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +* An active [API KEY](https://syncfusion.com/account/api-key) + +## Unlimited Access + +Syncfusion® offers unlimited access to this copilot extension. There are no restrictions on: + +* Number of requests +* Components usage +* Query types +* Usage duration + +This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. + +## Installation + +* Visit the [SyncfusionBlazor GitHub App](https://github.com/apps/syncfusionblazor) and click **Install**. +* Grant the required read-access permissions to allow the extension to function with Copilot chat. +* Click **Install & Authorize**. +* Sign in with your Syncfusion® account to authenticate and link the extension to your GitHub account. The API key is automatically retrieved upon successful authentication. +* Restart your development environment (e.g., VS Code or GitHub Copilot) and start a new Copilot chat session to use the extension. + +## Getting Started + +* Open the chat panel in a supported environment like [GitHub Copilot](https://github.com/copilot) or VSCode Copilot. +* Type `@` in the chat prompt and select the `SyncfusionBlazor` from the list of extensions. +* Enter a query related to Syncfusion® Blazor components (e.g., configuration, implementation, or troubleshooting). + +### Mode availability in VS code + +Syncfusion® Copilot extension provide full access to all AI interaction modes — Ask, Edit, and Agent — when integrated with VS code. + +### Best Practices for Effective Usage + +1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion Blazor Grid with paging and filtering?"). +2. `Provide context`: Include details about your use case for more targeted solutions. +3. `Use descriptive queries`: Avoid vague questions that lack necessary context. +4. `Start fresh for new topics`: Begin a new chat session when switching components or topics. + +## Example Queries + +Here are some examples of queries you can use with the Syncfusion® Copilot extensions: + +* "@SyncfusionBlazor Create a Syncfusion data grid with paging and sorting" +* "@SyncfusionBlazor How do I implement a responsive Syncfusion chart with tooltips?" +* "@SyncfusionBlazor Show me a Syncfusion Kanban board implementation with drag and drop" + +## Uninstallation + +To remove the extension from your account: + +* Go to [GitHub App Installations](https://github.com/settings/installations/). +* Locate the `SyncfusionBlazor` extension in the list. +* Click `Configure`, then select `Uninstall`. + +## Support + +* [Support tickets](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support +* [Community forum](https://www.syncfusion.com/forums/blazor-components) +* [Request feature or report bug](https://www.syncfusion.com/feedback/blazor-components) +* Live chat + +## See also + +* [Syncfusion® Blazor Documentation](https://blazor.syncfusion.com/documentation) +* [Github Copilot Documentation](https://docs.github.com/en/copilot) diff --git a/blazor/ai-coding-assistants/mcp-server.md b/blazor/ai-coding-assistants/mcp-server.md new file mode 100644 index 0000000000..1afa44cafe --- /dev/null +++ b/blazor/ai-coding-assistants/mcp-server.md @@ -0,0 +1,212 @@ +--- +layout: post +title: SyncfusionBlazorAssistant MCP Server | Syncfusion +description: Learn how to configure and use SyncfusionBlazorAssistant MCP server for intelligent code generation, documentation, and troubleshooting in Blazor apps. +control: Getting started with SyncfusionBlazorAssistant MCP Server +platform: Blazor +documentation: ug +--- + +# SyncfusionBlazorAssistant MCP Server + +## Overview + +The [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) is a specialized [Model Context Protocol (MCP)](https://modelcontextprotocol.io/introduction) server that provides intelligent assistance for developers using Syncfusion's Blazor component libraries. This tool seamlessly integrates with compatible [MCP clients](https://modelcontextprotocol.io/clients) to enhance your development workflow when building Blazor applications with Syncfusion® components. + +### Key Benefits + +* Intelligent code generation for Syncfusion® Blazor components. +* Detailed component documentation and usage examples. +* Troubleshooting assistance for common integration challenges. + +## Prerequisites + +Before using [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant), ensure you have: + +* Required [node](https://nodejs.org/en/) version >= 18 +* A [compatible MCP client](https://modelcontextprotocol.io/clients) (VS Code with GitHub Copilot, [Syncfusion® CodeStudio](https://www.syncfusion.com/code-studio/), etc.) +* An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +* An active [API KEY](https://syncfusion.com/account/api-key) + +## Unlimited Access + +Syncfusion® offers unlimited access to this MCP server. There are no restrictions on: + +* Number of requests +* Components usage +* Query types +* Usage duration + +This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. + +## Installation and setup + +Before you can invoke the `SyncfusionBlazorAssistant` MCP server, you need to configure your MCP client with these core settings. The **Generic MCP Server Settings** shown below are identical across all clients: + +### Generic MCP Server Settings + +- **npm package name**: `@syncfusion/blazor-assistant` +- **Type**: stdio (standard input/output transport) +- **Command**: npx +- **Arguments**: -y +- **Server name**: syncfusionBlazorAssistant + +You need to add your [Syncfusion API key](https://syncfusion.com/account/api-key) as an env parameter in the configuration file: + +```json +"env": { + "Syncfusion_API_Key": "YOUR_API_KEY" +} +``` + +[SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) can be configured in various MCP clients. Below are setup instructions for popular environment: + +### Syncfusion® Code Studio + +* In [Code Studio](https://www.syncfusion.com/code-studio/), open MCP Marketplace, find `SyncfusionBlazorAssistant`, and click Install. +* When prompted, enter your [Syncfusion API key](https://syncfusion.com/account/api-key) and click Submit to register. +* It installs locally on your machine and appears in the Installed list. +* The server is ready for use in Code Studio. + +For additional details, see the Code Studio [documentation](https://help.syncfusion.com/code-studio/reference/configure-properties/mcp/marketplace). + +### VS Code (GitHub Copilot MCP) + +1. To configure an MCP server for a specific workspace, you can create a `.vscode/mcp.json` file in your workspace folder. + +```json +{ + "servers": { + "syncfusion-blazor-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/blazor-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +2. After updating the configuration in settings.json, you'll notice a "Start" option at the top of the config. This allows you to easily start the [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) server directly from the settings interface without additional commands. + +3. Confirm that [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant) is being used (this does not happen automatically). Look for a statement in the output, which is similar to: + * `SyncfusionBlazorAssistant is running...` (in VS Code) + +### Cursor + +To configure an MCP server for a specific workspace, you can create a .cursor/mcp.json file in your workspace folder. + +```json +{ + "mcpServers": { + "syncfusion-blazor-assistant": { + "type": "stdio", + "command": "npx", + "args": [ + "-y", + "@syncfusion/blazor-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +### JetBrains IDEs + +1. Go to Settings -> Tools -> AI Assistant -> Model Context Protocol (MCP). +2. Click + Add to add a new MCP server configuration. +3. In the New MCP Server dialog, switch the dropdown as `As JSON` and add the following config: + +```json +{ + "mcpServers": { + "syncfusion-blazor-assistant": { + "command": "npx", + "args": [ + "-y", + "@syncfusion/blazor-assistant@latest" + ], + "env": { + "Syncfusion_API_Key": "YOUR_API_KEY" + } + } + } +} +``` + +4. Click OK and Apply. + +> For more detailed information about configuring MCP servers in various clients, refer to the official documentations. + * [VS Code](https://code.visualstudio.com/docs/copilot/chat/mcp-servers#_add-an-mcp-server) + * [Cursor](https://docs.cursor.com/en/context/mcp#using-mcp-json) + * [JetBrains](https://www.jetbrains.com/help/ai-assistant/mcp.html#connect-to-an-mcp-server) + * [Windsurf](https://docs.windsurf.com/windsurf/cascade/mcp#mcp-config-json) + +## Usage + +To activate the SyncfusionBlazorAssistant MCP server: + +1. Start your prompt with one of the following: + * 'SyncfusionBlazorAssistant' + * '/syncfusion-blazor-assistant' + * '/syncfusion-blazor' + * '@syncfusion-blazor' + * '@ask_syncfusion_blazor' + * 'ej2-blazor' + + In VS Code, you can also use #SyncfusionBlazorAssistant to explicitly invoke the MCP server. + +2. Grant the SyncfusionBlazorAssistant MCP server a permission to run for this session, workspace, or always. +3. For best results, start a new chat for each new topic to maintain clean context. + +### Mode availability + +Syncfusion® MCP Servers provide full access to all AI interaction modes — Ask/Chat, Edit, and Agent — across supported MCP clients. + +### Best Practices for Effective Usage + +1. `Be specific`: Mention both platform and component (e.g., "How do I create a Syncfusion Blazor Grid with paging and filtering?"). +2. `Provide context`: Include details about your use case for more targeted solutions. +3. `Use descriptive queries`: Avoid vague questions that lack necessary context. +4. `Start fresh for new topics`: Begin a new chat session when switching components or topics. + +### Example Queries + +Here are some effective ways to use [SyncfusionBlazorAssistant](https://www.npmjs.com/package/@syncfusion/blazor-assistant): + + * "Create a Syncfusion Blazor Grid component with paging, sorting and filtering" + * "How do I implement data binding with Syncfusion Blazor scheduler?" + * "Show me how to create a dashboard with multiple Syncfusion components" + +## Troubleshooting + +If you encounter issues: + + * Verify your API key is correctly configured. + * Ensure the MCP server is enabled in your client's tools selection. + * Check that you're using a compatible MCP client version. + * Try restarting your development environment. + +## Support + +Product support is available through the following mediums. + +* [Support ticket](https://support.syncfusion.com/support/tickets/create) - Guaranteed Response in 24 hours \| Unlimited tickets \| Holiday support +* [Community forum](https://www.syncfusion.com/forums/blazor-components) +* [Request feature or report bug](https://www.syncfusion.com/feedback/blazor-components) +* Live chat + +## See also + +* [Syncfusion Blazor Documentation](https://blazor.syncfusion.com/documentation) diff --git a/blazor/ai-coding-assistants/overview.md b/blazor/ai-coding-assistants/overview.md new file mode 100644 index 0000000000..73905afcb7 --- /dev/null +++ b/blazor/ai-coding-assistants/overview.md @@ -0,0 +1,72 @@ +--- +layout: post +title: Syncfusion AI Coding Assistants Overview | Syncfusion +description: Learn how Syncfusion AI Coding Assistants boost Blazor productivity by generating accurate code snippets, configuration examples, and contextual guidance. +control: Syncfusion AI Coding Assistants Overview +platform: Blazor +documentation: ug +--- + +# Syncfusion® AI Coding Assistants Overview + +The **Syncfusion® AI Coding Assistants** are designed to streamline your development workflow when building Blazor applications with Syncfusion® components. It uses contextual knowledge of the Syncfusion® component library to generate accurate code snippets, configuration examples, and guided explanations—minimizing documentation searches and maximizing productivity. + +AI Coding Assistants: + +* **The SyncfusionBlazorAssistant MCP Server** + Processes advanced prompts and returns tailored code suggestions via [MCP-compatible clients](https://modelcontextprotocol.io/clients). +* **SyncfusionBlazor GitHub Copilot Extension** + Augments GitHub Copilot with Syncfusion-specific support for rapid component setup and contextual guidance in the IDE. + +## Getting Started + +To use the AI Coding Assistants, you need: + +* A [Syncfusion® user account](https://www.syncfusion.com/account) +* An active Syncfusion® license (any of the following): + - [Commercial License](https://www.syncfusion.com/sales/unlimitedlicense) + - [Free Community License](https://www.syncfusion.com/products/communitylicense) + - [Free Trial](https://www.syncfusion.com/account/manage-trials/start-trials) +* An active [API KEY](https://syncfusion.com/account/api-key) +* A [Blazor application that includes SyncfusionBlazor](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) + +## Unlimited Access + +Syncfusion® offers unlimited access to the AI Coding Assistants, with no limitations on: + +* Number of requests +* Components usage +* Query types +* Usage duration + +This ensures users can fully leverage Syncfusion® components to enhance their development experience without limitations. + +## Best Practices + +* Initial Setup: Use the tools to quickly add and configure Syncfusion® components in your Blazor application. +* Feature Tuning: Enable or disable component features through prompt-based configuration for tailored functionality. +* Data Binding: Generate sample data for testing and prototyping. Avoid using sensitive or production data to ensure security. +* Step-by-step explanations: Use annotated code to understand component behavior. Note that the level of detail may vary depending on the tool, mode, and AI model used. Refer to the [Syncfusion® Blazor Documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) for in-depth information. +* Troubleshooting: Resolve common issues with AI-generated suggestions. For complex problems, refer to [documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) or [support](https://support.syncfusion.com/support/tickets/create). + +> Always check AI-generated content and code for accuracy before using it. + +## Recommendations + +* Session Management: Start new sessions when switching tasks to ensure prompt relevance and maintain content focus. +* Model Compatibility: For optimal performance, use the tools with advanced AI models such as GPT-5 or Claude Sonnet 4. + +## Privacy & Data Handling + +The Syncfusion® AI Coding Assistants is designed with privacy in mind: + +* The tools do not access your project files or workspace directly. +* User prompts are not stored by any of the tools or used for any other purpose. +* Prompts are not used to train Syncfusion® models. +* The assistant generates context, while the final output is handled by your selected AI model. + +## See also + +* Add the [SyncfusionBlazor MCP Server](./mcp-server.md) to an MCP-enabled client +* Install the [SyncfusionBlazor GitHub Copilot Extension](./copilot-extension.md) +* [Syncfusion® Blazor Documentation](https://blazor.syncfusion.com/documentation) diff --git a/blazor/ai/custom-ai-service.md b/blazor/ai/custom-ai-service.md deleted file mode 100644 index 7b0993f03e..0000000000 --- a/blazor/ai/custom-ai-service.md +++ /dev/null @@ -1,98 +0,0 @@ ---- -layout: post -title: Using Custom AI Services with Syncfusion Blazor AI | Syncfusion -description: Learn how to set up and use Syncfusion.Blazor.AI with custom AI providers, including configuration, integration steps, and practical examples. -platform: Blazor -control: AI Integration -documentation: ug ---- - -# Custom AI Service Integration with Syncfusion Blazor AI - -This section explains how to configure and use the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package with a **custom AI service** by implementing the `IChatInferenceService` interface, using DeepSeek as an example. This extensibility allows you to integrate DeepSeek or any custom AI provider into your Blazor applications, enhancing Syncfusion Blazor components with tailored AI functionalities. - -## Prerequisites - -Before you begin integrating a custom AI service with your Blazor application, ensure you have: - -* Installed the [Syncfusion.Blazor.AI](https://www.nuget.org/packages/Syncfusion.Blazor.AI) package via NuGet -{% tabs %} -{% highlight C# tabtitle="Package Manager" %} - -Install-Package Syncfusion.Blazor.AI -Version {{ site.releaseversion }} - -{% endhighlight %} -{% endtabs %} -* Obtained a DeepSeek API key from the [DeepSeek platform](https://platform.deepseek.com) (or your preferred AI provider) -* Met the [System Requirements](https://blazor.syncfusion.com/documentation/system-requirements) for Syncfusion Blazor components - -## Configuration Steps -To use DeepSeek as a custom AI service, implement the `IChatInferenceService` interface and configure it in your `Program.cs` file using `AIServiceCredentials` to provide the API key, deployment name, and endpoint. - -### Implement the Custom AI Service - Create a class that implements the `IChatInferenceService` interface for DeepSeek. The implementation below uses the provided DeepSeek code, modified to utilize `AIServiceCredentials` from `Program.cs`. - -```csharp -using Microsoft.Extensions.AI; -using Syncfusion.Blazor.AI; -using System.Net.Http; -using System.Text; -using System.Text.Json; -using System.Threading.Tasks; - -public class DeepSeekAIService : IChatInferenceService -{ - private readonly HttpClient _httpClient; - private readonly AIServiceCredentials _credentials; - - public DeepSeekAIService(HttpClient httpClient, AIServiceCredentials credentials) - { - _httpClient = httpClient; - _credentials = credentials; - } - - public async Task GenerateResponseAsync(ChatParameters options) - { - var requestBody = new - { - model = _credentials.DeploymentName ?? "deepseek-chat", // Use deployment name from credentials - messages = options.Messages.Select(m => new { role = m.Role.ToString().ToLower(), content = m.Content }).ToArray(), - temperature = options.Temperature, - max_tokens = options.MaxTokens - }; - - var requestContent = new StringContent(JsonSerializer.Serialize(requestBody), Encoding.UTF8, "application/json"); - if (!string.IsNullOrEmpty(_credentials.ApiKey)) - { - _httpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", _credentials.ApiKey); - } - - var response = await _httpClient.PostAsync(_credentials.Endpoint?.ToString() ?? "https://api.deepseek.com/v1/chat/completions", requestContent); - response.EnsureSuccessStatusCode(); - - var responseJson = await response.Content.ReadAsStringAsync(); - using var doc = JsonDocument.Parse(responseJson); - return doc.RootElement.GetProperty("choices")[0].GetProperty("message").GetProperty("content").GetString(); - } -} -``` - -### Register the Custom AI Service - - Open your Blazor application's `Program.cs` and configure the DeepSeek AI service with `AIServiceCredentials`. - -```csharp -using Syncfusion.Blazor.AI; - -builder.Services.AddSingleton(new AIServiceCredentials -{ - ApiKey = "your-deepseek-api-key", // Replace with your DeepSeek API key - DeploymentName = "deepseek-chat", // Specify the model (e.g., "deepseek-chat", "deepseek-coder") -}); - -// Register the custom inference backend -builder.Services.AddSingleton `) of the AppBar. This is particularly useful for adding ARIA attributes for accessibility, custom `data-` attributes, or IDs. + +In the example below, an `aria-label` attribute is added to the AppBar to provide an accessible name for screen reader users. ```cshtml @using Syncfusion.Blazor.Navigations @@ -62,4 +72,4 @@ It can be used for additional inline attributes by specifying as inline attribut``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVgWBizBhGaNVBq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVgWBizBhGaNVBq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} diff --git a/blazor/appearance/themes.md b/blazor/appearance/themes.md index 26c50d4e70..b1ce041477 100644 --- a/blazor/appearance/themes.md +++ b/blazor/appearance/themes.md @@ -36,11 +36,14 @@ The following list of themes are included in the Syncfusion® Blazor Bootstrap Theme is designed based on Bootstrap v3, whereas the Bootsrap4 theme is designed based on Bootstrap v4. +The Syncfusion® Blazor Bootstrap Theme is designed based on Bootstrap v3. + +N> The Syncfusion® Bootstrap4 theme is designed based on Bootstrap v4, specifically version 4.3. While it is built on v4.3, it remains compatible with Bootstrap v4.6 applications. +There are no significant differences between Bootstrap v4.3 and v4.6 that affect our components. Therefore, using Bootstrap v4.3 will not impact functionality, as it performs equivalently to Bootstrap v4.6. ## Optimized CSS Themes -Syncfusion Blazor themes are available in two variants to help optimize application's performance: +Syncfusion® Blazor themes are available in two variants to help optimize application's performance: **Standard Theme Files:** @@ -58,7 +61,7 @@ For improved performance, we offer optimized lite theme files (-lite * Choose the lite theme variant when your application doesn't require the bigger size mode. To implement a lite theme, simply reference the -lite.css version instead of the standard theme file in your application. -Comparison of the Syncfusion Blazor Button Component in **normal** and **bigger** size modes: +Comparison of the Syncfusion® Blazor Button Component in **normal** and **bigger** size modes:  diff --git a/blazor/autocomplete/getting-started-with-web-app.md b/blazor/autocomplete/getting-started-with-web-app.md index f56ec61746..8b72ada1a3 100644 --- a/blazor/autocomplete/getting-started-with-web-app.md +++ b/blazor/autocomplete/getting-started-with-web-app.md @@ -311,5 +311,5 @@ By default, suggestion list width automatically adjusts according to the AutoCom ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) \ No newline at end of file +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/autocomplete/getting-started.md b/blazor/autocomplete/getting-started.md index d804fd0931..18f2aafb77 100644 --- a/blazor/autocomplete/getting-started.md +++ b/blazor/autocomplete/getting-started.md @@ -240,5 +240,5 @@ By default, suggestion list width automatically adjusts according to the AutoCom ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) \ No newline at end of file +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](../getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](../getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/avatar/getting-started-with-web-app.md b/blazor/avatar/getting-started-with-web-app.md index 21365d1dd1..ee58731d2f 100644 --- a/blazor/avatar/getting-started-with-web-app.md +++ b/blazor/avatar/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Avatar Component in Blazor Web App -This section briefly explains about how to include [Blazor Avatar](https://blazor.syncfusion.com/documentation/avatar/getting-started) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section provides a brief explanation about how to include the Syncfusion [Blazor Avatar](https://blazor.syncfusion.com/documentation/avatar/getting-started) component in your Blazor Web App project using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. {% tabcontents %} @@ -29,7 +29,7 @@ You need to configure the corresponding [Interactive render mode](https://learn. To add **Blazor Avatar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If you utilize `WebAssembly or Auto` render modes in the Blazor Web App, you need to install Syncfusion® Blazor components NuGet packages within the client project. Alternatively, you can utilize the following package manager command to achieve the same. @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. Remember to replace `{{ site.releaseversion }}` with your specific Syncfusion Blazor version (e.g., `24.1.41`). {% endtabcontent %} @@ -77,7 +77,7 @@ If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need t * Press Ctrl+` to open the integrated terminal in Visual Studio Code. * Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) NuGet package and ensure all dependencies are installed. +* Run the following command to install a [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages, and ensure all dependencies are installed. {% tabs %} @@ -90,7 +90,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. Remember to replace `{{ site.releaseversion }}` with your specific Syncfusion Blazor version (e.g., `24.1.41`). {% endtabcontent %} @@ -120,7 +120,7 @@ Add the Syncfusion® Blazor Avatar component | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. In this case, it does not need to be specified in individual page components. {% tabs %} {% highlight razor %} diff --git a/blazor/avatar/getting-started.md b/blazor/avatar/getting-started.md index 979a13041a..1398a818d4 100644 --- a/blazor/avatar/getting-started.md +++ b/blazor/avatar/getting-started.md @@ -11,9 +11,9 @@ documentation: ug # Getting Started with Blazor Avatar Component -This section briefly explains about how to include [Blazor Avatar](https://blazor.syncfusion.com/documentation/avatar/getting-started) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section provides a brief explanation on how to include the Syncfusion [Blazor Avatar](https://blazor.syncfusion.com/documentation/avatar/getting-started) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. -To get start quickly with Avatar component using Blazor, you can check on this video: +To get started quickly with the Avatar component using Blazor, you can check out this video tutorial: {% youtube "youtube:https://www.youtube.com/watch?v=IYZEZUQd6JE"%} @@ -32,7 +32,8 @@ You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft T ## Install Syncfusion® Blazor Themes NuGet in the App -To add **Blazor Avatar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add **Blazor Avatar** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +Alternatively, you can utilize the following package manager command in the Package Manager Console: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -42,7 +43,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details. Remember to replace `{{ site.releaseversion }}` with your specific Syncfusion Blazor version (e.g., `24.1.41`). {% endtabcontent %} @@ -56,7 +57,7 @@ N> Syncfusion® Blazor components are availa You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, a WebAssembly application can be created by executing the following command in the terminal: (Ctrl+`) {% tabs %} @@ -86,7 +87,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) for available NuGet packages list with component details. Remember to replace `{{ site.releaseversion }}` with your specific Syncfusion Blazor version (e.g., `24.1.41`). {% endtabcontent %} @@ -106,7 +107,8 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Blazor Avatar component -Add the Syncfusion® Blazor Avatar component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Avatar component to your **~/Pages/Index.razor** file. Its appearance can be customized using properties such as `Size`, and content can be provided through `ChildContent` or `ContentTemplate`. + {% tabs %} {% highlight razor %} @@ -135,6 +137,6 @@ Add the Syncfusion® Blazor Avatar component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Avatar component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This action will render the Syncfusion® Blazor Avatar components in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/LNreZyVMASlmWFyr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "" %} diff --git a/blazor/badge/getting-started-with-web-app.md b/blazor/badge/getting-started-with-web-app.md index 5471546568..51946ea2ed 100644 --- a/blazor/badge/getting-started-with-web-app.md +++ b/blazor/badge/getting-started-with-web-app.md @@ -3,13 +3,13 @@ layout: post title: Getting Started with Syncfusion Badge Component in Blazor Web App description: Checkout and learn about the documentation for getting started with Blazor Badge Component in Blazor Web App. platform: Blazor -component: Badge +control: Badge documentation: ug --- # Getting Started with Blazor Badge Component in Blazor Web App -This section briefly explains about how to include [`Blazor Badge`](https://blazor.syncfusion.com/demos/badge/defaultfunctionalities?theme=bootstrap5) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section briefly explains how to include the [Blazor Badge](https://blazor.syncfusion.com/demos/badge/defaultfunctionalities?theme=bootstrap5) in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [`Blazor Badge`](https://blaz ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a Blazor Web App using Visual Studio 2022 via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) when creating the app. ## Install Syncfusion® Blazor Themes NuGet in the App -To add **Blazor Badge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the Blazor Badge to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for, and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If you use `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install the Syncfusion® Blazor component NuGet packages in the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, you can use the following Package Manager command: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a Blazor Web App using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the appropriate [interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) when creating the app. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -69,15 +69,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information on creating a Blazor Web App with various interactive modes and locations, refer to this [getting started guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If you use `WebAssembly` or `Auto` render modes in the Blazor Web App, you need to install the Syncfusion® Blazor component NuGet packages in the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.DropDowns](https://www.nuget.org/packages/Syncfusion.Blazor.DropDowns) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project directory where the `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes): {% tabs %} @@ -90,7 +90,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -98,7 +98,7 @@ N> Syncfusion® Blazor components are availa ## Add stylesheet -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section in the **~/Components/App.razor** file as shown below: +The theme stylesheet can be referenced via [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section of the `~/Components/App.razor` file as shown below. If the app uses the `HeadOutlet` component, you can alternatively add the link using ` ` in a layout or page. ```html @@ -107,11 +107,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. +N> See [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) for other ways to reference themes, including [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator). ## Add Syncfusion® Blazor Badge component -Add the Syncfusion® Blazor Badge component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add a badge to a page in `~/Pages/YourPage.razor`. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~/Pages/YourPage.razor` component as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -120,12 +120,12 @@ Add the Syncfusion® Blazor Badge component | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the interactivity location is set to `Global` and the render mode is `Auto`, `WebAssembly`, or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} -@* desired render mode define here *@ +@* Define the desired render mode here *@ @rendermode InteractiveAuto {% endhighlight %} @@ -139,8 +139,8 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Badge component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Badge in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BthfshXvfQkIZbeA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Badge Component](images/blazor-badge-component.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Badge/BlazorWebApp). \ No newline at end of file +N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Badge/BlazorWebApp). \ No newline at end of file diff --git a/blazor/badge/getting-started.md b/blazor/badge/getting-started.md index 899c08a018..ad5989554a 100644 --- a/blazor/badge/getting-started.md +++ b/blazor/badge/getting-started.md @@ -11,9 +11,9 @@ documentation: ug # Getting Started with Blazor Badge Component -This section briefly explains about how to include [`Blazor Badge`](https://blazor.syncfusion.com/demos/badge/defaultfunctionalities?theme=bootstrap5) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section briefly explains how to include the [Blazor Badge](https://blazor.syncfusion.com/demos/badge/defaultfunctionalities?theme=bootstrap5) component in a Blazor WebAssembly app using Visual Studio and Visual Studio Code. -To get start quickly with Blazor Badge, you can check on this video: +To get started quickly with the Blazor Badge component, check out this video: {% youtube "https://www.youtube.com/watch?v=CNkXfjZDGUQ" %} @@ -27,11 +27,11 @@ To get start quickly with Blazor Badge, you can check on this video: ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a Blazor WebAssembly app using Visual Studio via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor Themes NuGet in the App -To add **Blazor Badge** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the Blazor Badge component to the app, open the NuGet Package Manager in Visual Studio (Tools → NuGet Package Manager → Manage NuGet Packages for Solution), search for, and install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can use the following Package Manager command: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -41,7 +41,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} @@ -53,9 +53,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a Blazor WebAssembly app using Visual Studio Code via [Microsoft templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following command in the terminal (Ctrl+`). {% tabs %} @@ -71,8 +71,8 @@ cd BlazorApp ## Install Syncfusion® Blazor Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure you are in the project root directory where your `.csproj` file is located. +* Run the following commands to install [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) and ensure all dependencies are installed. {% tabs %} @@ -85,15 +85,15 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the list of available packages and component details. {% endtabcontent %} {% endtabcontents %} -## Add Stylesheet +## Add stylesheet -The theme stylesheet can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section of the **~/index.html** file. +The theme stylesheet can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet reference in the `` section of the `~/wwwroot/index.html` file. ```html @@ -105,7 +105,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Blazor Badge component -Add the Syncfusion® Blazor Badge component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Badge component in the `~/Pages/Index.razor` file. {% tabs %} {% highlight razor %} @@ -115,8 +115,8 @@ Add the Syncfusion® Blazor Badge component {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Badge component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Badge component in your default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/BthfshXvfQkIZbeA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Badge Component](images/blazor-badge-component.png)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Badge). +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Badge). \ No newline at end of file diff --git a/blazor/barcode/barcodeGenerator.md b/blazor/barcode/barcodeGenerator.md index 2cd120eafe..e0fc2977ff 100644 --- a/blazor/barcode/barcodeGenerator.md +++ b/blazor/barcode/barcodeGenerator.md @@ -11,7 +11,7 @@ documentation: ug ## Code39 -The Code 39 character set includes the digits 0-9, the letters A-Z (upper case only), and the symbols: space, minus (-), plus (+), period (.), dollar sign ($), slash (/), and percent (%). A special start/stop character is placed at the beginning and end of each barcode. The barcode can be of any length; even more than 25 characters begin to push the bounds. Code 39 is the only type of barcode that does not require a checksum for common use. +The Code 39 character set includes digits 0-9, uppercase letters A–Z, and the symbols space, minus (-), plus (+), period (.), dollar ($), slash (/), and percent (%). A special start/stop character is placed at the beginning and end of each barcode. The barcode can be of any length; even more than 25 characters begin to push the bounds. Code 39 is the only type of barcode that does not require a checksum for common use. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -25,7 +25,7 @@ The Code 39 character set includes the digits 0-9, the letters A-Z (upper case o ## Code39 Extended -Code 39 Extended is an extended version of Code 39 that supports ASCII character set. In Code 39 Extended, you can also code 26 lower letters (a-z) and the special characters in the keyboard. +Code 39 Extended is an enhanced version of Code 39 that supports ASCII character set. In Code 39 Extended, it can encode lowercase letters (a–z) and special keyboard characters by using combinations of standard Code 39 symbols. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -39,7 +39,7 @@ Code 39 Extended is an extended version of Code 39 that supports ASCII character ## Code 11 -Code 11 is used primarily for labeling the telecommunication equipment’s. The character set includes the digits 0 to 9, a dash (-), and a start/stop code. +Code 11 is used primarily for labeling telecommunications equipment. The character set includes digits 0 to 9, a dash (-), and start/stop codes. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -53,11 +53,11 @@ Code 11 is used primarily for labeling the telecommunication equipment’s. The ## Codabar -Codabar is a variable length symbol that encodes the following 20 characters: +Codabar is a variable-length symbol that encodes the following 20 characters: 0123456789-$:/.+ABCD -The characters A, B, C and D are used as start and stop characters. Codabar is used in libraries, blood banks, the package delivery industry and a variety of other information processing applications. +The characters A, B, C, and D serve as start and stop characters. Codabar is used in libraries, blood banks, the package delivery industry and a variety of other information processing applications. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -71,11 +71,11 @@ The characters A, B, C and D are used as start and stop characters. Codabar is u ## Code 32 -Code 32 is mainly used for coding pharmaceuticals, cosmetics, and dietetics. It is often used to encode Italian Pharmacode that has the following structure: +Code 32 is used mainly for coding pharmaceuticals, cosmetics, and dietetics. It is often to encode the Italian Pharmacode that has the following structure: * ‘A’ character (ASCII 65), that is not really encoded. -* 8 digits for Pharmacode (It generally begins with / and prefixed with 0). -* 1 digit for checksum module 10, that is automatically calculated by barcode. +* 8 digits for the Pharmacode (It generally begins with / and prefixed with 0). +* 1 digit for checksum module 10, that is automatically calculated by the barcode. The value to be encoded must be 8 digits Pharmacode (prefix it with ‘0’ if necessary), and the 9th digit (the checksum) is automatically calculated by barcode. @@ -91,7 +91,7 @@ The value to be encoded must be 8 digits Pharmacode (prefix it with ‘0’ if n ## Code 93 -Code 93 is designed to complement and improve Code 39. It can represent the entire ASCII character set by using combinations of 2 characters. Code 93 is a continuous, variable-length symbology and produces denser code. The Standard Mode (default implementation) can encode uppercase letters (A-Z), digits (0-9), and special characters like *, -, $, %, (Space), ., /, and +. +Code 93 is designed to complement and improve Code 39. It represents the entire ASCII character set through combinations of two characters. Code 93 is a continuous, variable-length symbology and produces denser code. The Standard Mode (default implementation) can encode uppercase letters (A-Z), digits (0-9), and special characters like *, -, $, %, (Space), ., /, and +. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -105,11 +105,11 @@ Code 93 is designed to complement and improve Code 39. It can represent the enti ## Code 93 Extended -The Code 93 Extended Barcode symbology is continuous, variable length, and self-checking. It is based on Code 93 Barcode. The Extended Version can encode all 128 ASCII characters. +Code 93 Extended Barcode symbology is a continuous, variable length, self-checking. It is based on Code 93 Barcode. The Extended Version can encode all 128 ASCII characters. ## Code 128 -Code 128 is a variable length, high density, alphanumeric, linear bar code symbology capable of encoding full 128-character ASCII character set and extended character sets. This symbology includes a checksum digit for verification and the barcode can also be verified character-by-character by verifying the parity of each data byte. +Code 128 is a variable-length, high-density, alphanumeric, linear bar code symbology capable of encoding full 128-character ASCII character set and extended character sets. This symbology includes a checksum digit for verification and the barcode can be verified character-by-character by verifying the parity of each data byte. ### Code 128 Code Sets @@ -119,7 +119,7 @@ Code 128 is a variable length, high density, alphanumeric, linear bar code symbo ### Code 128 Special characters -The last seven characters of Code Sets A and B (character values 96 - 102) and the last three characters of Code Set C (character values 100 - 102) are special non-data characters with no ASCII character equivalents that have a particular significance to the Barcode reading device. +The last seven characters of Code Sets A and B (character values 96-102) and the last three characters of Code Set C (character values 100-102) are special non-data characters with no ASCII character equivalents that have a particular significance to the Barcode reading device. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -147,7 +147,7 @@ A page or printed media with barcode often appears colorful in the background an ## Customizing the Barcode dimension -The dimension of the barcode can be changed using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_Width) properties of the barcode generator. +The dimensions of the barcode can be adjusted using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_Width) properties of the barcode generator. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -161,7 +161,7 @@ The dimension of the barcode can be changed using the [Height](https://help.sync ## Customizing the text -In barcode generators, you can customize the barcode text by using display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.BarcodeGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_BarcodeGeneratorDisplayText_Text) property. +In barcode generators, Customize the barcode text by using display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.BarcodeGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_BarcodeGeneratorDisplayText_Text) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -193,7 +193,7 @@ The below code explains how to set the EnableCheckSum property to hide the extra ## Event -[OnValidationFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_OnValidationFailed) event in the [SfBarcodeGenerator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html) is used to trigger when the input is an invalid string. +[OnValidationFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfBarcodeGenerator_OnValidationFailed) event in the [SfBarcodeGenerator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfBarcodeGenerator.html) is used to trigger when the input is invalid string. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -206,6 +206,8 @@ The below code explains how to set the EnableCheckSum property to hide the extra } } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBSiDDFBHLnIOaq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ## See also * [How to generate a QR Code in (2FA) Application in Blazor Diagram?](https://support.syncfusion.com/kb/article/16295/how-to-generate-a-qr-code-in-2fa-application-in-blazor-diagram) diff --git a/blazor/barcode/datamatrixgenerator.md b/blazor/barcode/datamatrixgenerator.md index e4292cd4f7..50e71b7550 100644 --- a/blazor/barcode/datamatrixgenerator.md +++ b/blazor/barcode/datamatrixgenerator.md @@ -11,7 +11,7 @@ documentation: ug ## Data Matrix -[DataMatrix](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html) Barcode is a two dimensional barcode that consists of a grid of dark and light dots or blocks forming square or rectangular symbol. The data encoded in the barcode can either be numbers or alphanumeric. They are widely used in printed media such as labels and letters. You can read it easily with the help of a barcode reader and mobile phones. +The [DataMatrix](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html) barcode is a two-dimensional barcode that consists of a grid of dark and light dots or blocks forming square or rectangular symbol. The data encoded in the barcode can either be numbers or alphanumeric. They are widely used in printed media such as labels and letters. You can read it easily with the help of a barcode reader and mobile phones. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -25,7 +25,7 @@ documentation: ug ## Customizing the Barcode color -A page or printed media with barcode often appears colorful in the background and surrounding region with other contents. In such cases, the barcode can also be customized to suit the needs. You can achieve this by using the [ForeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_ForeColor) property. +A page or printed media with barcode often appears colorful in the backgrounds and surrounding region with other contents. The barcode can be customized to suit the design by using the [ForeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_ForeColor) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -39,7 +39,7 @@ A page or printed media with barcode often appears colorful in the background an ## Customizing the Barcode dimension -The dimension of the barcode can be changed using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_Width) properties of the barcode generator. +The dimensions of the barcode can be adjusted by using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfDataMatrixGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfDataMatrixGenerator_Width) properties of the barcode generator. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -51,7 +51,7 @@ The dimension of the barcode can be changed using the [Height](https://help.sync ## Customizing the text -In barcode generators, you can customize the barcode text by using the display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.DataMatrixGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_DataMatrixGeneratorDisplayText_Text) property. +Customize the barcode text by using the display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.DataMatrixGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_DataMatrixGeneratorDisplayText_Text) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -81,4 +81,5 @@ In barcode generators, you can customize the barcode text by using the display [ } } -``` \ No newline at end of file +``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVystDPBHHDqsFK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file diff --git a/blazor/barcode/export.md b/blazor/barcode/export.md index 906d772e42..ca72a614c7 100644 --- a/blazor/barcode/export.md +++ b/blazor/barcode/export.md @@ -55,6 +55,6 @@ Barcode provides support to export as an image in the specified image type and r ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBgWLWfTiCgSXzC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> Format is to specify the type/format of the exported file. You can export Barcode to the following formats: +N> Format specifies the image type of the exported file. The following export formats are supported:
* JPG.
* PNG. \ No newline at end of file diff --git a/blazor/barcode/getting-started-with-web-app.md b/blazor/barcode/getting-started-with-web-app.md index 1d293f04bd..50ffd956fa 100644 --- a/blazor/barcode/getting-started-with-web-app.md +++ b/blazor/barcode/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Barcode Component in Blazor Web App -This section briefly explains about how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) and Visual Studio Code. +This section explains how to include the [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/) or Visual Studio Code. {% tabcontents %} @@ -21,17 +21,17 @@ This section briefly explains about how to include [Blazor Barcode](https://www. ## Create a new Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating the Blazor Web Application. ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App -To add **Blazor Barcode** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). +To add the **Blazor Barcode** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly or Auto` render modes in a Blazor Web App need to be install Syncfusion® Blazor component NuGet packages within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, use the following package manager command to achieve the same. {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -54,9 +54,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating a Blazor Web Application. +Configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) while creating the Blazor Web Application. For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -70,15 +70,15 @@ cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> For more information on creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). +N> For more information about creating a **Blazor Web App** with various interactive modes and locations, refer to this [link](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code#render-interactive-modes). ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If using the `WebAssembly` or `Auto` render modes in a Blazor Web App need to be install Syncfusion® Blazor component NuGet packages within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the terminal is opened at the project directory containing the .csproj file. +* Run the following commands to install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -92,13 +92,13 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. {% endtabcontent %} {% endtabcontents %} -## Register Syncfusion® Blazor Service +## Register Syncfusion® Blazor service | Interactive Render Mode | Description | | -- | -- | @@ -116,9 +116,9 @@ Import the `Syncfusion.Blazor` and `Syncfusion.Blazor.BarcodeGenerator` namespac {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor Web App. -If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, you need to register the Syncfusion® Blazor service in both **~/Program.cs** files of your Blazor Web App. +If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in both **~/Program.cs** files of the Blazor Web App. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -152,7 +152,7 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -If the **Interactive Render Mode** is set to `Server`, your project will contain a single **~/Program.cs** file. So, you should register the Syncfusion® Blazor Service only in that **~/Program.cs** file. +If the **Interactive Render Mode** is set to `Server`, the project will contain a single **~/Program.cs** file. Register the Syncfusion® Blazor service only in that **~/Program.cs** file. {% tabs %} {% highlight c# tabtitle="~/_Program.cs" hl_lines="2 9" %} @@ -193,7 +193,7 @@ N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/app ## Add Syncfusion® Blazor Barcode component -Add the Syncfusion® Blazor Barcode component in the **~Pages/.razor** file. If an interactivity location as `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: +Add the Syncfusion® Blazor Barcode component in a **~Pages/.razor** file. If the interactivity location is `Per page/component` in the web app, define a render mode at the top of the `~Pages/.razor` component, as follows: | Interactivity location | RenderMode | Code | | --- | --- | --- | @@ -202,7 +202,7 @@ Add the Syncfusion® Blazor Barcode componen | | Server | @rendermode InteractiveServer | | | None | --- | -N> If an **Interactivity Location** is set to `Global` and the **Render Mode** is set to `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. +N> If the **Interactivity Location** is `Global` and the **Render Mode** is `Auto` or `WebAssembly` or `Server`, the render mode is configured in the `App.razor` file by default. {% tabs %} {% highlight razor %} @@ -221,7 +221,7 @@ N> If an **Interactivity Location** is set to `Global` and the **Render Mode** i {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Barcode component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Barcode component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpDMryUyGlVBeQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Barcode Generator Component](images/blazor-barcode-generator-component.png)" %} @@ -229,7 +229,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## Adding QR Generator control -You can add the QR code in our barcode generator component. +Add a QR code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -243,7 +243,7 @@ You can add the QR code in our barcode generator component. ## Adding Data Matrix Generator control -You can add the Data Matrix code in our barcode generator component. +Add a Data Matrix code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -255,7 +255,7 @@ You can add the Data Matrix code in our barcode generator component. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBzZMBSARZqShgQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Matrix Generator in Blazor Barcode Component](images/blazor-barcode-with-data-matrix.png)" %} -N> You can also explore our [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. +N> Explore the [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. ## See also diff --git a/blazor/barcode/getting-started.md b/blazor/barcode/getting-started.md index 3bb2efafc5..df3c5937f4 100644 --- a/blazor/barcode/getting-started.md +++ b/blazor/barcode/getting-started.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor Barcode Component -This section briefly explains about how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in your Blazor WebAssembly App using Visual Studio and Visual Studio Code. +This section explains how to include [Blazor Barcode](https://www.syncfusion.com/blazor-components/blazor-barcode) component in a Blazor WebAssembly app using Visual Studio or Visual Studio Code. {% youtube "youtube:https://www.youtube.com/watch?v=CuApVvYbQtI" %} @@ -23,11 +23,11 @@ This section briefly explains about how to include [Blazor Barcode](https://www. ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App -To add **Blazor Barcode** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, you can utilize the following package manager command to achieve the same. +To add the **Blazor Barcode** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following Package Manager commands: {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -38,7 +38,7 @@ Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. {% endtabcontent %} @@ -50,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, create a WebAssembly application using the following commands in the terminal(Ctrl+`). {% tabs %} @@ -68,7 +68,7 @@ cd BlazorApp ## Install Syncfusion® Blazor BarcodeGenerator and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure the terminal is opened at the project root directory where the .csproj file is located. * Run the following command to install a [Syncfusion.Blazor.BarcodeGenerator](https://www.nuget.org/packages/Syncfusion.Blazor.BarcodeGenerator/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -102,7 +102,7 @@ Open **~/_Imports.razor** file and import the Syncfusion.Blazor namespace. {% endhighlight %} {% endtabs %} -Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor WebAssembly App. +Now, register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %} @@ -135,11 +135,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. ## Add Blazor Barcode component -Add the Syncfusion® Blazor Barcode component in the **~/Pages/Index.razor** file. +Add the Syncfusion® Blazor Barcode component in **~/Pages/Index.razor** file. {% tabs %} {% highlight razor %} @@ -149,7 +149,7 @@ Add the Syncfusion® Blazor Barcode componen {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Barcode component in your default web browser. +* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Barcode component in the default web browser. {% previewsample "https://blazorplayground.syncfusion.com/embed/rXhpDMryUyGlVBeQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Barcode Generator Component](images/blazor-barcode-generator-component.png)" %} @@ -157,7 +157,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## Adding QR Generator control -You can add the QR code in our barcode generator component. +Add a QR code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -171,7 +171,7 @@ You can add the QR code in our barcode generator component. ## Adding Data Matrix Generator control -You can add the Data Matrix code in our barcode generator component. +Add a Data Matrix code in our barcode generator component. {% tabs %} {% highlight razor %} @@ -183,9 +183,9 @@ You can add the Data Matrix code in our barcode generator component. {% previewsample "https://blazorplayground.syncfusion.com/embed/VDBzZMBSARZqShgQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Matrix Generator in Blazor Barcode Component](images/blazor-barcode-with-data-matrix.png)" %} -N> You can also explore our [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. +N> Explore the [Blazor Barcode Generator example](https://blazor.syncfusion.com/demos/barcodes/default-functionalities?theme=bootstrap5) that shows you how to render and configure the barcode. ## See also -* [Getting Started with Syncfusion Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Syncfusion Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file +* [Getting Started with Syncfusion® Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +* [Getting Started with Syncfusion® Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/blazor/barcode/qrcodegenerator.md b/blazor/barcode/qrcodegenerator.md index 1d69a7017d..941c77eb07 100644 --- a/blazor/barcode/qrcodegenerator.md +++ b/blazor/barcode/qrcodegenerator.md @@ -11,7 +11,7 @@ documentation: ug ## QR Code -The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode) is a two-dimensional barcode that is made up of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift Japanese Industrial Standards (JIS8) characters. The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40, which measures 177 modules x 177 modules. Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. The QR Barcodes are designed for industrial uses and are also commonly used in consumer advertising. +The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode) is a two-dimensional barcode composed of a grid of dark and light dots or blocks that form a square. The data encoded in the barcode can be numeric, alphanumeric, or Shift Japanese Industrial Standards (JIS8) characters. The QR Code uses version from 1 to 40. Version 1 measures 21 modules x 21 modules, Version 2 measures 25 modules x 25 modules, and so on. The number of modules increases in steps of 4 modules per side up to Version 40, which measures 177 modules x 177 modules. Each version has its own capacity. By default, the barcode control automatically sets the version according to the length of the input text. The QR Barcodes are designed for industrial uses and are also commonly used in consumer advertising. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -25,7 +25,7 @@ The [Blazor QR Code](https://www.syncfusion.com/blazor-components/blazor-barcode ## Customizing the Barcode color -A page or printed media containing a barcode often appears colorful in the background and surrounding region with other contents. In such cases, the barcode can also be customized to meet the needs. You can achieve this using [ForeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_ForeColor) property. +A page or printed media containing a barcode often appears colorful in the background and surrounding region with other contents. In such cases, the barcode can also be customized to meet the needs. Achieve this using [ForeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_ForeColor) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -39,7 +39,7 @@ A page or printed media containing a barcode often appears colorful in the backg ## Customizing the Barcode dimension -The dimension of the barcode can be changed using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Width) properties of the barcode generator. +The dimensions of the barcode can be changed by using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_Width) properties of the barcode generator. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -51,7 +51,7 @@ The dimension of the barcode can be changed using the [Height](https://help.sync ## Customizing the text -In barcode generators, you can customize the barcode text by using the display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.QRCodeGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_QRCodeGeneratorDisplayText_Text) property. +In barcode generators, customize the barcode text by using the display [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.QRCodeGeneratorDisplayText.html#Syncfusion_Blazor_BarcodeGenerator_QRCodeGeneratorDisplayText_Text) property. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -109,6 +109,7 @@ The following code example demonstrates how to generate a QR barcode with a logo``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLSiDXvrxgTOVrH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  @@ -125,11 +126,13 @@ The size of the logo can be changed using the [Height](https://help.syncfusion.c ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNryitNPLdzgLNmN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + >**Note:** The default value is one-third of the QR code size. ## Event -[OnValidationFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_OnValidationFailed) event in the [SfQRCodeGenerator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html) is used to trigger when the input is an invalid string. +[OnValidationFailed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html#Syncfusion_Blazor_BarcodeGenerator_SfQRCodeGenerator_OnValidationFailed) event in the [SfQRCodeGenerator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.BarcodeGenerator.SfQRCodeGenerator.html) is triggered when the input is an invalid string. ```cshtml @using Syncfusion.Blazor.BarcodeGenerator @@ -144,6 +147,8 @@ The size of the logo can be changed using the [Height](https://help.syncfusion.c } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBosZZlhdfwvyVB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + * [How can I adjust the margin of the QR code and handle text positioning when using the QRCodeGenerator in Syncfusion?](https://support.syncfusion.com/kb/article/18734/how-can-i-adjust-the-margin-of-the-qr-code-and-handle-text-positioning-when-using-the-qrcodegenerator-in-syncfusion) * [How to export the QR code in a Blazor Server project to a desired location using a memory stream?](https://support.syncfusion.com/kb/article/17216/how-to-export-the-qr-code-in-a-blazor-server-project-to-a-desired-location-using-a-memory-stream) \ No newline at end of file diff --git a/blazor/breadcrumb/accessibility.md b/blazor/breadcrumb/accessibility.md index 10f2551b4d..62751c1dae 100644 --- a/blazor/breadcrumb/accessibility.md +++ b/blazor/breadcrumb/accessibility.md @@ -7,7 +7,7 @@ control: Button documentation: ug --- -# Accessibility in Blazor Breadcrumb component +# Accessibility in Blazor Breadcrumb Component The Blazor Breadcrumb component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. @@ -22,7 +22,7 @@ The accessibility compliance for the Blazor Breadcrumb component is outlined bel | Color Contrast | 
|
| Mobile Device Support | |
| Keyboard Navigation Support | |
-| [Axe-core](https://www.npmjs.com/package/axe-core) Accessibility Validation | |
+| [Axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) Accessibility Validation | |
```
-{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhoZsCXAGIEezKH?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBotEhApRPLLBoQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
\ No newline at end of file
diff --git a/blazor/breadcrumb/templates.md b/blazor/breadcrumb/templates.md
index 5b75ad02db..54d25cc445 100644
--- a/blazor/breadcrumb/templates.md
+++ b/blazor/breadcrumb/templates.md
@@ -9,21 +9,21 @@ documentation: ug
# Templates in Blazor Breadcrumb Component
-Blazor has templated components which accepts one or more UI segments as input that can be rendered as part of the component during component rendering. Breadcrumb is a templated blazor component, that allow you to customize various part of the UI using template parameters. It allows you to render custom components or content based on your own logic.
+The Blazor Breadcrumb component is templated, allowing customization of various parts of its UI during rendering. This flexibility enables the rendering of custom components or content using user-defined logic, enhancing both the appearance and functionality of the breadcrumb trail.
-The available template options in Breadcrumb are as follows,
+The following template options are available in the Breadcrumb component:
-[Item template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_ItemTemplate) - Used to customize the items.
+[Item template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_ItemTemplate): Used to customize the rendering of individual Breadcrumb items.
-[Separator template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate)- Used to customize the separators.
+[Separator template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate): Used to customize the rendering of the separators between Breadcrumb items.
-## Template context
+## Template Context
-The templates used by Breadcrumb are of type `RenderFragment` and they will be passed with parameters. You can access the parameters passed to the templates using implicit parameter named `context`. You can also change this implicit parameter name using `Context` attribute.
+Templates used by the Breadcrumb component are of type `RenderFragment` and receive parameters that provide contextual data. Users can access these parameters using the implicit `context` parameter. You can optionally change this implicit parameter name using the `Context` attribute if needed.
-## Item template
+## Item Template
-In the following example, shopping cart details are used as Breadcrumb items and each item is rendered as Chip component using [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_ItemTemplate) tag directive. You can get the current item in `context` property.
+The `ItemTemplate` enables developers to define a custom UI for each Breadcrumb item. In the following example, shopping cart details are used as Breadcrumb items and each item is rendered as Chip component using [ItemTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_ItemTemplate) tag directive. The current item's data is accessible via the `context` parameter.
```cshtml
@using Syncfusion.Blazor.Navigations
@@ -49,11 +49,11 @@ 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" %}
-
+
-## Separator template
+## Separator Template
-In the following example, the separators are customized with icons using [SeparatorTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate) tag directive. You can get the previous and next item in `context` property.
+The [SeparatorTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate) enables customization of the separators between Breadcrumb items. In the example below, separators are customized with icons using the[SeparatorTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.BreadcrumbTemplates.html#Syncfusion_Blazor_Navigations_BreadcrumbTemplates_SeparatorTemplate) tag directive. The `context` parameter provides access to the previous and next item data, though it's often unused for simple icon separators.
```cshtml
@using Syncfusion.Blazor.Navigations
@@ -81,11 +81,13 @@ 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" %}
-
+
## Customize Specific Item Template
-The specific breadcrumb item can be customizable by adding the custom element as Child Content. In the following example, added the span element only for the breadcrumb text in breadcrumb item.
+A specific Breadcrumb item can be customized by adding custom elements directly as its `ChildContent`. This allows for fine-grained control over individual item rendering without affecting the `ItemTemplate` applied globally via `BreadcrumbTemplates`.
+
+In the following example, a custom `` element with an `` tag is added as `ChildContent` to the last `BreadcrumbItem`, effectively overriding any `ItemTemplate` for that specific item.
```cshtml
@using Syncfusion.Blazor.Navigations
@@ -150,4 +152,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
+
\ No newline at end of file
diff --git a/blazor/browser-support.md b/blazor/browser-support.md
index c2663fa38a..82ad1e3171 100644
--- a/blazor/browser-support.md
+++ b/blazor/browser-support.md
@@ -1,18 +1,20 @@
---
layout: post
-title: Browser Compatibility in Blazor - Syncfusion
-description: Check out and learn here all about browser compatibility of syncfusion blazor components and much more.
+title: Browser support for Syncfusion Blazor
+description: Supported browsers for Syncfusion Blazor components on Windows, Linux, and macOS for Blazor Server, Web App, and WebAssembly.
platform: Blazor
-component: Common
+control: Common
documentation: ug
---
# Browser Compatibility in Blazor
-Syncfusion® Blazor UI components are supported by all modern web browsers on both desktop and mobile devices running Windows, Linux, or MacOS.
+Syncfusion® Blazor UI components are supported by modern web browsers on desktop and mobile devices running Windows, Linux, or macOS.
## Blazor Web App
+All modern browsers listed are supported on their latest stable versions.
+
| Browser | Versions |
|--------------|---------------|
| Google Chrome, including Android & iOS | Latest Version |
@@ -22,6 +24,8 @@ Syncfusion® Blazor UI components are suppor
## Blazor WebAssembly
+All modern browsers listed are supported on their latest stable versions.
+
| Browser | Versions |
|--------------|---------------|
| Google Chrome, including Android & iOS | Latest Version |
@@ -32,6 +36,8 @@ Syncfusion® Blazor UI components are suppor
## Blazor Server Side
+All modern browsers listed are supported on their latest stable versions.
+
| Browser | Versions |
|--------------|---------------|
| Google Chrome, including Android & iOS | Latest Version |
@@ -40,8 +46,6 @@ Syncfusion® Blazor UI components are suppor
| Apple Safari, including iOS | Latest Version |
| Microsoft Internet Explorer | 11 |
-N> Blazor Server supports Microsoft Internet Explorer 11 with sufficient polyfills when using [.NET Core 3.1 / lower versions](https://learn.microsoft.com/en-us/aspnet/core/blazor/supported-platforms?view=aspnetcore-3.1). Refer this [documentation](https://blazor.syncfusion.com/documentation/common/how-to/render-blazor-server-app-in-ie) to add the polyfills in Blazor server application.
-
## See Also
-* [ASP.NET Core Blazor supported platforms](https://learn.microsoft.com/en-us/aspnet/core/blazor/supported-platforms?view=aspnetcore-7.0)
+* [ASP.NET Core Blazor supported platforms](https://learn.microsoft.com/en-us/aspnet/core/blazor/supported-platforms)
diff --git a/blazor/bullet-chart/accessibility.md b/blazor/bullet-chart/accessibility.md
index 144ea945ea..6053eee52a 100644
--- a/blazor/bullet-chart/accessibility.md
+++ b/blazor/bullet-chart/accessibility.md
@@ -1,7 +1,7 @@
---
layout: post
title: Accessibility in Blazor Bullet Chart Component | Syncfusion
-description: Checkout and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Bullet Chart component and more.
+description: Check out and learn here all about Accessibility using Keyboard navigation in Syncfusion Blazor Bullet Chart component and more.
platform: Blazor
control: Bullet Chart
documentation: ug
@@ -9,9 +9,9 @@ documentation: ug
# Accessibility in Blazor Bullet Chart Component
-The Blazor Bullet chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility.
+The Blazor Bullet Chart component adheres to accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WAI-ARIA roles](https://www.w3.org/TR/wai-aria/#roles) to ensure inclusive user experiences.
-The accessibility compliance for the Blazor Bullet Chart component is outlined below.
+The following table summarizes the accessibility compliance for the Blazor Bullet Chart component:
| Accessibility Criteria | Compatibility |
| -- | -- |
@@ -37,9 +37,9 @@ The accessibility compliance for the Blazor Bullet Chart component is outlined b
-## WAI-ARIA attributes +## WAI-ARIA Attributes -The Blazor Bullet Chart component followed the [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to meet the accessibility. The following ARIA attributes are used in the Blazor Bullet Chart component: +The Blazor Bullet Chart component implements [WAI-ARIA](https://www.w3.org/WAI/ARIA/apg/patterns/alert/) patterns to ensure accessibility. The following ARIA attributes and roles are used: * img (role) * button (role) @@ -47,26 +47,26 @@ The Blazor Bullet Chart component followed the [WAI-ARIA](https://www.w3.org/WAI * aria-label (attribute) * aria-pressed (attribute) -## Keyboard interaction +## Keyboard Interaction -The Blazor Bullet Chart component followed the [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction) guideline, making it easy for people who use assistive technologies (AT) and those who completely rely on keyboard navigation. The following keyboard shortcuts are supported by the Blazor Bullet Chart component. +The Blazor Bullet Chart component supports [keyboard interaction](https://www.w3.org/WAI/ARIA/apg/patterns/alert/#keyboardinteraction), making it accessible for users who rely on assistive technologies or keyboard navigation. The following keyboard shortcuts are supported: | Windows | Mac | Description | | --- | --- | --- | -|Alt + J | ⌥ + J | Moves the focus to the Bullet Chart element. | -| Tab | Tab | Moves the focus to the next element in the Bullet Chart. | -| Shift + Tab | ⇧ + Tab | Moves the focus to the previous element in the Bullet Chart. | -| ↑ / → | ↑ / → | Moves the focus to the legend right side from the selected legend. | -| ↓ / ← | ↓ / ← | Moves the focus to the legend left side from the selected legend. | +|Alt + J | ⌥ + J | Moves focus to the Bullet Chart element. | +| Tab | Tab | Moves focus to the next element in the Bullet Chart. | +| Shift + Tab | ⇧ + Tab | Moves focus to the previous element in the Bullet Chart. | +| ↑ / → | ↑ / → | Moves focus to the legend right side from the selected legend. | +| ↓ / ← | ↓ / ← | Moves focus to the legend left side from the selected legend. | | Ctrl + P | ⌘ + P | Prints the Bullet Chart. | -## Ensuring accessibility +## Ensuring Accessibility -The Blazor Bullet Chart component's accessibility levels are ensured through an [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) software tools during automated testing. +Accessibility is validated using [accessibility-checker](https://www.npmjs.com/package/accessibility-checker) and [axe-core](https://www.npmjs.com/package/axe-core) tools during automated testing. -The accessibility compliance of the Blazor Bullet Chart component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/bullet-chart) in a new window to evaluate the accessibility of the Blazor Bullet Chart component with accessibility tools. +To evaluate accessibility, open the [sample](https://blazor.syncfusion.com/accessibility/bullet-chart) in a new window and use accessibility tools. -## See also +## See Also -* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) \ No newline at end of file +* [Accessibility in Syncfusion® Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility) diff --git a/blazor/bullet-chart/actual-bar.md b/blazor/bullet-chart/actual-bar.md index 2b691249b9..6c803d4feb 100644 --- a/blazor/bullet-chart/actual-bar.md +++ b/blazor/bullet-chart/actual-bar.md @@ -1,7 +1,7 @@ --- layout: post title: Actual Bar in Blazor Bullet Chart Component | Syncfusion -description: Checkout and learn here all about Actual Bar in Syncfusion Blazor Bullet Chart component and much more. +description: Check out and learn how to display and customize Actual Bar in Syncfusion Blazor Bullet Chart component. platform: Blazor control: Bullet Chart documentation: ug @@ -9,65 +9,71 @@ documentation: ug # Actual Bar in Blazor Bullet Chart Component -To display the primary data or the current value of the data being measured known as the **Feature Measure** that should be encoded as a bar. This is called as the **Actual Bar** or the **Feature Bar** in the Bullet Chart, and to display the actual bar the [ValueField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_ValueField) should be mapped to the appropriate field from the data source. +The **Actual Bar** (also known as the **Feature Bar**) visually represents the primary or current value being measured in the Bullet Chart. To display the actual bar, map the [ValueField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_ValueField) property to the appropriate field in your data source. ```cshtml + @using Syncfusion.Blazor.Charts - The component does not meet the requirement.- BulletChartData = new List { new ChartData { FieldValue = 23} }; } + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUsrippKxnwhYp?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" %}  -## Types of actual bar +## Types of Actual Bar -The shape of the actual bar can be customized using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Type) property of the Bullet Chart. The actual bar contains [Rect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.FeatureType.html#Syncfusion_Blazor_Charts_FeatureType_Rect) and [Dot](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.FeatureType.html#Syncfusion_Blazor_Charts_FeatureType_Dot) shapes. By default, the actual bar shape is [Rect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.FeatureType.html#Syncfusion_Blazor_Charts_FeatureType_Rect). +The shape of the actual bar can be customized using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Type) property. The available shapes are [Rect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.FeatureType.html#Syncfusion_Blazor_Charts_FeatureType_Rect) (default) and [Dot](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.FeatureType.html#Syncfusion_Blazor_Charts_FeatureType_Dot). ```cshtml + @using Syncfusion.Blazor.Charts - @@ -78,10 +84,11 @@ 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/BNhUsrippKxnwhYp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVIDEVTKZNwIDPb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - \ No newline at end of file + diff --git a/blazor/bullet-chart/axis-customization.md b/blazor/bullet-chart/axis-customization.md index 057e57b00b..3e892f4a72 100644 --- a/blazor/bullet-chart/axis-customization.md +++ b/blazor/bullet-chart/axis-customization.md @@ -1,7 +1,7 @@ --- layout: post title: Axis Customization in Blazor Bullet Chart Component | Syncfusion -description: Checkout and learn here all about Axis Customization in Syncfusion Blazor Bullet Chart component and more. +description: Check out and learn here all about Axis Customization in Syncfusion Blazor Bullet Chart component and more. platform: Blazor control: Bullet Chart documentation: ug @@ -9,16 +9,17 @@ documentation: ug # Axis Customization in Blazor Bullet Chart Component -## MajorTickLines and MinorTickLines Customization +## Customizing Major and Minor Tick Lines -The following properties can be used to customize [MajorTicklines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartMajorTickLines.html) and [MinorTicklines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartMinorTickLines.html). +Use the following properties to customize [MajorTickLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartMajorTickLines.html) and [MinorTickLines](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartMinorTickLines.html): -* **Width** - Specifies the width of ticklines. -* **Height** - Specifies the height of ticklines. -* **Color** - Specifies the color of ticklines. -* **EnableRangeColor** - Specifies the color of ticklines and represents the color from corresponding range colors. +* **Width** – Sets the tick line width. +* **Height** – Sets the tick line height. +* **Color** – Sets the tick line color. +* **EnableRangeColor** – Applies the corresponding range color to tick lines. ```cshtml + @using Syncfusion.Blazor.Charts@@ -31,185 +32,229 @@ The following properties can be used to customize [MajorTicklines](https://help. -@code{ +@code { public class ChartData { public double FieldValue { get; set; } public double Target { get; set; } } + public ListBulletChartData = new List { new ChartData { FieldValue = 25, Target = 20 } }; } + ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BthAshrMpzsZIqTR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  -## Tick placement +## Tick Placement -The major and the minor ticks can be placed [Inside](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TickPosition.html#Syncfusion_Blazor_Charts_TickPosition_Inside) or [Outside](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TickPosition.html#Syncfusion_Blazor_Charts_TickPosition_Outside) the ranges using the [TickPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TickPosition) property. +Major and minor ticks can be placed [inside](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TickPosition.html#Syncfusion_Blazor_Charts_TickPosition_Inside) or [outside](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TickPosition.html#Syncfusion_Blazor_Charts_TickPosition_Outside) the ranges using the [TickPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TickPosition) property. ```cshtml + @using Syncfusion.Blazor.Charts - BulletChartData = new List + { + new ChartData { FieldValue = 25, Target = 20 } + }; +} + +``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgiLVCTTsfCtyC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  -## Label format +## Label Format -The axis labels support all the globalize formats and can be changed using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Format) property. The following code shows the axis label in the currency format. +Axis labels support all globalize formats and can be changed using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Format) property. The following example displays axis labels in currency format. ```cshtml + @using Syncfusion.Blazor.Charts - BulletChartData = new List + { + new ChartData { FieldValue = 25, Target = 20 } + }; +} + +``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgMBVMpfCnRdov?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  -The following table describes the result of applying some commonly used formats to numeric axis values. +The table below shows the results of applying common formats to numeric axis values.
-## Grouping separator +## Grouping Separator -To separate the groups of thousands, set the [EnableGroupSeparator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_EnableGroupSeparator) property to **true**, and specify the numeric axis label by setting the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Format) property to **N0**. +To display thousands separators, set the [EnableGroupSeparator](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_EnableGroupSeparator) property to **true** and specify the numeric axis label format using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Format) property as **N0**. ```cshtml + @using Syncfusion.Blazor.ChartsLabel Value Label Format property value -Result -Description +Result +Description 1000 n1 1000.0 -The result is rounded to 1 decimal place. +Rounded to 1 decimal place. 1000 n2 1000.00 -The result is rounded to 2 decimal places. +Rounded to 2 decimal places. 1000 n3 1000.000 -The result is rounded to 3 decimal places. +Rounded to 3 decimal places. 0.01 p1 1.0% -The result is converted to percentage with 1 decimal place. +Converted to percentage with 1 decimal place. 0.01 p2 1.00% -The result is converted to percentage with 2 decimal places. +Converted to percentage with 2 decimal places. 0.01 p3 1.000% -The result is converted to percentage with 3 decimal places. +Converted to percentage with 3 decimal places. 1000 c1 $1000.0 -The currency symbol is appended to the result and it is rounded to 1 decimal place. +Currency symbol appended, rounded to 1 decimal place. 1000 c2 $1000.00 -The currency symbol is appended to the result and it is rounded to 2 decimal places. +Currency symbol appended, rounded to 2 decimal places. - BulletChartData = new List { new ChartData { FieldValue = 1500, Target = 1300 } }; } -``` +``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VthqsBLMzfBQwPJD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  -## Custom label format +## Custom Label Format -Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_LabelFormat) property, axis labels can be specified with a custom defined format in addition to the axis value. The label format uses a placeholder such as **${value}K**, which represents the axis label. +The [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_LabelFormat) property allows you to specify a custom format for axis labels. Use placeholders such as **${value}K** to represent the axis value. ```cshtml + @using Syncfusion.Blazor.Charts - BulletChartData = new List + { + new ChartData { FieldValue = 1500, Target = 1300 } + }; +} + +``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUshVCfpgssdbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  -## Label placement +## Label Placement -Label can be placed [Inside](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LabelsPlacement.html#Syncfusion_Blazor_Charts_LabelsPlacement_Inside) or [Outside](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LabelsPlacement.html#Syncfusion_Blazor_Charts_LabelsPlacement_Outside) of the ranges using the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_LabelPosition) property. +Labels can be placed [inside](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LabelsPlacement.html#Syncfusion_Blazor_Charts_LabelsPlacement_Inside) or [outside](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LabelsPlacement.html#Syncfusion_Blazor_Charts_LabelsPlacement_Outside) the ranges using the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_LabelPosition) property. ```cshtml + @using Syncfusion.Blazor.Charts @@ -219,19 +264,32 @@ 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**. +@code { + public class ChartData + { + public double FieldValue { get; set; } + public double Target { get; set; } + } + + public ListBulletChartData = new List + { + new ChartData { FieldValue = 25, Target = 20 } + }; +} + +``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUMrBWJfgftZky?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLesNZUCyCVjSWv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  -## Opposed position +## Opposed Position -To place an axis opposite to its original position, set the [OpposedPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_OpposedPosition) property to **true**. +To place the axis opposite its default position, set the [OpposedPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_OpposedPosition) property to **true**. ```cshtml + @using Syncfusion.Blazor.Charts @@ -241,19 +299,32 @@ 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**. +@code { + public class ChartData + { + public double FieldValue { get; set; } + public double Target { get; set; } + } -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBqMBVWzJqnbrpi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + public ListBulletChartData = new List + { + new ChartData { FieldValue = 25, Target = 20 } + }; +} + +``` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVyMNjKCSLQrRms?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  -## Category label +## Category Label -The [Bullet Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html) supports X-axis label by specifying the property from the data source to the [CategoryField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_CategoryField). It helps to understand the input data in a more efficient way. +The [Bullet Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html) supports X-axis labels by specifying a property from the data source using the [CategoryField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_CategoryField) property. This helps users interpret input data more efficiently. ```cshtml + @using Syncfusion.Blazor.Charts @@ -264,7 +335,7 @@ The [Bullet Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart -@code{ +@code { public class ChartData { public double FieldValue { get; set; } @@ -276,17 +347,19 @@ The [Bullet Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart new ChartData { FieldValue = 23, Target = 25, Category="Product A" } }; } + ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/LjhgsrViJpTWnjZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  -## Axis label and category label customization +## Customizing Axis and Category Labels -The label color, opacity, font size, font family, font weight, and font style can be customized by using the [BulletChartCategoryLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCategoryLabelStyle.html) setting for category and the [BulletChartLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLabelStyle.html) setting for axis label. The [EnableRangeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCommonFont.html#Syncfusion_Blazor_Charts_BulletChartCommonFont_EnableRangeColor) property specifies the color of the axis label and represents the color from the corresponding range colors. +Customize label color, opacity, font size, font family, font weight, and font style using the [BulletChartCategoryLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCategoryLabelStyle.html) property for category labels and the [BulletChartLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLabelStyle.html) property for axis labels. The [EnableRangeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCommonFont.html#Syncfusion_Blazor_Charts_BulletChartCommonFont_EnableRangeColor) property applies the corresponding range color to axis labels. ```cshtml + @using Syncfusion.Blazor.Charts@@ -298,10 +371,23 @@ 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**. +@code { + public class ChartData + { + public double FieldValue { get; set; } + public double Target { get; set; } + public string Category { get; set; } + } + + public ListBulletChartData = new List + { + new ChartData { FieldValue = 23, Target = 25, Category="Product A" } + }; +} + +``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgWrLCzTJTgHRy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - \ 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..912280cc51 100644 --- a/blazor/bullet-chart/bullet-chart-dimensions.md +++ b/blazor/bullet-chart/bullet-chart-dimensions.md @@ -1,21 +1,20 @@ --- layout: post title: Bullet Chart Dimensions in Blazor Bullet Chart Component | Syncfusion -description: Checkout and learn here all about Bullet Chart Dimensions in Syncfusion Blazor Bullet Chart component and more. +description: Check out and learn how to configure and customize Bullet Chart Dimensions in Syncfusion Blazor Bullet Chart component. platform: Blazor control: Bullet Chart documentation: ug --- - - # Bullet Chart Dimensions in Blazor Bullet Chart Component ## Size for container -The size of the [Blazor Bullet Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html) is determined by the container size, and it can be changed inline or via CSS as follows. +The size of the [Blazor Bullet Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html) is determined by its container, and can be adjusted inline or through CSS as shown below. ```cshtml + @using Syncfusion.Blazor.Charts @@ -29,27 +28,31 @@ The size of the [Blazor Bullet Chart](https://help.syncfusion.com/cr/blazor/Sync-@code{ +@code { public class ChartData { public double FieldValue { get; set; } public double Target { get; set; } } + public ListBulletChartData = new List { new ChartData { FieldValue = 270, Target = 250 } }; } + ``` + {% previewsample "https://blazorplayground.syncfusion.com/embed/rjrgsVVCzqENDzfI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Size for Bullet Chart -The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Width) and the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Height) properties are used to adjust the size of the Bullet Chart. Both the pixel and the percentage values are accepted. If the value is expressed as a percentage, the dimension of the Bullet Chart is determined by its container. +The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Height) properties allow you to adjust the Bullet Chart's size. Both pixel and percentage values are supported. When using percentage values, the chart's dimensions are relative to its container. -N> If the size is not specified, the Bullet Chart will be rendered with a height of **126px** and a width of the window. +N> If no size is specified, the Bullet Chart renders with a height of **126px** and a width equal to the window. ```cshtml + @using Syncfusion.Blazor.Charts @@ -62,16 +65,30 @@ N> If the size is not specified, the Bullet Chart will be rendered with a heigh+ +@code { + public class ChartData + { + public double FieldValue { get; set; } + public double Target { get; set; } + } + + public ListBulletChartData = new List + { + new ChartData { FieldValue = 270, Target = 250 } + }; +} + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htrgWhLCJqkfMCtE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> Refer to the [code block](#size-for-container) to know about the property value of **BulletChartData**. +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrgWhLCJqkfMCtE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Margin -The [BulletChartMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartMargin.html) is used to customize the bottom, the left, the right, and the top margins of the Bullet Chart. +The [BulletChartMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartMargin.html) property customizes the bottom, left, right and top margins of the Bullet Chart. ```cshtml + @using Syncfusion.Blazor.Charts @@ -86,10 +103,22 @@ 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**. +@code { + public class ChartData + { + public double FieldValue { get; set; } + public double Target { get; set; } + } + + public ListBulletChartData = new List + { + new ChartData { FieldValue = 270, Target = 250 } + }; +} + +``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BjBACrrWzKabABVG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - \ No newline at end of file + diff --git a/blazor/bullet-chart/customization.md b/blazor/bullet-chart/customization.md index 21d373e2f0..27aea2b473 100644 --- a/blazor/bullet-chart/customization.md +++ b/blazor/bullet-chart/customization.md @@ -1,7 +1,7 @@ --- layout: post title: Customization in Blazor Bullet Chart Component | Syncfusion -description: Checkout and learn here all about Customization in Syncfusion Blazor Bullet Chart component and more. +description: Check out and learn here all about Customization in Syncfusion Blazor Bullet Chart component and more. platform: Blazor control: Bullet Chart documentation: ug @@ -11,9 +11,10 @@ documentation: ug ## Orientation -The [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) can be rendered in different orientations such as [Horizontal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.OrientationType.html#Syncfusion_Blazor_Charts_OrientationType_Horizontal) or [Vertical](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.OrientationType.html#Syncfusion_Blazor_Charts_OrientationType_Vertical) via the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Orientation) property. By default, the Bullet Chart is rendered in the [Horizontal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.OrientationType.html#Syncfusion_Blazor_Charts_OrientationType_Horizontal) orientation. +The [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) can be displayed in either [Horizontal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.OrientationType.html#Syncfusion_Blazor_Charts_OrientationType_Horizontal) or [Vertical](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.OrientationType.html#Syncfusion_Blazor_Charts_OrientationType_Vertical) orientation using the [Orientation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Orientation) property. The default orientation is horizontal. ```cshtml + @using Syncfusion.Blazor.Charts @@ -24,26 +25,29 @@ The [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bu -@code{ +@code { public class ChartData { public double FieldValue { get; set; } public double TargetValue { get; set; } } + public ListBulletChartData = new List { new ChartData { FieldValue = 55, TargetValue = 75 } }; } + ```  -## Right-to-left (RTL) +## Right-to-Left (RTL) -The Bullet Chart supports the right-to-left rendering that can be enabled by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_EnableRtl) property to **true**. +Enable right-to-left rendering by setting the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_EnableRtl) property to **true**. ```cshtml + @@ -51,6 +55,7 @@ The Bullet Chart supports the right-to-left rendering that can be enabled by set @@ -72,15 +78,17 @@ The actual and the target bar supports the linear animation via the [BulletChart + ``` N> Refer to the [code block](#orientation) to know about the property value of **BulletChartData**. ## Theme -The Bullet Chart supports different type of themes via the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Theme) property. +Apply different visual styles to the Bullet Chart using the [Theme](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Theme) property. ```cshtml + @using Syncfusion.Blazor.Charts @using Syncfusion.Blazor @@ -91,6 +99,7 @@ The Bullet Chart supports different type of themes via the [Theme](https://help.+ ``` N> Refer to the [code block](#orientation) to know about the property value of **BulletChartData**. @@ -99,21 +108,23 @@ N> Refer to the [code block](#orientation) to know about the property value of * ## Border -The Bullet Chart border color can be enabled by setting the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCommonBorder.html#Syncfusion_Blazor_Charts_BulletChartCommonBorder_Color) property in the [BulletChartBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Theme), and the width of the border can be customized using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCommonBorder.html#Syncfusion_Blazor_Charts_BulletChartCommonBorder_Width) property. +Customize the Bullet Chart border color using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCommonBorder.html#Syncfusion_Blazor_Charts_BulletChartCommonBorder_Color) property in [BulletChartBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Theme), and adjust the border width with the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCommonBorder.html#Syncfusion_Blazor_Charts_BulletChartCommonBorder_Width) property. ```cshtml + @using Syncfusion.Blazor.Charts - @@ -23,13 +24,14 @@ The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. -@code{ +@code { public class BulletChartData { public double FieldValue { get; set; } public double[] ComparativeMeasureValue { get; set; } public string Category { get; set; } } + public ListInputData = new List { new BulletChartData { FieldValue = 5, ComparativeMeasureValue = new double[] { 7.5 }, Category = "2001" }, @@ -40,7 +42,8 @@ The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. new BulletChartData { FieldValue = 8, ComparativeMeasureValue = new double[] { 6, 7 }, Category = "2006" } }; } + ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VtVKshVizpSfJRvO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - \ No newline at end of file + diff --git a/blazor/bullet-chart/data-label.md b/blazor/bullet-chart/data-label.md index 114587ef08..171162ac39 100644 --- a/blazor/bullet-chart/data-label.md +++ b/blazor/bullet-chart/data-label.md @@ -1,7 +1,7 @@ --- layout: post title: Data Labels in Blazor Bullet Chart Component | Syncfusion -description: Checkout and learn here all about Data Labels in Syncfusion Blazor Bullet Chart component and much more. +description: Check out and learn how to display and customize Data Labels in Syncfusion Blazor Bullet Chart component. platform: Blazor control: Bullet Chart documentation: ug @@ -9,28 +9,30 @@ documentation: ug # Data Labels in Blazor Bullet Chart Component -Data Labels are used to identify the value of actual bar in the [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) component. The Data Labels will be shown by specifying the [BulletChartDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartDataLabel.html) setting. +Data labels identify the value of the actual bar in the [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) component. Enable data labels by specifying the [BulletChartDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartDataLabel.html) property. ```cshtml + @using Syncfusion.Blazor.Charts - BulletChartData = new List { new ChartData { ValueField = 5, ComparativeMeasureValue = 7.5, Category = "2001" }, @@ -41,13 +43,15 @@ Data Labels are used to identify the value of actual bar in the [Blazor Bullet C new ChartData { ValueField = 8, ComparativeMeasureValue = 6, Category = "2006" } }; } + ``` -## Data label customization +## Data Label Customization -Data Labels color, opacity, font size, font family, font weight, and font style can be customized using the [BulletChartDataLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartDataLabelStyle.html). +Customize the color, opacity, font size, font family, font weight, and font style of data labels using the [BulletChartDataLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartDataLabelStyle.html) property. ```cshtml + @using Syncfusion.Blazor.Charts @@ -61,8 +65,9 @@ Data Labels color, opacity, font size, font family, font weight, and font style + ``` N> Refer to the [code block](#data-labels-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**. - \ No newline at end of file + diff --git a/blazor/bullet-chart/events.md b/blazor/bullet-chart/events.md index 0d7792a87a..f34b99f364 100644 --- a/blazor/bullet-chart/events.md +++ b/blazor/bullet-chart/events.md @@ -1,61 +1,67 @@ --- layout: post title: Events in Blazor Bullet Chart Component | Syncfusion -description: Checkout and learn here all about available Events in Syncfusion Blazor Bullet Chart component and much more. +description: Check out and learn about available events and event handling in Syncfusion Blazor Bullet Chart component. platform: Blazor -control: Bullet Chart +control: Bullet Chart documentation: ug --- # Events in Blazor Bullet Chart Component -This section describes about the [Blazor Bullet](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) Chart component's events that will be triggered when appropriate actions are performed. The events should be provided to the Bullet Chart through the [BulletChartEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartEvents.html). +This section describes the [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) component's events, which are triggered by user actions or chart updates. Events are provided to the Bullet Chart through the [BulletChartEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartEvents.html) property. ## Loaded -The `Loaded` event triggers after the Bullet Chart component has been loaded. +The `Loaded` event is triggered after the Bullet Chart component has loaded. ```cshtml + @using Syncfusion.Blazor.ChartsBulletChartData = new List { new ChartData { FieldValue = 270, TargetValue = 250 } }; + public void LoadedHandler(System.EventArgs args) { - // Here, you can customize the code. + // Custom code here. } } + ``` ## OnPrintComplete -The [OnPrintComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartEvents.html#Syncfusion_Blazor_Charts_BulletChartEvents_OnPrintComplete) event triggers before the rendered Bullet Chart starts printing. +The [OnPrintComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartEvents.html#Syncfusion_Blazor_Charts_BulletChartEvents_OnPrintComplete) event is triggered before the rendered Bullet Chart starts printing. -| Argument name | Description | -|--------------------| -------------------------------------------------------| -| Cancel | Specifies the event cancel status. | +| Argument name | Description | +|--------------|-------------| +| Cancel | Specifies the event cancel status. | ```cshtml + @using Syncfusion.Blazor.Charts + BulletChart { get; set; } public class ChartData @@ -76,23 +82,25 @@ The [OnPrintComplete](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch public void PrintCompleteHandler(PrintEventArgs args) { - // Here, you can customize the code. + // Custom code here. } } + ``` ## TooltipRender -The [TooltipRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartEvents.html#Syncfusion_Blazor_Charts_BulletChartEvents_TooltipRender) event triggers before the tooltip rendering. +The [TooltipRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartEvents.html#Syncfusion_Blazor_Charts_BulletChartEvents_TooltipRender) event is triggered before the tooltip is rendered. -| Argument name | Description | -|--------------------| -------------------------------------------------------| -| Target | Specifies the Target Bar values. | -| Text | Specifies the content of the tooltip. | -| Value | Specifies the Value Bar data. | -| Cancel | Specifies the event cancel status. | +| Argument name | Description | +|--------------|-------------| +| Target | Specifies the target bar values. | +| Text | Specifies the content of the tooltip. | +| Value | Specifies the value bar data. | +| Cancel | Specifies the event cancel status. | ```cshtml + @using Syncfusion.Blazor.Charts @@ -100,13 +108,13 @@ The [TooltipRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char -@code{ +@code { public class ChartData { public double FieldValue { get; set; } public double TargetValue { get; set; } } - + public ListBulletChartData = new List { new ChartData { FieldValue = 270, TargetValue = 250 } @@ -114,21 +122,22 @@ The [TooltipRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char public void TooltipRenderHandler(BulletChartTooltipEventArgs args) { - // Here, you can customize the code. + // Custom code here. } } + ``` ## LegendRender -The [LegendRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartEvents.html#Syncfusion_Blazor_Charts_BulletChartEvents_LegendRender) event triggers before each legend item rendering. +The [LegendRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartEvents.html#Syncfusion_Blazor_Charts_BulletChartEvents_LegendRender) event is triggered before each legend item is rendered. -| Argument name | Description | -|--------------------| -------------------------------------------------------| -| Fill | Specifies the fill of the legend item. | -| Shape | Specifies the shape of the legend item. | -| Text | Specifies the text of the legend item. | -| Cancel | Specifies the event cancel status. | +| Argument name | Description | +|--------------|-------------| +| Fill | Specifies the fill of the legend item. | +| Shape | Specifies the shape of the legend item. | +| Text | Specifies the text of the legend item. | +| Cancel | Specifies the event cancel status. | ```cshtml @using Syncfusion.Blazor.Charts @@ -143,37 +152,40 @@ The [LegendRender](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart -@code{ +@code { public class ChartData { public double FieldValue { get; set; } public double TargetValue { get; set; } } + public List BulletChartData = new List { new ChartData { FieldValue = 55, TargetValue = 75 }, new ChartData { FieldValue = 45, TargetValue = 15 }, new ChartData { FieldValue = 75, TargetValue = 35 } }; + public void LegendRenderHandler(BulletChartLegendRenderEventArgs args) { - // Here, you can customize the code. + // Custom code here. } } ``` ## PointerClick -The [PointerClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartEvents.html#Syncfusion_Blazor_Charts_BulletChartEvents_PointerClick) event is triggered when the mouse pointer or touch pointer is clicked on the target element or on the feature measure value. +The [PointerClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartEvents.html#Syncfusion_Blazor_Charts_BulletChartEvents_PointerClick) event is triggered when the mouse or touch pointer is clicked on the target element or feature measure value. -| Argument name | Description | -|--------------------| -------------------------------------------------------| -| Target | Specifies the target bar values. -| Value | Specifies the value bar data. -| CategoryName | Specifies the category name of the selected point. -| Cancel | Specifies whether the event should continue or be cancelled.| +| Argument name | Description | +|--------------|-------------| +| Target | Specifies the target bar values. | +| Value | Specifies the value bar data. | +| CategoryName | Specifies the category name of the selected point. | +| Cancel | Specifies whether the event should continue or be cancelled. | ```cshtml + @using Syncfusion.Blazor.Charts @@ -199,11 +211,11 @@ The [PointerClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart new ChartData { FieldValue = 45, TargetValue = 15 }, new ChartData { FieldValue = 75, TargetValue = 35 } }; - + public void PointClickEvent(BulletChartPointEventArgs args) { - // Here, you can customize the code. + // Custom code here. } } -``` \ No newline at end of file +``` diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.png b/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.png index 7d9bf73704..5ae27b8b17 100644 Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.png and b/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.png differ diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.png b/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.png index 6f8968a32a..39bad0b5df 100644 Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.png and b/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.png differ diff --git a/blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.png b/blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.png index 97c0fea6a1..b27fc7f739 100644 Binary files a/blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.png and b/blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.png differ diff --git a/blazor/bullet-chart/legend.md b/blazor/bullet-chart/legend.md index 61cbb91ecd..fcf39887f2 100644 --- a/blazor/bullet-chart/legend.md +++ b/blazor/bullet-chart/legend.md @@ -1,7 +1,7 @@ --- layout: post title: Legend in Blazor Bullet Chart Component | Syncfusion -description: Checkout and learn here all about the Legend in Syncfusion Blazor Bullet Chart component and much more. +description: Check out and learn how to configure and customize Legend in Syncfusion Blazor Bullet Chart component. platform: Blazor control: Bullet Chart documentation: ug @@ -9,26 +9,28 @@ documentation: ug # Legend in Blazor Bullet Chart Component -Legend is used to provide valuable information for interpreting what the Bullet Chart displays. The legends can be represented in various colors, positions, shapes or other identifiers based on the data and it can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Visible) property to **true** in the [BulletChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html). +Legends provide essential information for interpreting the Bullet Chart. Legends can be displayed in various colors, positions, shapes, or other identifiers based on the data. Enable the legend by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Visible) property to **true** in [BulletChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html). ```cshtml + @using Syncfusion.Blazor.Charts - BulletChartData = new List { new ChartData { FieldValue = 55, TargetValue = 75 }, @@ -36,23 +38,25 @@ Legend is used to provide valuable information for interpreting what the Bullet new ChartData { FieldValue = 75, TargetValue = 35 } }; } + ```  -## Legend items from color mapping +## Legend Items -Legend items will be rendered based on the mapping ranges from the Bullet Chart. The legend item's name can be determined from the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRange.html#Syncfusion_Blazor_Charts_BulletChartRange_Name) property and the shape of legend item can be customized using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRange.html#Syncfusion_Blazor_Charts_BulletChartRange_Shape) property in the [BulletChartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRange.html). By default, the legend item is rendered on the [Rectangle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendShape.html) shape. +Legend items are rendered based on the mapping ranges in the Bullet Chart. The legend item's name is set using the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRange.html#Syncfusion_Blazor_Charts_BulletChartRange_Name) property, and the shape can be customized with the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRange.html#Syncfusion_Blazor_Charts_BulletChartRange_Shape) property in [BulletChartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRange.html). By default, the legend item uses the [Rectangle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendShape.html) shape. -Legend item to be customized by the following properties. +Customize legend items with these properties: -* [Padding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Padding) - Specifies the padding between the legend items. -* [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_ShapeHeight) - Specifies the shape height of the legend items. -* [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_ShapeWidth) - Specifies the shape width of the legend items. -* [ShapePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_ShapePadding) - Specifies the padding between the shape and the text of the legend item. -* [BulletChartLegendTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendTextStyle.html) - Specifies the text style of the legend item. +* [Padding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Padding) – Sets the padding between legend items. +* [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_ShapeHeight) – Sets the legend item shape height. +* [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_ShapeWidth) – Sets the legend item shape width. +* [ShapePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_ShapePadding) – Sets the padding between the shape and the legend text. +* [BulletChartLegendTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendTextStyle.html) – Sets the legend item text style. ```cshtml + @using Syncfusion.Blazor.Charts @@ -63,15 +67,16 @@ Legend item to be customized by the following properties. + ``` N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know the property value of the **BulletChartData**.  -## Legend size +## Legend Size -Customize the legend size by modifying the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Height) and the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Width) properties in the [BulletChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html). It accepts values in both percentage and pixel. +Adjust the legend size using the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Width) properties in [BulletChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html). Both percentage and pixel values are supported. ```cshtml @using Syncfusion.Blazor.Charts @@ -90,11 +95,12 @@ N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know a  -## Legend with paging support +## Legend with Paging Support -Bullet Chart supports the legend paging if the legend items cannot be placed within the provided [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Width) of the legend. +If legend items cannot fit within the specified [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Height) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Width), paging is enabled automatically. ```cshtml + @using Syncfusion.Blazor.Charts@@ -107,15 +113,16 @@ Bullet Chart supports the legend paging if the legend items cannot be placed wit + ``` N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**.  -## Position and alignment +## Position and Alignment -The legend can be placed in various positions and the following options are available to customize the legend position using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Position) property: +Set the legend position using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Position) property. Options include: * [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Auto) * [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Bottom) @@ -124,9 +131,10 @@ The legend can be placed in various positions and the following options are avai * [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Right) * [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Custom) -The following code example demonstrates the top legend position. +The following example demonstrates the top legend position. ```cshtml + @using Syncfusion.Blazor.Charts@@ -137,17 +145,19 @@ The following code example demonstrates the top legend position. + ``` N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**.  -[Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Auto) position will be rendered with the responsive legend height to the [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Bottom) of the component and the [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Custom) position renders based on x and y coordinates by specified to [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendLocation.html#Syncfusion_Blazor_Charts_BulletChartLegendLocation_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendLocation.html#Syncfusion_Blazor_Charts_BulletChartLegendLocation_Y) properties in the [BulletChartLegendLocation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendLocation.html). +The [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Auto) position renders the legend at the bottom of the component with responsive height. The [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Custom) position uses the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendLocation.html#Syncfusion_Blazor_Charts_BulletChartLegendLocation_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendLocation.html#Syncfusion_Blazor_Charts_BulletChartLegendLocation_Y) properties in [BulletChartLegendLocation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendLocation.html) to specify coordinates. -The following code example demonstrates the [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Custom) legend position. +The following example demonstrates the custom legend position. ```cshtml + @using Syncfusion.Blazor.Charts@@ -161,21 +171,23 @@ The following code example demonstrates the [Custom](https://help.syncfusion.com + ``` N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**.  -The legend alignment is used to align the legend items to the specific location. The following options are available to customize using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Alignment) property: +Align legend items using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Alignment) property. Options include: * [Near](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Near) * [Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Center) * [Far](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Far) -The following code example demonstrates legend item alignment. +The following example demonstrates legend item alignment. ```cshtml + @using Syncfusion.Blazor.Charts@@ -186,6 +198,7 @@ The following code example demonstrates legend item alignment. + ``` N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**. @@ -194,14 +207,15 @@ N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know a ## Customization -Legend can be customized by the following properties: +Further customize the legend using these properties: -* [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Background) - Specifies the fill color of the legend. -* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Opacity) - Specifies the opacity of the legend background. -* [BulletChartLegendMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendMargin.html) - Specifies the bottom, left, right, and top margin of the legend. -* [BulletChartLegendBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendBorder.html) - Specifies the color and the width of the legend border. +* [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Background) – Sets the legend background color. +* [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Opacity) – Sets the legend background opacity. +* [BulletChartLegendMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendMargin.html) – Sets the legend margin. +* [BulletChartLegendBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendBorder.html) – Sets the legend border color and width. ```cshtml + @using Syncfusion.Blazor.Charts@@ -216,8 +230,9 @@ Legend can be customized by the following properties: + ``` N> Refer to the [code block](#legend-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**. - \ No newline at end of file + diff --git a/blazor/bullet-chart/ranges.md b/blazor/bullet-chart/ranges.md index 0837c0c3ab..2f555dded9 100644 --- a/blazor/bullet-chart/ranges.md +++ b/blazor/bullet-chart/ranges.md @@ -1,7 +1,7 @@ --- layout: post title: Ranges in Blazor Bullet Chart Component | Syncfusion -description: Checkout and learn here all about the ranges in Syncfusion Blazor Bullet Chart component and much more. +description: Check out and learn how to define and customize ranges in Syncfusion Blazor Bullet Chart component to represent performance thresholds and targets. platform: Blazor control: Bullet Chart documentation: ug @@ -9,40 +9,44 @@ documentation: ug # Ranges in Blazor Bullet Chart Component -Ranges represent the quality of a specific range such as **Good**, **Bad** and **Satisfactory** in the Bullet Chart scale. The ending point of a qualitative range is specified in the [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRange.html#Syncfusion_Blazor_Charts_BulletChartRange_End) property. The minimum value of a quantitative scale is considered the starting point of the first range or the previous range end point. +Ranges in the Bullet Chart visually represent qualitative categories such as **Good**, **Bad**, and **Satisfactory** on the chart scale. The [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRange.html#Syncfusion_Blazor_Charts_BulletChartRange_End) property specifies the endpoint of each range. The minimum value of the quantitative scale is used as the starting point for the first range, or the previous range's endpoint for subsequent ranges. ```cshtml + @using Syncfusion.Blazor.Charts- BulletChartData = new List { new ChartData { FieldValue = 270, TargetValue = 250 } }; } + ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUiLLiTfIkQhfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}  -## Color customization +## Color Customization -Enhance the readability of ranges with color and opacity. It can be applied using the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRange.html#Syncfusion_Blazor_Charts_BulletChartRange_Color) and [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRange.html#Syncfusion_Blazor_Charts_BulletChartRange_Opacity) properties respectively. +Enhance the readability and interpretation of ranges by customizing their color and opacity. Use the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRange.html#Syncfusion_Blazor_Charts_BulletChartRange_Color) and [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRange.html#Syncfusion_Blazor_Charts_BulletChartRange_Opacity) properties to visually distinguish each range. ```cshtml + @using Syncfusion.Blazor.Charts @@ -55,13 +59,14 @@ Enhance the readability of ranges with color and opacity. It can be applied usin -@code{ +@code { public class ChartData { public double FieldValue { get; set; } public double TargetValue { get; set; } public string CategoryValue { get; set; } } + public ListBulletChartData = new List { new ChartData { FieldValue = 55, TargetValue = 75, CategoryValue = "Year 1" }, @@ -69,7 +74,8 @@ Enhance the readability of ranges with color and opacity. It can be applied usin new ChartData { FieldValue = 85, TargetValue = 75, CategoryValue = "Year 3" } }; } + ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BZBUWBrWJJHrSIXJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} - \ No newline at end of file + diff --git a/blazor/bullet-chart/target-bar.md b/blazor/bullet-chart/target-bar.md index 38818b2530..8a34e90d88 100644 --- a/blazor/bullet-chart/target-bar.md +++ b/blazor/bullet-chart/target-bar.md @@ -1,7 +1,7 @@ --- layout: post title: Target Bar in Blazor Bullet Chart Component | Syncfusion -description: Checkout and learn here all about Target Bar in Syncfusion Blazor Bullet Chart component and much more. +description: Check out and learn how to display and customize the Target Bar in Syncfusion Blazor Bullet Chart component. platform: Blazor control: Bullet Chart documentation: ug @@ -9,9 +9,10 @@ documentation: ug # Target Bar in Blazor Bullet Chart Component -The line marker that runs perpendicular to the orientation of the graph is known as the **Comparative Measure** and it is used as a target marker to compare against the feature measure value. This is also called as the **Target Bar** in the Bullet Chart. To display the target bar, the [TargetField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TargetField) should be mapped to the appropriate field from the datasource. +The **Target Bar** (also known as the **Comparative Measure**) is a line marker that runs perpendicular to the chart's orientation, serving as a target marker for comparison against the feature measure value. To display the target bar, map the [TargetField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TargetField) property to the appropriate field in your data source. ```cshtml + @using Syncfusion.Blazor.Charts @@ -22,25 +23,28 @@ The line marker that runs perpendicular to the orientation of the graph is known -@code{ +@code { public class ChartData { public double Target { get; set; } } + public ListBulletChartData = new List { new ChartData { Target = 25 } }; } + ```  -## Types of target bar +## Types of Target Bar -The shape of the target bar can be customized using the [TargetTypes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TargetTypes) property and it supports [Circle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TargetType.html#Syncfusion_Blazor_Charts_TargetType_Circle), [Cross](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TargetType.html#Syncfusion_Blazor_Charts_TargetType_Cross), and [Rect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TargetType.html#Syncfusion_Blazor_Charts_TargetType_Rect) shapes. The default type of the target bar is [Rect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TargetType.html#Syncfusion_Blazor_Charts_TargetType_Rect). +The shape of the target bar can be customized using the [TargetTypes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TargetTypes) property. Supported shapes include [Circle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TargetType.html#Syncfusion_Blazor_Charts_TargetType_Circle), [Cross](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TargetType.html#Syncfusion_Blazor_Charts_TargetType_Cross), and [Rect](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TargetType.html#Syncfusion_Blazor_Charts_TargetType_Rect) (default). ```cshtml + @using Syncfusion.Blazor.Charts @@ -50,20 +54,22 @@ The shape of the target bar can be customized using the [TargetTypes](https://he