From a067bceb880c2010794d45eb18ec4fede785c3f1 Mon Sep 17 00:00:00 2001 From: mohammednowfel4989 Date: Fri, 3 Oct 2025 12:28:49 +0530 Subject: [PATCH 1/2] 983838: Updated the UG content and example changes in the bullet chart control. --- blazor/bullet-chart/accessibility.md | 34 +-- blazor/bullet-chart/actual-bar.md | 33 +-- blazor/bullet-chart/axis-customization.md | 200 +++++++++++++----- .../bullet-chart/bullet-chart-dimensions.md | 55 +++-- blazor/bullet-chart/customization.md | 31 ++- blazor/bullet-chart/data-binding.md | 11 +- blazor/bullet-chart/data-label.md | 19 +- blazor/bullet-chart/events.md | 94 ++++---- blazor/bullet-chart/legend.md | 73 ++++--- blazor/bullet-chart/ranges.md | 22 +- blazor/bullet-chart/target-bar.md | 27 ++- blazor/bullet-chart/title.md | 41 ++-- blazor/bullet-chart/tool-tip.md | 39 ++-- 13 files changed, 438 insertions(+), 241 deletions(-) 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
No - The component does not meet the requirement.
-## 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 393604685c..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,48 +9,53 @@ 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 - + -@code{ +@code { public class ChartData { public double FieldValue { get; set; } } + public List BulletChartData = new List { 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 - + + ``` 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 @@ -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/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) \ No newline at end of file +![Customizing Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar-customization.png) 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 List BulletChartData = 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" %} ![Customizing Major and Minor TickLines in Blazor Bullet Chart](images/blazor-bullet-chart-tick-line-customization.png) -## 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 - + -``` -N> Refer to the [code block](#majorticklines-and-minorticklines-customization) to know about the property value of **BulletChartData**. +@code { + public class ChartData + { + public double FieldValue { get; set; } + public double Target { get; set; } + } + + public List 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" %} ![Changing Tick Position in Blazor Bullet Chart](images/blazor-bullet-chart-tick-position.png) -## 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 - + -``` -N> Refer to the [code block](#majorticklines-and-minorticklines-customization) to know about the property value of **BulletChartData**. +@code { + public class ChartData + { + public double FieldValue { get; set; } + public double Target { get; set; } + } + + public List 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" %} ![Changing Label Format in Blazor Bullet Chart](images/blazor-bullet-chart-label-format.png) -The following table describes the result of applying some commonly used formats to numeric axis values. +The table below shows the results of applying common formats to numeric axis values. - - + + - + - + - + - + - + - + - + - +
Label Value Label Format property valueResult Description ResultDescription
1000 n1 1000.0The result is rounded to 1 decimal place.Rounded to 1 decimal place.
1000 n2 1000.00The result is rounded to 2 decimal places.Rounded to 2 decimal places.
1000 n3 1000.000The 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.0The 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.00The currency symbol is appended to the result and it is rounded to 2 decimal places.Currency symbol appended, rounded to 2 decimal places.
-## 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.Charts - + -@code{ +@code { public class ChartData { public double FieldValue { get; set; } public double Target { get; set; } } + public List 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" %} ![Grouping in Blazor Bullet Chart](images/blazor-bullet-chart-grouping.png) -## 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 - + -``` -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 List 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" %} ![Blazor Bullet Chart with Custom Label Format](images/blazor-bullet-chart-custom-label-format.png) -## 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 List BulletChartData = 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" %} ![Changing Label Position in Blazor Bullet Chart](images/blazor-bullet-chart-labels-position.png) -## 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 List BulletChartData = 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" %} ![Blazor Bullet Chart with Opposed Position](images/blazor-bullet-chart-opposed-position.png) -## 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" %} ![Blazor Bullet Chart with Category Label](images/blazor-bullet-chart-category-label.png) -## 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 List BulletChartData = 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" %} -![Customizing Axis and Category Label in Blazor Bullet Chart](images/blazor-bullet-chart-label-customization.png) \ No newline at end of file +![Customizing Axis and Category Labels in Blazor Bullet Chart](images/blazor-bullet-chart-label-customization.png) 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 List BulletChartData = 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 List BulletChartData = 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 List BulletChartData = 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" %} -![Blazor Bullet Chart with Margin](images/blazor-bullet-chart-margin.png) \ No newline at end of file +![Blazor Bullet Chart with Margin](images/blazor-bullet-chart-margin.png) 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 List BulletChartData = new List { new ChartData { FieldValue = 55, TargetValue = 75 } }; } + ``` ![Blazor Bullet Chart with Orientation](images/blazor-bullet-chart-orientation.png) -## 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 + ``` N> Refer to the [code block](#orientation) to know about the property value of **BulletChartData**. @@ -59,9 +64,10 @@ N> Refer to the [code block](#orientation) to know about the property value of * ## Animation -The actual and the target bar supports the linear animation via the [BulletChartAnimation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartAnimation.html) setting. The speed and the delay are controlled using the [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartAnimation.html#Syncfusion_Blazor_Charts_BulletChartAnimation_Duration) and [Delay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartAnimation.html#Syncfusion_Blazor_Charts_BulletChartAnimation_Delay) properties respectively. +The actual and target bars support linear animation using the [BulletChartAnimation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartAnimation.html) property. Control animation speed and delay with the [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartAnimation.html#Syncfusion_Blazor_Charts_BulletChartAnimation_Duration) and [Delay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartAnimation.html#Syncfusion_Blazor_Charts_BulletChartAnimation_Delay) properties. ```cshtml + @using Syncfusion.Blazor.Charts @@ -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 - + + ``` N> Refer to the [code block](#orientation) to know about the property value of **BulletChartData**. -![Blazor Bullet Chart with Border](images/blazor-bullet-chart-with-border.png) \ No newline at end of file +![Blazor Bullet Chart with Border](images/blazor-bullet-chart-with-border.png) diff --git a/blazor/bullet-chart/data-binding.md b/blazor/bullet-chart/data-binding.md index b732b4aa4c..7da5b2a19d 100644 --- a/blazor/bullet-chart/data-binding.md +++ b/blazor/bullet-chart/data-binding.md @@ -1,7 +1,7 @@ --- layout: post title: Working with Data in Blazor Bullet Chart Component | Syncfusion -description: Checkout and learn here all about working with data in Syncfusion Blazor Bullet Chart component and more. +description: Check out and learn how to bind data, configure value and target fields, and display multiple measures in Syncfusion Blazor Bullet Chart component. platform: Blazor control: Bullet Chart documentation: ug @@ -9,9 +9,10 @@ documentation: ug # Working with Data in Blazor Bullet Chart Component -The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_DataSource) property accepts a collection of values as input that helps to display measures, and compares them to a target bar. To display the actual and target bar, specify the property from the datasource into the [ValueField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_ValueField) and [TargetField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TargetField) respectively. +The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_DataSource) property allows you to bind a collection of data to the Bullet Chart, enabling the visualization of actual and target measures. To display the actual and target bars, assign the appropriate properties from your data source to the [ValueField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_ValueField) and [TargetField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TargetField) properties. The component also supports multiple comparative measures for each data point. ```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 List InputData = 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" %} -![Data Binding in Blazor Bullet Chart](images/blazor-bullet-chart-data-binding.png) \ No newline at end of file +![Data Binding in Blazor Bullet Chart](images/blazor-bullet-chart-data-binding.png) 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 - + -@code{ +@code { public class ChartData { public double ValueField { get; set; } public double ComparativeMeasureValue { get; set; } public string Category { get; set; } } + public List 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**. -![Blazor Bullet Chart with Data Labels](images/blazor-bullet-chart-data-label.png) \ No newline at end of file +![Blazor Bullet Chart with Data Labels](images/blazor-bullet-chart-data-label.png) 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.Charts -@code{ +@code { public class ChartData { public double FieldValue { get; set; } public double TargetValue { get; set; } } + public List BulletChartData = 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 + -@code{ +@code { public SfBulletChart 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 List BulletChartData = 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/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 - + -@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 }, @@ -36,23 +38,25 @@ Legend is used to provide valuable information for interpreting what the Bullet new ChartData { FieldValue = 75, TargetValue = 35 } }; } + ``` ![Legend in Blazor Bullet Chart](images/blazor-bullet-chart-legend.png) -## 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**. ![Customizing Legend Items with Color Mapping in Blazor Bullet Chart](images/blazor-bullet-chart-legend-color-mapping.png) -## 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 ![Customizing Legend Size in Blazor Bullet Chart](images/blazor-bullet-chart-legend-size.png) -## 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**. ![Legend with Paging in Blazor Bullet Chart](images/blazor-bullet-chart-legend-paging.png) -## 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**. ![Blazor Bullet Chart displays Legend on Top Position](images/blazor-bullet-chart-legend-on-top-position.png) -[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**. ![Blazor Bullet Chart displays Legend on Custom position](images/blazor-bullet-chart-legend-on-custom-position.png) -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**. -![Customizing Legend Items in Blazor Bullet Chart](images/blazor-bullet-chart-legend-customization.png) \ No newline at end of file +![Customizing Legend Items in Blazor Bullet Chart](images/blazor-bullet-chart-legend-customization.png) diff --git a/blazor/bullet-chart/ranges.md b/blazor/bullet-chart/ranges.md index 0837c0c3ab..3cf4deb739 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. 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 - + -@code{ +@code { public class ChartData { public double FieldValue { get; set; } public double TargetValue { get; set; } } + public List 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" %} ![Ranges in Blazor Bullet Chart](images/blazor-bullet-chart-range.png) -## 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 List BulletChartData = 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" %} -![Customizing Ranges with Color in Blazor Bullet Chart](images/blazor-bullet-chart-range-customization.png) \ No newline at end of file +![Customizing Ranges with Color in Blazor Bullet Chart](images/blazor-bullet-chart-range-customization.png) 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 List BulletChartData = new List { new ChartData { Target = 25 } }; } + ``` ![Target Bar in Blazor Bullet Chart](images/blazor-bullet-chart-target-bar.png) -## 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 + ``` N> Refer to the [code block](#target-bar-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**. ![Rectangle Target Bar with Blazor Bullet Chart](images/blazor-bullet-chart-rectangle-target-bar.png) -## Target bar customization +## Target Bar Customization -The following properties can be used to customize the Target Bar. +The following properties are available to customize the appearance of the target bar: -* [TargetColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TargetColor) - Specifies the fill color of Target Bar. -* [TargetWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TargetWidth) - Specifies the width of Target Bar. +* [TargetColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TargetColor) – Sets the fill color of the target bar. +* [TargetWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TargetWidth) – Sets the width of the target bar. ```cshtml + @using Syncfusion.Blazor.Charts @@ -73,8 +79,9 @@ The following properties can be used to customize the Target Bar. + ``` N> Refer to the [code block](#target-bar-in-blazor-bullet-chart-component) to know about the property value of the **BulletChartData**. -![Customizing Target Bar in Blazor Bullet Chart](images/blazor-bullet-chart-target-bar-customization.png) \ No newline at end of file +![Customizing Target Bar in Blazor Bullet Chart](images/blazor-bullet-chart-target-bar-customization.png) diff --git a/blazor/bullet-chart/title.md b/blazor/bullet-chart/title.md index 8652a2175a..d66d29cac9 100644 --- a/blazor/bullet-chart/title.md +++ b/blazor/bullet-chart/title.md @@ -1,7 +1,7 @@ --- layout: post title: Title and Subtitle in Blazor Bullet Chart Component | Syncfusion -description: Checkout and learn here all about Title and Subtitle in Syncfusion Blazor Bullet Chart component and much more. +description: Check out and learn how to add and customize Title and Subtitle in Syncfusion Blazor Bullet Chart component. platform: Blazor control: Bullet Chart documentation: ug @@ -11,64 +11,70 @@ documentation: ug ## Title -The title of the [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) displays the information about the data plotted by specifying it in the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Title) property. +The title of the [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) provides context about the data being visualized. Set the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Title) property to display a chart title. ```cshtml + @using Syncfusion.Blazor.Charts - + -@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 } }; } + ``` ![Blazor Bullet Chart with Title](images/blazor-bullet-chart-with-title.png) ## Subtitle -To show additional information about the data plotted, the Bullet Chart can also be given a subtitle using the [Subtitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Subtitle) property. +To provide additional context, use the [Subtitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Subtitle) property to display a subtitle below the main title. ```cshtml + @using Syncfusion.Blazor.Charts - + + ``` N> Refer to the [code block](#title) to know about the property value of the **BulletChartData**. ![Blazor Bullet Chart with Subtitle](images/blazor-bullet-chart-subtitle.png) -## Title and subtitle position +## Title and Subtitle Position -The title and the subtitle positions can be customized using the [TitlePosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TitlePosition) property. Possible positions are [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TextPosition.html#Syncfusion_Blazor_Charts_TextPosition_Left), [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TextPosition.html#Syncfusion_Blazor_Charts_TextPosition_Right), [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TextPosition.html#Syncfusion_Blazor_Charts_TextPosition_Top) and [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TextPosition.html#Syncfusion_Blazor_Charts_TextPosition_Bottom). +Customize the position of the title and subtitle using the [TitlePosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TitlePosition) property. Possible positions include [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TextPosition.html#Syncfusion_Blazor_Charts_TextPosition_Left), [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TextPosition.html#Syncfusion_Blazor_Charts_TextPosition_Right), [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TextPosition.html#Syncfusion_Blazor_Charts_TextPosition_Top), and [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TextPosition.html#Syncfusion_Blazor_Charts_TextPosition_Bottom). ```cshtml + @using Syncfusion.Blazor.Charts - + @@ -76,7 +82,7 @@ The title and the subtitle positions can be customized using the [TitlePosition] - + @@ -84,7 +90,7 @@ The title and the subtitle positions can be customized using the [TitlePosition] - + @@ -92,35 +98,38 @@ The title and the subtitle positions can be customized using the [TitlePosition] - + + ``` N> Refer to the [code block](#title) to know about the property value of the **BulletChartData**. ![Changing Title and Subtitle Position in Blazor Bullet Chart](images/blazor-bullet-chart-title-positions.png) -## Title and subtitle customization +## Title and Subtitle Customization -The title and the subtitle - color, opacity, font size, font family, font weight, and font style can be customized using the [BulletChartTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTitleStyle.html) and the [BulletChartSubTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartSubTitleStyle.html) settings. The [MaximumTitleWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCommonFont.html#Syncfusion_Blazor_Charts_BulletChartCommonFont_MaximumTitleWidth) property determines the maximum width of the text, and the [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCommonFont.html#Syncfusion_Blazor_Charts_BulletChartCommonFont_TextOverflow) property is used to [Wrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TextOverflow.html#Syncfusion_Blazor_Charts_TextOverflow_Wrap) or [Trim](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TextOverflow.html#Syncfusion_Blazor_Charts_TextOverflow_Trim) the title and the subtitle when the text size exceeds the [MaximumTitleWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCommonFont.html#Syncfusion_Blazor_Charts_BulletChartCommonFont_MaximumTitleWidth). The default value of the [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCommonFont.html#Syncfusion_Blazor_Charts_BulletChartCommonFont_TextOverflow) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TextOverflow.html#Syncfusion_Blazor_Charts_TextOverflow_None). +Customize the color, opacity, font size, font family, font weight, and font style of the title and subtitle using the [BulletChartTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTitleStyle.html) and [BulletChartSubTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartSubTitleStyle.html) properties. The [MaximumTitleWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCommonFont.html#Syncfusion_Blazor_Charts_BulletChartCommonFont_MaximumTitleWidth) property sets the maximum width of the text, and the [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCommonFont.html#Syncfusion_Blazor_Charts_BulletChartCommonFont_TextOverflow) property controls whether the title and subtitle are [Wrapped](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TextOverflow.html#Syncfusion_Blazor_Charts_TextOverflow_Wrap) or [Trimmed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TextOverflow.html#Syncfusion_Blazor_Charts_TextOverflow_Trim) when the text exceeds the maximum width. The default value for [TextOverflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartCommonFont.html#Syncfusion_Blazor_Charts_BulletChartCommonFont_TextOverflow) is [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.TextOverflow.html#Syncfusion_Blazor_Charts_TextOverflow_None). ```cshtml + @using Syncfusion.Blazor.Charts - + + ``` N> Refer to the [code block](#title) to know about the property value of the **BulletChartData**. -![Customizing Title and Subtitle in Blazor Bullet Chart](images/blazor-bullet-chart-title-customization.png) \ No newline at end of file +![Customizing Title and Subtitle in Blazor Bullet Chart](images/blazor-bullet-chart-title-customization.png) diff --git a/blazor/bullet-chart/tool-tip.md b/blazor/bullet-chart/tool-tip.md index f71021d817..3c188e260f 100644 --- a/blazor/bullet-chart/tool-tip.md +++ b/blazor/bullet-chart/tool-tip.md @@ -1,7 +1,7 @@ --- layout: post title: Tooltip in Blazor Bullet Chart Component | Syncfusion -description: Checkout and learn here all about Tooltip in Syncfusion Blazor Bullet Chart component and much more. +description: Check out and learn how to configure and customize Tooltip in Syncfusion Blazor Bullet Chart component. platform: Blazor control: Bullet Chart documentation: ug @@ -9,31 +9,33 @@ documentation: ug # Tooltip in Blazor Bullet Chart Component -When the mouse is hovered over a bar in the Bullet Chart, the tooltip displays important summary about the actual and the target bar values. +When hovering over a bar in the Bullet Chart, the tooltip displays key information about the actual and target bar values. -## Default tooltip +## Default Tooltip -The tooltip is not visible by default. To make it visible, set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltip-1.html#Syncfusion_Blazor_Charts_BulletChartTooltip_1_Enable) property in the [BulletChartTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltip-1.html) to **true**. +The tooltip is hidden by default. To display it, set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltip-1.html#Syncfusion_Blazor_Charts_BulletChartTooltip_1_Enable) property in [BulletChartTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltip-1.html) to **true**. ```cshtml + @using Syncfusion.Blazor.Charts - + -@code{ +@code { public class ChartData { public double ValueField { get; set; } public double TargetValue { get; set; } public string Category { get; set; } } + public List BulletChartData = new List { new ChartData { ValueField = 5, TargetValue = 7.5, Category = "2001" }, @@ -44,19 +46,21 @@ The tooltip is not visible by default. To make it visible, set the [Enable](http new ChartData { ValueField = 8, TargetValue = 6, Category = "2006" } }; } + ``` ![Blazor Bullet Chart displays ToolTip](images/blazor-bulletchart-tooltip.png) -## Tooltip customization +## Tooltip Customization -The following properties can be used to customize the Bullet Chart tooltip. +Customize the Bullet Chart tooltip using the following properties: -* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltip-1.html#Syncfusion_Blazor_Charts_BulletChartTooltip_1_Fill) - Specifies the color of tooltip. -* [BulletChartTooltipBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltipBorder.html) - Specifies the tooltip border color and width. -* [BulletChartTooltipTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltipTextStyle.html) - Specifies the tooltip font family, font style, font weight, color and size. +* [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltip-1.html#Syncfusion_Blazor_Charts_BulletChartTooltip_1_Fill) – Sets the tooltip background color. +* [BulletChartTooltipBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltipBorder.html) – Sets the tooltip border color and width. +* [BulletChartTooltipTextStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltipTextStyle.html) – Sets the tooltip font family, style, weight, color, and size. ```cshtml + @using Syncfusion.Blazor.Charts @@ -65,22 +69,24 @@ The following properties can be used to customize the Bullet Chart tooltip. - + + ``` N> Refer to the [code block](#default-tooltip) to know about the property value of the **BulletChartData**. ![Customizing Blazor Bullet Chart ToolTip](images/blazor-bullet-chart-tooltip-customization.png) -## Tooltip template +## Tooltip Template -The tooltip can be rendered as a custom component using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltip-1.html#Syncfusion_Blazor_Charts_BulletChartTooltip_1_Template) property in the [BulletChartTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltip-1.html) which accepts one or more UI elements as an input, that can be rendered as a part of the tooltip rendering. +Render a custom tooltip using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltip-1.html#Syncfusion_Blazor_Charts_BulletChartTooltip_1_Template) property in [BulletChartTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltip-1.html), which accepts one or more UI elements as input. ```cshtml + @using Syncfusion.Blazor.Charts @@ -102,13 +108,14 @@ The tooltip can be rendered as a custom component using the [Template](https://h - + + ``` N> Refer to the [code block](#default-tooltip) to know about the property value of the **BulletChartData**. -![Blazor Bullet Chart Tooltip with Template](images/blazor-bullet-chart-tooltip-template.png) \ No newline at end of file +![Blazor Bullet Chart Tooltip with Template](images/blazor-bullet-chart-tooltip-template.png) From 97c16b30fee6a2b8815ff770f8ed2a106bf8c21a Mon Sep 17 00:00:00 2001 From: mohammednowfel4989 Date: Fri, 3 Oct 2025 12:44:10 +0530 Subject: [PATCH 2/2] 982808: Resolved the font matter error in the PR. --- blazor/bullet-chart/ranges.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/blazor/bullet-chart/ranges.md b/blazor/bullet-chart/ranges.md index 3cf4deb739..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: Check out and learn how to define and customize ranges in Syncfusion Blazor Bullet Chart component. +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