Merge pull request #6795 from syncfusion-content/983838-BulletChartUG

983838: Updated the UG content and example changes in the bullet chart.

Author: Gowrimathi

blazor/bullet-chart/accessibility.md

@@ -1,17 +1,17 @@
 ---
 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
 ---
 
 # 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,36 +37,36 @@ The accessibility compliance for the Blazor Bullet Chart component is outlined b
 
 <div><img src="https://cdn.syncfusion.com/content/images/documentation/not-supported.png" alt="No"> - The component does not meet the requirement.</div>
 
-## 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)
 * region (role)
 * 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 |
 | --- | --- | --- |
-|<kbd>Alt</kbd> + <kbd>J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Moves the focus to the Bullet Chart element. |
-| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves the focus to the next element in the Bullet Chart. |
-| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves the focus to the previous element in the Bullet Chart. |
-| <kbd>↑</kbd> / <kbd>→</kbd> | <kbd>↑</kbd> / <kbd>→</kbd> | Moves the focus to the legend right side from the selected legend. |
-| <kbd>↓</kbd> / <kbd>←</kbd> | <kbd>↓</kbd> / <kbd>←</kbd> | Moves the focus to the legend left side from the selected legend. |
+|<kbd>Alt</kbd> + <kbd>J</kbd> | <kbd>⌥</kbd> + <kbd>J</kbd> | Moves focus to the Bullet Chart element. |
+| <kbd>Tab</kbd> | <kbd>Tab</kbd> | Moves focus to the next element in the Bullet Chart. |
+| <kbd>Shift</kbd> + <kbd>Tab</kbd> | <kbd>⇧</kbd> + <kbd>Tab</kbd> | Moves focus to the previous element in the Bullet Chart. |
+| <kbd>↑</kbd> / <kbd>→</kbd> | <kbd>↑</kbd> / <kbd>→</kbd> | Moves focus to the legend right side from the selected legend. |
+| <kbd>↓</kbd> / <kbd>←</kbd> | <kbd>↓</kbd> / <kbd>←</kbd> | Moves focus to the legend left side from the selected legend. |
 | <kbd>Ctrl + P</kbd> | <kbd>⌘</kbd> + <kbd>P</kbd> | 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<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)
+* [Accessibility in Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components](https://blazor.syncfusion.com/documentation/common/accessibility)

blazor/bullet-chart/actual-bar.md

@@ -1,56 +1,61 @@
 ---
 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
 ---
 
 # 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
 
 <SfBulletChart DataSource="@BulletChartData" ValueField="FieldValue" Minimum="0" Maximum="30" Interval="5">
     <BulletChartRangeCollection>
-        <BulletChartRange End=20> </BulletChartRange>
+        <BulletChartRange End=20></BulletChartRange>
         <BulletChartRange End=25></BulletChartRange>
         <BulletChartRange End=30></BulletChartRange>
     </BulletChartRangeCollection>
 </SfBulletChart>
 
-@code{
+@code {
     public class ChartData
     {
         public double FieldValue { get; set; }
     }
+
     public List<ChartData> BulletChartData = new List<ChartData>
     {
         new ChartData { FieldValue = 23}
     };
 }
+
 ```
 {% previewsample "https://blazorplayground.syncfusion.com/embed/BNVyXuBzBauPiECo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 ![Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar.png)
 
-## 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
 
 <SfBulletChart DataSource="@BulletChartData" Type="FeatureType.Dot" ValueField="FieldValue" Minimum="0" Maximum="30" Interval="5">
     <BulletChartRangeCollection>
-        <BulletChartRange End=20> </BulletChartRange>
+        <BulletChartRange End=20></BulletChartRange>
         <BulletChartRange End=25></BulletChartRange>
         <BulletChartRange End=30></BulletChartRange>
     </BulletChartRangeCollection>
 </SfBulletChart>
+
 ```
 
 N> Refer to the [code block](#actual-bar-in-blazor-bullet-chart-component) to know more about the property value of the **BulletChartData**.
@@ -59,15 +64,16 @@ N> Refer to the [code block](#actual-bar-in-blazor-bullet-chart-component) to kn
 
 ![Blazor Bullet Chart with Dot Actual Bar](images/blazor-bullet-chart-dot-actual-bar.png)
 
-## Actual bar customization
+## Customizing the Actual Bar
 
-The following properties will be used to customize the actual bar.
+The following properties are available to customize the appearance of the actual bar:
 
-* [ValueFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_ValueFill) - Specifies the fill color of the actual bar.
-* [ValueHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_ValueHeight) - Specifies the width of the actual bar.
-* [BulletChartValueBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartValueBorder.html) - Specifies the border color and the border width of the actual bar.
+* [ValueFill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_ValueFill) – Sets the fill color of the actual bar.
+* [ValueHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_ValueHeight) – Sets the width of the actual bar.
+* [BulletChartValueBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartValueBorder.html) – Sets the border color and width of the actual bar.
 
 ```cshtml
+
 @using Syncfusion.Blazor.Charts
 
 <SfBulletChart DataSource="@BulletChartData" ValueFill="lightblue" ValueHeight="15" ValueField="FieldValue" Minimum="0" Maximum="30" Interval="5">
@@ -78,10 +84,11 @@ The following properties will be used to customize the actual bar.
         <BulletChartRange End=30></BulletChartRange>
     </BulletChartRangeCollection>
 </SfBulletChart>
+
 ```
 
 N> Refer to the [code block](#actual-bar-in-blazor-bullet-chart-component) to know more about the property value of the **BulletChartData**.
 
 {% previewsample "https://blazorplayground.syncfusion.com/embed/LZVIDEVTKZNwIDPb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
-![Customizing Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar-customization.png)
+![Customizing Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar-customization.png)