diff --git a/chart-sdk/blazor/circular-gauge/accessibility.md b/chart-sdk/blazor/circular-gauge/accessibility.md index 1dce2b573..eae0d7124 100644 --- a/chart-sdk/blazor/circular-gauge/accessibility.md +++ b/chart-sdk/blazor/circular-gauge/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in Blazor Circular Gauge Component | Syncfusion® -description: Checkout and learn here all the features about Accessibility in Blazor Circular Gauge component and more. -platform: chart-sdk +title: Blazor Circular Gauge Accessibility | Syncfusion® +description: Learn how to make the Blazor Circular Gauge accessible with WCAG 2.2 AA, Section 508, screen reader, RTL, and color contrast support. +platform: Blazor control: Circular Gauge documentation: ug --- -# Accessibility in Blazor Circular Gauge Component +# Blazor Circular Gauge Accessibility The [Blazor Circular Gauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component follows commonly used accessibility guidelines and standards, such as [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). diff --git a/chart-sdk/blazor/circular-gauge/animation.md b/chart-sdk/blazor/circular-gauge/animation.md index 46bd41e51..f47b8d961 100644 --- a/chart-sdk/blazor/circular-gauge/animation.md +++ b/chart-sdk/blazor/circular-gauge/animation.md @@ -1,13 +1,13 @@ --- layout: post -title: Animation in Blazor Circular Gauge Component | Syncfusion® -description: Checkout and learn here all the features about animation in the Blazor Circular Gauge component and much more. -platform: chart-sdk +title: Blazor Circular Gauge Animation | Syncfusion® +description: Learn how to animate the Blazor Circular Gauge elements sequentially using the AnimationDuration property to render axis, ticks, labels, and pointers. +platform: Blazor control: Circular Gauge documentation: ug --- -# Animation in Blazor Circular Gauge Component +# Blazor Circular Gauge Animation All of the elements in the Circular Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_AnimationDuration) property. The animation for the Circular Gauge is enabled when the `AnimationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `AnimationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. diff --git a/chart-sdk/blazor/circular-gauge/annotations.md b/chart-sdk/blazor/circular-gauge/annotations.md index d07bd254d..e4984ebc8 100644 --- a/chart-sdk/blazor/circular-gauge/annotations.md +++ b/chart-sdk/blazor/circular-gauge/annotations.md @@ -1,19 +1,19 @@ --- layout: post -title: Annotations in Blazor Circular Gauge Component | Syncfusion® -description: Checkout and learn here all the features about Annotations in Blazor Circular Gauge component and more. -platform: chart-sdk +title: Blazor Circular Gauge Annotations | Syncfusion® +description: Learn how to mark specific areas of interest in the Blazor Circular Gauge by adding text, shapes, or images as annotations using ContentTemplate. +platform: Blazor control: Circular Gauge documentation: ug --- -# Annotations in Blazor Circular Gauge Component +# Blazor Circular Gauge Annotations Annotations are used to mark a specific area of interest in the Circular Gauge with texts, shapes, or images. ## Customization -You can place any custom element on the axis area using [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAnnotation_ContentTemplate) in the [CircularGaugeAnnotation](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html). +You can place any custom element on the axis area using [ContentTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAnnotation_ContentTemplate) in the [CircularGaugeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html). ```cshtml @using Syncfusion.Blazor.CircularGauge @@ -25,7 +25,7 @@ You can place any custom element on the axis area using [ContentTemplate](https: - +
50
 @@ -46,7 +46,7 @@ You can place any custom element on the axis area using [ContentTemplate](https: } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLgWrBGKhmauxQC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Annotation](./images/blazor-circulargauge-annotation.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBxjRhdWaPWNSlp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Annotation](./images/blazor-circulargauge-annotation.webp)" %} ## Positioning the annotation @@ -65,7 +65,7 @@ The radius of an annotation takes values either in pixel or in percentage. By se
50
@@ -87,11 +87,11 @@ The radius of an annotation takes values either in pixel or in percentage. By se } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBgsrVcKVvLKeKB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Annotation Position in Blazor Circular Gauge](./images/blazor-circulargauge-annotation-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLHDRhHVNKqVrhw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Annotation Position in Blazor Circular Gauge](./images/blazor-circulargauge-annotation-position.webp)" %} ## Multiple annotations -Using [CircularGaugeAnnotation](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html), you can add multiple annotations to the circular gauge and each annotation content can be customized separately. +Using [CircularGaugeAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAnnotation.html), you can add multiple annotations to the circular gauge and each annotation content can be customized separately. ```cshtml @using Syncfusion.Blazor.CircularGauge @@ -142,7 +142,7 @@ Using [CircularGaugeAnnotation](https://help.syncfusion.com/cr/aspnetcore-blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVKWrBQqrFpJXLX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Multiple Annotation](./images/blazor-circulargauge-multiple-annotation.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBHXHLdLIUFgvum?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Multiple Annotation](./images/blazor-circulargauge-multiple-annotation.webp)" %} ## See also diff --git a/chart-sdk/blazor/circular-gauge/appearance.md b/chart-sdk/blazor/circular-gauge/appearance.md index 2b69ae77c..af7f65b33 100644 --- a/chart-sdk/blazor/circular-gauge/appearance.md +++ b/chart-sdk/blazor/circular-gauge/appearance.md @@ -1,13 +1,13 @@ --- layout: post -title: Appearance in Blazor Circular Gauge Component | Syncfusion® -description: Checkout and learn here all the features about Appearance in Blazor Circular Gauge component and more. -platform: chart-sdk +title: Blazor Circular Gauge Appearance | Syncfusion® +description: Learn how to customize the Blazor Circular Gauge title, position, and background using properties like Title, CenterX, CenterY, and Background. +platform: Blazor control: Circular Gauge documentation: ug --- -# Appearance in Blazor Circular Gauge Component +# Blazor Circular Gauge Appearance ## Circular gauge title @@ -27,7 +27,7 @@ You can add a title to the Circular Gauge using the [Title](https://help.syncfus ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLytkMmVzxeMrwb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Title](./images/blazor-circulargauge-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLxDHLdBYmAiGzW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Title](./images/blazor-circulargauge-title.webp)" %} ## Circular gauge position @@ -42,11 +42,13 @@ You can set the mid point of the Circular Gauge in pixel as shown below. - + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBKWVrmgfzCKvPj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Position based on Pixel Value](./images/blazor-circulargauge-custom-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVxDdVHLVCdTrQv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Circular Gauge Position based on Pixel Value](./images/blazor-circulargauge-custom-position.webp)" %} ### In percentage @@ -57,15 +59,18 @@ By setting the value in percentage, Circular Gauge gets its mid point with respe - + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthKiVBGgzfHHcXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[changing Blazor Circular Gauge Position based on Percent Value](./images/blazor-circulargauge-position-based-on-percentage.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLRjxVdBnxgiTKs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[changing Blazor Circular Gauge Position based on Percent Value](./images/blazor-circulargauge-position-based-on-percentage.webp)" %} ## Background customization -Using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_Background) and [CircularGaugeBorder](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeBorder.html) properties, you can change the background color and border of the Circular Gauge. +Using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_Background) and [CircularGaugeBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeBorder.html) properties, you can change the background color and border of the Circular Gauge. ```cshtml @using Syncfusion.Blazor.CircularGauge @@ -95,7 +100,7 @@ Using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBqiLLwApIVWPGg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Background and Border of Blazor Circular Gauge](./images/blazor-circulargauge-background-border-color.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLHZHBdVkFWzIZn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Background and Border of Blazor Circular Gauge](./images/blazor-circulargauge-background-border-color.webp)" %} ## Radius calculation based on angles @@ -109,8 +114,9 @@ You can render semi or quarter Circular Gauge by modifying the start and end ang + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqiVBmKJoTIDfY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Radius and Angle](./images/blazor-circulargauge-custom-radius-angle.webp)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVHNxVnLhJYJyGw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Custom Radius and Angle](./images/blazor-circulargauge-custom-radius-angle.webp)" %} diff --git a/chart-sdk/blazor/circular-gauge/axes.md b/chart-sdk/blazor/circular-gauge/axes.md index a1857bd7f..ad764ed8d 100644 --- a/chart-sdk/blazor/circular-gauge/axes.md +++ b/chart-sdk/blazor/circular-gauge/axes.md @@ -1,19 +1,19 @@ --- layout: post -title: Axes in Blazor Circular Gauge Component | Syncfusion® -description: Checkout and learn here all the features about Axes in the Blazor Circular Gauge component and much more. -platform: chart-sdk +title: Blazor Circular Gauge Axes | Syncfusion® +description: Learn how to configure the Blazor Circular Gauge axes, including line width and color, minimum and maximum values, background, and custom labels. +platform: Blazor control: Circular Gauge documentation: ug --- -# Axes in Blazor Circular Gauge Component +# Blazor Circular Gauge Axes By default, the Circular Gauge will be displayed with an axis. Each axis contains its own ranges, pointers, and annotations. ## Axis customization -You can customize the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLineStyle.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAxisLineStyle_Width) and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLineStyle.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAxisLineStyle_Color) of an axis line using the [CircularGaugeAxisLineStyle](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLineStyle.html) tag. The background for an axis can be customized using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxis.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAxis_Background) property. +You can customize the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLineStyle.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAxisLineStyle_Width) and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLineStyle.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAxisLineStyle_Color) of an axis line using the [CircularGaugeAxisLineStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLineStyle.html) tag. The background for an axis can be customized using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxis.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAxis_Background) property. ```cshtml @using Syncfusion.Blazor.CircularGauge @@ -21,13 +21,14 @@ You can customize the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.B + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhACVBmKWKyenGt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Circular Gauge Axis](./images/blazor-circulargauge-axis-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLHjHBHLZmHWsvk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Blazor Circular Gauge Axis](./images/blazor-circulargauge-axis-customization.webp)" %} ## Minimum and maximum @@ -39,11 +40,12 @@ The [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGa - + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVqWLVwgsAcbrhk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Axis with Custom Value](./images/blazor-circulargauge-custom-value.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBxNnBxVqBQYNOy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge Axis with Custom Value](./images/blazor-circulargauge-custom-value.webp)" %} ## Start and end angle @@ -55,11 +57,12 @@ You can sweep the Circular Gauge axis from 0 to 360 degrees. By default, the sta + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUWhLGKMTZNUsx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Angle](./images/blazor-circulargauge-custom-angle.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVxjHLRBMYxMgmE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Custom Angle](./images/blazor-circulargauge-custom-angle.webp)" %} ## Axis radius @@ -75,11 +78,12 @@ You can set the radius of the Circular Gauge in pixel as shown below. + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBqMBLwUiJBVDaN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Radius](./images/blazor-circulargauge-custom-radius.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrxNHrRVrRslDrP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Custom Radius](./images/blazor-circulargauge-custom-radius.webp)" %} ### In percentage @@ -90,17 +94,21 @@ By setting value in percentage, Circular Gauge gets its dimension with respect t - + + + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrqWVhGAWzzitMZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Radius in Percentage](./images/blazor-circulargauge-percentage-radius.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrxDdLHrxAkBwIn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Circular Gauge Radius in Percentage](./images/blazor-circulargauge-percentage-radius.webp)" %} ## Ticks -You can customize the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeTickSettings.html#Syncfusion_Blazor_CircularGauge_CircularGaugeTickSettings_Height), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeTickSettings.html#Syncfusion_Blazor_CircularGauge_CircularGaugeTickSettings_Color), and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeTickSettings.html#Syncfusion_Blazor_CircularGauge_CircularGaugeTickSettings_Width) of major ticks and minor ticks using the [CircularGaugeAxisMajorTicks](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisMajorTicks.html) and [CircularGaugeAxisMinorTicks](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisMinorTicks.html) tags. +You can customize the [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeTickSettings.html#Syncfusion_Blazor_CircularGauge_CircularGaugeTickSettings_Height), [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeTickSettings.html#Syncfusion_Blazor_CircularGauge_CircularGaugeTickSettings_Color), and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeTickSettings.html#Syncfusion_Blazor_CircularGauge_CircularGaugeTickSettings_Width) of major ticks and minor ticks using the [CircularGaugeAxisMajorTicks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisMajorTicks.html) and [CircularGaugeAxisMinorTicks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisMinorTicks.html) tags. -By default, [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeTickSettings.html#Syncfusion_Blazor_CircularGauge_CircularGaugeTickSettings_Interval) for [CircularGaugeAxisMajorTicks](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisMajorTicks.html) will be calculated automatically. You can customize the interval for major ticks and minor ticks using the [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeTickSettings.html#Syncfusion_Blazor_CircularGauge_CircularGaugeTickSettings_Interval) property. +By default, [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeTickSettings.html#Syncfusion_Blazor_CircularGauge_CircularGaugeTickSettings_Interval) for [CircularGaugeAxisMajorTicks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisMajorTicks.html) will be calculated automatically. You can customize the interval for major ticks and minor ticks using the [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeTickSettings.html#Syncfusion_Blazor_CircularGauge_CircularGaugeTickSettings_Interval) property. ```cshtml @using Syncfusion.Blazor.CircularGauge @@ -108,6 +116,9 @@ By default, [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C + + + @@ -116,7 +127,7 @@ By default, [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhgWhVmKsJHpAUv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Major and Minor Ticks in Blazor Circular Gauge](./images/blazor-circulargauge-ticks-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhHXdVdLcRpOKKZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Major and Minor Ticks in Blazor Circular Gauge](./images/blazor-circulargauge-ticks-customization.webp)" %} ### Tick position @@ -124,7 +135,7 @@ The minor ticks and major ticks can be positioned using the [Offset](https://hel * The [Offset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeTickSettings.html#Syncfusion_Blazor_CircularGauge_CircularGaugeTickSettings_Offset) defines the distance between the axis and ticks. By default, offset value is 0. -* The [Position](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.Position.html) will place the ticks on the axis. By default, ticks will be placed inside the axis. Its possible values are 'Position.Inside', 'Position.Outside', and 'Position.Cross'. +* The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.Position.html) will place the ticks on the axis. By default, ticks will be placed inside the axis. Its possible values are 'Position.Inside', 'Position.Outside', and 'Position.Cross'. ```cshtml @using Syncfusion.Blazor.CircularGauge @@ -132,6 +143,9 @@ The minor ticks and major ticks can be positioned using the [Offset](https://hel + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBgWVLQgCyNoNBa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Tick Position](./images/blazor-circulargauge-tick-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBnZRBdrcIsFlDP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Custom Tick Position](./images/blazor-circulargauge-tick-position.webp)" %} ## Labels -The labels of an axis can be customized using the [CircularGaugeAxisLabelFont](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLabelFont.html) tag in [CircularGaugeAxisLabelStyle](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLabelStyle.html) option. +The labels of an axis can be customized using the [CircularGaugeAxisLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLabelFont.html) tag in [CircularGaugeAxisLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLabelStyle.html) option. ```cshtml @using Syncfusion.Blazor.CircularGauge @@ -158,6 +172,7 @@ The labels of an axis can be customized using the [CircularGaugeAxisLabelFont](h + @@ -166,7 +181,7 @@ The labels of an axis can be customized using the [CircularGaugeAxisLabelFont](h ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrgMVVGqsSBmTLZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Circular Gauge Label](./images/blazor-circulargauge-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVHXnBxLTinpzka?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Blazor Circular Gauge Label](./images/blazor-circulargauge-label.webp)" %} ### Label position @@ -182,6 +197,7 @@ The labels can be moved using the [Offset](https://help.syncfusion.com/cr/blazor + @@ -189,7 +205,7 @@ The labels can be moved using the [Offset](https://help.syncfusion.com/cr/blazor ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhAWBrwAWyyrioJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Position of Blazor Circular Gauge](./images/blazor-circulargauge-label-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBxtnLHBAvghyBn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Label Position of Blazor Circular Gauge](./images/blazor-circulargauge-label-position.webp)" %} ### Auto angle @@ -201,16 +217,17 @@ The labels can be swept along the axis angle by enabling the [AutoAngle](https:/ + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLKsLhcgsewVlDw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Label in AutoAngle](./images/blazor-circulargauge-auto-angle.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrxjRhxhDdDgVGc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge Label in AutoAngle](./images/blazor-circulargauge-auto-angle.webp)" %} ### Smart labels -When an axis makes a complete circle, then the first and last labels of the axis will overlap with each other. So, you need to either hide first or last label using the [HiddenLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLabelStyle.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAxisLabelStyle_HiddenLabel) property. When 'HiddenLabel' value is [First](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.HiddenLabel.html), the first label will be hidden and when the 'HiddenLabel' value is [Last](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.HiddenLabel.html), the last label will be hidden. +When an axis makes a complete circle, then the first and last labels of the axis will overlap with each other. So, you need to either hide first or last label using the [HiddenLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLabelStyle.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAxisLabelStyle_HiddenLabel) property. When 'HiddenLabel' value is [First](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.HiddenLabel.html), the first label will be hidden and when the 'HiddenLabel' value is [Last](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLabelStyle.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAxisLabelStyle_HiddenLabel), the last label will be hidden. ```cshtml @using Syncfusion.Blazor.CircularGauge @@ -221,6 +238,9 @@ When an axis makes a complete circle, then the first and last labels of the axis Maximum="12" EndAngle="360" StartAngle="0"> + + + @@ -236,11 +256,11 @@ When an axis makes a complete circle, then the first and last labels of the axis ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLqMLVcqWSOwmqY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Smart Labels](./images/blazor-circulargauge-smart-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhHXnVRhwqeqUsV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Smart Labels](./images/blazor-circulargauge-smart-label.webp)" %} ### Label format -The axis labels can be formatted using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLabelStyle.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAxisLabelStyle_Format) property in [CircularGaugeAxisLabelStyle](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLabelStyle.html), it supports all globalize format. +The axis labels can be formatted using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLabelStyle.html#Syncfusion_Blazor_CircularGauge_CircularGaugeAxisLabelStyle_Format) property in [CircularGaugeAxisLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLabelStyle.html), it supports all globalize format. ```cshtml @using Syncfusion.Blazor.CircularGauge @@ -248,12 +268,13 @@ The axis labels can be formatted using the [Format](https://help.syncfusion.com/ + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsrBGKCdWFyxB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Format in Blazor Circular Gauge](./images/blazor-circulargauge-label-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBHDxVnhKIEELTS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Label Format in Blazor Circular Gauge](./images/blazor-circulargauge-label-format.webp)" %} The following table describes the result of applying some commonly used label formats on numeric values. @@ -325,12 +346,13 @@ Axis labels support custom label format using placeholder like {value}°C, in + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrgirrcgsdzgNwu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Label in Degree Format](./images/blazor-circulargauge-label-in-degree-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLxDnrdhKQKLDDl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Label in Degree Format](./images/blazor-circulargauge-label-in-degree-format.webp)" %} ### Show last label @@ -343,12 +365,13 @@ If the maximum value does not enter the interval of major ticks, the last label + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLqsLVmKCRxmzgP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Last Label of Blazor Circular Gauge](./images/blazor-circulargauge-last-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVnDnVHBTVIJkUT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Displaying Last Label of Blazor Circular Gauge](./images/blazor-circulargauge-last-label.webp)" %} ### Hide intersecting axis labels @@ -358,17 +381,18 @@ When the axis labels overlap with each other, you can hide the intersected label + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhAMhrmUWnkrsge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Intersecting Axis Labels in Blazor Circular Gauge](./images/blazor-circulargauge-hide-intersecting-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBxNdVRVUTKgQvf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Hiding Intersecting Axis Labels in Blazor Circular Gauge](./images/blazor-circulargauge-hide-intersecting-label.webp)" %} ## Axis direction -You can change the axis direction of the circular gauge using [Direction](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.GaugeDirection.html) property. Following axis directions are available in the circular gauge. +You can change the axis direction of the circular gauge using [Direction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.GaugeDirection.html) property. Following axis directions are available in the circular gauge. * ClockWise * AntiClockWise @@ -378,12 +402,13 @@ You can change the axis direction of the circular gauge using [Direction](https: - + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhqMVrmUWGVddDA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Axis Direction of Blazor Circular Gauge](./images/blazor-circulargauge-axis-direction.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrHtdhHVWGFwRlE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Axis Direction of Blazor Circular Gauge](./images/blazor-circulargauge-axis-direction.webp)" %} ## Multiple axes @@ -420,4 +445,4 @@ In addition to the default axis, you can add n number of axis to a gauge. Each a ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVgWhhcqiQyCvQy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Multiple Axes](./images/blazor-circulargauge-multiple-axes.webp)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBHNdrRVObawMlq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Multiple Axes](./images/blazor-circulargauge-multiple-axes.webp)" %} \ No newline at end of file diff --git a/chart-sdk/blazor/circular-gauge/content-security-policy.md b/chart-sdk/blazor/circular-gauge/content-security-policy.md index f4248e1a1..5fa4f131d 100644 --- a/chart-sdk/blazor/circular-gauge/content-security-policy.md +++ b/chart-sdk/blazor/circular-gauge/content-security-policy.md @@ -1,13 +1,13 @@ --- layout: post -title: Circular Gauge - Strict CSP Feature Limitations | Syncfusion® -description: Details on Blazor features in Circular Gauge Component that require Content Security Policy (CSP) relaxation. -platform: chart-sdk +title: Blazor Circular Gauge Content Security Policy | Syncfusion® +description: Learn how the Blazor Circular Gauge features work under strict Content Security Policy and which animation settings require unsafe-inline relaxation. +platform: Blazor control: Circular Gauge documentation: ug --- -# Circular Gauge - Content Security Policy Limitations +# Blazor Circular Gauge Content Security Policy ## What's supported under strict CSP ? diff --git a/chart-sdk/blazor/circular-gauge/dimensions.md b/chart-sdk/blazor/circular-gauge/dimensions.md index aa028d208..7eca00077 100644 --- a/chart-sdk/blazor/circular-gauge/dimensions.md +++ b/chart-sdk/blazor/circular-gauge/dimensions.md @@ -1,13 +1,13 @@ --- layout: post -title: Dimensions in Blazor Circular Gauge Component | Syncfusion® -description: Checkout and learn here all the features about Dimensions in Blazor Circular Gauge component and more. -platform: chart-sdk +title: Blazor Circular Gauge Dimensions | Syncfusion® +description: Learn how to set the Blazor Circular Gauge size in pixels or as a percentage of the container using the Width and Height properties. +platform: Blazor control: Circular Gauge documentation: ug --- -# Dimensions in Blazor Circular Gauge Component +# Blazor Circular Gauge Dimensions ## Size for Circular Gauge @@ -30,7 +30,7 @@ You can set the size of the Circular Gauge in pixel as demonstrated below. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthItOWmVBPpLJbl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Size in Pixel](./images/blazor-circulargauge-size.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLHDRhHgZDMRRsQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Circular Gauge Size in Pixel](./images/blazor-circulargauge-size.webp)" %} ### In percentage @@ -52,6 +52,6 @@ By setting value in percentage, gauge gets its dimension with respect to its con ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVetOicVLudqTfx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Size in Percentage](./images/blazor-circulargauge-size.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVxtdrdKttYumKi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Circular Gauge Size in Percentage](./images/blazor-circulargauge-size.webp)" %} N> When you do not specify the size, it takes `450` pixels as the height and window size as its width. \ No newline at end of file diff --git a/chart-sdk/blazor/circular-gauge/events.md b/chart-sdk/blazor/circular-gauge/events.md index 426f90358..aa5824b0c 100644 --- a/chart-sdk/blazor/circular-gauge/events.md +++ b/chart-sdk/blazor/circular-gauge/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Events in Blazor Circular Gauge Component | Syncfusion® -description: Checkout and learn here all the features about Events in Blazor Circular Gauge component and much more. -platform: chart-sdk +title: Blazor Circular Gauge Events | Syncfusion® +description: Learn how to handle Blazor Circular Gauge events such as OnDragMove to update pointer values while the user drags a pointer across the gauge. +platform: Blazor control: Circular Gauge documentation: ug --- -# Events in Blazor Circular Gauge Component +# Blazor Circular Gauge Events ## Using events in Circular Gauge component diff --git a/chart-sdk/blazor/circular-gauge/getting-started-with-server-app.md b/chart-sdk/blazor/circular-gauge/getting-started-with-server-app.md index 3be178d13..32f1502f6 100644 --- a/chart-sdk/blazor/circular-gauge/getting-started-with-server-app.md +++ b/chart-sdk/blazor/circular-gauge/getting-started-with-server-app.md @@ -1,111 +1,121 @@ --- layout: post -title: Getting Started with Blazor CircularGauge in Server App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor CircularGauge Component in Blazor Server App. -platform: chart-sdk -component: CircularGauge +title: Getting Started with Blazor Circular Gauge in Server App | Syncfusion +description: Learn how to add the Blazor Circular Gauge to a new Blazor Server app using Visual Studio, VS Code, or the .NET CLI. +platform: Blazor +control: Circular Gauge documentation: ug --- -# Getting Started with Blazor CircularGauge Component in Server App +# Getting Started with Blazor Circular Gauge in Server App -This section briefly explains about how to include [Blazor CircularGauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor Circular Gauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor Server App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Run the following command to create a new Blazor Server App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorApp --interactivity Server +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor Server App. {% tabs %} +{% highlight razor tabtitle="Command Prompt" %} -{% highlight c# tabtitle="Blazor Server App" %} - -dotnet new blazor -o BlazorApp -int Server +dotnet new blazor -o BlazorApp --interactivity Server cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} -## Prerequisites +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +## Install the required Blazor package -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +Install the [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -dotnet --version +{% tabcontents %} -{% endhighlight %} -{% endtabs %} +{% tabcontent Visual Studio %} -## Create a Blazor Server App using .NET CLI +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.CircularGauge`) and install it. -Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation. +Alternatively, you can install the same package using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorApp -int Server -cd BlazorApp +Install-Package Syncfusion.Blazor.CircularGauge -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} +{% tabcontent Visual Studio Code %} -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Syncfusion.Blazor.CircularGauge -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} -## Install required Blazor packages +{% endtabcontent %} -Install [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following commands in the Package Manager Console to achieve the same. +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.CircularGauge -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.CircularGauge -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.CircularGauge` namespaces. +After the package is installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.CircularGauge` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.CircularGauge @@ -113,12 +123,12 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor Server App. +Open the **Program.cs** file in Blazor Server App and register the Blazor service. {% tabs %} -{% highlight C# tabtitle="Program.cs" %} +{% highlight c# tabtitle="Program.cs" %} .... using Syncfusion.Blazor; @@ -129,38 +139,29 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add script resource -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~/Components/App.razor** file. -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} - -.... -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Blazor CircularGauge component +## Add Blazor Circular Gauge component -Add the Blazor CircularGauge component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. +Open a Razor file located in the **~/Components/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Circular Gauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component inside the razor file. -N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. +N> If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveServer -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - @@ -174,15 +175,53 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor CircularGauge component in the default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Circular Gauge component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLzXMhasGnmeXvK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge Component](./images/blazor-circulargauge-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLdZRBngtsbDeQj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge Component](./images/blazor-circulargauge-component.webp)" %} ## Set pointer value -Pointers are used to indicate values on an axis. You can change the pointer value using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html#Syncfusion_Blazor_CircularGauge_CircularGaugePointer_Value) property in [CircularGaugePointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html). +Pointers are used to indicate values on an axis. You can change the pointer value using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html#Syncfusion_Blazor_CircularGauge_CircularGaugePointer_Value) property in [Circular Gauge Pointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html). -N> In CircularGauge, you can configure multiple axes. On each axis, you can add a pointer. +N> In Circular Gauge, you can configure multiple axes. On each axis, you can add a pointer. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -201,11 +240,11 @@ N> In CircularGauge, you can configure multiple axes. On each axis, you can add {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrzDMLuMckdRZoX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge with Pointer Value](./images/blazor-circulargauge-pointer-value.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhnDRrxKDLSrSno?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Pointer Value](./images/blazor-circulargauge-pointer-value.webp)" %} -## Adding title for Blazor CircularGauge +## Adding title for Blazor Circular Gauge -Title can be added to the CircularGauge to provide a quick information to the users about the context of the rendered CircularGauge. You can add a title using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_Title) property in [SfCircularGauge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html). +Title can be added to the Circular Gauge to provide quick information to the users about the context of the rendered Circular Gauge. You can add a title using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_Title) property in [SfCircularGauge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -225,11 +264,11 @@ Title can be added to the CircularGauge to provide a quick information to the us {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJtiLkMltHgGJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge with Title](./images/blazor-circulargauge-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrHtHLnANUBDZUD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Title](./images/blazor-circulargauge-title.webp)" %} -## Adding ranges in the Blazor CircularGauge +## Adding ranges in the Blazor Circular Gauge -Range is used to specify a group of scale values in the gauge. You can set the range start and end using [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_Start) and [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_End) properties in the [CircularGaugeRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html). +Range is used to specify a group of scale values in the gauge. You can set the range start and end using [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_Start) and [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_End) properties in the [Circular Gauge Range](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -252,11 +291,11 @@ Range is used to specify a group of scale values in the gauge. You can set the r {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhJNCraiFVWtmxf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge with Custom Range](./images/blazor-circulargauge-custom-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVnNRBdKDUmiTMt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Custom Range](./images/blazor-circulargauge-custom-range.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/CircularGauge). ## See also -1. [Getting Started with Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -2. [Getting Started with Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) \ No newline at end of file +1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor Web App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/chart-sdk/blazor/circular-gauge/getting-started-with-web-app.md b/chart-sdk/blazor/circular-gauge/getting-started-with-web-app.md index 3054739b5..2ab50ddd5 100644 --- a/chart-sdk/blazor/circular-gauge/getting-started-with-web-app.md +++ b/chart-sdk/blazor/circular-gauge/getting-started-with-web-app.md @@ -1,46 +1,52 @@ --- layout: post -title: Getting Started with Blazor CircularGauge in Web App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor CircularGauge Component in Blazor Web App. -platform: chart-sdk -component: CircularGauge +title: Getting Started with Blazor Circular Gauge in Web App | Syncfusion +description: Learn how to add the Blazor Circular Gauge to a new Blazor Web App using Visual Studio, VS Code, or the .NET CLI. +platform: Blazor +control: Circular Gauge documentation: ug --- -# Getting Started with Blazor CircularGauge Component in Blazor Web App +# Getting Started with Blazor Circular Gauge in Web App -This section briefly explains about how to include [Blazor CircularGauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor Circular Gauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor Web App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor Web App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Run the following command to create a new Blazor Web App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorWebApp --interactivity Auto +cd BlazorWebApp +cd BlazorWebApp.Client -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor Web App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet new blazor -o BlazorWebApp -int Auto +dotnet new blazor -o BlazorWebApp --interactivity Auto cd BlazorWebApp cd BlazorWebApp.Client @@ -49,69 +55,69 @@ cd BlazorWebApp.Client {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} + +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +## Install the required Blazor package + +Install the [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the `.Client` project. + +{% tabcontents %} + +{% tabcontent Visual Studio %} -## Prerequisites +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.CircularGauge`) and install it. -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Alternatively, you can install the same package using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.CircularGauge -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor Web App using .NET CLI +{% endtabcontent %} -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +{% tabcontent Visual Studio Code %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +Open the terminal and run the following commands. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazor -o BlazorWebApp -int Auto -cd BlazorWebApp -cd BlazorWebApp.Client +dotnet add package Syncfusion.Blazor.CircularGauge -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -This command creates a new Blazor Web App and places it in a new directory called `BlazorWebApp` inside your current location. See the [Create a Blazor App](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=cli&view=aspnetcore-10.0) topics for more details. - {% endtabcontent %} -{% endtabcontents %} - -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). - -## Install required Blazor packages - -Install [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following commands in the Package Manager Console to achieve the same. +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.CircularGauge -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.CircularGauge -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project. +{% endtabcontent %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.CircularGauge` namespaces. +After the package is installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.CircularGauge` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.CircularGauge @@ -119,9 +125,9 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor Web App. +Open the **Program.cs** file in Blazor Web App and register the Blazor service. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -135,40 +141,29 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. +## Add script resource -## Add stylesheet and script resources +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~/Components/App.razor** file. -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. - -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} - -.... -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Blazor CircularGauge component +## Add Blazor Circular Gauge component -Add the Blazor CircularGauge component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Circular Gauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component inside the `.Client` project razor file. -N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - @@ -182,15 +177,57 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor CircularGauge component in the default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Circular Gauge component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLzXMhasGnmeXvK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge Component](./images/blazor-circulargauge-component.webp)" %} +{% tabcontent .NET CLI %} + +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLdZRBngtsbDeQj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge Component](./images/blazor-circulargauge-component.webp)" %} ## Set pointer value -Pointers are used to indicate values on an axis. You can change the pointer value using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html#Syncfusion_Blazor_CircularGauge_CircularGaugePointer_Value) property in [CircularGaugePointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html). +Pointers are used to indicate values on an axis. You can change the pointer value using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html#Syncfusion_Blazor_CircularGauge_CircularGaugePointer_Value) property in [Circular Gauge Pointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html). -N> In CircularGauge, you can configure multiple axes. On each axis, you can add a pointer. +N> In Circular Gauge, you can configure multiple axes. On each axis, you can add a pointer. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -209,11 +246,11 @@ N> In CircularGauge, you can configure multiple axes. On each axis, you can add {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrzDMLuMckdRZoX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge with Pointer Value](./images/blazor-circulargauge-pointer-value.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhnDRrxKDLSrSno?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Pointer Value](./images/blazor-circulargauge-pointer-value.webp)" %} -## Adding title for Blazor CircularGauge +## Adding title for Blazor Circular Gauge -Title can be added to the CircularGauge to provide a quick information to the users about the context of the rendered CircularGauge. You can add a title using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_Title) property in [SfCircularGauge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html). +Title can be added to the Circular Gauge to provide quick information to the users about the context of the rendered Circular Gauge. You can add a title using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_Title) property in [SfCircularGauge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -233,11 +270,11 @@ Title can be added to the CircularGauge to provide a quick information to the us {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJtiLkMltHgGJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge with Title](./images/blazor-circulargauge-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrHtHLnANUBDZUD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Title](./images/blazor-circulargauge-title.webp)" %} -## Adding ranges in the Blazor CircularGauge +## Adding ranges in the Blazor Circular Gauge -Range is used to specify a group of scale values in the gauge. You can set the range start and end using [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_Start) and [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_End) properties in the [CircularGaugeRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html). +Range is used to specify a group of scale values in the gauge. You can set the range start and end using [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_Start) and [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_End) properties in the [Circular Gauge Range](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -260,7 +297,7 @@ Range is used to specify a group of scale values in the gauge. You can set the r {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhJNCraiFVWtmxf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge with Custom Range](./images/blazor-circulargauge-custom-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVnNRBdKDUmiTMt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Custom Range](./images/blazor-circulargauge-custom-range.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/CircularGauge). @@ -268,4 +305,3 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- 1. [Getting Started with Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) 2. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) - diff --git a/chart-sdk/blazor/circular-gauge/getting-started.md b/chart-sdk/blazor/circular-gauge/getting-started.md index 28423271e..7222aef30 100644 --- a/chart-sdk/blazor/circular-gauge/getting-started.md +++ b/chart-sdk/blazor/circular-gauge/getting-started.md @@ -1,109 +1,119 @@ --- layout: post -title: Getting Started with Blazor CircularGauge Component | Syncfusion® -description: Checkout and learn about getting started with Blazor CircularGauge component in Blazor WebAssembly Application. -platform: chart-sdk -control: CircularGauge +title: Getting Started with Blazor Circular Gauge | Syncfusion +description: Learn how to add the Blazor Circular Gauge to a new Blazor WebAssembly (Standalone) app using Visual Studio, VS Code, or the .NET CLI. +platform: Blazor +control: Circular Gauge documentation: ug --- -# Getting Started with Blazor CircularGauge Component +# Getting Started with Blazor Circular Gauge in WebAssembly App -This section briefly explains about how to include [Blazor CircularGauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor Circular Gauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor WebAssembly (Standalone) App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Run the following command to create a new Blazor WebAssembly App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazorwasm -o BlazorApp +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor WebAssembly App. {% tabs %} - -{% highlight c# tabtitle="Blazor WASM App" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet new blazorwasm -o BlazorApp cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} + +## Install the required Blazor package + +Install the [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Prerequisites +{% tabcontents %} + +{% tabcontent Visual Studio %} -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.CircularGauge`) and install it. + +Alternatively, you can install the same package using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.CircularGauge -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} -Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. +Open the terminal and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +dotnet add package Syncfusion.Blazor.CircularGauge -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install required Blazor packages - -Install [Syncfusion.Blazor.CircularGauge](https://www.nuget.org/packages/Syncfusion.Blazor.CircularGauge/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following commands in the Package Manager Console to achieve the same. +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.CircularGauge -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.CircularGauge -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.CircularGauge` namespaces. +After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.CircularGauge` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.CircularGauge @@ -111,12 +121,12 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +Open the **Program.cs** file in Blazor WebAssembly App and register the Blazor service. {% tabs %} -{% highlight C# tabtitle="Program.cs" %} +{% highlight c# tabtitle="Program.cs" %} .... using Syncfusion.Blazor; @@ -127,26 +137,24 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add script resource -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~wwwroot/index.html** file. -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} - -.... -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Blazor CircularGauge component +## Add Blazor Circular Gauge component -Add the Blazor CircularGauge component in the **~/Pages/Index.razor** file. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Circular Gauge](https://www.syncfusion.com/blazor-components/blazor-circular-gauge) component inside the razor file. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -161,18 +169,56 @@ Add the Blazor CircularGauge component in the **~/Pages/Index.razor** file. {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor CircularGauge component in the default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Circular Gauge component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLzXMhasGnmeXvK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge Component](./images/blazor-circulargauge-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLdZRBngtsbDeQj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge Component](./images/blazor-circulargauge-component.webp)" %} ## Set pointer value -Pointers are used to indicate values on an axis. You can change the pointer value using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html#Syncfusion_Blazor_CircularGauge_CircularGaugePointer_Value) property in [CircularGaugePointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html). +Pointers are used to indicate values on an axis. You can change the pointer value using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html#Syncfusion_Blazor_CircularGauge_CircularGaugePointer_Value) property in [Circular Gauge Pointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html). -N> In CircularGauge, you can configure multiple axes. On each axis, you can add a pointer. +N> In Circular Gauge, you can configure multiple axes. On each axis, you can add a pointer. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -188,14 +234,14 @@ N> In CircularGauge, you can configure multiple axes. On each axis, you can add {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrzDMLuMckdRZoX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge with Pointer Value](./images/blazor-circulargauge-pointer-value.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhnDRrxKDLSrSno?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Pointer Value](./images/blazor-circulargauge-pointer-value.webp)" %} -## Adding title for Blazor CircularGauge +## Adding title for Blazor Circular Gauge -Title can be added to the CircularGauge to provide a quick information to the users about the context of the rendered CircularGauge. You can add a title using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_Title) property in [SfCircularGauge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html). +Title can be added to the Circular Gauge to provide quick information to the users about the context of the rendered Circular Gauge. You can add a title using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html#Syncfusion_Blazor_CircularGauge_SfCircularGauge_Title) property in [SfCircularGauge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.SfCircularGauge.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -212,14 +258,14 @@ Title can be added to the CircularGauge to provide a quick information to the us {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJtiLkMltHgGJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge with Title](./images/blazor-circulargauge-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrHtHLnANUBDZUD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Title](./images/blazor-circulargauge-title.webp)" %} -## Adding ranges in the Blazor CircularGauge +## Adding ranges in the Blazor Circular Gauge -Range is used to specify a group of scale values in the gauge. You can set the range start and end using [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_Start) and [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_End) properties in the [CircularGaugeRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html). +Range is used to specify a group of scale values in the gauge. You can set the range start and end using [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_Start) and [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_End) properties in the [Circular Gauge Range](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -235,12 +281,12 @@ Range is used to specify a group of scale values in the gauge. You can set the r {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhJNCraiFVWtmxf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor CircularGauge with Custom Range](./images/blazor-circulargauge-custom-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVnNRBdKDUmiTMt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Custom Range](./images/blazor-circulargauge-custom-range.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/CircularGauge). ## See also -* [Getting Started with Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +1. [Getting Started with Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +2. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/chart-sdk/blazor/circular-gauge/globalization.md b/chart-sdk/blazor/circular-gauge/globalization.md index b622b2ab7..144736a36 100644 --- a/chart-sdk/blazor/circular-gauge/globalization.md +++ b/chart-sdk/blazor/circular-gauge/globalization.md @@ -1,13 +1,13 @@ --- layout: post -title: Globalization in Blazor Circular Gauge Component | Syncfusion® -description: Checkout and learn here all the features about Globalization in Blazor Circular Gauge component and more. -platform: chart-sdk +title: Blazor Circular Gauge Globalization | Syncfusion® +description: Learn how to localize the Blazor Circular Gauge axis labels and tooltips by loading culture-specific CLDR data and applying the internationalization library. +platform: Blazor control: Circular Gauge documentation: ug --- -# Globalization in Blazor Circular Gauge Component +# Blazor Circular Gauge Globalization The internationalization library provides support for formatting and parsing the number using the official [Unicode CLDR](http://cldr.unicode.org/) JSON data and also provides the `loadCldr` method to load the culture-specific CLDR JSON data. The Circular Gauge component comes with built-in internationalization support to adapt to different cultures. diff --git a/chart-sdk/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md b/chart-sdk/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md index e31d1370a..7b1dcfcaa 100644 --- a/chart-sdk/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md +++ b/chart-sdk/blazor/circular-gauge/how-to/place-gauge-inside-other-components.md @@ -1,13 +1,13 @@ --- layout: post -title: How to place Circular Gauge inside other components | Syncfusion® -description: Learn here about how to place the Circular Gauge inside other components like Dashboard Layout, Tab, Dialog and Accordion. -platform: chart-sdk +title: Place gauge in other components in Blazor Circular Gauge | Syncfusion® +description: Learn how to render the Blazor Circular Gauge inside Dashboard Layout, Tabs, Dialog, or other components using a boolean flag and RefreshAsync on resize. +platform: Blazor control: Circular Gauge documentation: ug --- -# Render Circular Gauge component inside other components +# How to place gauge in other components in Blazor Circular Gauge The Circular Gauge can be rendered within components such as the Dashboard Layout, Tabs, Dialog, and others. In general, the Circular Gauge component renders before other components, so a boolean variable (i.e. boolean flag) is used to determine when to begin rendering the Circular Gauge component. @@ -403,7 +403,7 @@ When you drag and resize the Dialog component, the Circular Gauge component is n ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLSZkicrHnxtFdb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge inside Dialog component](../images/blazor-circulargauge-with-dialog.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVdZdLdLOxBcdrQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge inside Dialog component](../images/blazor-circulargauge-with-dialog.webp)" %} ## Circular Gauge component inside Accordion diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-annotation-position.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-annotation-position.webp index ce19b201c..eee9b10e7 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-annotation-position.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-annotation-position.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-annotation.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-annotation.webp index 20dcb50b2..323011120 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-annotation.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-annotation.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-auto-angle.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-auto-angle.webp index 8bc5647b7..eaf6d2f47 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-auto-angle.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-auto-angle.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-axis-customization.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-axis-customization.webp index 2bb248ddd..23dc859c0 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-axis-customization.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-axis-customization.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-axis-direction.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-axis-direction.webp index f99825a74..c62191f27 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-axis-direction.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-axis-direction.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-background-border-color.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-background-border-color.webp index 2ba44ecae..de23e4be2 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-background-border-color.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-background-border-color.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-component.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-component.webp index d322ff3fc..3f964ba4f 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-component.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-component.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-angle.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-angle.webp index 70d5991f8..abfa58076 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-angle.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-angle.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-marker-pointer.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-marker-pointer.webp index 93fa693c5..8a47cf9a9 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-marker-pointer.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-marker-pointer.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-position.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-position.webp index d2ecf2dd6..ee3940d03 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-position.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-position.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-radius-angle.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-radius-angle.webp index 2c134cb5f..2bdf2f274 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-radius-angle.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-radius-angle.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-radius.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-radius.webp index c763db8dc..4e74e8d52 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-radius.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-radius.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-range.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-range.webp index 1b8004e61..a27c5da7b 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-range.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-range.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-value.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-value.webp index ec9699b92..89f1d0960 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-value.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-custom-value.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-dragging-pointer.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-dragging-pointer.webp index 3e5299047..17593e708 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-dragging-pointer.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-dragging-pointer.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-dragging-range.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-dragging-range.webp index ff24ce2dd..b7c0f7f49 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-dragging-range.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-dragging-range.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-hide-intersecting-label.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-hide-intersecting-label.webp index 537f870e5..2b66cbd71 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-hide-intersecting-label.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-hide-intersecting-label.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label-format.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label-format.webp index 92c8defea..8d8fbcefa 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label-format.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label-format.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label-in-degree-format.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label-in-degree-format.webp index ca7880bf3..65956b1b2 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label-in-degree-format.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label-in-degree-format.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label-position.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label-position.webp index 6df4997d4..f3efd8115 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label-position.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label-position.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label.webp index 310ecd48a..6bdfc6e22 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-label.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-last-label.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-last-label.webp index 21dc785c0..89f0ee2f0 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-last-label.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-last-label.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-legend-paging.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-legend-paging.webp index 8eb36aed8..1104fb98a 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-legend-paging.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-legend-paging.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-legend-text.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-legend-text.webp index 06dd56632..e7b0b561d 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-legend-text.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-legend-text.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-legend.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-legend.webp index de6678383..431de3e7b 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-legend.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-legend.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-marker-pointer.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-marker-pointer.webp index 5b4a1f422..0e15024f5 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-marker-pointer.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-marker-pointer.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-multiple-axes.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-multiple-axes.webp index f61b884bf..cc7daf351 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-multiple-axes.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-multiple-axes.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-multiple-pointers.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-multiple-pointers.webp index e35d1973a..fc18f3def 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-multiple-pointers.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-multiple-pointers.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-multiple-ranges.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-multiple-ranges.webp index bf1e90410..8bab92729 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-multiple-ranges.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-multiple-ranges.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-needle-pointer.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-needle-pointer.webp index 99c4dcb1f..58f64fce0 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-needle-pointer.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-needle-pointer.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-percentage-radius.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-percentage-radius.webp index 92856565e..17d71e172 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-percentage-radius.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-percentage-radius.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-pointer-animation.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-pointer-animation.webp index f880fb8da..f1bd75b7a 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-pointer-animation.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-pointer-animation.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-pointer-customization.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-pointer-customization.webp index c96ff1a7a..8c5eaf4d5 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-pointer-customization.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-pointer-customization.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-pointer-value.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-pointer-value.webp index b2c9e421d..8773a1577 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-pointer-value.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-pointer-value.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-position-based-on-percentage.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-position-based-on-percentage.webp index bf2a6fe24..169630138 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-position-based-on-percentage.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-position-based-on-percentage.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-radius-in-percentage.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-radius-in-percentage.webp index f4b165e4f..1f14fa4bb 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-radius-in-percentage.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-radius-in-percentage.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-bar-pointer.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-bar-pointer.webp index b43c19414..6046e6eb4 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-bar-pointer.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-bar-pointer.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-color-customization.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-color-customization.webp index dd4da41dc..3ec75a249 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-color-customization.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-color-customization.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-customization.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-customization.webp index 20b921ec4..1f770c261 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-customization.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-customization.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-position.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-position.webp index 6de770c65..b0bc0a4f2 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-position.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-position.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-with-round-corner.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-with-round-corner.webp index 12fcc5f3b..b4cc78fdd 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-with-round-corner.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-range-with-round-corner.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-rounded-corner-range.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-rounded-corner-range.webp index 5f7235e5b..6267dc263 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-rounded-corner-range.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-rounded-corner-range.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-size.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-size.webp index d7aec502b..a23fc5dfb 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-size.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-size.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-smart-label.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-smart-label.webp index f45caa30a..f779914c4 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-smart-label.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-smart-label.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tick-position.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tick-position.webp index 5af43b1b6..2878b1ccd 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tick-position.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tick-position.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-ticks-customization.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-ticks-customization.webp index f464f0f59..527e26c14 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-ticks-customization.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-ticks-customization.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-title.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-title.webp index 3c69033e8..85aac9056 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-title.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-title.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tooltip-annotation.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tooltip-annotation.webp index 879921b6e..536aa6569 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tooltip-annotation.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tooltip-annotation.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tooltip-at-cursor-position.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tooltip-at-cursor-position.webp index 625fe3478..7d38b55ce 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tooltip-at-cursor-position.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tooltip-at-cursor-position.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tooltip.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tooltip.webp index b290aa5b7..3003663b2 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tooltip.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-tooltip.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-width-customization.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-width-customization.webp index 6ce54f9e8..a8e88b34e 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-width-customization.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-width-customization.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-with-dialog.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-with-dialog.webp index 64b077514..ad76d1062 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-with-dialog.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge-with-dialog.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge.webp b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge.webp index 74fb9fe7f..45324932b 100644 Binary files a/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge.webp and b/chart-sdk/blazor/circular-gauge/images/blazor-circulargauge.webp differ diff --git a/chart-sdk/blazor/circular-gauge/images/lazor-circulargauge-radius-in-pixel.webp b/chart-sdk/blazor/circular-gauge/images/lazor-circulargauge-radius-in-pixel.webp new file mode 100644 index 000000000..2570974c9 Binary files /dev/null and b/chart-sdk/blazor/circular-gauge/images/lazor-circulargauge-radius-in-pixel.webp differ diff --git a/chart-sdk/blazor/circular-gauge/legend.md b/chart-sdk/blazor/circular-gauge/legend.md index 3cd557061..03c6d9e96 100644 --- a/chart-sdk/blazor/circular-gauge/legend.md +++ b/chart-sdk/blazor/circular-gauge/legend.md @@ -1,14 +1,14 @@ --- layout: post -title: Legend in Blazor Circular Gauge Component | Syncfusion® -description: Checkout and learn here all the features about Legend in Blazor Circular Gauge component and much more. -platform: chart-sdk +title: Blazor Circular Gauge Legend | Syncfusion® +description: Learn how to display a Blazor Circular Gauge legend to identify axis ranges, then customize its shape, position, alignment, and absolute location. +platform: Blazor control: Circular Gauge documentation: ug --- -# Legend in Blazor Circular Gauge Component +# Blazor Circular Gauge Legend Legend provides valuable information for interpreting what the circular gauge axis range displays, and they can be represented in various colors, shapes, and other identifiers based on the data. It gives a breakdown of what each symbol represents in the axis range of circular gauge. @@ -92,6 +92,7 @@ The following code example shows how to add legend in the gauge. + @@ -112,7 +113,7 @@ The following code example shows how to add legend in the gauge. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVUWhBQArOwLnwY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Legend in Blazor Circular Gauge](./images/blazor-circulargauge-legend.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBnZdhxVoipsluO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Legend in Blazor Circular Gauge](./images/blazor-circulargauge-legend.webp)" %} @@ -129,6 +130,7 @@ The toggle option has been provided for legend. So, if you toggle the legend, th + @@ -149,7 +151,7 @@ The toggle option has been provided for legend. So, if you toggle the legend, th ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrKMLBcAhEahQVw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Legend with Toggle Option](./images/blazor-circulargauge-legend-with-toggle-option.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBnXdBnBIZlTtMp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge Legend with Toggle Option](./images/blazor-circulargauge-legend-with-toggle-option.webp)" %} ## Paging support in legend @@ -164,6 +166,7 @@ By default, paging will be enabled if the legend items exceed the legend bounds. + @@ -184,7 +187,7 @@ By default, paging will be enabled if the legend items exceed the legend bounds. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhKWhLGgANsovmK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Legend with Paging](./images/blazor-circulargauge-legend-paging.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhxDxBHhpHNtYid?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge Legend with Paging](./images/blazor-circulargauge-legend-paging.webp)" %} ## Legend text customization @@ -194,11 +197,12 @@ You can customize the legend text using `LegendText` property in `CircularGaugeR @using Syncfusion.Blazor.CircularGauge - + + @@ -219,4 +223,4 @@ You can customize the legend text using `LegendText` property in `CircularGaugeR ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBUihhmUUjgdbpV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Legend Text in Blazor Circular Gauge](./images/blazor-circulargauge-legend-text.webp)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrHXnLxBJkPfyqH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Legend Text in Blazor Circular Gauge](./images/blazor-circulargauge-legend-text.webp)" %} diff --git a/chart-sdk/blazor/circular-gauge/methods.md b/chart-sdk/blazor/circular-gauge/methods.md index 45d3cf40d..75f04e3cc 100644 --- a/chart-sdk/blazor/circular-gauge/methods.md +++ b/chart-sdk/blazor/circular-gauge/methods.md @@ -1,13 +1,13 @@ --- layout: post -title: Methods in Blazor Circular Gauge Component | Syncfusion® -description: Checkout and learn here all about the Methods in Blazor Circular Gauge component and much more. -platform: chart-sdk +title: Blazor Circular Gauge Methods | Syncfusion® +description: Learn how to call Blazor Circular Gauge methods such as SetAnnotationValueAsync to update annotation content dynamically from your application code. +platform: Blazor control: Circular Gauge documentation: ug --- -# Methods in Blazor Circular Gauge Component +# Blazor Circular Gauge Methods The following methods are available in the Circular Gauge component. @@ -47,7 +47,7 @@ To change the annotation content dynamically, use the [SetAnnotationValueAsync]( } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgsBrwgTGlriiD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLRNRrnKyjcQRLh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## SetPointerValueAsync @@ -81,7 +81,7 @@ To change the pointer value dynamically, use the [SetPointerValueAsync](https:// } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrqsVBwKfbNwfqv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge](./images/blazor-circulargauge.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVxNdVHUIWstkIv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge](./images/blazor-circulargauge.webp)" %} ## SetRangeValue @@ -118,7 +118,7 @@ To change the start and end of a range in axis, use the [SetRangeValue](https:// } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLUiBhcUpvhczFW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVHtHBxKeMgARef?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## RefreshAsync @@ -147,4 +147,4 @@ The [RefreshAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Circu } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrUMLrcAJPpcAFo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBRZxBRqyMGJsig?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file diff --git a/chart-sdk/blazor/circular-gauge/pointers.md b/chart-sdk/blazor/circular-gauge/pointers.md index e41aafc4a..835c0b88a 100644 --- a/chart-sdk/blazor/circular-gauge/pointers.md +++ b/chart-sdk/blazor/circular-gauge/pointers.md @@ -1,13 +1,13 @@ --- layout: post -title: Pointers in Blazor Circular Gauge Component | Syncfusion® -description: Checkout and learn here all the features about Pointers in Blazor Circular Gauge component and much more. -platform: chart-sdk +title: Blazor Circular Gauge Pointers | Syncfusion® +description: Learn how to indicate values on a Blazor Circular Gauge axis with Needle, RangeBar, or Marker pointers, then customize value, type, and animation. +platform: Blazor control: Circular Gauge documentation: ug --- -# Pointers in Blazor Circular Gauge Component +# Blazor Circular Gauge Pointers Pointers are used to indicate values on an axis. The value of a pointer can be modified using the [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html#Syncfusion_Blazor_CircularGauge_CircularGaugePointer_Value) property. @@ -25,7 +25,7 @@ Pointers are used to indicate values on an axis. The value of a pointer can be m ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrqshBwUVzsUfys?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Pointer](./images/blazor-circulargauge-with-pointer.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrHtdLdAoVYIoFD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Pointer](./images/blazor-circulargauge-with-pointer.webp)" %} The Circular Gauge supports three types of pointers such as [Needle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.PointerType.html#Syncfusion_Blazor_CircularGauge_PointerType_Needle), [RangeBar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.PointerType.html#Syncfusion_Blazor_CircularGauge_PointerType_RangeBar), and [Marker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.PointerType.html#Syncfusion_Blazor_CircularGauge_PointerType_Marker). You can choose any pointer using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugePointer.html#Syncfusion_Blazor_CircularGauge_CircularGaugePointer_Type) property. @@ -47,7 +47,7 @@ The circular gauge's default pointer type will be needle. A needle point contain ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLgCVhcghfqMkfw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Needle Pointer](./images/blazor-circulargauge-needle-pointer.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrxNdVxgyqManQL?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Needle Pointer](./images/blazor-circulargauge-needle-pointer.webp)" %} ### Customization @@ -94,7 +94,7 @@ The needle, tail and cap of the pointer can be customized with the following pro ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBAMVBcgVpSKNFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Pointer](./images/blazor-circulargauge-pointer-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhHNRBdqygcpzOL?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Custom Pointer](./images/blazor-circulargauge-pointer-customization.webp)" %} @@ -146,7 +146,7 @@ The appearance of the needle pointer can be customized by using [NeedleStartWidt } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBKMrrwqBTQnLVR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLRZRVHUSzCMcRS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Range bar pointer @@ -167,7 +167,7 @@ The range bar pointer is like a range in an axis that can be placed on gauge to ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVgWLLQqLfubBRJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Range Bar Pointer](./images/blazor-circulargauge-range-bar-pointer.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLxXnLxqypwvcLK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Range Bar Pointer](./images/blazor-circulargauge-range-bar-pointer.webp)" %} ### Customization @@ -200,7 +200,7 @@ You can customize the range bar using the following properties. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhUMhrwKBosYIXk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor Circular Gauge Range Bar](./images/blazor-circulargauge-range-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrRDxBnUyeoPfTZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Blazor Circular Gauge Range Bar](./images/blazor-circulargauge-range-customization.webp)" %} ### Rounded corners @@ -222,7 +222,7 @@ The start and end pointers of a range bar in the Circular Gauge are rounded to f ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgsrVGUhIpRJzK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range Bar with Rounded Corner](./images/blazor-circulargauge-range-with-round-corner.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVdjHrRUyIEWbMd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge Range Bar with Rounded Corner](./images/blazor-circulargauge-range-with-round-corner.webp)" %} ## Marker pointer @@ -252,7 +252,7 @@ The different types of marker shapes can be used to mark the pointer value in an ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBAshVGghyGCzzX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Marker Pointer](./images/blazor-circulargauge-marker-pointer.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLRtnVdqSnMwPCO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Marker Pointer](./images/blazor-circulargauge-marker-pointer.webp)" %} ### Customization @@ -285,7 +285,7 @@ You can customize the marker pointer using the following properties. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgCVhQUhRjXeXh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Marker Pointer](./images/blazor-circulargauge-custom-marker-pointer.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrRjxhxgSnwcrvP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Custom Marker Pointer](./images/blazor-circulargauge-custom-marker-pointer.webp)" %} ### Image marker pointer @@ -334,7 +334,7 @@ The pointers can be dragged over the axis values by clicking and dragging the sa ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthgCLBcqhdAvjZX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Dragging Pointer](./images/blazor-circulargauge-dragging-pointer.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhxXnrHAywtrSYD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Dragging Pointer](./images/blazor-circulargauge-dragging-pointer.webp)" %} ## Multiple pointers @@ -374,7 +374,7 @@ In addition to the default pointer, you can add n number of pointers to an axis ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgMBrGKBnvQyWB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Multiple Pointers](./images/blazor-circulargauge-multiple-pointers.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVnDHLxUemwjxWf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Multiple Pointers](./images/blazor-circulargauge-multiple-pointers.webp)" %} ## Pointer animation @@ -396,7 +396,7 @@ The pointers are animated on loading the gauge using the [CircularGaugePointerAn ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVoNkWwhpogscSG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Pointer Animation](./images/blazor-circulargauge-pointer-animation.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLnZxBHKoFLmBAG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Pointer Animation](./images/blazor-circulargauge-pointer-animation.webp)" %} ## Gradient color @@ -469,7 +469,7 @@ The linear gradient can be applied to all pointer types like marker, range bar, ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLKMVVGKhQgPmGy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBRNRhnqoFdLOlz?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Radial gradient @@ -543,6 +543,6 @@ The radial gradient can be applied to all pointer types like marker, range bar, ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhAWhLmghQyveia?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBHZxrdgyFatqwk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file diff --git a/chart-sdk/blazor/circular-gauge/print.md b/chart-sdk/blazor/circular-gauge/print.md index f507b8e87..40c29154a 100644 --- a/chart-sdk/blazor/circular-gauge/print.md +++ b/chart-sdk/blazor/circular-gauge/print.md @@ -1,13 +1,13 @@ --- layout: post -title: Print and Export in Blazor Circular Gauge Component | Syncfusion® -description: Checkout and learn here all the features about Print and Export in Blazor Circular Gauge component and more. -platform: chart-sdk +title: Blazor Circular Gauge Print and Export | Syncfusion® +description: Learn how to print or export the rendered Blazor Circular Gauge from the browser by enabling AllowPrint and calling the Print or Export methods. +platform: Blazor control: Circular Gauge documentation: ug --- -# Print and Export in Blazor Circular Gauge Component +# Blazor Circular Gauge Print and Export ## Print diff --git a/chart-sdk/blazor/circular-gauge/ranges.md b/chart-sdk/blazor/circular-gauge/ranges.md index 046deb971..7d7bd5dd1 100644 --- a/chart-sdk/blazor/circular-gauge/ranges.md +++ b/chart-sdk/blazor/circular-gauge/ranges.md @@ -1,15 +1,15 @@ --- layout: post -title: Ranges in Blazor Circular Gauge Component | Syncfusion® -description: Checkout and learn here all the features about Ranges in Blazor Circular Gauge component and much more. -platform: chart-sdk +title: Blazor Circular Gauge Ranges | Syncfusion® +description: Learn how to highlight intervals on a Blazor Circular Gauge axis by adding ranges with custom start, end, start width, and end width values. +platform: Blazor control: Circular Gauge documentation: ug --- -# Ranges in Blazor Circular Gauge Component +# Blazor Circular Gauge Ranges -You can categorize certain interval on Circular Gauge axis using the [CircularGaugeRanges](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRanges.html) tag. +You can categorize certain interval on Circular Gauge axis using the [CircularGaugeRanges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRanges.html) tag. ## Range start and end @@ -21,6 +21,7 @@ The start and end values of a range in an axis can be customized using the [Star + @@ -29,7 +30,7 @@ The start and end values of a range in an axis can be customized using the [Star ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVgiLLQgiOiCXDt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Custom Range](./images/blazor-circulargauge-custom-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBxjRhRrqZJxivF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Custom Range](./images/blazor-circulargauge-custom-range.webp)" %} ## Start width and end width @@ -41,6 +42,9 @@ Using [StartWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Circu + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhKMVLmAMOAiUsW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Start and End Width of Range in Blazor Circular Gauge](./images/blazor-circulargauge-width-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBxXnVRrccuRJCE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Start and End Width of Range in Blazor Circular Gauge](./images/blazor-circulargauge-width-customization.webp)" %} ## Changing color @@ -64,6 +68,9 @@ The color of a range can be customized using the [Color](https://help.syncfusion + + + ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhKiLLcqWkShlmD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range with Custom Color](./images/blazor-circulargauge-range-color-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBRtnhdrxvwjHgY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge Range with Custom Color](./images/blazor-circulargauge-range-color-customization.webp)" %} ## Range position -The ranges can be placed either inside, outside or center of the axis using the [Position`] property in [CircularGaugeRange](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html). Its possible values are 'PointerRangePosition.Inside', 'PointerRangePosition.Outside' and 'PointerRangePosition.Cross'. +The ranges can be placed either inside, outside or center of the axis using the [Position`] property in [CircularGaugeRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html). Its possible values are 'PointerRangePosition.Inside', 'PointerRangePosition.Outside' and 'PointerRangePosition.Cross'. ```cshtml @using Syncfusion.Blazor.CircularGauge @@ -89,6 +96,9 @@ The ranges can be placed either inside, outside or center of the axis using the + + + @@ -97,11 +107,11 @@ The ranges can be placed either inside, outside or center of the axis using the ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLqMLrcKMummhZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Circular Gauge Range Position](./images/blazor-circulargauge-range-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhRNRLnhHYbtymX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Circular Gauge Range Position](./images/blazor-circulargauge-range-position.webp)" %} ## Rounded corners -You can customize the corner radius using the [RoundedCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_RoundedCornerRadius) property in [CircularGaugeRange](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html). +You can customize the corner radius using the [RoundedCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html#Syncfusion_Blazor_CircularGauge_CircularGaugeRange_RoundedCornerRadius) property in [CircularGaugeRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeRange.html). ```cshtml @using Syncfusion.Blazor.CircularGauge @@ -109,6 +119,9 @@ You can customize the corner radius using the [RoundedCornerRadius](https://help + + + @@ -117,7 +130,7 @@ You can customize the corner radius using the [RoundedCornerRadius](https://help ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBUsrLQKVDjNwmB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range with Rounded Corner](./images/blazor-circulargauge-rounded-corner-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrHNRVxhmDFBcsM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge Range with Rounded Corner](./images/blazor-circulargauge-rounded-corner-range.webp)" %} ## Radius @@ -141,7 +154,7 @@ You can set a radius of the range in pixel as demonstrated below. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLqCBBGKrtreVuz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range with Custom Radius in Pixel](./images/blazor-circulargauge-radius-in-pixel.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrdjGCXfxbEWuxd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge Range with Custom Radius in Pixel](./images/blazor-circulargauge-radius-in-pixel.webp)" %} ### In percentage @@ -153,6 +166,9 @@ By setting value in percentage, a range gets its dimension with respect to its a + + + @@ -161,7 +177,7 @@ By setting value in percentage, a range gets its dimension with respect to its a ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBACVLwKVXIyNlD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge Range with Custom Radius in Percentage](./images/blazor-circulargauge-radius-in-percentage.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVRtnrnVncJRUBo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge Range with Custom Radius in Percentage](./images/blazor-circulargauge-radius-in-percentage.webp)" %} @@ -187,13 +203,13 @@ The ranges can be dragged over the axis line by clicking and dragging the same. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhgCVrQUhNwEaRQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVntwCtTxOxaHvC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Multiple ranges You can add multiple ranges to an axis with the above customization as demonstrated below. -You can set the range color to ticks and labels of an axis by enabling the [UseRangeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property in [CircularGaugeAxisMajorTicks](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisMajorTicks.html), [CircularGaugeAxisMinorTicks](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisMinorTicks.html) and [CircularGaugeAxisLabelStyle](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLabelStyle.html) tags. +You can set the range color to ticks and labels of an axis by enabling the [UseRangeColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property in [CircularGaugeAxisMajorTicks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisMajorTicks.html), [CircularGaugeAxisMinorTicks](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisMinorTicks.html) and [CircularGaugeAxisLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.CircularGauge.CircularGaugeAxisLabelStyle.html) tags. ```cshtml @using Syncfusion.Blazor.CircularGauge @@ -201,6 +217,9 @@ You can set the range color to ticks and labels of an axis by enabling the [UseR + + + @@ -218,7 +237,7 @@ You can set the range color to ticks and labels of an axis by enabling the [UseR ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBqChVmAViGyLES?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Multiple Ranges](./images/blazor-circulargauge-multiple-ranges.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBRDxhdLekXVZOx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Multiple Ranges](./images/blazor-circulargauge-multiple-ranges.webp)" %} ## Gradient color diff --git a/chart-sdk/blazor/circular-gauge/user-interaction.md b/chart-sdk/blazor/circular-gauge/user-interaction.md index 829ebdec5..ea9dd5137 100644 --- a/chart-sdk/blazor/circular-gauge/user-interaction.md +++ b/chart-sdk/blazor/circular-gauge/user-interaction.md @@ -1,13 +1,13 @@ --- layout: post -title: User Interaction in Blazor Circular Gauge Component | Syncfusion® -description: Checkout and learn here all the features about User Interaction in Blazor Circular Gauge component and more. -platform: chart-sdk +title: Blazor Circular Gauge User Interaction | Syncfusion® +description: Learn how to show pointer details on hover in the Blazor Circular Gauge by enabling the tooltip and customizing its fill, border, and text style. +platform: Blazor control: Circular Gauge documentation: ug --- -# User Interaction in Blazor Circular Gauge Component +# Blazor Circular Gauge User Interaction ## Tooltip for pointers @@ -59,7 +59,7 @@ By default, the tooltip is not visible. You can enable the tooltip by setting th ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLqsLVwAKXazbSU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge displays ToolTip](./images/blazor-circulargauge-tooltip.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhdNRhHUjENPFFU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge displays ToolTip](./images/blazor-circulargauge-tooltip.webp)" %} ### Showing tooltip at mouse position @@ -81,7 +81,7 @@ By default tooltip will be shown on the axis, you can show the tooltip at the cu ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVqMhVcKqCWBJms?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Circular Gauge ToolTip at Cursor Position](./images/blazor-circulargauge-tooltip-at-cursor-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBdjdVRqDOKaEOm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Displaying Blazor Circular Gauge ToolTip at Cursor Position](./images/blazor-circulargauge-tooltip-at-cursor-position.webp)" %} ## Tooltip for ranges @@ -167,7 +167,7 @@ The following code example shows the tooltip for the pointers, ranges, and annot public string[] TooltipType = new string[] { "Range", "Annotation", "Pointer"}; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVAiBrwUAiKegWH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge displays ToolTip for Annotation](./images/blazor-circulargauge-tooltip-annotation.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVdNdhHqDOcWXTn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge displays ToolTip for Annotation](./images/blazor-circulargauge-tooltip-annotation.webp)" %} ## Dragging pointer @@ -187,7 +187,7 @@ The pointers can be dragged over the axis values by clicking and dragging the po ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBAirVGgqWoeGGU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Dragging Pointer](./images/blazor-circulargauge-dragging-pointer.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhdXdrxAjOaGlpH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Dragging Pointer](./images/blazor-circulargauge-dragging-pointer.webp)" %} ## Dragging range @@ -211,4 +211,4 @@ The ranges can be dragged over the axis values by clicking and dragging the rang ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVUihrmgKWmfaRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Circular Gauge with Dragging Range](./images/blazor-circulargauge-dragging-range.webp)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBHtnBHgMNUWDpV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Circular Gauge with Dragging Range](./images/blazor-circulargauge-dragging-range.webp)" %} \ No newline at end of file diff --git a/chart-sdk/blazor/heatmap-chart/accessibility.md b/chart-sdk/blazor/heatmap-chart/accessibility.md index 35df16802..d953d0b23 100644 --- a/chart-sdk/blazor/heatmap-chart/accessibility.md +++ b/chart-sdk/blazor/heatmap-chart/accessibility.md @@ -1,13 +1,13 @@ --- layout: post -title: Accessibility in Blazor HeatMap chart component | Syncfusion® -description: Checkout and learn here all about Accessibility in Blazor HeatMap chart component and much more details. -platform: chart-sdk +title: Blazor HeatMap Chart Accessibility | Syncfusion® +description: Learn how to use the Blazor HeatMap Chart with WCAG 2.2, Section 508, and ADA accessibility standards, including WAI-ARIA support and screen-reader integration. +platform: Blazor control: HeatMap Chart documentation: ug --- -# Accessibility in Blazor HeatMap Chart component +# Blazor HeatMap Chart Accessibility The [Blazor HeatMap Chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart) component follows commonly used accessibility guidelines and standards, such as [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). diff --git a/chart-sdk/blazor/heatmap-chart/appearance.md b/chart-sdk/blazor/heatmap-chart/appearance.md index c52cca628..3729d0b55 100644 --- a/chart-sdk/blazor/heatmap-chart/appearance.md +++ b/chart-sdk/blazor/heatmap-chart/appearance.md @@ -1,13 +1,13 @@ --- layout: post -title: Appearance in Blazor HeatMap Chart Component | Syncfusion® -description: Checkout and learn here all about Appearance in Blazor HeatMap Chart component and and much more details. -platform: chart-sdk +title: Blazor HeatMap Chart Appearance | Syncfusion® +description: Learn how to customize the Blazor HeatMap Chart appearance with cell borders, hover highlighting, margins, titles, and data labels. +platform: Blazor control: HeatMap Chart documentation: ug --- -# Appearance in Blazor HeatMap Chart Component +# Blazor HeatMap Chart Appearance ## Cell customizations diff --git a/chart-sdk/blazor/heatmap-chart/axis.md b/chart-sdk/blazor/heatmap-chart/axis.md index a7b76890f..e732b23cf 100644 --- a/chart-sdk/blazor/heatmap-chart/axis.md +++ b/chart-sdk/blazor/heatmap-chart/axis.md @@ -1,13 +1,13 @@ --- layout: post -title: Axis in Blazor HeatMap Chart Component | Syncfusion® -description: Checkout and learn here all the features about the Axis in Blazor HeatMap Chart component and much more details. -platform: chart-sdk +title: Blazor HeatMap Chart Axis | Syncfusion® +description: Learn how to configure Blazor HeatMap Chart axes with category, numeric, and date-time value types, plus inverse and opposed positioning. +platform: Blazor control: HeatMap Chart documentation: ug --- -# Axis in Blazor HeatMap Chart Component +# Blazor HeatMap Chart Axis Heat map consists of two axes namely, `X-axis` and `Y-axis` that displays the row headers and column headers to plot the data points respectively. You can define the type, format, and other customizing options for both axes in the heat map. diff --git a/chart-sdk/blazor/heatmap-chart/bubble-heatmap.md b/chart-sdk/blazor/heatmap-chart/bubble-heatmap.md index 4d177c76b..b4d217e6b 100644 --- a/chart-sdk/blazor/heatmap-chart/bubble-heatmap.md +++ b/chart-sdk/blazor/heatmap-chart/bubble-heatmap.md @@ -1,13 +1,13 @@ --- layout: post -title: Bubble HeatMap in Blazor HeatMap Chart Component | Syncfusion® -description: Checkout and learn here all about Bubble HeatMap in Blazor HeatMap Chart component and much more details. -platform: chart-sdk +title: Blazor HeatMap Chart Bubble HeatMap | Syncfusion® +description: Learn how to render Bubble HeatMap visualizations in the Blazor HeatMap Chart using bubble size, color, sectors, and combined size-color encoding. +platform: Blazor control: HeatMap Chart documentation: ug --- -# Bubble HeatMap in Blazor HeatMap Chart Component +# Blazor HeatMap Chart Bubble HeatMap This section shows how to customize the appearance of the HeatMap cells as bubbles. The below video demonstrates the same. diff --git a/chart-sdk/blazor/heatmap-chart/content-security-policy.md b/chart-sdk/blazor/heatmap-chart/content-security-policy.md index 2eb721a4e..c4d8d7dff 100644 --- a/chart-sdk/blazor/heatmap-chart/content-security-policy.md +++ b/chart-sdk/blazor/heatmap-chart/content-security-policy.md @@ -1,13 +1,13 @@ --- layout: post -title: Heatmap - Strict CSP Feature Limitations | Syncfusion® -description: Details on features in Blazor Heatmap Chart that require Content Security Policy (CSP) relaxation and much more details. -platform: chart-sdk -control: Heatmap +title: Blazor HeatMap Chart Content Security Policy | Syncfusion® +description: Learn which Blazor HeatMap Chart features work under strict Content Security Policy and which require unsafe-inline directives. +platform: Blazor +control: HeatMap Chart documentation: ug --- -# Heatmap - Content Security Policy Limitations +# Blazor HeatMap Chart Content Security Policy ## What's supported under strict CSP? diff --git a/chart-sdk/blazor/heatmap-chart/dimensions.md b/chart-sdk/blazor/heatmap-chart/dimensions.md index f72bceec0..19b8108cd 100644 --- a/chart-sdk/blazor/heatmap-chart/dimensions.md +++ b/chart-sdk/blazor/heatmap-chart/dimensions.md @@ -1,13 +1,13 @@ --- layout: post -title: Dimensions in Blazor HeatMap Chart Component | Syncfusion® -description: Checkout and learn here all about Dimensions in Blazor HeatMap Chart component and much more details. -platform: chart-sdk +title: Blazor HeatMap Chart Dimensions | Syncfusion® +description: Learn how to set the Blazor HeatMap Chart size in pixels or as a percentage of the container using the Width and Height properties. +platform: Blazor control: HeatMap Chart documentation: ug --- -# Dimensions in Blazor HeatMap Chart Component +# Blazor HeatMap Chart Dimensions ## Size for heat map diff --git a/chart-sdk/blazor/heatmap-chart/events.md b/chart-sdk/blazor/heatmap-chart/events.md index 1d84eb812..bb6dfd343 100644 --- a/chart-sdk/blazor/heatmap-chart/events.md +++ b/chart-sdk/blazor/heatmap-chart/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Events in Blazor HeatMap Component | Syncfusion® -description: Checkout and learn here all about the features and events in Blazor HeatMap component and much more details. -platform: chart-sdk +title: Blazor HeatMap Chart Events | Syncfusion® +description: Learn how to handle Blazor HeatMap Chart interactions with CellClicked, CellRendering, CellSelected, and Created events. +platform: Blazor control: HeatMap Chart documentation: ug --- -# Events in Blazor HeatMap Chart Component +# Blazor HeatMap Chart Events This section describes the events that will be triggered for appropriate actions in HeatMap. The events should be declared in the HeatMap component using the [HeatMapEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.HeatMap.HeatMapEvents.html). diff --git a/chart-sdk/blazor/heatmap-chart/getting-started-with-server-app.md b/chart-sdk/blazor/heatmap-chart/getting-started-with-server-app.md index 2e0b3a176..d360fce70 100644 --- a/chart-sdk/blazor/heatmap-chart/getting-started-with-server-app.md +++ b/chart-sdk/blazor/heatmap-chart/getting-started-with-server-app.md @@ -1,104 +1,114 @@ --- layout: post -title: Getting Started with Blazor HeatMapChart in Server App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor HeatMap Chart Component in Blazor Server App. -platform: chart-sdk -component: HeatMap Chart +title: Getting Started with Blazor HeatMap Chart in Server App | Syncfusion® +description: Learn how to add the Blazor HeatMap Chart to a Blazor Server app, configure data, and render your first heatmap. +platform: Blazor +control: HeatMap Chart documentation: ug --- -# Getting Started with Blazor HeatMap Chart Component in Server App +# Getting Started with Blazor HeatMap Chart in Server App -This section briefly explains about how to include [Blazor HeatMap Chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include [Blazor HeatMap Chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor Server App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Run the following command to create a new Blazor Server App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorApp --interactivity Server +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor Server App. {% tabs %} +{% highlight razor tabtitle="Command Prompt" %} -{% highlight c# tabtitle="Blazor Server App" %} - -dotnet new blazor -o BlazorApp -int Server +dotnet new blazor -o BlazorApp --interactivity Server cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} -## Prerequisites +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +## Install the required Blazor package -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +Install the [Syncfusion.Blazor.HeatMap](https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap/) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -dotnet --version +{% tabcontents %} -{% endhighlight %} -{% endtabs %} +{% tabcontent Visual Studio %} -## Create a Blazor Server App using .NET CLI +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.HeatMap`) and install it. -Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation. +Alternatively, you can install the same package using the Package Manager Console with the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorApp -int Server -cd BlazorApp +Install-Package Syncfusion.Blazor.HeatMap -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} +{% tabcontent Visual Studio Code %} -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Open the terminal and run the following command. -## Install required Blazor packages +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -Install [Syncfusion.Blazor.HeatMap](https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +dotnet add package Syncfusion.Blazor.HeatMap -v {{ site.releaseversion }} -Alternatively, run the following commands in the Package Manager Console to achieve the same. +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.HeatMap -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.HeatMap -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces @@ -113,9 +123,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor Server App. +Open the **Program.cs** file in Blazor Server App and register the Blazor service. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -129,46 +139,36 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file. -```html +{% tabs %} +{% highlight html tabtitle="App.razor" %} - -.... -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor HeatMap Chart component -Add the Blazor HeatMap Chart component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor HeatMap Chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart) component inside the razor file. -N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. - -{% tabs %} -{% highlight razor %} - -@* desired render mode define here *@ -@rendermode InteractiveServer - -{% endhighlight %} -{% endtabs %} +N>If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@using Syncfusion.Blazor.HeatMap +@rendermode InteractiveServer -@code{ +@code +{ int[,] GetDefaultData() { int[,] dataSource = new int[,] @@ -192,13 +192,51 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor HeatMap Chart component in the default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor HeatMap Chart component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBTDWBuJXfSXofp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor HeatMap Chart](images/blazor-heatmap-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLxNGjgVJboqjOK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor HeatMap Chart](images/blazor-heatmap-chart.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/HeatMapChart). ## See also -1. [Getting Started with Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -2. [Getting Started with Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) \ No newline at end of file +1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor Web App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/chart-sdk/blazor/heatmap-chart/getting-started-with-web-app.md b/chart-sdk/blazor/heatmap-chart/getting-started-with-web-app.md index 424aae28d..39128ea1d 100644 --- a/chart-sdk/blazor/heatmap-chart/getting-started-with-web-app.md +++ b/chart-sdk/blazor/heatmap-chart/getting-started-with-web-app.md @@ -1,46 +1,52 @@ --- layout: post title: Getting Started with Blazor HeatMap Chart in Web App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor HeatMap Chart Component in Blazor Web App. -platform: chart-sdk -component: HeatMap Chart +description: Learn how to add the Blazor HeatMap Chart to a Blazor Web App (ASP.NET Core hosted), configure data, and render your first heatmap. +platform: Blazor +control: HeatMap Chart documentation: ug --- -# Getting Started with Blazor HeatMap Chart Component in Web App +# Getting Started with Blazor HeatMap Chart in Web App -This section briefly explains about how to include [Blazor HeatMap Chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include [Blazor HeatMap Chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor Web App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor Web App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Run the following command to create a new Blazor Web App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorWebApp --interactivity Auto +cd BlazorWebApp +cd BlazorWebApp.Client -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor Web App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet new blazor -o BlazorWebApp -int Auto +dotnet new blazor -o BlazorWebApp --interactivity Auto cd BlazorWebApp cd BlazorWebApp.Client @@ -49,71 +55,66 @@ cd BlazorWebApp.Client {% endtabcontent %} -{% tabcontent .NET CLI %} - -## Prerequisites +{% endtabcontents %} -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +## Install the required Blazor package -dotnet --version +Install the [Syncfusion.Blazor.HeatMap](https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the `.Client` project. -{% endhighlight %} -{% endtabs %} +{% tabcontents %} -## Create a Blazor Web App using .NET CLI +{% tabcontent Visual Studio %} -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.HeatMap`) and install it. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +Alternatively, you can install the same package using the Package Manager Console with the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorApp -int Auto -cd BlazorApp -cd BlazorApp.Client +Install-Package Syncfusion.Blazor.HeatMap -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} +{% tabcontent Visual Studio Code %} -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Open the terminal and run the following command. -## Install required Blazor packages +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -Install the [Syncfusion.Blazor.HeatMap](https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages using one of the following methods. +dotnet add package Syncfusion.Blazor.HeatMap -v {{ site.releaseversion }} -**Visual Studio (NuGet Package Manager)**: +{% endhighlight %} +{% endtabs %} -1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. -2. Search the required NuGet packages (`Syncfusion.Blazor.HeatMap` and `Syncfusion.Blazor.Themes`) and install it. +{% endtabcontent %} -**Visual Studio Code or .NET CLI**: +{% tabcontent .NET CLI %} -Open the terminal or command prompt and run the following commands: +Open the command prompt and run the following command. {% tabs %} -{% highlight C# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet add package Syncfusion.Blazor.HeatMap -v {{ site.releaseversion }} -dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project. +{% endtabcontent %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.HeatMap` namespaces. +After the packages are installed, open the **~/_Imports.razor** file in the `.Client` project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.HeatMap` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -124,9 +125,9 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor Service in the **Program.cs** file of your Blazor Web App. +Open the **Program.cs** file in Blazor Web App and register the Blazor service. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -140,39 +141,37 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. - -## Add stylesheet and script resources +## Add Script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **App.razor** file. -```html +{% tabs %} +{% highlight html tabtitle="App.razor" %} - -.... -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Blazor HeatMap Chart component +## Add Blazor HeatMap chart component -* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor HeatMap Chart component inside the razor file. -* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor HeatMap Chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart) component inside the razor file. -N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @rendermode InteractiveAuto +@using Syncfusion.Blazor.HeatMap + -@code{ +@code +{ int[,] GetDefaultData() { int[,] dataSource = new int[,] @@ -196,27 +195,55 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -### Run the application +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} -**Visual Studio**: +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor HeatMap Chart component will render in your default web browser. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor HeatMap Chart component will render in your default web browser. +{% endtabcontent %} -**Visual Studio Code or .NET CLI**: +{% tabcontent Visual Studio Code %} -1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. -2. Run the following command: +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. - ``` - dotnet run - ``` -3. The application will start and display in your default web browser. +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBTDWBuJXfSXofp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor HeatMap Chart](images/blazor-heatmap-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBRXmXqVzAewnFb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor HeatMap Chart](images/blazor-heatmap-chart.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/HeatMapChart). ## See also -1. [Getting Started with Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -2. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file +1. [Getting Started with Blazor WebAssembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/chart-sdk/blazor/heatmap-chart/getting-started.md b/chart-sdk/blazor/heatmap-chart/getting-started.md index a24417189..a27d4e0bb 100644 --- a/chart-sdk/blazor/heatmap-chart/getting-started.md +++ b/chart-sdk/blazor/heatmap-chart/getting-started.md @@ -1,102 +1,112 @@ --- layout: post -title: Getting Started with Blazor HeatMap Chart Component | Syncfusion® -description: Checkout and learn about getting started with Blazor HeatMap Chart component in Blazor WebAssembly Application. -platform: chart-sdk +title: Getting Started with Blazor HeatMap Chart in WASM App | Syncfusion® +description: Learn how to add the Blazor HeatMap Chart to a Blazor WebAssembly app, configure data, and render your first heatmap. +platform: Blazor control: HeatMap Chart documentation: ug --- -# Getting Started with Blazor HeatMap Chart Component +# Getting Started with Blazor HeatMap Chart in WASM App -This section briefly explains about how to include [Blazor Blazor HeatMap Chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include [Blazor HeatMap Chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor WebAssembly (Standalone) App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Run the following command to create a new Blazor WebAssembly App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazorwasm -o BlazorApp +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor WebAssembly App. {% tabs %} - -{% highlight c# tabtitle="Blazor WASM App" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet new blazorwasm -o BlazorApp cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} + +## Install the required Blazor package -## Prerequisites +Install the [Syncfusion.Blazor.HeatMap](https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +{% tabcontents %} + +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.HeatMap`) and install it. + +Alternatively, you can install the same package using the Package Manager Console with the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.HeatMap -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +{% endtabcontent %} -Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +dotnet add package Syncfusion.Blazor.HeatMap -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install required Blazor packages - -Install [Syncfusion.Blazor.HeatMap](https://www.nuget.org/packages/Syncfusion.Blazor.HeatMap/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following commands in the Package Manager Console to achieve the same. +Open the command prompt and run the following command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.HeatMap -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.HeatMap -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces @@ -111,14 +121,13 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +Open the **Program.cs** file in Blazor WebAssembly App and register the Blazor service. {% tabs %} {% highlight C# tabtitle="Program.cs" %} -.... using Syncfusion.Blazor; .... builder.Services.AddSyncfusionBlazor(); @@ -127,35 +136,32 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **wwwroot/index.html** file. -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} - -.... -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor HeatMap Chart component -Add the Blazor HeatMap Chart component in the **~/Pages/Index.razor** file. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor HeatMap Chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart) component inside the razor file. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.HeatMap +{% highlight razor tabtitle="Home.razor" %} -@code{ +@code +{ int[,] GetDefaultData() { int[,] dataSource = new int[,] @@ -179,18 +185,51 @@ Add the Blazor HeatMap Chart component in the **~/Pages/Index.razor** file. {% endhighlight %} {% endtabs %} -*Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor HeatMap Chart component in the default web browser. +## Run the application -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBTDWBuJXfSXofp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor HeatMap Chart](images/blazor-heatmap-chart.webp)" %} +{% tabcontents %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/HeatMapChart). +{% tabcontent Visual Studio %} -## See also +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor HeatMap Chart component will render in your default web browser. -[Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} -[Getting Started with Blazor for Client-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} -[Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBHZwZUrpluFFEM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor HeatMap Chart](images/blazor-heatmap-chart.webp)" %} + +N> [View the sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/HeatMapChart). + +## See also -N> You can also explore our [Blazor HeatMap Chart example](https://blazor.syncfusion.com/demos/heatmap-chart/default-functionalities?theme=bootstrap5) that shows you how to render and configure the heatmap chart. +1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor Web App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/chart-sdk/blazor/heatmap-chart/images/blazor-heatmap-chart.webp b/chart-sdk/blazor/heatmap-chart/images/blazor-heatmap-chart.webp index 15332995c..0b34de19b 100644 Binary files a/chart-sdk/blazor/heatmap-chart/images/blazor-heatmap-chart.webp and b/chart-sdk/blazor/heatmap-chart/images/blazor-heatmap-chart.webp differ diff --git a/chart-sdk/blazor/heatmap-chart/legend.md b/chart-sdk/blazor/heatmap-chart/legend.md index 1bd710efd..0029f0d26 100644 --- a/chart-sdk/blazor/heatmap-chart/legend.md +++ b/chart-sdk/blazor/heatmap-chart/legend.md @@ -1,13 +1,13 @@ --- layout: post -title: Legend in Blazor HeatMap Chart Component | Syncfusion® -description: Checkout and learn here all the features about Legend in Blazor HeatMap Chart component and much more details. -platform: chart-sdk +title: Blazor HeatMap Chart Legend | Syncfusion® +description: Learn how to display Blazor HeatMap Chart legends as gradient or fixed-color lists, and place or align them at any side of the chart. +platform: Blazor control: HeatMap Chart documentation: ug --- -# Legend in Blazor HeatMap Chart Component +# Blazor HeatMap Chart Legend The legend is used to provide the information about the heat map cell. You can enable the legend by setting the `Visible` property to true. diff --git a/chart-sdk/blazor/heatmap-chart/palette.md b/chart-sdk/blazor/heatmap-chart/palette.md index ce9e5ad58..7833c4b67 100644 --- a/chart-sdk/blazor/heatmap-chart/palette.md +++ b/chart-sdk/blazor/heatmap-chart/palette.md @@ -1,13 +1,13 @@ --- layout: post -title: Palette in Blazor HeatMap Chart Component | Syncfusion® -description: Checkout and learn here all the features about Palette in Blazor HeatMap Chart component and much more details. -platform: chart-sdk +title: Blazor HeatMap Chart Palette | Syncfusion® +description: Learn how to apply gradient or fixed color palettes to Blazor HeatMap Chart cells to map data values to color ranges and stops. +platform: Blazor control: HeatMap Chart documentation: ug --- -# Palette in Blazor HeatMap Chart Component +# Blazor HeatMap Chart Palette In heat map, each data point is displayed as a cell with applied color based on the data value. The palette in the heat map is used to define the color range for cells and gradient type for colors. You can define the colors either in RGB or hex codes using the `Color` property in the `HeatMapPalette`. The defined colors are applied to the cell background based on the palette type and cell value. diff --git a/chart-sdk/blazor/heatmap-chart/selection.md b/chart-sdk/blazor/heatmap-chart/selection.md index c403b5be7..78ca4245b 100644 --- a/chart-sdk/blazor/heatmap-chart/selection.md +++ b/chart-sdk/blazor/heatmap-chart/selection.md @@ -1,13 +1,13 @@ --- layout: post -title: Selection in Blazor HeatMap Chart Component | Syncfusion® -description: Checkout and learn here all about selection in Blazor HeatMap Chart component and much more details. -platform: chart-sdk +title: Blazor HeatMap Chart Selection | Syncfusion® +description: Learn how to select single or multiple Blazor HeatMap Chart cells with mouse, touch, or keyboard, and clear selections programmatically. +platform: Blazor control: HeatMap Chart documentation: ug --- -# Selection in Blazor HeatMap Chart Component +# Blazor HeatMap Chart Selection In the [Blazor HeatMap Chart](https://www.syncfusion.com/blazor-components/blazor-heatmap-chart), the cell selection is used to select single or multiple cells at runtime and get the selected cell details using the [CellSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.HeatMap.HeatMapEvents.html#Syncfusion_Blazor_HeatMap_HeatMapEvents_CellSelected) event. You can enable the cell selection using the [AllowSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.HeatMap.SfHeatMap-1.html#Syncfusion_Blazor_HeatMap_SfHeatMap_1_AllowSelection) property. diff --git a/chart-sdk/blazor/heatmap-chart/tooltip.md b/chart-sdk/blazor/heatmap-chart/tooltip.md index 3869a2bf7..f16360f8f 100644 --- a/chart-sdk/blazor/heatmap-chart/tooltip.md +++ b/chart-sdk/blazor/heatmap-chart/tooltip.md @@ -1,13 +1,13 @@ --- layout: post -title: Tooltip in Blazor HeatMap Chart Component | Syncfusion® -description: Checkout and learn here all the features about Tooltip in Blazor HeatMap Chart component and much more details. -platform: chart-sdk +title: Blazor HeatMap Chart Tooltip | Syncfusion® +description: Learn how to show default or custom HTML tooltips on Blazor HeatMap Chart cells with the XLabel, YLabel, and value from the data source. +platform: Blazor control: HeatMap Chart documentation: ug --- -# Tooltip in Blazor HeatMap Chart Component +# Blazor HeatMap Chart Tooltip Tooltip is used to provide the details of the heatmap cell, and this can be displayed, while hovering the cursor over the cell or performing tap action in touch devices. diff --git a/chart-sdk/blazor/heatmap-chart/working-with-data.md b/chart-sdk/blazor/heatmap-chart/working-with-data.md index f5bbde2e4..30bc6cafc 100644 --- a/chart-sdk/blazor/heatmap-chart/working-with-data.md +++ b/chart-sdk/blazor/heatmap-chart/working-with-data.md @@ -1,13 +1,13 @@ --- layout: post -title: Working with data in Blazor HeatMap Chart | Syncfusion® -description: Checkout and learn here all about Working with data in Blazor HeatMap Chart component and much more details. -platform: chart-sdk +title: Blazor HeatMap Chart Working with Data | Syncfusion® +description: Learn how to bind Blazor HeatMap Chart data using one- or two-dimensional arrays or JSON, with table or cell adaptor mapping. +platform: Blazor control: HeatMap Chart documentation: ug --- -# Working with data in Blazor HeatMap Chart Component +# Blazor HeatMap Chart Working with Data This section shows how to bind data to the HeatMap component. The below video demonstrates the same. diff --git a/chart-sdk/blazor/linear-gauge/accessibility.md b/chart-sdk/blazor/linear-gauge/accessibility.md index 013c1a85f..3d3457882 100644 --- a/chart-sdk/blazor/linear-gauge/accessibility.md +++ b/chart-sdk/blazor/linear-gauge/accessibility.md @@ -1,13 +1,13 @@ --- layout: post -title: Accessibility in Blazor Linear Gauge Component | Syncfusion® -description: Checkout and learn here all the features about accessibility in Blazor Linear Gauge component and more. -platform: chart-sdk +title: Accessibility in Blazor Linear Gauge | Syncfusion® +description: Discover the Blazor Linear Gauge accessibility compliance for WCAG 2.2, Section 508, WAI-ARIA roles, screen reader support, and axe-core validation. +platform: Blazor control: Linear Gauge documentation: ug --- -# Accessibility in Blazor Linear Gauge Component +# Accessibility in Blazor Linear Gauge The [Blazor Linear Gauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component follows commonly used accessibility guidelines and standards, such as [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). diff --git a/chart-sdk/blazor/linear-gauge/animation.md b/chart-sdk/blazor/linear-gauge/animation.md index 693247283..eabcc1582 100644 --- a/chart-sdk/blazor/linear-gauge/animation.md +++ b/chart-sdk/blazor/linear-gauge/animation.md @@ -1,13 +1,13 @@ --- layout: post -title: Animation in Blazor Linear Gauge Component | Syncfusion® -description: Checkout and learn here all the features about animation in Blazor Linear Gauge component and much more details. -platform: chart-sdk +title: Blazor Linear Gauge Animation | Syncfusion® +description: Learn how to animate axis, ticks, labels, ranges, pointers, and annotations in the Blazor Linear Gauge by setting the AnimationDuration property. +platform: Blazor control: Linear Gauge documentation: ug --- -# Animation in Blazor Linear Gauge Component +# Blazor Linear Gauge Animation All of the elements in the Linear Gauge, such as the axis lines, ticks, labels, ranges, pointers, and annotations, can be animated sequentially by using the [AnimationDuration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.SfLinearGauge.html#Syncfusion_Blazor_LinearGauge_SfLinearGauge_AnimationDuration) property. The animation for the Linear Gauge is enabled when the `AnimationDuration` property is set to an appropriate value in milliseconds, providing a smooth rendering effect for the component. If the `AnimationDuration` property is set to **0**, which is the default value, the animation effect is disabled. If the animation is enabled, the component will behave in the following order. diff --git a/chart-sdk/blazor/linear-gauge/annotations.md b/chart-sdk/blazor/linear-gauge/annotations.md index 7d0c61673..4c4c78da8 100644 --- a/chart-sdk/blazor/linear-gauge/annotations.md +++ b/chart-sdk/blazor/linear-gauge/annotations.md @@ -1,13 +1,13 @@ --- layout: post -title: Annotations in Blazor Linear Gauge Component | Syncfusion® -description: Checkout and learn here all the features about annotations in Blazor Linear Gauge component and much more. -platform: chart-sdk +title: Blazor Linear Gauge Annotations | Syncfusion® +description: Learn how to add text, HTML, or image annotations to the Blazor Linear Gauge with custom positioning, z-index, and alignment. +platform: Blazor control: Linear Gauge documentation: ug --- -# Annotations in Blazor Linear Gauge Component +# Blazor Linear Gauge Annotations Annotations are used to mark the specific area of interest in the Linear Gauge with text, HTML elements, or images. Any number of annotations can be added to the Linear Gauge component. diff --git a/chart-sdk/blazor/linear-gauge/axis.md b/chart-sdk/blazor/linear-gauge/axis.md index 45dba455b..468972147 100644 --- a/chart-sdk/blazor/linear-gauge/axis.md +++ b/chart-sdk/blazor/linear-gauge/axis.md @@ -1,13 +1,13 @@ --- layout: post -title: Axes in Blazor Linear Gauge Component | Syncfusion® -description: Checkout and learn here all the features about axes in Blazor Linear Gauge component and much more details. -platform: chart-sdk +title: Blazor Linear Gauge Axis | Syncfusion® +description: Learn how to configure the Blazor Linear Gauge axis with minimum, maximum, ticks, labels, and custom formats for numeric scales. +platform: Blazor control: Linear Gauge documentation: ug --- -# Axes in Blazor Linear Gauge Component +# Blazor Linear Gauge Axis Axis is used to indicate the numeric values in the linear scale. The Linear Gauge component can have any number of axes. The sub-elements of an axis are line, ticks, labels, ranges, and pointers. diff --git a/chart-sdk/blazor/linear-gauge/events.md b/chart-sdk/blazor/linear-gauge/events.md index d98a161b0..d318e41b3 100644 --- a/chart-sdk/blazor/linear-gauge/events.md +++ b/chart-sdk/blazor/linear-gauge/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Events in Blazor Linear Gauge Component | Syncfusion® -description: Checkout and learn here all about the features and events in Blazor Linear Gauge component and much more details. -platform: chart-sdk +title: Blazor Linear Gauge Events | Syncfusion® +description: Learn how to handle Blazor Linear Gauge events such as AnnotationRendering, AxisLabelRendering, Loaded, and OnDragStart to customize behavior. +platform: Blazor control: Linear Gauge documentation: ug --- -# Events in Blazor Linear Gauge Component +# Blazor Linear Gauge Events This section describes the Linear Gauge component's event that gets triggered when corresponding operations are performed. The events should be provided to the Linear Gauge by using the [LinearGaugeEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeEvents.html). diff --git a/chart-sdk/blazor/linear-gauge/getting-started-webapp.md b/chart-sdk/blazor/linear-gauge/getting-started-webapp.md index 6901d2edf..8f22cc5cb 100644 --- a/chart-sdk/blazor/linear-gauge/getting-started-webapp.md +++ b/chart-sdk/blazor/linear-gauge/getting-started-webapp.md @@ -1,48 +1,54 @@ --- layout: post -title: Getting started with LinearGauge in Blazor Web App | Syncfusion® -description: Check out the documentation for getting started with Blazor LinearGauge Component Components in Web App. -platform: chart-sdk -control: LinearGauge +title: Getting Started with Blazor Linear Gauge in Web App | Syncfusion® +description: Learn how to add the Blazor Linear Gauge to a Blazor Web App using Visual Studio, VS Code, or the .NET CLI to render your first gauge. +platform: Blazor +control: Linear Gauge documentation: ug --- -# Getting started with Blazor LinearGauge in Blazor Web App +# Getting Started with Blazor Linear Gauge in Web App -The Blazor LinearGauge is an ideal component for visualizing numeric values in a linear scale with features like multiple axes, different orientations, and more. +The [Blazor Linear Gauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) is an ideal component for visualizing numeric values in a linear scale with features like multiple axes, different orientations, and more. -This section briefly explains about how to include [Blazor LinearGauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor Linear Gauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/Download/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor Web App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor Web App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Run the following command to create a new Blazor Web App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorWebApp --interactivity Auto +cd BlazorWebApp +cd BlazorWebApp.Client -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor Web App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet new blazor -o BlazorWebApp -int Auto +dotnet new blazor -o BlazorWebApp --interactivity Auto cd BlazorWebApp cd BlazorWebApp.Client @@ -51,66 +57,69 @@ cd BlazorWebApp.Client {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} + +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +## Install the required Blazor package + +Install the [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the `.Client` project. + +{% tabcontents %} + +{% tabcontent Visual Studio %} -## Prerequisites +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.LinearGauge`) and install it. -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Alternatively, you can install the same package using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.LinearGauge -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor Web App using .NET CLI +{% endtabcontent %} -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +{% tabcontent Visual Studio Code %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +Open the terminal and run the following commands. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazor -o BlazorWebApp -int Auto -cd BlazorWebApp -cd BlazorWebApp.Client +dotnet add package Syncfusion.Blazor.LinearGauge -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). - -## Install required Blazor packages - -Install [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following command in the Package Manager Console to achieve the same. +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.LinearGauge -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.LinearGauge -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. +{% endtabcontent %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.LinearGauge` namespaces. +After the package is installed, open the **~/_Imports.razor** file in the `.Client` project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.LinearGauge` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.LinearGauge @@ -118,9 +127,9 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Syncfusion Blazor service in the **Program.cs** file of your Blazor Web App. +Open the **Program.cs** file in Blazor Web App and register the Blazor service. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -134,37 +143,29 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. - -## Add script resources +## Add script resource -The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/Components/App.razor** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~/Components/App.razor** file. -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} -``` - -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Blazor LinearGauge component +## Add Blazor Linear Gauge component -Add the Blazor LinearGauge component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Linear Gauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component inside the `.Client` project razor file. -N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.LinearGauge @@ -179,9 +180,51 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor LinearGauge component in the default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Linear Gauge component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrzZCLkTTyPJnAO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge Component](images/blazor-linear-gauge-component.webp)" %} +{% tabcontent .NET CLI %} + +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVRNmDISUVrPEjJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Linear Gauge Component](images/blazor-linear-gauge-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/LinearGauge). @@ -189,7 +232,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- Pointers are used to indicate values on an axis. You can change the pointer value using the [PointerValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugePointer.html#Syncfusion_Blazor_LinearGauge_LinearGaugePointer_PointerValue) property in the [LinearGaugePointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugePointer.html). -N> In LinearGauge, you can configure multiple axes. On each axis, you can add a pointer. +N> In Linear Gauge, you can configure multiple axes. On each axis, you can add a pointer. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -208,9 +251,9 @@ N> In LinearGauge, you can configure multiple axes. On each axis, you can add a {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrJtWhEJTREUVHV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge with Pointer Value](images/blazor-linear-gauge-with-pointer.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLnDwNSeBPMqSEN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Linear Gauge with Pointer Value](images/blazor-linear-gauge-with-pointer.webp)" %} -## Add a title for Blazor LinearGauge +## Add a title for Blazor Linear Gauge The title can be added to the linear gauge to provide a piece of quick information to the users about the context of the rendered linear gauge. You can add the title to the linear gauge using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.SfLinearGauge.html#Syncfusion_Blazor_LinearGauge_SfLinearGauge_Title) property in [SfLinearGauge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.SfLinearGauge.html). @@ -230,9 +273,9 @@ The title can be added to the linear gauge to provide a piece of quick informati {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVTtsBuJzGmldKw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge with Title](images/blazor-linear-gauge-with-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBxZmXoSUNKcBQa?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Linear Gauge with Title](images/blazor-linear-gauge-with-title.webp)" %} -## Add ranges in the Blazor LinearGauge +## Add ranges in the Blazor Linear Gauge The range is used to specify a group of scale values in the gauge. You can set the range start and end using [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html#Syncfusion_Blazor_LinearGauge_LinearGaugeRange_Start) and [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html#Syncfusion_Blazor_LinearGauge_LinearGaugeRange_End) properties in the [LinearGaugeRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html). You can add any number of ranges for an axis using [LinearGaugeRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html). @@ -260,12 +303,9 @@ The range is used to specify a group of scale values in the gauge. You can set t {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrfjCrEpJFVEbRI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge with Range Bar](images/blazor-linear-gauge-with-ranges.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBnZwtySqzMwRtY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Linear Gauge with Range Bar](images/blazor-linear-gauge-with-ranges.webp)" %} ## See also -* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) - -* [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) - -* [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor Server App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) diff --git a/chart-sdk/blazor/linear-gauge/getting-started-with-server-app.md b/chart-sdk/blazor/linear-gauge/getting-started-with-server-app.md index 292859bf4..9c76529b9 100644 --- a/chart-sdk/blazor/linear-gauge/getting-started-with-server-app.md +++ b/chart-sdk/blazor/linear-gauge/getting-started-with-server-app.md @@ -1,107 +1,118 @@ --- layout: post -title: Getting started with LinearGauge in Blazor Server App | Syncfusion® -description: Check out the documentation for getting started with Blazor LinearGauge Component Components in Server App. -platform: chart-sdk -control: LinearGauge +title: Getting Started with Blazor Linear Gauge in Server App | Syncfusion® +description: Learn how to add the Blazor Linear Gauge to a Blazor Server App using Visual Studio, VS Code, or the .NET CLI to render your first gauge. +platform: Blazor +control: Linear Gauge documentation: ug --- -# Getting Started with Blazor Linear Gauge Component in Server App +# Getting Started with Blazor Linear Gauge in Server App -This section briefly explains about how to include [Blazor Linear Gauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains about how to include the [Blazor Linear Gauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component in a Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/Download/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor Server App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Run the following command to create a new Blazor Server App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorApp --interactivity Server +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor Server App. {% tabs %} +{% highlight razor tabtitle="Command Prompt" %} -{% highlight c# tabtitle="Blazor Server App" %} - -dotnet new blazor -o BlazorApp -int Server +dotnet new blazor -o BlazorApp --interactivity Server cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} -## Prerequisites +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +## Install the required Blazor package -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +Install the [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge/) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -dotnet --version +{% tabcontents %} -{% endhighlight %} -{% endtabs %} +{% tabcontent Visual Studio %} -## Create a Blazor Server App using .NET CLI +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.LinearGauge`) and install it. -Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation. +Alternatively, you can install the same package using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorApp -int Server -cd BlazorApp +Install-Package Syncfusion.Blazor.LinearGauge -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} +{% tabcontent Visual Studio Code %} -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Open the terminal and run the following commands. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Syncfusion.Blazor.LinearGauge -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} -## Install required Blazor packages +{% endtabcontent %} -Install [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following command in the Package Manager Console to achieve the same. +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.LinearGauge -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.LinearGauge -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.LinearGauge` namespaces. +After the package is installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.LinearGauge` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -112,9 +123,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor Server App. +Open the **Program.cs** file in Blazor Server App and register the Blazor service. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -128,36 +139,29 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add script resources +## Add script resource -The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/Components/App.razor** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~/Components/App.razor** file. -```html +{% tabs %} +{% highlight html tabtitle="App.razor" %} -``` - -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Blazor LinearGauge component +## Add Blazor Linear Gauge component -Add the Blazor LinearGauge component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. +Open a Razor file located in the **~/Components/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Linear Gauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component inside the razor file. -N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. +N>If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveServer -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - @@ -171,17 +175,55 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor LinearGauge component in the default web browser. +## Run the application -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrzZCLkTTyPJnAO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge Component](images/blazor-linear-gauge-component.webp)" %} +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Linear Gauge component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhHjcZySgIlonap?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Linear Gauge Component](images/blazor-linear-gauge-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/LinearGauge). ## Set pointer value -Pointers are used to indicate values on an axis. You can change the pointer value using the [PointerValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugePointer.html#Syncfusion_Blazor_LinearGauge_LinearGaugePointer_PointerValue) property in the [LinearGaugePointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugePointer.html). +Pointers are used to indicate values on an axis. You can change the pointer value using the [PointerValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugePointer.html#Syncfusion_Blazor_LinearGauge_LinearGaugePointer_PointerValue) property in the [Linear Gauge Pointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugePointer.html). -N> In LinearGauge, you can configure multiple axes. On each axis, you can add a pointer. +N> In Linear Gauge, you can configure multiple axes. On each axis, you can add a pointer. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -200,9 +242,9 @@ N> In LinearGauge, you can configure multiple axes. On each axis, you can add a {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrJtWhEJTREUVHV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge with Pointer Value](images/blazor-linear-gauge-with-pointer.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthnNmtyyAxAiyya?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Linear Gauge with Pointer Value](images/blazor-linear-gauge-with-pointer.webp)" %} -## Add a title for Blazor LinearGauge +## Add a title for Blazor Linear Gauge The title can be added to the linear gauge to provide a piece of quick information to the users about the context of the rendered linear gauge. You can add the title to the linear gauge using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.SfLinearGauge.html#Syncfusion_Blazor_LinearGauge_SfLinearGauge_Title) property in [SfLinearGauge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.SfLinearGauge.html). @@ -222,11 +264,11 @@ The title can be added to the linear gauge to provide a piece of quick informati {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVTtsBuJzGmldKw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge with Title](images/blazor-linear-gauge-with-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhxXQjSoAxmpMPw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Linear Gauge with Title](images/blazor-linear-gauge-with-title.webp)" %} -## Add ranges in the Blazor LinearGauge +## Add ranges in the Blazor Linear Gauge -The range is used to specify a group of scale values in the gauge. You can set the range start and end using [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html#Syncfusion_Blazor_LinearGauge_LinearGaugeRange_Start) and [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html#Syncfusion_Blazor_LinearGauge_LinearGaugeRange_End) properties in the [LinearGaugeRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html). You can add any number of ranges for an axis using [LinearGaugeRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html). +The range is used to specify a group of scale values in the gauge. You can set the range start and end using [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html#Syncfusion_Blazor_LinearGauge_LinearGaugeRange_Start) and [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html#Syncfusion_Blazor_LinearGauge_LinearGaugeRange_End) properties in the [Linear Gauge Range](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html). You can add any number of ranges for an axis using [Linear Gauge Range](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -252,12 +294,9 @@ The range is used to specify a group of scale values in the gauge. You can set t {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrfjCrEpJFVEbRI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge with Range Bar](images/blazor-linear-gauge-with-ranges.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLxNQXSyKQskfnz?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Linear Gauge with Range Bar](images/blazor-linear-gauge-with-ranges.webp)" %} ## See also -* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) - -* [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) - -* [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +1. [Getting Started with Blazor WebAssembly App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor Server App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) diff --git a/chart-sdk/blazor/linear-gauge/getting-started.md b/chart-sdk/blazor/linear-gauge/getting-started.md index fb290a5e5..1b6395816 100644 --- a/chart-sdk/blazor/linear-gauge/getting-started.md +++ b/chart-sdk/blazor/linear-gauge/getting-started.md @@ -1,108 +1,118 @@ --- layout: post -title: Getting Started with Blazor LinearGauge Component | Syncfusion® -description: Checkout and learn about getting started with Blazor LinearGauge component in Blazor WebAssembly Application. -platform: chart-sdk -control: LinearGauge +title: Getting Started with Blazor Linear Gauge in WASM App | Syncfusion® +description: Learn how to add the Blazor Linear Gauge to a Blazor WebAssembly App using Visual Studio, VS Code, or the .NET CLI to render your first gauge. +platform: Blazor +control: Linear Gauge documentation: ug --- -# Getting Started with Blazor LinearGauge Component +# Getting Started with Blazor Linear Gauge in WASM App -The Blazor LinearGauge is an ideal component for visualizing numeric values in a linear scale with features like multiple axes, different orientations, and more. +The [Blazor Linear Gauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) is an ideal component for visualizing numeric values in a linear scale with features like multiple axes, different orientations, and more. -This section briefly explains about how to include [Blazor LinearGauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor Linear Gauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/Download/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor WebAssembly (Standalone) App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Run the following command to create a new Blazor WebAssembly App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazorwasm -o BlazorApp +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor WebAssembly App. {% tabs %} - -{% highlight c# tabtitle="Blazor WASM App" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet new blazorwasm -o BlazorApp cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} + +## Install the required Blazor package + +Install the [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge/) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. + +{% tabcontents %} + +{% tabcontent Visual Studio %} -## Prerequisites +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.LinearGauge`) and install it. -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +Alternatively, you can install the same package using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.LinearGauge -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} -Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. +Open the terminal and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +dotnet add package Syncfusion.Blazor.LinearGauge -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install required Blazor packages - -Install [Syncfusion.Blazor.LinearGauge](https://www.nuget.org/packages/Syncfusion.Blazor.LinearGauge/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following commands in the Package Manager Console to achieve the same. +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.LinearGauge -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.LinearGauge -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.LinearGauge` namespaces. +After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.LinearGauge` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -113,9 +123,9 @@ After the packages are installed, open the **~/_Imports.razor** file and import {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +Open the **Program.cs** file in Blazor WebAssembly App and register the Blazor service. {% tabs %} {% highlight C# tabtitle="Program.cs" %} @@ -129,26 +139,24 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add script resource + +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~wwwroot/index.html** file. -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file. - -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} - -.... -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Blazor LinearGauge component +## Add Blazor Linear Gauge component -Add the Blazor LinearGauge component in the **~/Pages/Index.razor** file. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Linear Gauge](https://www.syncfusion.com/blazor-components/blazor-linear-gauge) component inside the razor file. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -163,18 +171,56 @@ Add the Blazor LinearGauge component in the **~/Pages/Index.razor** file. {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor LinearGauge component in the default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrzZCLkTTyPJnAO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge Component](images/blazor-linear-gauge-component.webp)" %} +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Linear Gauge component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVxZwZIIAwxSWhN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Linear Gauge Component](images/blazor-linear-gauge-component.webp)" %} ## Set pointer value Pointers are used to indicate values on an axis. You can change the pointer value using the [PointerValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugePointer.html#Syncfusion_Blazor_LinearGauge_LinearGaugePointer_PointerValue) property in the [LinearGaugePointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugePointer.html). -N> In LinearGauge, you can configure multiple axes. On each axis, you can add a pointer. +N> In Linear Gauge, you can configure multiple axes. On each axis, you can add a pointer. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -190,14 +236,14 @@ N> In LinearGauge, you can configure multiple axes. On each axis, you can add a {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrJtWhEJTREUVHV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge with Pointer Value](images/blazor-linear-gauge-with-pointer.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVHDctISqvNdJoj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Linear Gauge with Pointer Value](images/blazor-linear-gauge-with-pointer.webp)" %} -## Add a title for Blazor LinearGauge +## Add a title for Blazor Linear Gauge The title can be added to the linear gauge to provide a piece of quick information to the users about the context of the rendered linear gauge. You can add the title to the linear gauge using [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.SfLinearGauge.html#Syncfusion_Blazor_LinearGauge_SfLinearGauge_Title) property in [SfLinearGauge](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.SfLinearGauge.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -212,14 +258,14 @@ The title can be added to the linear gauge to provide a piece of quick informati {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVTtsBuJzGmldKw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge with Title](images/blazor-linear-gauge-with-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLdjmjyyqPJPJRa?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Linear Gauge with Title](images/blazor-linear-gauge-with-title.webp)" %} -## Add ranges in the Blazor LinearGauge +## Add ranges in the Blazor Linear Gauge -The range is used to specify a group of scale values in the gauge. You can set the range start and end using [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html#Syncfusion_Blazor_LinearGauge_LinearGaugeRange_Start) and [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html#Syncfusion_Blazor_LinearGauge_LinearGaugeRange_End) properties in the [LinearGaugeRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html). You can add any number of ranges for an axis using [LinearGaugeRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html). +The range is used to specify a group of scale values in the gauge. You can set the range start and end using [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html#Syncfusion_Blazor_LinearGauge_LinearGaugeRange_Start) and [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html#Syncfusion_Blazor_LinearGauge_LinearGaugeRange_End) properties in the [Linear Gauge Range](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html). You can add any number of ranges for an axis using [Linear Gauge Range](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -242,14 +288,12 @@ The range is used to specify a group of scale values in the gauge. You can set t {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrfjCrEpJFVEbRI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor LinearGauge with Range Bar](images/blazor-linear-gauge-with-ranges.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrxjmZeSKFvlbfY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Linear Gauge with Range Bar](images/blazor-linear-gauge-with-ranges.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/LinearGauge). ## See also -* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) - -* [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) - -* [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +3. [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/chart-sdk/blazor/linear-gauge/how-to/place-gauge-inside-other-components.md b/chart-sdk/blazor/linear-gauge/how-to/place-gauge-inside-other-components.md index a284d69eb..325ff8c8a 100644 --- a/chart-sdk/blazor/linear-gauge/how-to/place-gauge-inside-other-components.md +++ b/chart-sdk/blazor/linear-gauge/how-to/place-gauge-inside-other-components.md @@ -1,13 +1,13 @@ --- layout: post -title: How to place Linear Gauge inside other components | Syncfusion® -description: Learn here about how to place the Linear Gauge inside other components like Dashboard Layout, Tab, Dialog and Accordion. -platform: chart-sdk +title: How to Place Blazor Linear Gauge inside Other Components | Syncfusion® +description: Learn how to place the Blazor Linear Gauge inside Dashboard Layout, Tabs, Dialog, or Accordion by deferring initialization until the host fires Created. +platform: Blazor control: Linear Gauge documentation: ug --- -# Render Linear Gauge component inside other components +# How to Place Blazor Linear Gauge inside Other Components The Linear Gauge can be rendered within components such as the Dashboard Layout, Tabs, Dialog, and others. In general, the Linear Gauge component renders before other components, so a boolean variable (i.e. boolean flag) is used to determine when to begin rendering the Linear Gauge component. diff --git a/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-component.webp b/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-component.webp index 57db542da..6b656f0a9 100644 Binary files a/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-component.webp and b/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-component.webp differ diff --git a/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-with-pointer.webp b/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-with-pointer.webp index 663c530fa..ce5d33b65 100644 Binary files a/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-with-pointer.webp and b/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-with-pointer.webp differ diff --git a/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-with-ranges.webp b/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-with-ranges.webp index 4860337f8..01f5ebb3f 100644 Binary files a/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-with-ranges.webp and b/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-with-ranges.webp differ diff --git a/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-with-title.webp b/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-with-title.webp index cbf92a052..a01ea4cee 100644 Binary files a/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-with-title.webp and b/chart-sdk/blazor/linear-gauge/images/blazor-linear-gauge-with-title.webp differ diff --git a/chart-sdk/blazor/linear-gauge/internationalization.md b/chart-sdk/blazor/linear-gauge/internationalization.md index abc302b1c..e62d36fc4 100644 --- a/chart-sdk/blazor/linear-gauge/internationalization.md +++ b/chart-sdk/blazor/linear-gauge/internationalization.md @@ -1,13 +1,13 @@ --- layout: post -title: Globalization in Blazor Linear Gauge Component | Syncfusion® -description: Checkout and learn here all the features about globalization in Blazor Linear Gauge component and more. -platform: chart-sdk +title: Blazor Linear Gauge Internationalization | Syncfusion® +description: Learn how to localize the Blazor Linear Gauge for global audiences by configuring numeric formats, currency, and percentage on labels and tooltips. +platform: Blazor control: Linear Gauge documentation: ug --- -# Globalization in Blazor Linear Gauge Component +# Blazor Linear Gauge Internationalization The localization allows to localize the default text content in the Blazor component. For more information about localization, refer [here](https://blazor.syncfusion.com/documentation/common/localization). diff --git a/chart-sdk/blazor/linear-gauge/linear-gauge-appearance.md b/chart-sdk/blazor/linear-gauge/linear-gauge-appearance.md index 508b45d68..69527477e 100644 --- a/chart-sdk/blazor/linear-gauge/linear-gauge-appearance.md +++ b/chart-sdk/blazor/linear-gauge/linear-gauge-appearance.md @@ -1,13 +1,13 @@ --- layout: post -title: Appearance in Blazor Linear Gauge Component | Syncfusion® -description: Checkout and learn here all the features about appearance in Blazor Linear Gauge component and much more. -platform: chart-sdk +title: Blazor Linear Gauge Appearance | Syncfusion® +description: Learn how to customize the Blazor Linear Gauge appearance with background, border, margin, title styling, and container shapes. +platform: Blazor control: Linear Gauge documentation: ug --- -# Appearance in Blazor Linear Gauge Component +# Blazor Linear Gauge Appearance ## Customizing the Linear Gauge area diff --git a/chart-sdk/blazor/linear-gauge/linear-gauge-dimensions.md b/chart-sdk/blazor/linear-gauge/linear-gauge-dimensions.md index a2bd18a49..7e4666782 100644 --- a/chart-sdk/blazor/linear-gauge/linear-gauge-dimensions.md +++ b/chart-sdk/blazor/linear-gauge/linear-gauge-dimensions.md @@ -1,13 +1,13 @@ --- layout: post -title: Dimensions in Blazor Linear Gauge Component | Syncfusion® -description: Checkout and learn here all the features about dimensions in Blazor Linear Gauge component and much more. -platform: chart-sdk +title: Blazor Linear Gauge Dimensions | Syncfusion® +description: Learn how to set the Blazor Linear Gauge dimensions in pixels or percentages using the Width and Height properties for responsive layouts. +platform: Blazor control: Linear Gauge documentation: ug --- -# Dimensions in Blazor Linear Gauge Component +# Blazor Linear Gauge Dimensions ## Size for Linear Gauge diff --git a/chart-sdk/blazor/linear-gauge/methods.md b/chart-sdk/blazor/linear-gauge/methods.md index ddc3c6745..b6f11dd28 100644 --- a/chart-sdk/blazor/linear-gauge/methods.md +++ b/chart-sdk/blazor/linear-gauge/methods.md @@ -1,13 +1,13 @@ --- layout: post -title: Methods in Blazor Linear Gauge Component | Syncfusion® -description: Checkout and learn here all the features about methods in Blazor Linear Gauge component and much more. -platform: chart-sdk +title: Blazor Linear Gauge Methods | Syncfusion® +description: Learn how to update the Blazor Linear Gauge dynamically using SetPointerValue, SetAnnotationValue, and RefreshAsync methods at runtime. +platform: Blazor control: Linear Gauge documentation: ug --- -# Methods in Blazor Linear Gauge Component +# Blazor Linear Gauge Methods The following methods are available in the Linear Gauge component. diff --git a/chart-sdk/blazor/linear-gauge/pointers.md b/chart-sdk/blazor/linear-gauge/pointers.md index a2150175b..852fb0a1d 100644 --- a/chart-sdk/blazor/linear-gauge/pointers.md +++ b/chart-sdk/blazor/linear-gauge/pointers.md @@ -1,13 +1,13 @@ --- layout: post -title: Pointers in Blazor Linear Gauge Component | Syncfusion® -description: Checkout and learn here all the features about pointers in Blazor Linear Gauge component and much more. -platform: chart-sdk +title: Blazor Linear Gauge Pointers | Syncfusion® +description: Learn how to add Blazor Linear Gauge Bar and Marker pointers using Circle, Triangle, Diamond, Image, or Text shapes to indicate values. +platform: Blazor control: Linear Gauge documentation: ug --- -# Pointers in Blazor Linear Gauge Component +# Blazor Linear Gauge Pointers Pointers are used to indicate values on an axis. The value of the pointer can be modified using the [PointerValue](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugePointer.html#Syncfusion_Blazor_LinearGauge_LinearGaugePointer_PointerValue) property in [LinearGaugePointer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugePointer.html). diff --git a/chart-sdk/blazor/linear-gauge/print.md b/chart-sdk/blazor/linear-gauge/print.md index aae618e33..f7817bea6 100644 --- a/chart-sdk/blazor/linear-gauge/print.md +++ b/chart-sdk/blazor/linear-gauge/print.md @@ -1,13 +1,13 @@ --- layout: post -title: Print And Export in Blazor Linear Gauge Component | Syncfusion® -description: Checkout and learn here all the features about print And export in Blazor Linear Gauge component and more. -platform: chart-sdk +title: Blazor Linear Gauge Print and Export | Syncfusion® +description: Learn how to print the Blazor Linear Gauge from the browser or export it to JPEG, PNG, SVG, or PDF formats, including as a base64 string. +platform: Blazor control: Linear Gauge documentation: ug --- -# Print And Export in Blazor Linear Gauge Component +# Blazor Linear Gauge Print and Export ## Print diff --git a/chart-sdk/blazor/linear-gauge/ranges.md b/chart-sdk/blazor/linear-gauge/ranges.md index 84f823d59..bee11489a 100644 --- a/chart-sdk/blazor/linear-gauge/ranges.md +++ b/chart-sdk/blazor/linear-gauge/ranges.md @@ -1,13 +1,13 @@ --- layout: post -title: Ranges in Blazor Linear Gauge Component | Syncfusion® -description: Checkout and learn here all the features about ranges in Blazor Linear Gauge component and much more details. -platform: chart-sdk +title: Blazor Linear Gauge Ranges | Syncfusion® +description: Learn how to add ranges to the Blazor Linear Gauge with start, end, color, position, gradient, and multiple-range configurations for thresholds. +platform: Blazor control: Linear Gauge documentation: ug --- -# Ranges in Blazor Linear Gauge Component +# Blazor Linear Gauge Ranges Range is the set of values in the axis. The range can be defined using the [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html#Syncfusion_Blazor_LinearGauge_LinearGaugeRange_Start) and [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html#Syncfusion_Blazor_LinearGauge_LinearGaugeRange_End) properties in the [LinearGaugeRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRange.html). Any number of ranges can be added to the Linear Gauge using the [LinearGaugeRanges](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.LinearGauge.LinearGaugeRanges.html). diff --git a/chart-sdk/blazor/linear-gauge/user-interaction.md b/chart-sdk/blazor/linear-gauge/user-interaction.md index 42b1505a5..1a0c5f802 100644 --- a/chart-sdk/blazor/linear-gauge/user-interaction.md +++ b/chart-sdk/blazor/linear-gauge/user-interaction.md @@ -1,13 +1,13 @@ --- layout: post -title: User Interaction in Blazor Linear Gauge Component | Syncfusion® -description: Checkout and learn here all the features about user interaction in Blazor Linear Gauge component and more. -platform: chart-sdk +title: Blazor Linear Gauge User Interaction | Syncfusion® +description: Learn how to enable Blazor Linear Gauge tooltips with custom formats and templates, and let users drag pointers to update axis values interactively. +platform: Blazor control: Linear Gauge documentation: ug --- -# User Interaction in Blazor Linear Gauge Component +# Blazor Linear Gauge User Interaction ## Tooltip diff --git a/chart-sdk/blazor/maps/accessibility.md b/chart-sdk/blazor/maps/accessibility.md index 5264b37de..696cf59f8 100644 --- a/chart-sdk/blazor/maps/accessibility.md +++ b/chart-sdk/blazor/maps/accessibility.md @@ -1,13 +1,13 @@ --- layout: post -title: Accessibility in Blazor Maps Component | Syncfusion® -description: Check out and learn here all about the accessibility in the Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Accessibility | Syncfusion® +description: Learn how Blazor Maps meet WCAG 2.2, Section 508, WAI-ARIA, and screen reader accessibility standards with keyboard navigation support. +platform: Blazor control: Maps documentation: ug --- -# Accessibility in Blazor Maps Component +# Blazor Maps Accessibility The [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component adheres to widely adopted 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). diff --git a/chart-sdk/blazor/maps/annotations.md b/chart-sdk/blazor/maps/annotations.md index 1c85d243b..10206e9e3 100644 --- a/chart-sdk/blazor/maps/annotations.md +++ b/chart-sdk/blazor/maps/annotations.md @@ -1,13 +1,13 @@ --- layout: post -title: Annotations in Blazor Maps Component | Syncfusion® -description: Check out and learn how to add, configure and personalize annotations in the Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Annotations | Syncfusion® +description: Learn how to mark areas of interest on Blazor Maps with text, shapes, or images using ContentTemplate and MapsAnnotation in any layer. +platform: Blazor control: Maps documentation: ug --- -# Annotations in Blazor Maps component +# Blazor Maps Annotations Annotations mark areas of interest on the map using text, shapes, or images. Any number of annotations can be added to the Maps component. diff --git a/chart-sdk/blazor/maps/bubble.md b/chart-sdk/blazor/maps/bubble.md index fee63e191..2eb12956d 100644 --- a/chart-sdk/blazor/maps/bubble.md +++ b/chart-sdk/blazor/maps/bubble.md @@ -1,13 +1,13 @@ --- layout: post -title: Bubble in Blazor Maps Component | Syncfusion® -description: Check out and learn how to add and customize bubble markers in the Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Bubble Visualization | Syncfusion® +description: Learn how to render data-driven bubbles on Blazor Maps by binding a data source to MapsBubble and configuring ValuePath, color, and shape. +platform: Blazor control: Maps documentation: ug --- -# Bubble in Blazor Maps Component +# Blazor Maps Bubble Visualization Bubbles in the Maps control represent underlying data values. They render over map shapes that have corresponding data in the data source. Enable bubbles by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_Visible) property of [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) to **true**. To add bubbles, bind the data source to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_DataSource) property of [MapsBubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html) and set the numeric field name in the [ValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsBubble-1.html#Syncfusion_Blazor_Maps_MapsBubble_1_ValuePath) property. diff --git a/chart-sdk/blazor/maps/color-mapping.md b/chart-sdk/blazor/maps/color-mapping.md index 4b89d9da9..5c3f2d48a 100644 --- a/chart-sdk/blazor/maps/color-mapping.md +++ b/chart-sdk/blazor/maps/color-mapping.md @@ -1,13 +1,13 @@ --- layout: post -title: Color Mapping in Blazor Maps Component | Syncfusion® -description: Check out and learn here all about color mapping in the Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Color Mapping | Syncfusion® +description: Learn how to apply Range, Equal, or Desaturation color mapping to Blazor Maps shapes by binding a data source to ColorValuePath. +platform: Blazor control: Maps documentation: ug --- -# Color Mapping in Blazor Maps Component +# Blazor Maps Color Mapping Color mapping customizes shape colors based on data values. It supports three types. diff --git a/chart-sdk/blazor/maps/content-security-policy.md b/chart-sdk/blazor/maps/content-security-policy.md index 4901ae70a..f67fe5a89 100644 --- a/chart-sdk/blazor/maps/content-security-policy.md +++ b/chart-sdk/blazor/maps/content-security-policy.md @@ -1,13 +1,13 @@ --- layout: post -title: Maps - Strict CSP Feature Limitations | Syncfusion® -description: Details on features in Blazor Maps Component that require Content Security Policy (CSP) relaxation and much more details. -platform: chart-sdk +title: Blazor Maps Content Security Policy | Syncfusion® +description: Learn how Blazor Maps features interact with strict Content Security Policy and which features require style-src 'unsafe-inline'. +platform: Blazor control: Maps documentation: ug --- -# Maps - Content Security Policy Limitations +# Blazor Maps Content Security Policy ## What's supported under strict CSP ? diff --git a/chart-sdk/blazor/maps/customization.md b/chart-sdk/blazor/maps/customization.md index 3660ceed6..8196e44fe 100644 --- a/chart-sdk/blazor/maps/customization.md +++ b/chart-sdk/blazor/maps/customization.md @@ -1,13 +1,13 @@ --- layout: post -title: Customization in Blazor Maps Component | Syncfusion® -description: Check out and learn here all the features about customization in Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Customization | Syncfusion® +description: Learn how to customize Blazor Maps with Width, Height, title, subtitle, and MapsTitleSettings for a tailored, branded layout. +platform: Blazor control: Maps documentation: ug --- -# Customization in Blazor Maps Component +# Blazor Maps Customization ## Setting the size for Maps diff --git a/chart-sdk/blazor/maps/data-labels.md b/chart-sdk/blazor/maps/data-labels.md index dbc9c2ac4..cdd457d3e 100644 --- a/chart-sdk/blazor/maps/data-labels.md +++ b/chart-sdk/blazor/maps/data-labels.md @@ -1,13 +1,13 @@ --- layout: post -title: Data Labels in Blazor Maps Component | Syncfusion® -description: Check out and learn how to configure and customize data labels in the Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Data Labels | Syncfusion® +description: Learn how to display shape names or data source fields as labels in Blazor Maps by setting LabelPath and Visible in MapsDataLabelSettings. +platform: Blazor control: Maps documentation: ug --- -# Data labels in Blazor Maps Component +# Blazor Maps Data Labels Data labels display text for shapes in the Maps component. Enable them by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html#Syncfusion_Blazor_Maps_MapsDataLabelSettings_Visible) property of [MapsDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsDataLabelSettings.html) to **true**. diff --git a/chart-sdk/blazor/maps/getting-started-webapp.md b/chart-sdk/blazor/maps/getting-started-webapp.md index 836ae1b2f..330185c40 100644 --- a/chart-sdk/blazor/maps/getting-started-webapp.md +++ b/chart-sdk/blazor/maps/getting-started-webapp.md @@ -1,130 +1,123 @@ --- layout: post -title: Getting started with Maps Component in Blazor Web App | Syncfusion® -description: Check out the documentation for getting started with Blazor Maps Component in Blazor Web App and much more details. -platform: chart-sdk +title: Getting Started with Blazor Maps in Blazor Web App | Syncfusion® +description: Learn how to get started with Blazor Maps in a Blazor Web App. Explore setup, features, examples, and customization options. +platform: Blazor component: Maps documentation: ug --- -# Getting started with Blazor Maps Component in Blazor Web App +# Getting Started with Blazor Maps in Web App This section briefly explains how to include [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +## Create a new Blazor Web App + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor Web App in Visual Studio - Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. {% endtabcontent %} {% tabcontent Visual Studio Code %} -## Prerequisites - -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) - -## Create a new Blazor Web App in Visual Studio Code - -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. - -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazor -o BlazorWebApp -int Auto +dotnet new blazor -o BlazorWebApp --interactivity Auto cd BlazorWebApp +cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> If the application is configured with WebAssembly or Auto render modes, you may optionally navigate to the client project directory to manage client-specific dependencies. Once the required changes are completed, ensure that you navigate back to the root project directory. - -``` -cd BlazorWebApp.Client -cd .. -``` +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. {% endtabcontent %} {% tabcontent .NET CLI %} -## Prerequisites - -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet --version +dotnet new blazor -o BlazorWebApp --interactivity Auto +cd BlazorWebApp +cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -## Create a Blazor Web App using .NET CLI +{% endtabcontent %} + +{% endtabcontents %} + +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +## Install the required Blazor package + +Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the `.Client` project. + +{% tabcontents %} + +{% tabcontent Visual Studio %} -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.Maps`) and install it. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +Alternatively, you can install the same package using the Package Manager Console with the following command. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorWebApp -int Auto -cd BlazorWebApp +Install-Package Syncfusion.Blazor.Maps -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> If the application is configured with WebAssembly or Auto render modes, you may optionally navigate to the client project directory to manage client-specific dependencies. Once the required changes are completed, ensure that you navigate back to the root project directory. +{% endtabcontent %} -``` -cd BlazorWebApp.Client -cd .. -``` +{% tabcontent Visual Studio Code %} -{% endtabcontent %} +Open the terminal and run the following command. -{% endtabcontents %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +dotnet add package Syncfusion.Blazor.Maps -v {{ site.releaseversion }} -## Install required Blazor packages +{% endhighlight %} +{% endtabs %} -Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Maps --version {{ site.releaseversion }}), or the .NET CLI. +{% endtabcontent %} -Alternatively, run the following command in the Package Manager Console to achieve the same. +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.Maps -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Maps -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. +{% endtabcontent %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces. - -N> -- The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder. -- If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, add these namespaces in both the server and client project **~/_Imports.razor** files. +After the packages are installed, open the **~/_Imports.razor** file in the `.Client` project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Maps @@ -132,61 +125,50 @@ N> {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor Web App. This step enables the Syncfusion components to work in your application. +Open the **Program.cs** file in Blazor Web App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Program.cs" %} +{% highlight C# tabtitle="Program.cs" %} -.... -using Syncfusion.Blazor; -.... builder.Services.AddSyncfusionBlazor(); -.... {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. +## Add script resource -## Add script resources +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **App.razor** file to enable Maps functionality. -The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/Components/App.razor** file (this is the root layout file of your application). - -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} -``` - -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor Maps component with GeoJSON data -Add the Blazor Maps component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component inside the `.Client` project razor file. -N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. - -{% tabs %} -{% highlight razor %} - -@* desired render mode defined here *@ -@rendermode InteractiveAuto - -{% endhighlight %} -{% endtabs %} +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component. {% tabs %} {% highlight razor tabtitle="Home.razor" %} - +@rendermode InteractiveAuto + +@using Syncfusion.Blazor.Maps + +@* SfMaps is the root container component for the maps *@ - + @* MapsLayers contains one or more map layers to display on the map *@ - + @* MapsLayer defines a map layer with shape data and configuration *@ @@ -195,9 +177,51 @@ Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vec {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Maps component in the default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVRNhjJJCBhIpFe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with GeoJSON Layer](./images/blazor-map.webp)" %} +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrnjGtlpnNPvMcT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Maps with GeoJSON Layer](./images/blazor-map.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Maps). @@ -205,11 +229,13 @@ N> The "world-map.json" file contains the World map GeoJSON data. ## Bind data source -The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). +The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. You can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the list named **SecurityCouncilDetails** below to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Maps + @code { public List SecurityCouncilDetails = new List{ new UNCouncilCountry { Name= "China", Membership= "Permanent" }, @@ -248,9 +274,10 @@ The following complete example shows a Maps component with the GeoJSON layer and {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@using Syncfusion.Blazor.Maps @rendermode InteractiveAuto +@using Syncfusion.Blazor.Maps + [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +1. [Getting Started with Blazor Web Assembly App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +2. [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/chart-sdk/blazor/maps/getting-started-with-maui-app.md b/chart-sdk/blazor/maps/getting-started-with-maui-app.md index aa2d921c6..eb100ee5d 100644 --- a/chart-sdk/blazor/maps/getting-started-with-maui-app.md +++ b/chart-sdk/blazor/maps/getting-started-with-maui-app.md @@ -1,44 +1,47 @@ --- layout: post -title: Getting Started with Maps in Blazor MAUI App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor Maps Component in Blazor MAUI App. -platform: chart-sdk +title: Getting Started with Blazor Maps in Blazor MAUI App | Syncfusion® +description: Learn how to get started with Blazor Maps in a Blazor MAUI hybrid app. Explore setup, features, examples, and customization options. +platform: Blazor component: Maps documentation: ug --- -# Getting Started with Blazor Maps component in Blazor MAUI App +# Getting Started with Blazor Maps in MAUI App -This section explains the step-by-step process of integrating the [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component into your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This section explains the step-by-step process of integrating the [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component into your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/download) and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new MAUI Blazor Hybrid App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites - -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). - -## Create a new Blazor MAUI App in Visual Studio - -Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-10.0). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. {% endtabcontent %} {% tabcontent Visual Studio Code %} -## Prerequisites +Run the following command to create a new MAUI Blazor Hybrid App. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +dotnet new maui-blazor -o MauiBlazorApp +cd MauiBlazorApp + +{% endhighlight %} +{% endtabs %} -## Create a new Blazor MAUI App in Visual Studio Code +{% endtabcontent %} -Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a MAUI application using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new MAUI Blazor Hybrid App. {% tabs %} -{% highlight c# tabtitle="Blazor MAUI App" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet new maui-blazor -o MauiBlazorApp cd MauiBlazorApp @@ -52,25 +55,60 @@ cd MauiBlazorApp ## Install required Blazor packages -Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Maps --version {{ site.releaseversion }}). +Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.Maps`) and install it. -Alternatively, run the following command in the Package Manager Console to achieve the same. +Alternatively, you can install the same package using the Package Manager Console with the following command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Syncfusion.Blazor.Maps -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontent %} -## Add import namespaces +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Syncfusion.Blazor.Maps -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Syncfusion.Blazor.Maps -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} -After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces. +## Add import namespaces -N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder. +After the package is installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -81,16 +119,15 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **~/MauiProgram.cs** file. This step enables the Syncfusion components to work in your application. +Open the **MauiProgram.cs** file in Blazor MAUI App and register the Blazor service. {% tabs %} -{% highlight c# tabtitle="~/MauiProgram.cs" %} +{% highlight c# tabtitle="MauiProgram.cs" %} .... using Syncfusion.Blazor; - .... public static class MauiProgram @@ -106,32 +143,32 @@ public static class MauiProgram {% endhighlight %} {% endtabs %} -## Add script resources +## Add script resource -The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/index.html** file (this is the root HTML file of your application). - -```html +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~wwwroot/index.html** file. +{% tabs %} +{% highlight html tabtitle="index.html" %} + - -``` - -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. + +{% endhighlight %} +{% endtabs %} ## Add Blazor Maps component with GeoJSON data -Add the Blazor Maps component in the **~/Pages/Home.razor** file. Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component. +Open a Razor file located in the **~/Components/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component inside the razor file. Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Maps - +@* SfMaps is the root container component for the maps *@ - + @* MapsLayers contains one or more map layers to display on the map *@ - + @* MapsLayer defines a map layer with shape data and configuration *@ @@ -142,25 +179,61 @@ Add the Blazor Maps component in the **~/Pages/Home.razor** file. Bind GeoJSON d N> The "world-map.json" file contains the World map GeoJSON data. -### How to run the sample on Windows +## Run the application on Windows + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Maps component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} -Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. +{% endtabcontent %} + +{% endtabcontents %} ![Blazor Maps with GeoJSON Layer](./images/blazor-maps-maui-app.webp) -### How to run the sample on Android +## Run the application on Android To run the Blazor Maps in a Blazor Android MAUI application using the Android emulator, follow these steps: Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator. -N> If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). +N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). ![Blazor Maps with GeoJSON Layer](./images/blazor-map.webp) ## Bind data source -The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). +The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. You can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -256,8 +329,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Blazor for WebAssembly application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) - -* [Getting Started with Blazor for server-side application in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) - -* [Getting Started with Blazor for server-side application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +1. [Getting Started with Blazor Web Assembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +3. [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) diff --git a/chart-sdk/blazor/maps/getting-started-with-server-app.md b/chart-sdk/blazor/maps/getting-started-with-server-app.md index 593e896fe..d24f6d41f 100644 --- a/chart-sdk/blazor/maps/getting-started-with-server-app.md +++ b/chart-sdk/blazor/maps/getting-started-with-server-app.md @@ -1,112 +1,121 @@ --- layout: post -title: Getting Started with Maps in Blazor Server App | Syncfusion® -description: Checkout and learn about getting started with the Blazor Maps component in Blazor Server Application. -platform: chart-sdk +title: Getting Started with Blazor Maps in Blazor Server App | Syncfusion® +description: Learn how to get started with Blazor Maps in a Blazor Server app. Explore setup, features, examples, and customization options. +platform: Blazor component: Maps documentation: ug --- -# Getting Started with Blazor Maps Component in Blazor Server App +# Getting Started with Blazor Maps in Server App -This section briefly explains how to include [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in your Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/download), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor Server App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Run the following command to create a new Blazor Server App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorApp --interactivity Server +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor Server App. {% tabs %} +{% highlight razor tabtitle="Command Prompt" %} -{% highlight c# tabtitle="Blazor Server App" %} - -dotnet new blazor -o BlazorApp -int Server +dotnet new blazor -o BlazorApp --interactivity Server cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} -## Prerequisites +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +## Install the required Blazor package -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps/) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -dotnet --version +{% tabcontents %} -{% endhighlight %} -{% endtabs %} +{% tabcontent Visual Studio %} -## Create a Blazor Server App using .NET CLI +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.Maps`) and install it. -Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation. +Alternatively, you can install the same package using the Package Manager Console with the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorApp -int Server -cd BlazorApp +Install-Package Syncfusion.Blazor.Maps -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} +{% tabcontent Visual Studio Code %} -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Syncfusion.Blazor.Maps -v {{ site.releaseversion }} -## Install required Blazor packages +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} -Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Maps --version {{ site.releaseversion }}), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following command in the Package Manager Console to achieve the same. +Open the command prompt and run the following command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.Maps -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Maps -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontent %} -## Add import namespaces +{% endtabcontents %} -After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces. +## Add import namespaces -N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder. +After the packages are installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Maps @@ -114,59 +123,50 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor Server App. This step enables the Syncfusion components to work in your application. +Open the **Program.cs** file in Blazor Server App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. {% tabs %} {% highlight C# tabtitle="Program.cs" %} -.... -using Syncfusion.Blazor; -.... builder.Services.AddSyncfusionBlazor(); -.... {% endhighlight %} {% endtabs %} -## Add script resources +## Add script resource -The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/Components/App.razor** file (this is the root layout file of your application). +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **App.razor** file to enable Maps functionality. -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} -``` - -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor Maps component with GeoJSON data -Add the Blazor Maps component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. - -N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. - -{% tabs %} -{% highlight razor %} - -@* desired render mode defined here *@ -@rendermode InteractiveServer +Open a Razor file located in the **~/Components/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component inside the razor file. -{% endhighlight %} -{% endtabs %} +N> If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component. {% tabs %} {% highlight razor tabtitle="Home.razor" %} - +@rendermode InteractiveServer + +@using Syncfusion.Blazor.Maps + +@* SfMaps is the root container component for the maps *@ - + @* MapsLayers contains one or more map layers to display on the map *@ - + @* MapsLayer defines a map layer with shape data and configuration *@ @@ -177,17 +177,57 @@ Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vec N> The "world-map.json" file contains the World map GeoJSON data. -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Maps component in the default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBzNsUjWcevzcvR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with GeoJSON Layer](./images/blazor-map.webp)" %} +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrnDcNFJxBpejiI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Maps with GeoJSON Layer](./images/blazor-map.webp)" %} ## Bind data source -The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). +The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. You can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the list named **SecurityCouncilDetails** below to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Maps + @code { public List SecurityCouncilDetails = new List{ new UNCouncilCountry { Name= "China", Membership= "Permanent" }, @@ -226,9 +266,10 @@ The following complete example shows a Maps component with the GeoJSON layer and {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@using Syncfusion.Blazor.Maps @rendermode InteractiveServer +@using Syncfusion.Blazor.Maps + [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Blazor for WebAssembly application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) - -* [Getting Started with Blazor for server-side application in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) - -* [Getting Started with Blazor for server-side application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +1. [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) diff --git a/chart-sdk/blazor/maps/getting-started.md b/chart-sdk/blazor/maps/getting-started.md index afabf4f64..faf4020b6 100644 --- a/chart-sdk/blazor/maps/getting-started.md +++ b/chart-sdk/blazor/maps/getting-started.md @@ -1,110 +1,119 @@ --- layout: post -title: Getting Started with Blazor Maps Component | Syncfusion® -description: Checkout and learn about getting started with Blazor Maps component in Blazor WebAssembly Application and much more details. -platform: chart-sdk +title: Getting Started with Blazor Maps in Blazor WASM App | Syncfusion® +description: Learn how to get started with Blazor Maps in a Blazor WebAssembly app. Explore setup, features, examples, and customization options. +platform: Blazor component: Maps documentation: ug --- -# Getting Started with Blazor Maps Component +# Blazor Maps Getting Started in WASM App This section briefly explains how to include [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +## Create a new Blazor WebAssembly App + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WebAssembly App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Run the following command to create a new Blazor WebAssembly App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazorwasm -o BlazorApp +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor WebAssembly App. {% tabs %} - -{% highlight c# tabtitle="Blazor WASM App" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet new blazorwasm -o BlazorApp cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} -## Prerequisites +## Install the required Blazor package + +Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps/) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. + +{% tabcontents %} + +{% tabcontent Visual Studio %} -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.Maps`) and install it. + +Alternatively, you can install the same package using the Package Manager Console with the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.Maps -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} -Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. +Open the terminal and run the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +dotnet add package Syncfusion.Blazor.Maps -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install required Blazor package - -Install the [Syncfusion.Blazor.Maps](https://www.nuget.org/packages/Syncfusion.Blazor.Maps/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.Maps --version {{ site.releaseversion }}), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following command in the Package Manager Console to achieve the same. +Open the command prompt and run the following command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.Maps -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Maps -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Maps` namespaces. -N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder. - {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Maps @@ -112,46 +121,44 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. This step enables the Syncfusion components to work in your application. +Open the **Program.cs** file in Blazor WebAssembly App and register the Blazor service and include the required namespace reference `using Syncfusion.Blazor;` at the top. {% tabs %} {% highlight C# tabtitle="Program.cs" %} -.... -using Syncfusion.Blazor; -.... builder.Services.AddSyncfusionBlazor(); -.... {% endhighlight %} {% endtabs %} ## Add script resources -The Syncfusion JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/index.html** file (this is the main HTML entry point of your WebAssembly application). +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **~wwwroot/index.html** file to enable Maps functionality. -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} -``` - -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor Maps component with GeoJSON data -Add the Blazor Maps component in the **~/Pages/Home.razor** file. Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component inside the razor file. Bind GeoJSON data to the Maps to render any geometric shape in SVG (Scalable Vector Graphics) for powerful data visualization of shapes. You can use the [ShapeData](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_ShapeData) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html) to load the GeoJSON shape data into the Maps component. {% tabs %} {% highlight razor tabtitle="Home.razor" %} - +@using Syncfusion.Blazor.Maps + +@* SfMaps is the root container component for the maps *@ - + @* MapsLayers contains one or more map layers to display on the map *@ - + @* MapsLayer defines a map layer with shape data and configuration *@ @@ -160,17 +167,59 @@ Add the Blazor Maps component in the **~/Pages/Home.razor** file. Bind GeoJSON d {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBzNsUjWcevzcvR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Maps with GeoJSON Layer](./images/blazor-map.webp)" %} +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Maps](https://www.syncfusion.com/blazor-components/blazor-map) component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrnDcNFJxBpejiI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Maps with GeoJSON Layer](./images/blazor-map.webp)" %} N> The "world-map.json" file contains the World map GeoJSON data. ## Bind data source -The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. We can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the below list **SecurityCouncilDetails** to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). +The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property is used to represent statistical data in the Maps component. You can define a list of objects as a data source to the Maps component. This data source will be further used to color the map, display data labels, display tooltips, and more. Assign the list named **SecurityCouncilDetails** below to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_DataSource) property in [MapsLayer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Maps + @code { public List SecurityCouncilDetails = new List{ new UNCouncilCountry { Name= "China", Membership= "Permanent" }, @@ -209,6 +258,8 @@ N> Please [refer to the section](populate-data#data-binding) for more informatio {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Maps + @*To map shape data name field and data source field*@ @@ -283,8 +334,6 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- ## See also -* [Getting Started with Blazor for WebAssembly application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) - -* [Getting Started with Blazor for server-side application in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) - -* [Getting Started with Blazor for server-side application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Blazor for WebAssembly application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor for server-side application in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +3. [Getting Started with Blazor for server-side application in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/chart-sdk/blazor/maps/how-to/add-different-types-of-markers.md b/chart-sdk/blazor/maps/how-to/add-different-types-of-markers.md index fe0e62bc8..e0fec15b3 100644 --- a/chart-sdk/blazor/maps/how-to/add-different-types-of-markers.md +++ b/chart-sdk/blazor/maps/how-to/add-different-types-of-markers.md @@ -1,13 +1,13 @@ --- layout: post -title: Add different types of markers in Blazor Maps Component | Syncfusion® -description: Check out and learn how to add and customize different marker types in the Blazor Maps component and much more details. -platform: chart-sdk +title: How to Add Different Types of Markers in Blazor Maps | Syncfusion® +description: Learn how to add and customize different marker shapes in Blazor Maps using MapsMarkerSettings, DataSource, Shape, and MapsMarkerBorder. +platform: Blazor control: Maps documentation: ug --- -# Add different types of markers in Blazor Maps Component +# How to Add Different Types of Markers in Blazor Maps Markers can be added in the Maps component using the [MapsMarkerSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarkerSettings.html). The following steps describe how to add different types of markers. diff --git a/chart-sdk/blazor/maps/how-to/change-center-position-on-zooming.md b/chart-sdk/blazor/maps/how-to/change-center-position-on-zooming.md index e59083407..3786010f8 100644 --- a/chart-sdk/blazor/maps/how-to/change-center-position-on-zooming.md +++ b/chart-sdk/blazor/maps/how-to/change-center-position-on-zooming.md @@ -1,13 +1,13 @@ --- layout: post -title: Change center position on zooming in Blazor Maps | Syncfusion® -description: Check out and Learn how to change the map center during zooming in the Blazor Maps component and much more details. -platform: chart-sdk +title: How to Change Center Position on Zooming in Blazor Maps | Syncfusion® +description: Learn how to change the Blazor Maps center on zoom by setting MapsCenterPosition coordinates and the ZoomFactor in MapsZoomSettings. +platform: Blazor control: Maps documentation: ug --- -# Change center position on zooming in Blazor Maps Component +# How to Change Center Position on Zooming in Blazor Maps The Blazor Maps component supports changing the map's center position by specifying coordinates in the [MapsCenterPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsCenterPosition.html). The [ZoomFactor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html#Syncfusion_Blazor_Maps_MapsZoomSettings_ZoomFactor) property in the [MapsZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsZoomSettings.html) focuses on the specified center position. diff --git a/chart-sdk/blazor/maps/how-to/creating-routes-between-the-markers.md b/chart-sdk/blazor/maps/how-to/creating-routes-between-the-markers.md index ce883afbc..6248ae49b 100644 --- a/chart-sdk/blazor/maps/how-to/creating-routes-between-the-markers.md +++ b/chart-sdk/blazor/maps/how-to/creating-routes-between-the-markers.md @@ -1,13 +1,13 @@ --- layout: post -title: How to create routes between markers in Maps Component | Syncfusion® -description: Learn how to create routes between markers in the Blazor Maps component using API and navigation lines. -platform: chart-sdk +title: How to Create Routes Between Markers in Blazor Maps | Syncfusion® +description: Learn how to plot routes between source and destination markers in Blazor Maps using the Google Directions API and MapsNavigationLine. +platform: Blazor control: Maps documentation: ug --- -# Creating Routes Between Markers in the Blazor Maps component +# How to Create Routes Between Markers in Blazor Maps The Maps component supports plotting routes between two locations (source and destination) using the navigation line feature. Markers can be placed at these locations to indicate the source and destination, providing a clear view of the path on the map. @@ -90,7 +90,7 @@ public async Task AddRoutes() ### Customize the travel mode in the Google Map Directions API -Coordinates can be retrieved based on different travel modes, such as DRIVING, WALKING, BICYCLING, or TRANSIT, using the Google Maps Directions API. DRIVING is the default travel mode for these services. For additional information on available travel modes, refer to this [link](https://developers.google.com/maps/documentation/javascript/directions#TravelModes). +Coordinates can be retrieved based on different travel modes, such as DRIVING, WALKING, BICYCLING, or TRANSIT, using the Google Maps Directions API. DRIVING is the default travel mode for these services. For additional information on available travel modes, refer to this [link](https://developers.google.com/maps/documentation/javascript/legacy/directions#TravelModes). ## Plot markers on the Map diff --git a/chart-sdk/blazor/maps/how-to/place-map-inside-other-components.md b/chart-sdk/blazor/maps/how-to/place-map-inside-other-components.md index 282cca37f..37d645e7b 100644 --- a/chart-sdk/blazor/maps/how-to/place-map-inside-other-components.md +++ b/chart-sdk/blazor/maps/how-to/place-map-inside-other-components.md @@ -1,13 +1,13 @@ --- layout: post -title: How to place Maps component inside other components | Syncfusion® -description: Learn how to render the Maps component inside other components, including Dashboard Layout, Tab, Dialog and Accordion. -platform: chart-sdk +title: How to Place Maps Inside Other Components in Blazor Maps | Syncfusion® +description: Learn how to render Blazor Maps inside Dashboard Layout, Tab, Dialog, or Accordion with a boolean flag and Refresh on resize. +platform: Blazor control: Maps documentation: ug --- -# Render Maps component inside other components +# How to Place Maps Inside Other Components in Blazor Maps The Maps component can be rendered within other components such as Dashboard Layout, Tab, Dialog, and Accordion. Because Maps often initializes before its container finishes rendering, use a boolean flag to control when the Maps component starts rendering. diff --git a/chart-sdk/blazor/maps/images/blazor-map.webp b/chart-sdk/blazor/maps/images/blazor-map.webp index 2b644705b..1b57cdfb6 100644 Binary files a/chart-sdk/blazor/maps/images/blazor-map.webp and b/chart-sdk/blazor/maps/images/blazor-map.webp differ diff --git a/chart-sdk/blazor/maps/internationalization.md b/chart-sdk/blazor/maps/internationalization.md index 43110872c..a37ac52c1 100644 --- a/chart-sdk/blazor/maps/internationalization.md +++ b/chart-sdk/blazor/maps/internationalization.md @@ -1,13 +1,13 @@ --- layout: post -title: Globalization in Blazor Maps Component | Syncfusion® -description: Check out and learn how to configure and apply globalization feature in the Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Internationalization | Syncfusion® +description: Learn how to globalize data labels, tooltips, and number formats in Blazor Maps for Blazor Server and WebAssembly apps using Format. +platform: Blazor control: Maps documentation: ug --- -# Globalization in Blazor Maps Component +# Blazor Maps Internationalization Maps support internationalization for the following elements: diff --git a/chart-sdk/blazor/maps/layers.md b/chart-sdk/blazor/maps/layers.md index 7d9961a58..10b313507 100644 --- a/chart-sdk/blazor/maps/layers.md +++ b/chart-sdk/blazor/maps/layers.md @@ -1,13 +1,13 @@ --- layout: post -title: Layers in Blazor Maps Component | Syncfusion® -description: Check out and learn the features and how to configure layers in the Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Layers Support | Syncfusion® +description: Learn how to stack multiple shape files and tile providers in Blazor Maps using main layers, sublayers, and BaseLayerIndex. +platform: Blazor control: Maps documentation: ug --- -# Layers in Blazor Maps Component +# Blazor Maps Layers Support The Maps component is rendered through [MapsLayers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayers.html), and any number of layers can be added to Maps. @@ -77,7 +77,7 @@ Custom shapes (also known as custom maps) can be rendered in Maps to represent b Refer to the sample GeoJSON file for bus seat selection: [Seat selection GeoJSON](https://cdn.syncfusion.com/maps/map-data/seat.json). -For a live demonstration, see [Bus seat selection demo](https://blazor.syncfusion.com/demos/maps/bus-seat-selection?theme=bootstrap5). +For a live demonstration, see [Bus seat selection demo](https://blazor.syncfusion.com/demos/maps/bus-seat-selection?theme=fluent2). ## See also diff --git a/chart-sdk/blazor/maps/legend.md b/chart-sdk/blazor/maps/legend.md index cfad28911..0a330b5e4 100644 --- a/chart-sdk/blazor/maps/legend.md +++ b/chart-sdk/blazor/maps/legend.md @@ -1,13 +1,13 @@ --- layout: post -title: Legend in Blazor Maps Component | Syncfusion® -description: Check out and learn how to configure and customize legends in the Blazor Maps component for effective data visualization. -platform: chart-sdk +title: Blazor Maps Legend Support | Syncfusion® +description: Learn how to add Default or Interactive legends to Blazor Maps to identify shape, bubble, or marker colors and surface exact range values on hover. +platform: Blazor control: Maps documentation: ug --- -# Legend in Blazor Maps Component +# Blazor Maps Legend Support A legend visually explains the symbols used on Maps. It uses colors, shapes, or other identifiers based on the data and helps interpret what the Maps display. Enable legends by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html#Syncfusion_Blazor_Maps_MapsLegendSettings_Visible) property of [MapsLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLegendSettings.html) to **true**. @@ -304,7 +304,7 @@ In the following example, color mapping is defined for ranges from **0** to **20 ### Hiding desired legend items -Use the [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_ShowLegend) property in [MapsShapeColorMapping](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) to show or hide legend items. If [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_ShowLegend) is set to **false**, the legend item is hidden. Otherwise, it is visible. +Use the [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_ShowLegend) property in [MapsShapeColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsShapeColorMapping.html) to show or hide legend items. If [ShowLegend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsColorMapping.html#Syncfusion_Blazor_Maps_MapsColorMapping_ShowLegend) is set to **false**, the legend item is hidden. Otherwise, it is visible. ```cshtml diff --git a/chart-sdk/blazor/maps/localization.md b/chart-sdk/blazor/maps/localization.md index 6edf35531..f58155945 100644 --- a/chart-sdk/blazor/maps/localization.md +++ b/chart-sdk/blazor/maps/localization.md @@ -1,13 +1,13 @@ --- layout: post -title: Localization in Blazor Maps Component | Syncfusion® -description: Check out and learn here all the features about Localization in the Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Localization | Syncfusion® +description: Learn how to localize Blazor Maps UI text such as zoom tooltips and image-not-found messages using .resx files for any culture. +platform: Blazor control: Maps documentation: ug --- -# Localization in Blazor Maps Component +# Blazor Maps Localization The Blazor Maps component supports localization to display content in any language by integrating localized text resources. Static text elements, such as zoom toolbar tooltips and placeholder text for tile images that fail to load, can be translated into various languages (for example, Arabic, German, and French) by defining the appropriate locale value. To manage language-specific content efficiently, the localization process can use **.resx** files, enabling consistent maintenance of translations. This feature enhances accessibility by allowing interaction with the Maps component in the preferred language and supports integration in globally targeted applications. diff --git a/chart-sdk/blazor/maps/maps-event.md b/chart-sdk/blazor/maps/maps-event.md index ec4c8ad3a..80b59657e 100644 --- a/chart-sdk/blazor/maps/maps-event.md +++ b/chart-sdk/blazor/maps/maps-event.md @@ -1,13 +1,13 @@ --- layout: post -title: Events in Blazor Maps Component | Syncfusion® -description: Check out and learn about all available events and event handling in the Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Events Support | Syncfusion® +description: Learn how to handle Blazor Maps events such as AnimationCompleted, AnnotationRendering, and shape selection for user interactions. +platform: Blazor control: Maps documentation: ug --- -# Events in Blazor Maps Component +# Blazor Maps Events Support This section explains the list of events that will be triggered for appropriate actions in Maps. The events are configured using the [MapsEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsEvents.html). diff --git a/chart-sdk/blazor/maps/maps-method.md b/chart-sdk/blazor/maps/maps-method.md index cacbf42e3..fbde2734b 100644 --- a/chart-sdk/blazor/maps/maps-method.md +++ b/chart-sdk/blazor/maps/maps-method.md @@ -1,13 +1,13 @@ --- layout: post -title: Methods in Blazor Maps Component | Syncfusion® -description: Check out and learn about all the available methods and how to utilize those methods in the Blazor Maps component. -platform: chart-sdk +title: Blazor Maps Methods Support | Syncfusion® +description: Learn how to use Blazor Maps methods like ShapeSelectionAsync, PrintAsync, ExportAsync, and Refresh to control the map programmatically. +platform: Blazor control: Maps documentation: ug --- -# Methods in Blazor Maps Component +# Blazor Maps Methods Support This section describes the available methods in the Blazor Maps component. diff --git a/chart-sdk/blazor/maps/markers.md b/chart-sdk/blazor/maps/markers.md index 95fd2725f..f21e58e85 100644 --- a/chart-sdk/blazor/maps/markers.md +++ b/chart-sdk/blazor/maps/markers.md @@ -1,13 +1,13 @@ --- layout: post -title: Markers in Blazor Maps Component | Syncfusion® -description: Check out and learn how to configure and customize markers in the Blazor Maps component for effective data visualization. -platform: chart-sdk +title: Blazor Maps Markers Support | Syncfusion® +description: Learn how to add and customize data-driven markers in Blazor Maps by binding latitude and longitude values to MapsMarker. +platform: Blazor control: Maps documentation: ug --- -# Markers in Blazor Maps Component +# Blazor Maps Markers Support Markers annotate locations on Maps with symbols. Enable markers by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html#Syncfusion_Blazor_Maps_MapsMarker_1_Visible) property of [MapsMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsMarker-1.html) to **true**. diff --git a/chart-sdk/blazor/maps/navigation-line.md b/chart-sdk/blazor/maps/navigation-line.md index b7d7343e1..60bed1613 100644 --- a/chart-sdk/blazor/maps/navigation-line.md +++ b/chart-sdk/blazor/maps/navigation-line.md @@ -1,13 +1,13 @@ --- layout: post -title: Navigation Lines in Blazor Maps Component | Syncfusion® -description: Check out and learn how to configure and customize navigation lines in the Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Navigation Lines | Syncfusion® +description: Learn how to draw flight or sea routes in Blazor Maps with MapsNavigationLine using start and end latitude and longitude coordinates. +platform: Blazor control: Maps documentation: ug --- -# Navigation Lines in Blazor Maps Component +# Blazor Maps Navigation Lines Navigation lines denote the path between two locations and can represent flight or sea routes. Enable navigation lines by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html#Syncfusion_Blazor_Maps_MapsNavigationLine_Visible) property of [MapsNavigationLine](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsNavigationLine.html) to **true**. diff --git a/chart-sdk/blazor/maps/polygon.md b/chart-sdk/blazor/maps/polygon.md index 6906b26b0..ec32810ec 100644 --- a/chart-sdk/blazor/maps/polygon.md +++ b/chart-sdk/blazor/maps/polygon.md @@ -1,13 +1,13 @@ --- layout: post -title: Polygon shape in Blazor Maps Component | Syncfusion® -description: Check out and learn how to add, configure and customize polygon shape in the Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Polygon Support | Syncfusion® +description: Learn how to render polygon shapes over geometry or online maps in Blazor Maps using MapsPolygon points, fill, border, and opacity. +platform: Blazor control: Maps documentation: ug --- -# Polygon shape in Blazor Maps Component +# Blazor Maps Polygon Support The Maps component supports adding polygon shapes to a geometry map or an online map using the properties of the [MapsPolygon](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsPolygon.html) tag. This section explains how to add polygon shapes to the map and customize them. diff --git a/chart-sdk/blazor/maps/populate-data.md b/chart-sdk/blazor/maps/populate-data.md index 25d059931..0777a4d4e 100644 --- a/chart-sdk/blazor/maps/populate-data.md +++ b/chart-sdk/blazor/maps/populate-data.md @@ -1,13 +1,13 @@ --- layout: post -title: Populate Data in Blazor Maps Component | Syncfusion® -description: Learn how to provide shape data, bind statistical data and fetch JSON data to populate the Blazor Maps component, with examples. -platform: chart-sdk +title: Blazor Maps Populate Data | Syncfusion® +description: Learn how to provide GeoJSON shape data and statistical data sources to Blazor Maps using ShapeData, DataSource, and ShapeDataPath. +platform: Blazor control: Maps documentation: ug --- -# Populate Data in Blazor Maps Component +# Blazor Maps Populate Data This section describes how to provide data inputs and pass them to the Maps component. diff --git a/chart-sdk/blazor/maps/print-and-export.md b/chart-sdk/blazor/maps/print-and-export.md index d7496b258..3f4940458 100644 --- a/chart-sdk/blazor/maps/print-and-export.md +++ b/chart-sdk/blazor/maps/print-and-export.md @@ -1,13 +1,13 @@ --- layout: post -title: Print and export in Blazor Maps Component | Syncfusion® -description: Check out and learn how to configure print and export feature in the Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Print and Export | Syncfusion® +description: Learn how to print Blazor Maps or export as JPEG, PNG, or SVG using PrintAsync and ExportAsync with AllowPrint and AllowImageExport. +platform: Blazor control: Maps documentation: ug --- -# Print and export in Blazor Maps Component +# Blazor Maps Print and Export ## Print diff --git a/chart-sdk/blazor/maps/providers/azure-maps.md b/chart-sdk/blazor/maps/providers/azure-maps.md index d6f775515..06c6c1898 100644 --- a/chart-sdk/blazor/maps/providers/azure-maps.md +++ b/chart-sdk/blazor/maps/providers/azure-maps.md @@ -1,19 +1,19 @@ --- layout: post -title: Azure Maps in Blazor Maps Component | Syncfusion® -description: Check out and learn the features and how to use Azure Maps in the Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Azure Maps Provider | Syncfusion® +description: Learn how to render Microsoft Azure Maps tiles in Blazor Maps by setting UrlTemplate with a subscription key for satellite imagery. +platform: Blazor control: Maps documentation: ug --- -# Azure Maps in Blazor Maps Component +# Blazor Maps Azure Maps Provider Azure Maps is an online map tile provider from Microsoft. Similar to OSM and Bing Maps, it serves map tile images on request and composites them to display the map area. ## Adding Azure Maps -Azure Maps can be rendered by setting the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property with the tile server URL provided by the online map provider. A subscription key is required for Azure Maps. Follow the steps in this [link](https://docs.microsoft.com/en-us/azure/search/search-security-api-keys) to generate an API key, and then add the key to the URL. +Azure Maps can be rendered by setting the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property with the tile server URL provided by the online map provider. A subscription key is required for Azure Maps. Follow the steps in this [link](https://learn.microsoft.com/en-us/azure/search/search-security-api-keys?tabs=portal-find%2Cportal-use%2Cportal-query) to generate an API key, and then add the key to the URL. N>Refer to [Azure Maps Licensing](https://azure.microsoft.com/en-in/support/legal/). diff --git a/chart-sdk/blazor/maps/providers/bing-maps.md b/chart-sdk/blazor/maps/providers/bing-maps.md index 38f554b9c..baeeb65b5 100644 --- a/chart-sdk/blazor/maps/providers/bing-maps.md +++ b/chart-sdk/blazor/maps/providers/bing-maps.md @@ -1,13 +1,13 @@ --- layout: post -title: Bing Maps in Blazor Maps Component | Syncfusion® -description: Checkout and learn here all the features about Bing Maps in Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Bing Maps Provider | Syncfusion® +description: Learn how to render Bing Maps tiles in Blazor Maps via GetBingUrlTemplate and UrlTemplate for satellite, aerial, and street maps. +platform: Blazor control: Maps documentation: ug --- -# Bing Maps in Blazor Maps Component +# Blazor Maps Bing Maps Provider Bing Maps is an online map provider from Microsoft that offers external geospatial imagery services for deep-zoom satellite views supported by the Blazor Maps component. It enables visualization of satellite, aerial, and street maps without external shapefiles. Similar to OSM, it supplies map tile images based on requests and combines them to display the required map area. diff --git a/chart-sdk/blazor/maps/providers/google-maps.md b/chart-sdk/blazor/maps/providers/google-maps.md index 8f810f27e..81a6b4fe8 100644 --- a/chart-sdk/blazor/maps/providers/google-maps.md +++ b/chart-sdk/blazor/maps/providers/google-maps.md @@ -1,13 +1,13 @@ --- layout: post -title: Google Maps in Blazor Maps Component | Syncfusion® -description: Check out and learn how to display Google Maps tiles in the Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Google Maps Provider | Syncfusion® +description: Learn how to display Google Maps tiles in Blazor Maps by setting UrlTemplate with an API key and session token from Google Tile API. +platform: Blazor control: Maps documentation: ug --- -# Google Maps in Blazor Maps component +# Blazor Maps Google Maps Provider Google Maps is an online map provider owned by Google. It provides map tile images based on requests. The Blazor Maps component composes these tiles into a single view to render the map. Google Maps tiles can be displayed by specifying the tile service URL in the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property. diff --git a/chart-sdk/blazor/maps/providers/openstreetmap.md b/chart-sdk/blazor/maps/providers/openstreetmap.md index 48426ac08..2efdac86f 100644 --- a/chart-sdk/blazor/maps/providers/openstreetmap.md +++ b/chart-sdk/blazor/maps/providers/openstreetmap.md @@ -1,13 +1,13 @@ --- layout: post -title: OpenStreetMap in Blazor Maps Component | Syncfusion® -description: Check out and learn here all the features about OpenStreetMap in Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps OpenStreetMap Provider | Syncfusion® +description: Learn how to render free OpenStreetMap tiles in Blazor Maps by setting UrlTemplate to the OSM tile server URL with markers and lines. +platform: Blazor control: Maps documentation: ug --- -# OpenStreetMap in Blazor Maps Component +# Blazor Maps OpenStreetMap Provider OpenStreetMap (OSM) is a collaborative map provider that offers free, openly licensed map tiles. It serves small tile images based on requests and combines them to render the visible map area in the Maps component. diff --git a/chart-sdk/blazor/maps/providers/other-maps.md b/chart-sdk/blazor/maps/providers/other-maps.md index e03c5ee4d..d9fd73337 100644 --- a/chart-sdk/blazor/maps/providers/other-maps.md +++ b/chart-sdk/blazor/maps/providers/other-maps.md @@ -1,13 +1,13 @@ --- layout: post -title: Other Maps in Blazor Maps Component | Syncfusion® -description: Check out and learn here all about other maps in Blazor Maps component and much more details. -platform: chart-sdk +title: Blazor Maps Other Tile Providers | Syncfusion® +description: Learn how to render tile maps from any provider such as TomTom in Blazor Maps by assigning a z, x, y URL pattern to UrlTemplate. +platform: Blazor control: Maps documentation: ug --- -# Other Maps in Blazor Maps Component +# Blazor Maps Other Tile Providers Apart from OpenStreetMap and Bing Maps, maps from other online providers can be rendered by assigning the provider’s tile URL to the [UrlTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Maps.MapsLayer-1.html#Syncfusion_Blazor_Maps_MapsLayer_1_UrlTemplate) property. The URL template design supports any provider that follows the standard tile format shown below. diff --git a/chart-sdk/blazor/maps/shapefile.md b/chart-sdk/blazor/maps/shapefile.md index 091517706..592683660 100644 --- a/chart-sdk/blazor/maps/shapefile.md +++ b/chart-sdk/blazor/maps/shapefile.md @@ -1,13 +1,13 @@ --- layout: post -title: Shapefile in Blazor Maps component | Syncfusion® -description: Check out and learn how to view and work with shapefiles in the Blazor Maps component for better map rendering. -platform: chart-sdk +title: Blazor Maps Shapefile | Syncfusion® +description: Learn how to import remotely hosted shapefiles into Blazor Maps via the ShapeData property to render vector shape maps. +platform: Blazor control: Maps documentation: ug --- -# Shapefile in Blazor Maps Component +# Blazor Maps Shapefile A shapefile is a widely used geospatial vector data format for storing geographic features, their spatial locations, and associated attribute data. diff --git a/chart-sdk/blazor/maps/state-persistence.md b/chart-sdk/blazor/maps/state-persistence.md index 04fcc272c..f9f64edfa 100644 --- a/chart-sdk/blazor/maps/state-persistence.md +++ b/chart-sdk/blazor/maps/state-persistence.md @@ -1,13 +1,13 @@ --- layout: post -title: State Persistence in Blazor Maps Component | Syncfusion® -description: Check out and learn how to enable and use state persistence in the Blazor Maps component. -platform: chart-sdk +title: Blazor Maps State Persistence | Syncfusion® +description: Learn how to retain Blazor Maps model values across page refreshes by setting EnablePersistence to store state in browser storage. +platform: Blazor control: Maps documentation: ug --- -# State Persistence in Blazor Maps Component +# Blazor Maps State Persistence ## State Persistence diff --git a/chart-sdk/blazor/maps/user-interactions.md b/chart-sdk/blazor/maps/user-interactions.md index 703610cf7..0ce5f0088 100644 --- a/chart-sdk/blazor/maps/user-interactions.md +++ b/chart-sdk/blazor/maps/user-interactions.md @@ -1,13 +1,13 @@ --- layout: post -title: User Interactions in Blazor Maps Component | Syncfusion® -description: Check out and learn here all about user interactions with customization options in the Blazor Maps component. -platform: chart-sdk +title: Blazor Maps User Interactions | Syncfusion® +description: Learn how to enable zooming, panning, and selection in Blazor Maps through MapsZoomSettings with linear ZoomFactor and EnablePanning. +platform: Blazor control: Maps documentation: ug --- -# User Interactions in Blazor Maps Component +# Blazor Maps User Interactions ## Zooming diff --git a/chart-sdk/blazor/sankey-diagram/accessibility.md b/chart-sdk/blazor/sankey-diagram/accessibility.md index d14336b84..9da388d63 100644 --- a/chart-sdk/blazor/sankey-diagram/accessibility.md +++ b/chart-sdk/blazor/sankey-diagram/accessibility.md @@ -1,13 +1,13 @@ --- layout: post -title: Accessibility in Blazor Sankey Component | Syncfusion -description: Checkout and learn here all about Accessibility using Keyboard navigation in Blazor Sankey component and more. -platform: chart-sdk +title: Blazor Sankey Diagram Accessibility | Syncfusion® +description: Learn how the Blazor Sankey Diagram supports WCAG 2.2, Section 508, screen readers, RTL, color contrast, and full keyboard navigation. +platform: Blazor control: Sankey documentation: ug --- -# Accessibility in Blazor Sankey Component +# Blazor Sankey Diagram Accessibility The Blazor Sankey 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. diff --git a/chart-sdk/blazor/sankey-diagram/customization.md b/chart-sdk/blazor/sankey-diagram/customization.md index 03e16e01c..5b1602e9e 100644 --- a/chart-sdk/blazor/sankey-diagram/customization.md +++ b/chart-sdk/blazor/sankey-diagram/customization.md @@ -1,13 +1,13 @@ --- layout: post -title: Customization for Blazor Sankey Diagram | Syncfusion -description: Explore various customization options available for enhancing the Blazor Sankey Diagram with background style, layout, and orientation configuration. -platform: chart-sdk +title: Blazor Sankey Diagram Appearance | Syncfusion® +description: Learn how to customize the Blazor Sankey Diagram with background colors, images, dimensions, RTL layout, and orientation for any use case. +platform: Blazor control: Sankey documentation: ug --- -# Blazor Sankey Diagram: Customization +# Blazor Sankey Diagram Appearance The Blazor Sankey Diagram includes extensive options to tailor appearance and behavior. This guide covers background styling, dimensions, right-to-left (RTL) layout, and orientation. diff --git a/chart-sdk/blazor/sankey-diagram/data-binding.md b/chart-sdk/blazor/sankey-diagram/data-binding.md index ce1b8278b..0444ce41e 100644 --- a/chart-sdk/blazor/sankey-diagram/data-binding.md +++ b/chart-sdk/blazor/sankey-diagram/data-binding.md @@ -1,13 +1,13 @@ --- layout: post -title: Data Binding for Blazor Sankey Diagram | Syncfusion -description: Learn how to bind nodes and links to the Blazor Sankey Diagram, including data models, REST API binding and JSON response format. -platform: chart-sdk +title: Blazor Sankey Diagram Data Binding | Syncfusion® +description: Learn how to bind Blazor Sankey Diagram data with SankeyDataNode and SankeyDataLink collections, including node IDs, source/target links, and REST API loading. +platform: Blazor control: Sankey documentation: ug --- -# Data Binding in the Blazor Sankey Diagram +# Blazor Sankey Diagram Data Binding The Blazor Sankey Diagram visualizes relationships and flows between categories using nodes and links. Data binding supplies the node and link information required to render the diagram effectively. @@ -32,7 +32,7 @@ The Blazor Sankey Diagram uses predefined data models for nodes and links availa - `TargetId`: Identifier of the target node. - `Value`: Weight or magnitude of the connection. -These types are provided by the Syncfusion® library; custom class definitions are not required. +These types are provided by the library; custom class definitions are not required. ## Binding Data to the Sankey Diagram Create collections of `SankeyDataNode` and `SankeyDataLink` and assign them to the component. diff --git a/chart-sdk/blazor/sankey-diagram/events.md b/chart-sdk/blazor/sankey-diagram/events.md index 6aa07071b..8b4ae338b 100644 --- a/chart-sdk/blazor/sankey-diagram/events.md +++ b/chart-sdk/blazor/sankey-diagram/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Events for Blazor Sankey Component | Syncfusion -description: Learn about the events supported by the Blazor Sankey component and how to use them for interactivity and customization. -platform: chart-sdk +title: Blazor Sankey Diagram Events | Syncfusion® +description: Learn how the Blazor Sankey Diagram exposes events for rendering, hover, click, resize, print, and export of nodes, links, labels, and tooltips. +platform: Blazor control: Sankey documentation: ug --- -# Events in Blazor Sankey Diagram +# Blazor Sankey Diagram Events ## Overview diff --git a/chart-sdk/blazor/sankey-diagram/getting-started-wasm.md b/chart-sdk/blazor/sankey-diagram/getting-started-wasm.md index 334efaa73..2f7f62fd3 100644 --- a/chart-sdk/blazor/sankey-diagram/getting-started-wasm.md +++ b/chart-sdk/blazor/sankey-diagram/getting-started-wasm.md @@ -1,110 +1,121 @@ --- layout: post -title: Getting Started with Sankey Diagram | Blazor WASM App | Syncfusion -description: Checkout and learn about getting started with Blazor Sankey Diagram in Blazor WASM App using Visual Studio and more. -platform: chart-sdk +title: Getting Started with Blazor Sankey Diagram in WASM App | Syncfusion® +description: Learn how to add the Blazor Sankey Diagram to a Blazor WebAssembly App by installing the Sankey NuGet package, importing namespaces, and registering the client. +platform: Blazor control: Sankey documentation: ug --- -# Getting Started with Blazor Sankey Diagram in Blazor WASM App +# Getting Started with Blazor Sankey Diagram in WASM App -This section briefly explains about how to include [Blazor Sankey](https://www.syncfusion.com/blazor-components/blazor-sankey) diagram in a Blazor WASM App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor Sankey Diagram](https://www.syncfusion.com/blazor-components/blazor-sankey) in a Blazor WASM App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor WebAssembly App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WebAssembly App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Run the following command to create a new Blazor WebAssembly App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazorwasm -o BlazorApp +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor WebAssembly App. {% tabs %} - -{% highlight c# tabtitle="Blazor WASM App" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet new blazorwasm -o BlazorApp cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} + +## Install the required Blazor package + +Install [Syncfusion.Blazor.Sankey](https://www.nuget.org/packages/Syncfusion.Blazor.Sankey/) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -## Prerequisites +{% tabcontents %} + +{% tabcontent Visual Studio %} -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.Sankey`) and install it. + +Alternatively, you can install the same package using the Package Manager Console with the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.Sankey -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} -Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. +Open the terminal and run the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +dotnet add package Syncfusion.Blazor.Sankey -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install required Blazor packages - -Install [Syncfusion.Blazor.Sankey](https://www.nuget.org/packages/Syncfusion.Blazor.Sankey/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following command in the Package Manager Console to achieve the same. +Open the command prompt and run the following command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.Sankey -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Sankey -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Sankey` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Sankey @@ -112,12 +123,12 @@ After the package is installed, open the **~/_Imports.razor** file and import th {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +Open the **Program.cs** file in Blazor WebAssembly App and register the Blazor service. {% tabs %} -{% highlight C# tabtitle="Program.cs" %} +{% highlight c# tabtitle="Program.cs" %} .... using Syncfusion.Blazor; @@ -130,22 +141,22 @@ builder.Services.AddSyncfusionBlazor(); ## Add script resources -The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/index.html** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~wwwroot/index.html** file. -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} -``` - -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor Sankey Diagram component -Add the Blazor Sankey Diagram component in the **~/Pages/Index.razor** file. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Sankey Diagram](https://www.syncfusion.com/blazor-components/blazor-sankey) component inside the razor file. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Sankey @@ -198,16 +209,54 @@ Add the Blazor Sankey Diagram component in the **~/Pages/Index.razor** file. {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Sankey Diagram in the default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Sankey Diagram component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} ![Blazor Sankey Diagram](images/getting-started/blazor-sankey.webp) ## Populate Blazor Sankey with data -To bind data for the sankey diagram, you can assign an IEnumerable object to the `Nodes` and `Links` properties. These properties define the structure of the nodes and the relationships between them. +To bind data for the Sankey diagram, you can assign an IEnumerable object to the `Nodes` and `Links` properties. These properties define the structure of the nodes and the relationships between them. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Sankey @@ -262,10 +311,10 @@ To bind data for the sankey diagram, you can assign an IEnumerable object to the ## Add title -Using the `Title` property, you can add a title to the sankey diagram to provide the user with quick information about the data plotted in the sankey diagram. +Using the `Title` property, you can add a title to the Sankey diagram to provide the user with quick information about the data plotted in the Sankey diagram. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Sankey @@ -279,10 +328,10 @@ Using the `Title` property, you can add a title to the sankey diagram to provide ## Add node labels -You can add data labels to improve the readability of the sankey diagram. This can be achieved by setting the `Visible` property to **true** in the `SankeyLabelSettings`. +You can add data labels to improve the readability of the Sankey diagram. This can be achieved by setting the `Visible` property to **true** in the `SankeyLabelSettings`. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Sankey @@ -297,10 +346,10 @@ You can add data labels to improve the readability of the sankey diagram. This c ## Enable tooltip -The tooltip can be enabled by setting the `Enable` property in `SankeyTooltipSettings` to **true**. However, the tooltip is enabled by default in the sankey diagram. +The tooltip can be enabled by setting the `Enable` property in `SankeyTooltipSettings` to **true**. However, the tooltip is enabled by default in the Sankey diagram. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Sankey @@ -315,10 +364,10 @@ The tooltip can be enabled by setting the `Enable` property in `SankeyTooltipSet ## Enable legend -You can use legend for the sankey diagram by setting the `Visible` property to **true** in `SankeyLegendSettings`. However, the legend is enabled by default in the sankey diagram. +You can use legend for the Sankey diagram by setting the `Visible` property to **true** in `SankeyLegendSettings`. However, the legend is enabled by default in the sankey diagram. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Sankey @@ -333,6 +382,6 @@ You can use legend for the sankey diagram by setting the `Visible` property to * ## See also -* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +1. [Getting Started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +2. [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +3. [Getting Started with Tooltip in Blazor Sankey](https://blazor.syncfusion.com/documentation/sankey/tooltip) diff --git a/chart-sdk/blazor/sankey-diagram/getting-started-with-web-app.md b/chart-sdk/blazor/sankey-diagram/getting-started-with-web-app.md index 2674a4ff9..215b55a31 100644 --- a/chart-sdk/blazor/sankey-diagram/getting-started-with-web-app.md +++ b/chart-sdk/blazor/sankey-diagram/getting-started-with-web-app.md @@ -1,48 +1,54 @@ --- layout: post -title: Getting Started with Blazor Sankey Diagram | Syncfusion -description: Checkout and learn about getting started with Blazor Sankey Diagram in Blazor Web App using Visual Studio and more. -platform: chart-sdk +title: Getting Started with Blazor Sankey Diagram in Web App | Syncfusion® +description: Learn how to add the Blazor Sankey Diagram to a Blazor Web App by installing the Sankey NuGet package and configuring the client project. +platform: Blazor control: Sankey documentation: ug --- -# Getting Started with Blazor Sankey Diagram in Blazor Web App +# Getting Started with Blazor Sankey Diagram in Web App -This section briefly explains about how to include [Blazor Sankey](https://www.syncfusion.com/blazor-components/blazor-sankey) diagram in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor Sankey Diagram](https://www.syncfusion.com/blazor-components/blazor-sankey) in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor Web App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor Web App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Run the following command to create a new Blazor Web App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorWebApp --interactivity Auto +cd BlazorWebApp +cd BlazorWebApp.Client -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor Web App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet new blazor -o BlazorWebApp -int Auto +dotnet new blazor -o BlazorWebApp --interactivity Auto cd BlazorWebApp cd BlazorWebApp.Client @@ -51,73 +57,69 @@ cd BlazorWebApp.Client {% endtabcontent %} -{% tabcontent .NET CLI %} - -## Prerequisites +{% endtabcontents %} -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +## Install the required Blazor package -dotnet --version +Install the [Syncfusion.Blazor.Sankey](https://www.nuget.org/packages/Syncfusion.Blazor.Sankey) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the `.Client` project. -{% endhighlight %} -{% endtabs %} +{% tabcontents %} -## Create a Blazor Web App using .NET CLI +{% tabcontent Visual Studio %} -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.Sankey`) and install it. -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +Alternatively, you can install the same package using the Package Manager Console with the following command. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorWebApp -int Auto -cd BlazorWebApp -cd BlazorWebApp.Client +Install-Package Syncfusion.Blazor.Sankey -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} +{% tabcontent Visual Studio Code %} -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Open the terminal and run the following command. -## Install required Blazor packages +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -Install the [Syncfusion.Blazor.Sankey](https://www.nuget.org/packages/Syncfusion.Blazor.Sankey) NuGet package using one of the following methods. +dotnet add package Syncfusion.Blazor.Sankey -v {{ site.releaseversion }} -**Visual Studio (NuGet Package Manager)**: +{% endhighlight %} +{% endtabs %} -1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. -2. Search the required NuGet package (`Syncfusion.Blazor.Sankey`) and install it. +{% endtabcontent %} -**Visual Studio Code or .NET CLI**: +{% tabcontent .NET CLI %} -Open the terminal or command prompt and run the following commands: +Open the command prompt and run the following command. {% tabs %} -{% highlight C# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet add package Syncfusion.Blazor.Sankey -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. +{% endtabcontent %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Sankey` namespaces. +After the packages are installed, open the **~/_Imports.razor** file in the `.Client` project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Sankey` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Sankey @@ -125,9 +127,9 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Syncfusion Blazor service in the **Program.cs** file of your Blazor Web App. +Open the **Program.cs** file in Blazor Web App and register the Blazor service. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -141,26 +143,23 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. - ## Add script resources -The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/Components/App.razor** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~/Components/App.razor** file. -```html +{% tabs %} +{% highlight html tabtitle="App.razor" %} -``` - -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Blazor Sankey component +## Add Blazor Sankey Diagram component -* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor Sankey component inside the razor file. -* If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Sankey Diagram](https://www.syncfusion.com/blazor-components/blazor-sankey) component inside the `.Client` project razor file. -N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -218,27 +217,55 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -### Run the application +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} -**Visual Studio**: +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Sankey Diagram component will render in your default web browser. -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Sankey component will render in your default web browser. +{% endtabcontent %} -**Visual Studio Code or .NET CLI**: +{% tabcontent Visual Studio Code %} -1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. -2. Run the following command: +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. - ``` - dotnet run - ``` -3. The application will start and display in your default web browser. +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} ![Blazor Sankey Diagram](images/getting-started/blazor-sankey.webp) ## Populate Blazor Sankey Diagram with data -To bind data for the sankey diagram, you can assign an IEnumerable object to the `Nodes` and `Links` properties. These properties define the structure of the nodes and the relationships between them. +To bind data for the Sankey diagram, you can assign an IEnumerable object to the `Nodes` and `Links` properties. These properties define the structure of the nodes and the relationships between them. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -296,7 +323,7 @@ To bind data for the sankey diagram, you can assign an IEnumerable object to the ## Add title -Using the `Title` property, you can add a title to the sankey diagram to provide the user with quick information about the data plotted in the sankey diagram. +Using the `Title` property, you can add a title to the Sankey diagram to provide the user with quick information about the data plotted in the Sankey diagram. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -313,7 +340,7 @@ Using the `Title` property, you can add a title to the sankey diagram to provide ## Add node labels -You can add data labels to improve the readability of the sankey diagram. This can be achieved by setting the `Visible` property to **true** in the `SankeyLabelSettings`. +You can add data labels to improve the readability of the Sankey diagram. This can be achieved by setting the `Visible` property to **true** in the `SankeyLabelSettings`. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -331,7 +358,7 @@ You can add data labels to improve the readability of the sankey diagram. This c ## Enable tooltip -The tooltip can be enabled by setting the `Enable` property in `SankeyTooltipSettings` to **true**. However, the tooltip is enabled by default in the sankey diagram. +The tooltip can be enabled by setting the `Enable` property in `SankeyTooltipSettings` to **true**. However, the tooltip is enabled by default in the Sankey diagram. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -349,7 +376,7 @@ The tooltip can be enabled by setting the `Enable` property in `SankeyTooltipSet ## Enable legend -You can use legend for the sankey diagram by setting the `Visible` property to **true** in `SankeyLegendSettings`. However, the legend is enabled by default in the sankey diagram. +You can use legend for the Sankey diagram by setting the `Visible` property to **true** in `SankeyLegendSettings`. However, the legend is enabled by default in the Sankey diagram. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -367,6 +394,6 @@ You can use legend for the sankey diagram by setting the `Visible` property to * ## See also -1. [Getting Started with Blazor for client-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -2. [Getting Started with Blazor for client-side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-visual-studio) -3. [Getting Started with Blazor for server-side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +1. [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +3. [Getting Started with Tooltip in Blazor Sankey](https://blazor.syncfusion.com/documentation/sankey/tooltip) \ No newline at end of file diff --git a/chart-sdk/blazor/sankey-diagram/getting-started.md b/chart-sdk/blazor/sankey-diagram/getting-started.md index 83293133b..cd39cd4f8 100644 --- a/chart-sdk/blazor/sankey-diagram/getting-started.md +++ b/chart-sdk/blazor/sankey-diagram/getting-started.md @@ -1,112 +1,123 @@ --- layout: post -title: Getting Started with Blazor Sankey Diagram Component | Syncfusion -description: Checkout and learn about getting started with Blazor Sankey diagram in Blazor Server App using Visual Studio and more. -platform: chart-sdk +title: Getting Started with Blazor Sankey Diagram | Syncfusion® +description: Learn how to add the Blazor Sankey Diagram to a Blazor Server App by installing the Sankey NuGet package, importing namespaces, and registering services. +platform: Blazor control: Sankey documentation: ug --- -# Getting Started with Blazor Sankey Diagram in Blazor Server App +# Getting Started with Blazor Sankey Diagram in Server App This section briefly explains about how to include [Blazor Sankey Diagram](https://www.syncfusion.com/blazor-components/blazor-sankey) in your Blazor Server App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +## Create a new Blazor Server App + {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Server App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor Server App** by using the **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Run the following command to create a new Blazor Server App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorApp --interactivity Server +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a Server application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor Server App. {% tabs %} +{% highlight razor tabtitle="Command Prompt" %} -{% highlight c# tabtitle="Blazor Server App" %} - -dotnet new blazor -o BlazorApp -int Server +dotnet new blazor -o BlazorApp --interactivity Server cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} -## Prerequisites +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +## Install the required Blazor package -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +Install [Syncfusion.Blazor.Sankey](https://www.nuget.org/packages/Syncfusion.Blazor.Sankey/) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -dotnet --version +{% tabcontents %} -{% endhighlight %} -{% endtabs %} +{% tabcontent Visual Studio %} -## Create a Blazor Server App using .NET CLI +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.Sankey`) and install it. -Run the following command to create a new Blazor Server App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=.net-cli) documentation. +Alternatively, you can install the same package using the Package Manager Console with the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet new blazor -o BlazorApp -int Server -cd BlazorApp +Install-Package Syncfusion.Blazor.Sankey -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} +{% tabcontent Visual Studio Code %} -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Server App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Syncfusion.Blazor.Sankey -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} -## Install required Blazor packages +{% endtabcontent %} -Install [Syncfusion.Blazor.Sankey](https://www.nuget.org/packages/Syncfusion.Blazor.Sankey/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following command in the Package Manager Console to achieve the same. +Open the command prompt and run the following command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.Sankey -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Sankey -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces -After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Sankey` namespaces. +After the package is installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Sankey` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Sankey @@ -114,12 +125,12 @@ After the package is installed, open the **~/_Imports.razor** file and import th {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor Server App. +Open the **Program.cs** file in Blazor Server App and register the Blazor service. {% tabs %} -{% highlight C# tabtitle="Program.cs" %} +{% highlight c# tabtitle="Program.cs" %} .... using Syncfusion.Blazor; @@ -132,34 +143,27 @@ builder.Services.AddSyncfusionBlazor(); ## Add script resources -The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/Components/App.razor** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~/Components/App.razor** file. -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} -``` - -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor Sankey Diagram component -Add the Blazor Sankey Diagram component in the **~/Components/Pages/Home.razor** file. If the interactivity location is set to `Per page/component`, define a render mode at the top of the `~Pages/Home.razor` file. +Open a Razor file located in the **~/Components/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Sankey Diagram](https://www.syncfusion.com/blazor-components/blazor-sankey) component inside the razor file. -N> If the Interactivity Location is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. +N> If the interactivity location is set to `Per page/component`, define a render mode at the top of the razor file. (For example `InteractiveServer`). If the Interactivity is set to `Global`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode define here *@ @rendermode InteractiveServer -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - @using Syncfusion.Blazor.Sankey @@ -211,13 +215,51 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Sankey Diagram in your default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Sankey Diagram component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} ![Blazor Sankey Diagram](images/getting-started/blazor-sankey.webp) ## Populate Blazor Sankey Diagram with data -To bind data for the sankey diagram, you can assign an IEnumerable object to the `Nodes` and `Links` properties. These properties define the structure of the nodes and the relationships between them. +To bind data for the Sankey diagram, you can assign an IEnumerable object to the `Nodes` and `Links` properties. These properties define the structure of the nodes and the relationships between them. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -275,7 +317,7 @@ To bind data for the sankey diagram, you can assign an IEnumerable object to the ## Add title -Using the `Title` property, you can add a title to the sankey diagram to provide the user with quick information about the data plotted in the sankey diagram. +Using the `Title` property, you can add a title to the Sankey diagram to provide the user with quick information about the data plotted in the Sankey diagram. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -292,7 +334,7 @@ Using the `Title` property, you can add a title to the sankey diagram to provide ## Add node labels -You can add data labels to improve the readability of the sankey diagram. This can be achieved by setting the `Visible` property to **true** in the `SankeyLabelSettings`. +You can add data labels to improve the readability of the Sankey diagram. This can be achieved by setting the `Visible` property to **true** in the `SankeyLabelSettings`. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -310,7 +352,7 @@ You can add data labels to improve the readability of the sankey diagram. This c ## Enable tooltip -The tooltip can be enabled by setting the `Enable` property in `SankeyTooltipSettings` to **true**. However, the tooltip is enabled by default in the sankey diagram. +The tooltip can be enabled by setting the `Enable` property in `SankeyTooltipSettings` to **true**. However, the tooltip is enabled by default in the Sankey diagram. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -328,7 +370,7 @@ The tooltip can be enabled by setting the `Enable` property in `SankeyTooltipSet ## Enable legend -You can use legend for the sankey diagram by setting the `Visible` property to **true** in `SankeyLegendSettings`. However, the legend is enabled by default in the sankey diagram. +You can use legend for the Sankey diagram by setting the `Visible` property to **true** in `SankeyLegendSettings`. However, the legend is enabled by default in the Sankey diagram. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -346,6 +388,6 @@ You can use legend for the sankey diagram by setting the `Visible` property to * ## See also -* [Getting Started with Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) -* [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -* [Getting Started with Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +1. [Getting Started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +2. [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +3. [Getting Started with Tooltip in Blazor Sankey](https://blazor.syncfusion.com/documentation/sankey/tooltip) \ No newline at end of file diff --git a/chart-sdk/blazor/sankey-diagram/labels.md b/chart-sdk/blazor/sankey-diagram/labels.md index 3e7fa3bbe..f8abe2edc 100644 --- a/chart-sdk/blazor/sankey-diagram/labels.md +++ b/chart-sdk/blazor/sankey-diagram/labels.md @@ -1,13 +1,13 @@ --- layout: post -title: Labels for Blazor Sankey Diagram | Syncfusion -description: Learn how to configure and customize labels in the Blazor Sankey Diagram to enhance data visualization. -platform: chart-sdk +title: Blazor Sankey Diagram Labels | Syncfusion® +description: Learn how to configure Blazor Sankey Diagram labels with SankeyLabelSettings to set visibility, color, font, size, weight, padding, and italic style. +platform: Blazor control: Sankey documentation: ug --- -# Labels in Blazor Sankey Diagram +# Blazor Sankey Diagram Labels ## Overview diff --git a/chart-sdk/blazor/sankey-diagram/legend.md b/chart-sdk/blazor/sankey-diagram/legend.md index e195f2750..013f03e1d 100644 --- a/chart-sdk/blazor/sankey-diagram/legend.md +++ b/chart-sdk/blazor/sankey-diagram/legend.md @@ -1,13 +1,13 @@ --- layout: post -title: Legends for Blazor Sankey Diagram | Syncfusion -description: Learn how to configure and customize legends in the Blazor Sankey Diagram to enhance data interpretation and user interaction. -platform: chart-sdk +title: Blazor Sankey Diagram Legend | Syncfusion® +description: Learn how to show a Blazor Sankey Diagram legend with SankeyLegendSettings to set position, size, padding, background, highlight on hover, and a custom title. +platform: Blazor control: Sankey documentation: ug --- -# Legends in Blazor Sankey Diagram +# Blazor Sankey Diagram Legend ## Overview diff --git a/chart-sdk/blazor/sankey-diagram/links.md b/chart-sdk/blazor/sankey-diagram/links.md index 8b080de2c..f68889cfd 100644 --- a/chart-sdk/blazor/sankey-diagram/links.md +++ b/chart-sdk/blazor/sankey-diagram/links.md @@ -1,13 +1,13 @@ --- layout: post -title: Links for Blazor Sankey Diagram | Syncfusion -description: Learn how to define and configure links in the Blazor Sankey Diagram to represent connections between nodes. -platform: chart-sdk +title: Blazor Sankey Diagram Links | Syncfusion® +description: Learn how to define Blazor Sankey Diagram links with SankeyDataLink using SourceId, TargetId, and Value with color, gradient, and opacity. +platform: Blazor control: Sankey documentation: ug --- -# Links in Blazor Sankey Diagram +# Blazor Sankey Diagram Links ## Overview diff --git a/chart-sdk/blazor/sankey-diagram/nodes.md b/chart-sdk/blazor/sankey-diagram/nodes.md index 7759b7540..196d60eaa 100644 --- a/chart-sdk/blazor/sankey-diagram/nodes.md +++ b/chart-sdk/blazor/sankey-diagram/nodes.md @@ -1,13 +1,13 @@ --- layout: post -title: Nodes for Blazor Sankey Diagram | Syncfusion -description: Learn how to define, configure and style nodes in the Blazor Sankey Diagram, including IDs, labels, and appearance settings. -platform: chart-sdk +title: Blazor Sankey Diagram Nodes | Syncfusion® +description: Learn how to define Blazor Sankey Diagram nodes with SankeyDataNode using unique Id, label, width, alignment, and spacing. +platform: Blazor control: Sankey documentation: ug --- -# Nodes in Blazor Sankey Diagram +# Blazor Sankey Diagram Nodes ## Overview diff --git a/chart-sdk/blazor/sankey-diagram/print-export.md b/chart-sdk/blazor/sankey-diagram/print-export.md index e892ef865..6c2b93894 100644 --- a/chart-sdk/blazor/sankey-diagram/print-export.md +++ b/chart-sdk/blazor/sankey-diagram/print-export.md @@ -1,13 +1,13 @@ --- layout: post -title: Print and Export for Blazor Sankey Diagram | Syncfusion -description: Learn how to configure print and export functionalities in the Blazor Sankey Diagram to generate high-quality outputs. -platform: chart-sdk +title: Blazor Sankey Diagram Print and Export | Syncfusion® +description: Learn how to print and export the Blazor Sankey Diagram to PNG, JPEG, SVG, or PDF with PrintAsync and ExportAsync, then use PrintCompleted and ExportCompleted. +platform: Blazor control: Sankey documentation: ug --- -# Blazor Sankey Diagram: Printing and Exporting +# Blazor Sankey Diagram Print and Export This guide explains how to print and export the Blazor Sankey Diagram using built-in methods. These features enable high-quality output generation for presentations, reports, or further analysis. diff --git a/chart-sdk/blazor/sankey-diagram/title.md b/chart-sdk/blazor/sankey-diagram/title.md index f18db17f2..bfc71c595 100644 --- a/chart-sdk/blazor/sankey-diagram/title.md +++ b/chart-sdk/blazor/sankey-diagram/title.md @@ -1,13 +1,13 @@ --- layout: post -title: Title and Subtitle in Blazor Sankey Diagram | Syncfusion -description: Learn how to set and customize the title and subtitle in the Blazor Sankey Diagram for better data representation. -platform: chart-sdk +title: Blazor Sankey Diagram Title and Subtitle | Syncfusion® +description: Learn how to add a title and subtitle to the Blazor Sankey Diagram with Title and SubTitle, then style them via SankeyTitleStyle and SankeySubtitleStyle fonts. +platform: Blazor control: Sankey documentation: ug --- -# Title and Subtitle in Blazor Sankey Diagram +# Blazor Sankey Diagram Title and Subtitle The Blazor Sankey Diagram supports adding a title and subtitle to provide context and description for the data visualization. This topic explains how to set and customize the title and subtitle in the Sankey Diagram. diff --git a/chart-sdk/blazor/sankey-diagram/tooltip.md b/chart-sdk/blazor/sankey-diagram/tooltip.md index 19f1e644e..07a3ba4f8 100644 --- a/chart-sdk/blazor/sankey-diagram/tooltip.md +++ b/chart-sdk/blazor/sankey-diagram/tooltip.md @@ -1,13 +1,13 @@ --- layout: post -title: Tooltips for Blazor Sankey Diagram | Syncfusion -description: Learn how to configure and customize tooltips in the Blazor Sankey Diagram to enhance data visualization and user interaction. -platform: chart-sdk +title: Blazor Sankey Diagram Tooltip | Syncfusion® +description: Learn how to enable Blazor Sankey Diagram tooltips with SankeyTooltipSettings to show node and link details using templates, fill, opacity, and fade. +platform: Blazor control: Sankey documentation: ug --- -# Tooltips in Blazor Sankey Diagram +# Blazor Sankey Diagram Tooltip The Blazor Sankey Diagram visualizes flows between nodes and links. Tooltips surface contextual details for hovered elements without cluttering the diagram. diff --git a/chart-sdk/blazor/stock-chart/accessibility.md b/chart-sdk/blazor/stock-chart/accessibility.md index f342c8774..9d01ce531 100644 --- a/chart-sdk/blazor/stock-chart/accessibility.md +++ b/chart-sdk/blazor/stock-chart/accessibility.md @@ -1,13 +1,13 @@ --- layout: post -title: Accessibility in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn here all about Accessibility using Keyboard navigation in Blazor Stock Chart component and much more details. -platform: chart-sdk +title: Blazor Stock Chart Accessibility | Syncfusion® +description: Learn how the Blazor Stock Chart meets WCAG 2.2 AA, Section 508, ADA, screen reader, RTL, and keyboard navigation standards. +platform: Blazor control: Stock Chart documentation: ug --- -# Accessibility in Blazor Stock Chart Component +# Blazor Stock Chart Accessibility The Blazor Stock Chart component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/blazor/stock-chart/appearance.md b/chart-sdk/blazor/stock-chart/appearance.md index af0c8d928..b585f7fb0 100644 --- a/chart-sdk/blazor/stock-chart/appearance.md +++ b/chart-sdk/blazor/stock-chart/appearance.md @@ -1,17 +1,17 @@ --- layout: post -title: Appearance in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn about configuring chart appearance in the Blazor Stock Chart component to refine visual presentation. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Appearance | Syncfusion® +description: Learn how to customize the Blazor Stock Chart's title font, color, theme, background, gridlines, tooltip, and overall styling. +platform: Blazor +control: Stock Chart documentation: ug --- -# Appearance in Blazor Stock Chart Component +# Blazor Stock Chart Appearance ## Stock Chart Title -Set a chart title using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Title) property to provide context for the plotted data. +Set a chart title using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_Title) property to provide context for the plotted data. ```cshtml diff --git a/chart-sdk/blazor/stock-chart/axis-customization.md b/chart-sdk/blazor/stock-chart/axis-customization.md index 0729fa016..7d077e2c0 100644 --- a/chart-sdk/blazor/stock-chart/axis-customization.md +++ b/chart-sdk/blazor/stock-chart/axis-customization.md @@ -1,13 +1,13 @@ --- layout: post -title: Axis Customization in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn here all about axis customization in the Blazor Stock Chart component and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Axis Customization | Syncfusion® +description: Learn how to customize Blazor Stock Chart axes with titles, tick lines, grid lines, multiple axes, and inverted or opposed placement. +platform: Blazor +control: Stock Chart documentation: ug --- -# Axis Customization in Blazor Stock Chart Component +# Blazor Stock Chart Axis Customization diff --git a/chart-sdk/blazor/stock-chart/axis-types.md b/chart-sdk/blazor/stock-chart/axis-types.md index d597ea415..771f1a42a 100644 --- a/chart-sdk/blazor/stock-chart/axis-types.md +++ b/chart-sdk/blazor/stock-chart/axis-types.md @@ -1,15 +1,15 @@ --- layout: post -title: Axis Types in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn about all the available axis types in the Blazor Stock Chart component and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Axis Types | Syncfusion® +description: Learn how to plot the Blazor Stock Chart with DateTime, DateTimeCategory, or Logarithmic axis types for time-series and multi-scale data. +platform: Blazor +control: Stock Chart documentation: ug --- -# Axis Types in Blazor Stock Chart Component +# Blazor Stock Chart Axis Types ## DateTime Axis diff --git a/chart-sdk/blazor/stock-chart/chart-dimensions.md b/chart-sdk/blazor/stock-chart/chart-dimensions.md index c0ddfaffa..7f165921a 100644 --- a/chart-sdk/blazor/stock-chart/chart-dimensions.md +++ b/chart-sdk/blazor/stock-chart/chart-dimensions.md @@ -1,13 +1,13 @@ --- layout: post -title: Stock Chart Dimensions in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn how to configure chart dimensions in the Blazor Stock Chart component and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Dimensions | Syncfusion® +description: Learn how to size the Blazor Stock Chart to its container or set explicit Width and Height in pixels or percentages. +platform: Blazor +control: Stock Chart documentation: ug --- -# Stock Chart Dimensions in Blazor Stock Chart Component +# Blazor Stock Chart Dimensions ## Size for Container @@ -56,7 +56,7 @@ The stock chart adapts to its container size. Set the container dimensions with ## Size for Stock Chart -Set the stock chart size directly using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Height) properties. +Set the stock chart size directly using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_Height) properties. **In Pixels** diff --git a/chart-sdk/blazor/stock-chart/cross-hair.md b/chart-sdk/blazor/stock-chart/cross-hair.md index 76f2fc6d5..ff679faa7 100644 --- a/chart-sdk/blazor/stock-chart/cross-hair.md +++ b/chart-sdk/blazor/stock-chart/cross-hair.md @@ -1,13 +1,13 @@ --- layout: post -title: Crosshair in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn how to configure crosshair in the Blazor Stock Chart component and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Crosshair | Syncfusion® +description: Learn how to show axis-aligned crosshair lines on the Blazor Stock Chart with SnapToData, dash arrays, and per-axis tooltips. +platform: Blazor +control: Stock Chart documentation: ug --- -# Crosshair in Blazor Stock Chart Component +# Blazor Stock Chart Crosshair The crosshair displays vertical and horizontal lines to show axis values at the mouse or touch position. Enable crosshair lines using the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCrosshairSettings.html#Syncfusion_Blazor_Charts_StockChartCrosshairSettings_Enable) property of `Crosshair`. Enabling the `SnapToData` property aligns the crosshair with the nearest data point instead of the exact pointer position. diff --git a/chart-sdk/blazor/stock-chart/events.md b/chart-sdk/blazor/stock-chart/events.md index 1f0761bca..7390947ca 100644 --- a/chart-sdk/blazor/stock-chart/events.md +++ b/chart-sdk/blazor/stock-chart/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Events in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn here all the features about events in Blazor Stock Chart component and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Events | Syncfusion® +description: Learn how to handle Blazor Stock Chart events, including Loaded, OnPointClick, PointMoved, RangeChange, and mouse-event hooks. +platform: Blazor +control: Stock Chart documentation: ug --- -# Events in Blazor Stock Chart Component +# Blazor Stock Chart Events This section lists the events of the Stock Chart component that are triggered for corresponding actions. Configure events using the **StockChartEvents** component. diff --git a/chart-sdk/blazor/stock-chart/export-print.md b/chart-sdk/blazor/stock-chart/export-print.md index df430e384..b6a72c645 100644 --- a/chart-sdk/blazor/stock-chart/export-print.md +++ b/chart-sdk/blazor/stock-chart/export-print.md @@ -1,13 +1,13 @@ --- layout: post -title: Print and Export in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn how to configure and use print and export feature in the Blazor Stock Chart component and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Print and Export | Syncfusion® +description: Learn how to export the Blazor Stock Chart to JPEG, PNG, SVG, PDF, XLSX, or CSV and print it from the toolbar. +platform: Blazor +control: Stock Chart documentation: ug --- -# Print and Export in Blazor Stock Chart Component +# Blazor Stock Chart Print and Export The rendered stock chart supports exporting to JPEG, PNG, SVG, PDF, XLSX, and CSV through the export dropdown in the period selector toolbar. The required format can be selected from the export dropdown in the stock chart toolbar. diff --git a/chart-sdk/blazor/stock-chart/getting-started-webapp.md b/chart-sdk/blazor/stock-chart/getting-started-webapp.md index 3f8117041..1b2fac0bd 100644 --- a/chart-sdk/blazor/stock-chart/getting-started-webapp.md +++ b/chart-sdk/blazor/stock-chart/getting-started-webapp.md @@ -1,131 +1,126 @@ --- layout: post -title: Getting Started with Stock Chart in Blazor Web App | Syncfusion® -description: Check out the documentation for getting started with Blazor Stock Chart Components in Blazor Web App and much more details. -platform: chart-sdk -component: Stock Chart +title: Getting Started with Blazor Stock Chart in Web App | Syncfusion +description: Learn how to add the Blazor Stock Chart to a Blazor Web App using Visual Studio, VS Code, or the .NET CLI. +platform: Blazor +control: Stock Chart documentation: ug --- -# Getting Started with Blazor Stock Chart in Blazor Web App +# Getting Started with Blazor Stock Chart in Web App -This section briefly explains how to include [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor Web App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor Web App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Run the following command to create a new Blazor Web App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorWebApp --interactivity Auto +cd BlazorWebApp +cd BlazorWebApp.Client -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor Web App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet new blazor -o BlazorWebApp -int Auto +dotnet new blazor -o BlazorWebApp --interactivity Auto cd BlazorWebApp +cd BlazorWebApp.Client {% endhighlight %} {% endtabs %} -N> If the application is configured with WebAssembly or Auto render modes, you may optionally navigate to the client project directory to manage client-specific dependencies. Once the required changes are completed, ensure that you navigate back to the root project directory. +{% endtabcontent %} -``` -cd BlazorWebApp.Client -cd .. -``` +{% endtabcontents %} -{% endtabcontent %} +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). -{% tabcontent .NET CLI %} +## Install the required Blazor packages + +Install the [Syncfusion.Blazor.StockChart](https://www.nuget.org/packages/Syncfusion.Blazor.StockChart) and the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the `.Client` project. + +{% tabcontents %} + +{% tabcontent Visual Studio %} -## Prerequisites +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.StockChart` and `Syncfusion.Blazor.Themes`) and install them. -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.StockChart -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor Web App using .NET CLI +{% endtabcontent %} -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +{% tabcontent Visual Studio Code %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +Open the terminal and run the following commands. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazor -o BlazorWebApp -int Auto -cd BlazorWebApp +dotnet add package Syncfusion.Blazor.StockChart -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> If the application is configured with WebAssembly or Auto render modes, you may optionally navigate to the client project directory to manage client-specific dependencies. Once the required changes are completed, ensure that you navigate back to the root project directory. - -``` -cd BlazorWebApp.Client -cd .. -``` - {% endtabcontent %} -{% endtabcontents %} - -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). - -## Install required Blazor packages - -Install the [Syncfusion.Blazor.StockChart](https://www.nuget.org/packages/Syncfusion.Blazor.StockChart) and the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.StockChart --version {{ site.releaseversion }}), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following commands in the Package Manager Console to achieve the same. +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.StockChart -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.StockChart -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the client project. +{% endtabcontent %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. - -N> -- The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder. -- If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, add these namespaces in both the server and client project **~/_Imports.razor** files. +After the packages are installed, open the **~/_Imports.razor** file in the `.Client` project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts @@ -133,9 +128,9 @@ N> {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor Web App. This step enables the Syncfusion components to work in your application. +Open the **Program.cs** file in Blazor Web App and register the Blazor service. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -149,39 +144,33 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. - ## Add stylesheet and script resources -The theme stylesheet and the Syncfusion JavaScript library need to be included in your application. The stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/Components/App.razor** file (this is the root layout file of your application). +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~/Components/App.razor** file. -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} +... -.... +... -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor Stock Chart component -Add the Blazor Stock Chart component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/Home.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) component inside the `.Client` project razor file. -N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly`, or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="Home.razor" %} -@* desired render mode defined here *@ @rendermode InteractiveAuto -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Charts @@ -197,13 +186,15 @@ To bind data for the Stock Chart component, assign a `IEnumerable` object to the {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@using Syncfusion.Blazor.Charts + -@code{ +@code { public class StockChartData { public DateTime Date { get; set; } @@ -231,14 +222,55 @@ To bind data for the Stock Chart component, assign a `IEnumerable` object to the {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Stock Chart component in the default web browser. +## Run the application -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVHjeVNVEQConrD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stock Chart Component](images/blazor-stock-chart.webp)" %} +{% tabcontents %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/StockChart). +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Stock Chart component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBnDwNHMzuuMpdO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stock Chart Component](images/blazor-stock-chart.webp)" %} + +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/StockChart). ## See also -* [Getting Started with Blazor in Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Blazor in Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Blazor in Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor in Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/chart-sdk/blazor/stock-chart/getting-started.md b/chart-sdk/blazor/stock-chart/getting-started.md index 8865db077..ac0686f2e 100644 --- a/chart-sdk/blazor/stock-chart/getting-started.md +++ b/chart-sdk/blazor/stock-chart/getting-started.md @@ -1,111 +1,122 @@ --- layout: post -title: Getting Started with Blazor Stock Chart Component | Syncfusion® -description: Checkout and learn about getting started with Blazor Stock Chart component in Blazor WebAssembly Application. -platform: chart-sdk -component: Stock Chart +title: Getting Started with Blazor Stock Chart in WebAssembly | Syncfusion +description: Learn how to add the Blazor Stock Chart to a Blazor WebAssembly App using Visual Studio, VS Code, or the .NET CLI. +platform: Blazor +control: Stock Chart documentation: ug --- -# Getting Started with Blazor Stock Chart Component +# Getting Started with Blazor Stock Chart in WebAssembly -This section briefly explains how to include [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor WebAssembly (Standalone) App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WebAssembly App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Run the following command to create a new Blazor WebAssembly App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazorwasm -o BlazorApp +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor WebAssembly App. {% tabs %} - -{% highlight c# tabtitle="Blazor WASM App" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet new blazorwasm -o BlazorApp cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} + +## Install the required Blazor packages + +Install the [Syncfusion.Blazor.StockChart](https://www.nuget.org/packages/Syncfusion.Blazor.StockChart/) and the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. + +{% tabcontents %} + +{% tabcontent Visual Studio %} -## Prerequisites +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.StockChart` and `Syncfusion.Blazor.Themes`) and install them. -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +Alternatively, you can install the same packages using the Package Manager Console with the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.StockChart -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} -Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. +Open the terminal and run the following commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +dotnet add package Syncfusion.Blazor.StockChart -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install required Blazor packages - -Install the [Syncfusion.Blazor.StockChart](https://www.nuget.org/packages/Syncfusion.Blazor.StockChart/) and the [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (dotnet add package Syncfusion.Blazor.StockChart --version {{ site.releaseversion }}), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following commands in the Package Manager Console to achieve the same. +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.StockChart -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.StockChart -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. -N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder. - {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts @@ -113,12 +124,12 @@ N> The `~/` notation represents the root directory of your project. This file is {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **Program.cs** file of your Blazor WebAssembly App. This step enables the Syncfusion components to work in your application. +Open the **Program.cs** file in Blazor WebAssembly App and register the Blazor service. {% tabs %} -{% highlight C# tabtitle="Program.cs" %} +{% highlight c# tabtitle="Program.cs" %} .... using Syncfusion.Blazor; @@ -131,21 +142,22 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and the Syncfusion JavaScript library need to be included in your application. The stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file (this is the root HTML file of your application). +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) and [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~wwwroot/index.html** file. -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} +... -.... +... -``` - -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor Stock Chart component -Add the Blazor Stock Chart component in the **~/Pages/Home.razor** file. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) component inside the razor file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -174,7 +186,8 @@ To bind data for the Stock Chart component, assign a `IEnumerable` object to the -@code{ +@code +{ public class StockChartData { public DateTime Date { get; set; } @@ -202,13 +215,51 @@ To bind data for the Stock Chart component, assign a `IEnumerable` object to the {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Stock Chart component in the default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Stock Chart component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVHjeVNVEQConrD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stock Chart Component](images/blazor-stock-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhdXQtHCSKROJpd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stock Chart Component](images/blazor-stock-chart.webp)" %} N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/StockChart). ## See also -* [Getting Started with Blazor in Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) -* [Getting Started with Blazor in Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +1. [Getting Started with Blazor in Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor in Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/chart-sdk/blazor/stock-chart/gradient.md b/chart-sdk/blazor/stock-chart/gradient.md index 912ec285a..e99a2f8fa 100644 --- a/chart-sdk/blazor/stock-chart/gradient.md +++ b/chart-sdk/blazor/stock-chart/gradient.md @@ -1,13 +1,13 @@ --- layout: post -title: Gradient in Blazor Stock Chart Component | Syncfusion® -description: Checkout and learn about applying linear and radial gradients to series, trendlines and indicators in the Blazor Stock Chart component. -platform: chart-sdk +title: Blazor Stock Chart Gradient | Syncfusion® +description: Learn how to apply linear or radial gradients to the Blazor Stock Chart series, trendlines, and technical indicators with color stops. +platform: Blazor control: Stock Chart documentation: ug --- -# Gradient in Blazor Stock Chart Component +# Blazor Stock Chart Gradient Gradients add depth and modern styling to stock charts by smoothly blending multiple colors. The Stock Chart component supports two gradient types: diff --git a/chart-sdk/blazor/stock-chart/images/blazor-stock-chart.webp b/chart-sdk/blazor/stock-chart/images/blazor-stock-chart.webp index ea809e033..f25e928d1 100644 Binary files a/chart-sdk/blazor/stock-chart/images/blazor-stock-chart.webp and b/chart-sdk/blazor/stock-chart/images/blazor-stock-chart.webp differ diff --git a/chart-sdk/blazor/stock-chart/last-data-label.md b/chart-sdk/blazor/stock-chart/last-data-label.md index fd430a54a..35eab5e40 100644 --- a/chart-sdk/blazor/stock-chart/last-data-label.md +++ b/chart-sdk/blazor/stock-chart/last-data-label.md @@ -1,13 +1,13 @@ --- layout: post -title: Last Data Label in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn how to enable and customize the Last Data Label in the Blazor Stock Chart component and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Last Data Label | Syncfusion® +description: Learn how to highlight the most recent data point on the Blazor Stock Chart with a label and indicator line for at-a-glance reading. +platform: Blazor +control: Stock Chart documentation: ug --- -# Last Data Label in Blazor Stock Chart Component +# Blazor Stock Chart Last Data Label The last data label highlights the most recent data point in a series by displaying a label with an indicator line. This improves readability and makes the latest value easy to identify in the stock chart. The label is enabled and customized using the [StockChartLastDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLastDataLabel.html) configuration. diff --git a/chart-sdk/blazor/stock-chart/legend.md b/chart-sdk/blazor/stock-chart/legend.md index 8dddb85c6..71534df30 100644 --- a/chart-sdk/blazor/stock-chart/legend.md +++ b/chart-sdk/blazor/stock-chart/legend.md @@ -1,13 +1,13 @@ --- layout: post -title: Legend in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn how to configure and customize the Legends in the Blazor Stock Chart component and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Legend | Syncfusion® +description: Learn how to show a legend on the Blazor Stock Chart at Left, Right, Top, Bottom, or Custom position to identify each series. +platform: Blazor +control: Stock Chart documentation: ug --- -# Legend in Blazor Stock Chart Component +# Blazor Stock Chart Legend The legend describes the series rendered in the Stock Chart. Enable the legend by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html#Syncfusion_Blazor_Charts_StockChartLegendSettings_Visible) option in [StockChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartLegendSettings.html). diff --git a/chart-sdk/blazor/stock-chart/panning.md b/chart-sdk/blazor/stock-chart/panning.md index 7a14aa145..eb109b952 100644 --- a/chart-sdk/blazor/stock-chart/panning.md +++ b/chart-sdk/blazor/stock-chart/panning.md @@ -1,13 +1,13 @@ --- layout: post -title: Panning in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn here all about panning functionality in the Blazor Stock Chart component and much more details. -platform: chart-sdk +title: Blazor Stock Chart Panning | Syncfusion® +description: Learn how to pan the Blazor Stock Chart horizontally with the EnablePan property to scroll across large historical datasets. +platform: Blazor control: Stock Chart documentation: ug --- -# Panning in Blazor Stock Chart Component +# Blazor Stock Chart Panning Panning is enabled by default in the Stock Chart. This behavior is controlled by the [EnablePan](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html#Syncfusion_Blazor_Charts_StockChartZoomSettings_EnablePan) property of [StockChartZoomSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartZoomSettings.html), which defaults to **true**. @@ -66,4 +66,4 @@ else ![Blazor Stock Chart with Panning](images/panning.webp) -N> Refer to the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for feature representations and explore the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to see various stock chart types and time-dependent data rendered at equal intervals. +N> Refer to the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for feature representations and explore the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=fluent2) to see various stock chart types and time-dependent data rendered at equal intervals. diff --git a/chart-sdk/blazor/stock-chart/period-selector.md b/chart-sdk/blazor/stock-chart/period-selector.md index 4c2a37b7e..f40770ee8 100644 --- a/chart-sdk/blazor/stock-chart/period-selector.md +++ b/chart-sdk/blazor/stock-chart/period-selector.md @@ -1,15 +1,15 @@ --- layout: post -title: Period Selector in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn here all about period selector in the Blazor Stock Chart component and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Period Selector | Syncfusion® +description: Learn how to add a period selector to the Blazor Stock Chart toolbar with intervals in Years, Months, Weeks, Days, Hours, or Minutes. +platform: Blazor +control: Stock Chart documentation: ug --- -# Period Selector in Blazor Stock Chart Component +# Blazor Stock Chart Period Selector The period selector enables selecting a range with specified periods. The period selector is enabled by default in the stock chart. @@ -17,7 +17,7 @@ The period selector enables selecting a range with specified periods. The period -Periods is an array of objects that defines the range of [Periods](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_Periods). The `Interval` property specifies the count value of the button, and the `Text` property specifies the text displayed on the button. The `IntervalType` property customizes the intervals of the buttons and supports the following types: +Periods is an array of objects that defines the range of [Periods](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartPeriods.html). The `Interval` property specifies the count value of the button, and the `Text` property specifies the text displayed on the button. The `IntervalType` property customizes the intervals of the buttons and supports the following types: * Auto * Years @@ -91,7 +91,7 @@ Periods is an array of objects that defines the range of [Periods](https://help. ## Visibility of period selector -The [EnablePeriodSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartModel.html#Syncfusion_Blazor_Charts_StockChartModel_EnablePeriodSelector) property toggles the visibility of the period selector. +The [EnablePeriodSelector](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfStockChart.html#Syncfusion_Blazor_Charts_SfStockChart_EnablePeriodSelector) property toggles the visibility of the period selector. ```cshtml diff --git a/chart-sdk/blazor/stock-chart/range-selector.md b/chart-sdk/blazor/stock-chart/range-selector.md index 56ab60b2e..43e438e2f 100644 --- a/chart-sdk/blazor/stock-chart/range-selector.md +++ b/chart-sdk/blazor/stock-chart/range-selector.md @@ -1,15 +1,15 @@ --- layout: post -title: Range Selector in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn how to configure and customize range selector in the Blazor Stock Chart component and much more details. -platform: chart-sdk +title: Blazor Stock Chart Range Selector | Syncfusion® +description: Learn how to select a date range in the Blazor Stock Chart by dragging the range selector thumbs, tapping labels, or using the Date Range button. +platform: Blazor control: Stock Chart documentation: ug --- -# Range Selector in Blazor Stock Chart Component +# Blazor Stock Chart Range Selector The range selector enables selection of a date range using specified periods. By default, the range selector is enabled in the stock chart. diff --git a/chart-sdk/blazor/stock-chart/series-types.md b/chart-sdk/blazor/stock-chart/series-types.md index aecfcfcb4..dd4d0ad40 100644 --- a/chart-sdk/blazor/stock-chart/series-types.md +++ b/chart-sdk/blazor/stock-chart/series-types.md @@ -1,13 +1,13 @@ --- layout: post -title: Series Types in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn about the supported series types in the Blazor Stock Chart component and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Series Types | Syncfusion® +description: Learn how to render the Blazor Stock Chart with six series types — Line, Spline, Hilo, HiloOpenClose, Hollow Candle, and Candle — and switch them at runtime. +platform: Blazor +control: Stock Chart documentation: ug --- -# Series Types in Blazor Stock Chart Component +# Blazor Stock Chart Series Types The Stock Chart supports six series types: `Line`, `Spline`, `Hilo`, `HiloOpenClose`, `Hollow Candle`, and `Candle`. Use the series selector to switch between these types during interaction. diff --git a/chart-sdk/blazor/stock-chart/stock-events.md b/chart-sdk/blazor/stock-chart/stock-events.md index 2bba4ad54..dad377a1f 100644 --- a/chart-sdk/blazor/stock-chart/stock-events.md +++ b/chart-sdk/blazor/stock-chart/stock-events.md @@ -1,13 +1,13 @@ --- layout: post -title: Stock Events in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn how to configure and customize stock events in the Blazor Stock Chart component and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Stock Events | Syncfusion® +description: Learn how to mark notable dates on the Blazor Stock Chart with stock events using custom text, flag shapes, colors, and descriptions. +platform: Blazor +control: Stock Chart documentation: ug --- -# Stock Events in Blazor Stock Chart Component +# Blazor Stock Chart Stock Events Stock events mark notable occurrences such as market open and close, highest or lowest price, and quarter or year boundaries on specific dates. In this section, **SplineSeries** is used to represent selected data values. Specific data values can be customized using `StockEvents`. diff --git a/chart-sdk/blazor/stock-chart/technical-indicators.md b/chart-sdk/blazor/stock-chart/technical-indicators.md index 82b15f88d..92f68930e 100644 --- a/chart-sdk/blazor/stock-chart/technical-indicators.md +++ b/chart-sdk/blazor/stock-chart/technical-indicators.md @@ -1,15 +1,15 @@ --- layout: post -title: Technical Indicators in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn about technical indicators available in the Blazor Stock Chart component and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Technical Indicators | Syncfusion® +description: Learn how to add 10 technical indicators to the Blazor Stock Chart. Includes EMA, SMA, ATR, MACD, RSI, Momentum, Stochastic, and Bollinger Band. +platform: Blazor +control: Stock Chart documentation: ug --- -# Technical Indicators in Blazor Stock Chart Component +# Blazor Stock Chart Technical Indicators A technical indicator is a mathematical calculation based on historical price, volume, or open interest information that aims to forecast financial market direction. diff --git a/chart-sdk/blazor/stock-chart/tool-tip.md b/chart-sdk/blazor/stock-chart/tool-tip.md index f0792d9c7..afc0e2c61 100644 --- a/chart-sdk/blazor/stock-chart/tool-tip.md +++ b/chart-sdk/blazor/stock-chart/tool-tip.md @@ -1,13 +1,13 @@ --- layout: post -title: Tooltip in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn how to configure and customize tooltip in the Blazor Stock Chart component and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Tooltip | Syncfusion® +description: Learn how to show a hover tooltip on the Blazor Stock Chart with formatted values for a single point or shared series. +platform: Blazor +control: Stock Chart documentation: ug --- -# Tooltip in Blazor Stock Chart Component +# Blazor Stock Chart Tooltip @@ -209,4 +209,4 @@ By default, the tooltip aligns to the left side of the Stock Chart. To move the ![Blazor Stock Chart with moving tooltip](images/common/blazor-stock-chart-moving-tooltip.webp) -N> Refer to the [Blazor Stock Charts](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for a summary of key features and explore the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to learn about chart types and time based data visualization at equal intervals. +N> Refer to the [Blazor Stock Charts](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for a summary of key features and explore the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=fluent2) to learn about chart types and time based data visualization at equal intervals. diff --git a/chart-sdk/blazor/stock-chart/trend-lines.md b/chart-sdk/blazor/stock-chart/trend-lines.md index 7be0aab1c..a304294b6 100644 --- a/chart-sdk/blazor/stock-chart/trend-lines.md +++ b/chart-sdk/blazor/stock-chart/trend-lines.md @@ -1,13 +1,13 @@ --- layout: post -title: Trendlines in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn how to configure and customize trendlines in the Blazor Stock Chart component and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Trendlines | Syncfusion® +description: Learn how to add trendlines to the Blazor Stock Chart — Linear, Exponential, Logarithmic, Polynomial, Power, or Moving Average. +platform: Blazor +control: Stock Chart documentation: ug --- -# Trendlines in Blazor Stock Chart Component +# Blazor Stock Chart Trendlines Trendlines illustrate the direction and speed of price movement. The Stock Chart supports six trendline types: `Linear`, `Exponential`, `Logarithmic`, `Polynomial`, `Power`, and `Moving Average`. Using the trendline dropdown button, the required trendline type can be added or removed. diff --git a/chart-sdk/blazor/stock-chart/working-with-data.md b/chart-sdk/blazor/stock-chart/working-with-data.md index 9992ca2cd..d67c77954 100644 --- a/chart-sdk/blazor/stock-chart/working-with-data.md +++ b/chart-sdk/blazor/stock-chart/working-with-data.md @@ -1,15 +1,15 @@ --- layout: post -title: Working with Data in Blazor Stock Chart Component | Syncfusion® -description: Checkout and learn how to bind data to the Blazor Stock Chart using lists, Dynamic Objects and much more details. -platform: chart-sdk -control: Stock Chart +title: Blazor Stock Chart Working with Data | Syncfusion® +description: Learn how to bind data to the Blazor Stock Chart using a list of business objects, SfDataManager, or remote RESTful JSON services. +platform: Blazor +control: Stock Chart documentation: ug --- -# Working with Data in Blazor Stock Chart Component +# Blazor Stock Chart Working with Data The Stock Chart uses [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which supports RESTful JSON services and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) can be set using either the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) component or a list of business objects. @@ -203,7 +203,7 @@ Stock Chart supports **DynamicObject** as a data source when the model type is u ### Binding with OData v4 services -The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can retrieve and consume OData v4 services, an upgraded version of the OData protocol. Refer to the [OData documentation](http://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html#_Toc453752197) for additional information. To bind an OData v4 service, use **ODataV4Adaptor**. +The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can retrieve and consume OData v4 services, an upgraded version of the OData protocol. Refer to the [OData documentation](https://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html) for additional information. To bind an OData v4 service, use **ODataV4Adaptor**. ```cshtml diff --git a/chart-sdk/blazor/stock-chart/zooming.md b/chart-sdk/blazor/stock-chart/zooming.md index 778d486c0..8e07c238b 100644 --- a/chart-sdk/blazor/stock-chart/zooming.md +++ b/chart-sdk/blazor/stock-chart/zooming.md @@ -1,13 +1,13 @@ --- layout: post -title: Zooming in Blazor Stock Chart Component | Syncfusion® -description: Check out and learn here all about Zooming functionality in the Blazor Stock Chart component and much more details. -platform: chart-sdk +title: Blazor Stock Chart Zooming | Syncfusion® +description: Learn how to zoom the Blazor Stock Chart with selection, mouse wheel, or pinch gestures using EnableSelectionZooming and EnableMouseWheelZooming. +platform: Blazor control: Stock Chart documentation: ug --- -# Zooming in Blazor Stock Chart Component +# Blazor Stock Chart Zooming ## Enable zooming @@ -362,4 +362,4 @@ Set [EnableAutoIntervalOnZooming](https://help.syncfusion.com/cr/blazor/Syncfusi ![Auto Interval on Zooming in Blazor Area Chart](images/zooming/stock-chart-autointerval.webp) -N> Refer to the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for feature overviews and the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=bootstrap5) to explore chart types and time based data representation. +N> Refer to the [Blazor Stock Chart](https://www.syncfusion.com/blazor-components/blazor-stock-chart) feature tour page for feature overviews and the [Blazor Stock Chart example](https://blazor.syncfusion.com/demos/stock-chart/stock-chart?theme=fluent2) to explore chart types and time based data representation. diff --git a/chart-sdk/blazor/treemap/accessibility.md b/chart-sdk/blazor/treemap/accessibility.md index 0c7d16ee5..20ed94711 100644 --- a/chart-sdk/blazor/treemap/accessibility.md +++ b/chart-sdk/blazor/treemap/accessibility.md @@ -1,13 +1,13 @@ --- layout: post -title: Accessibility in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Accessibility in Syncfusion Blazor TreeMap component and much more. -platform: chart-sdk +title: Blazor TreeMap Accessibility | Syncfusion® +description: Learn how to make the Blazor TreeMap accessible with WAI-ARIA roles, screen-reader support for labels and legends, and full keyboard navigation. +platform: Blazor control: TreeMap documentation: ug --- -# Accessibility in Blazor TreeMap Component +# Blazor TreeMap Accessibility The [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component follows commonly used accessibility guidelines and standards, such as [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). diff --git a/chart-sdk/blazor/treemap/color-mapping.md b/chart-sdk/blazor/treemap/color-mapping.md index 7fb9c67cf..92380128c 100644 --- a/chart-sdk/blazor/treemap/color-mapping.md +++ b/chart-sdk/blazor/treemap/color-mapping.md @@ -1,13 +1,13 @@ --- layout: post -title: Color Mapping in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Color Mapping in Syncfusion Blazor TreeMap component and much more. -platform: chart-sdk +title: Blazor TreeMap Color Mapping | Syncfusion® +description: Learn how to apply Range, Equal, Desaturation, Palette, and data-bound color mapping to Blazor TreeMap items using TreeMapLeafColorMapping. +platform: Blazor control: TreeMap documentation: ug --- -# Color Mapping in Blazor TreeMap Component +# Blazor TreeMap Color Mapping Color mapping is used to customize the color for each group or item based on the specified types. The following options are available to customize the group and leaf items in the TreeMap component. diff --git a/chart-sdk/blazor/treemap/data-binding.md b/chart-sdk/blazor/treemap/data-binding.md index afc5211c2..4267940e2 100644 --- a/chart-sdk/blazor/treemap/data-binding.md +++ b/chart-sdk/blazor/treemap/data-binding.md @@ -1,13 +1,13 @@ --- layout: post -title: Data Binding in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Data Binding in Syncfusion Blazor TreeMap component and much more. -platform: chart-sdk +title: Blazor TreeMap Data Binding | Syncfusion® +description: Learn how to bind flat, hierarchical, and remote data to the Blazor TreeMap using DataSource, WeightValuePath, and Entity Framework. +platform: Blazor control: TreeMap documentation: ug --- -# Data Binding in Blazor TreeMap Component +# Blazor TreeMap Data Binding ## Populate data @@ -267,7 +267,7 @@ N> Refer the data values for [product_growth](https://www.syncfusion.com/downloa ## Remote data -To interact with the remote data source, provide the endpoint [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) within the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) class along with an appropriate [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). By default, the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) uses [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors/#odata-adaptor) for remote data-binding. +To interact with the remote data source, provide the endpoint [Url](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html#Syncfusion_Blazor_DataManager_Url) within the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) class along with an appropriate [Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors). By default, the [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) uses [ODataAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#odata-adaptor) for remote data-binding. N> If [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html) is used for data binding then the **TValue** must be provided explicitly to the TreeMap component. @@ -345,7 +345,7 @@ N> For more details on OData V4 services, refer to the [OData documentation](htt ### Web API -Use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors/?no-cache=1#web-api-adaptor) to bind TreeMap with Web API, created using OData endpoint. +Use [WebApiAdaptor](https://blazor.syncfusion.com/documentation/data/adaptors#web-api-adaptor) to bind TreeMap with Web API, created using OData endpoint. ```cshtml @using Syncfusion.Blazor.TreeMap diff --git a/chart-sdk/blazor/treemap/drill-down.md b/chart-sdk/blazor/treemap/drill-down.md index 905e52366..e05d734dc 100644 --- a/chart-sdk/blazor/treemap/drill-down.md +++ b/chart-sdk/blazor/treemap/drill-down.md @@ -1,13 +1,13 @@ --- layout: post -title: Drill-down in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Drill-down in Syncfusion Blazor TreeMap component and much more details. -platform: chart-sdk +title: Blazor TreeMap Drill-down | Syncfusion® +description: Learn how to enable drill-down in the Blazor TreeMap with on-demand child loading, breadcrumb navigation, and an initial drill-in path. +platform: Blazor control: TreeMap documentation: ug --- -# Drill-down in Blazor TreeMap Component +# Blazor TreeMap Drill-down The [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component supports drill-down to expose the hierarchy, achieved by clicking a node. If an item is clicked in the TreeMap, it will be moved to the next level or sub level hierarchy and returned back to the previous level by clicking the node. diff --git a/chart-sdk/blazor/treemap/events.md b/chart-sdk/blazor/treemap/events.md index e4bfc97ef..18e087b41 100644 --- a/chart-sdk/blazor/treemap/events.md +++ b/chart-sdk/blazor/treemap/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Events in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Events in Syncfusion Blazor TreeMap component and much more details. -platform: chart-sdk +title: Blazor TreeMap Events | Syncfusion® +description: Learn how to handle Blazor TreeMap events such as Load, Loaded, ItemSelected, ItemRendering, OnClick, DrillCompleted, and TooltipRendering. +platform: Blazor control: TreeMap documentation: ug --- -# Events in Blazor TreeMap Component +# Blazor TreeMap Events ## ItemHighlighted diff --git a/chart-sdk/blazor/treemap/getting-started-webapp.md b/chart-sdk/blazor/treemap/getting-started-webapp.md index a882a7743..b58c4d187 100644 --- a/chart-sdk/blazor/treemap/getting-started-webapp.md +++ b/chart-sdk/blazor/treemap/getting-started-webapp.md @@ -1,46 +1,52 @@ --- layout: post -title: Getting started with Syncfusion TreeMap Component in Blazor Web App -description: Check out the documentation for getting started with Syncfusion Blazor TreeMap Component Components in Blazor Web App. -platform: chart-sdk -control: TreeMap +title: Getting Started with Blazor TreeMap in Web App | Syncfusion® +description: Learn how to set up the Blazor TreeMap in a Blazor Web App, install the NuGet package, register AddSyncfusionBlazor, and render the component. +platform: Blazor +component: TreeMap documentation: ug --- -# Getting Started with Blazor TreeMap in Blazor Web App +# Getting Started with Blazor TreeMap in Web App -This section briefly explains about how to include [Syncfusion® Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor Web App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor Web App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor Web App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +Run the following command to create a new Blazor Web App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazor -o BlazorWebApp --interactivity Auto +cd BlazorWebApp +cd BlazorWebApp.Client -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor Web App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands in the integrated terminal (Ctrl+`): +Run the following command to create a new Blazor Web App. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Command Prompt" %} -dotnet new blazor -o BlazorWebApp -int Auto +dotnet new blazor -o BlazorWebApp --interactivity Auto cd BlazorWebApp cd BlazorWebApp.Client @@ -49,66 +55,69 @@ cd BlazorWebApp.Client {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} + +N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). + +## Install the required Blazor packages + +Install [Syncfusion.Blazor.TreeMap](https://www.nuget.org/packages/Syncfusion.Blazor.TreeMap) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install these packages in the `.Client` project. + +{% tabcontents %} + +{% tabcontent Visual Studio %} -## Prerequisites +1. Go to *Tools → NuGet Package Manager → Manage NuGet Package for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.TreeMap`) and install them. -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Alternatively, you can install the same package using the Package Manager Console with the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.TreeMap -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor Web App using .NET CLI +{% endtabcontent %} -Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. +{% tabcontent Visual Studio Code %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +Open the terminal and run the following command. {% tabs %} -{% highlight c# tabtitle="Blazor Web App" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazor -o BlazorWebApp -int Auto -cd BlazorWebApp -cd BlazorWebApp.Client +dotnet add package Syncfusion.Blazor.TreeMap -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -N> Configure the appropriate [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-10.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) while creating a Blazor Web App. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). - -## Install Syncfusion® Blazor packages - -Install [Syncfusion.Blazor.TreeMap](https://www.nuget.org/packages/Syncfusion.Blazor.TreeMap) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following command in the Package Manager Console to achieve the same. +Open the command prompt and run the following command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.TreeMap -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.TreeMap -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. +{% endtabcontent %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontents %} ## Add import namespaces -After the packages are installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeMap` namespaces. +After the packages are installed, open the **~/_Imports.razor** file in the `.Client` project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeMap` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.TreeMap @@ -116,9 +125,9 @@ After the packages are installed, open the **~/_Imports.razor** file in the clie {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register the Blazor service -Register the Syncfusion Blazor service in the **Program.cs** file of your Blazor Web App. +Open the **Program.cs** file in Blazor Web App and register the Blazor service. If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. {% tabs %} {% highlight c# tabtitle="Program.cs" %} @@ -132,41 +141,30 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -N> If the **Interactive Render Mode** is set to `WebAssembly` or `Auto`, register the Syncfusion® Blazor service in **Program.cs** files of both the server and client projects in your Blazor Web App. +## Add script resource -## Add script resources +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~/Components/App.razor** file. -The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the script reference in the **~/Components/App.razor** file. - -```html +{% tabs %} +{% highlight razor tabtitle="App.razor" %} -``` - -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. - -## Add Syncfusion® Blazor TreeMap component - -Add the Syncfusion® Blazor TreeMap component in the **~/Components/Pages/*.razor** file. If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the `~/Pages/*.razor` file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). - -N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. +{% endhighlight %} +{% endtabs %} -{% tabs %} -{% highlight razor %} +## Add Blazor TreeMap component -@* desired render mode define here *@ -@rendermode InteractiveAuto +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component inside the razor `.Client` project file. -{% endhighlight %} -{% endtabs %} +N> If the interactivity location is set to `Per page/component` in the Web App, define a render mode at the top of the razor file. (For example, `InteractiveServer`, `InteractiveWebAssembly` or `InteractiveAuto`). If the **Interactivity** is set to `Global` with `Auto` or `WebAssembly`, the render mode is automatically configured in the `App.razor` file by default. * You can use the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DataSource) property to load the car sales details in the TreeMap component. Specify a field name from the data source in the [WeightValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_WeightValuePath) property to calculate the TreeMap item size. {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@using Syncfusion.Blazor.TreeMap +@rendermode InteractiveAuto If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeMap component in the default web browser. +**Run the application** + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor TreeMap component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLzNCgtfcrsSecB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap Component](images/blazor-treemap.webp)" %} +{% tabcontent .NET CLI %} + +Open the command prompt and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +cd .. +cd BlazorWebApp +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVntmjRCLgxstyW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeMap Component](images/blazor-treemap.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeMap). @@ -222,7 +262,7 @@ Add label text to the leaf items in the TreeMap component by setting the field n N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBpXWUjTGrcfQex?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Label](images/blazor-treemap-with-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBdtwDHsVxDqALg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeMap with Label](images/blazor-treemap-with-label.webp)" %} ## Adding title to Blazor TreeMap @@ -245,7 +285,7 @@ Add a title using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVJNWgtfGUUNerG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Title](images/blazor-treemap-with-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrnXQZHChwRuaeD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeMap with Title](images/blazor-treemap-with-title.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeMap). @@ -276,7 +316,7 @@ The color mapping supports customization of item colors based on the underlying N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBpZWAjTGKvLKSK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Color Mapping](images/blazor-treemap-color-mapping.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBHXwXRCVYsKLTD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeMap with Color Mapping](images/blazor-treemap-color-mapping.webp)" %} ## Enable legend @@ -306,11 +346,11 @@ Legend items are used to denote the color mapping categories and show the legend N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBpDCqDJcJzjaSL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Legend](images/blazor-treemap-legend.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLdjQDdsgZxipny?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeMap with Legend](images/blazor-treemap-legend.webp)" %} ## Enable tooltip -When space constraints prevents from displaying information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Visible) property to **true** in the [TreeMapTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html). +When space constraints prevent displaying information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Visible) property to **true** in the [TreeMapTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -337,14 +377,11 @@ When space constraints prevents from displaying information using data labels, t N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBJXCUDJGTEuBNf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Tooltip](images/blazor-treemap-tooltip.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrHZwXnCULNBToQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeMap with Tooltip](images/blazor-treemap-tooltip.webp)" %} -N> You can also explore our [Blazor TreeMap example](https://blazor.syncfusion.com/demos/treemap/default-functionalities?theme=bootstrap5) that shows you how to render and configure the treemap. +N> You can also explore our [Blazor TreeMap example](https://blazor.syncfusion.com/demos/treemap/default-functionalities?theme=fluent2) that shows you how to render and configure the treemap. ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) - -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) - -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) \ No newline at end of file +1. [Getting Started with Blazor WebAssembly App](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) +2. [Getting Started with Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) diff --git a/chart-sdk/blazor/treemap/getting-started.md b/chart-sdk/blazor/treemap/getting-started.md index b59d70ad2..daa0dd440 100644 --- a/chart-sdk/blazor/treemap/getting-started.md +++ b/chart-sdk/blazor/treemap/getting-started.md @@ -1,108 +1,119 @@ --- layout: post -title: Getting Stared with Blazor TreeMap Component | Syncfusion -description: Checkout and learn about getting started with Blazor TreeMap component in Blazor WebAssembly Application. -platform: chart-sdk -control: TreeMap +title: Getting Started with Blazor TreeMap in WebAssembly App | Syncfusion® +description: Learn how to add the Blazor TreeMap to a Blazor WebAssembly App, install the NuGet package, register services, and bind a DataSource. +platform: Blazor +component: TreeMap documentation: ug --- -# Getting Started with Blazor TreeMap Component +# Getting Started with Blazor TreeMap in WebAssembly App -This section briefly explains about how to include [Syncfusion® Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). +This section briefly explains how to include the [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/). + +## Create a new Blazor WebAssembly App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites +Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WebAssembly App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +{% endtabcontent %} -## Create a new Blazor App in Visual Studio +{% tabcontent Visual Studio Code %} -Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation. +Run the following command to create a new Blazor WebAssembly App. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% tabcontent Visual Studio Code %} +dotnet new blazorwasm -o BlazorApp +cd BlazorApp -## Prerequisites +{% endhighlight %} +{% endtabs %} -* [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) +Alternatively, create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc), the [Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project), or the [C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit) extension. -## Create a new Blazor App in Visual Studio Code +{% endtabcontent %} -Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation. +{% tabcontent .NET CLI %} -Alternatively, create a WebAssembly application by using the following command in the integrated terminal (Ctrl+`). +Run the following command to create a new Blazor WebAssembly App. {% tabs %} - -{% highlight c# tabtitle="Blazor WASM App" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet new blazorwasm -o BlazorApp cd BlazorApp {% endhighlight %} - {% endtabs %} {% endtabcontent %} -{% tabcontent .NET CLI %} +{% endtabcontents %} + +## Install the required Blazor package -## Prerequisites +Install [Syncfusion.Blazor.TreeMap](https://www.nuget.org/packages/Syncfusion.Blazor.TreeMap/) NuGet package. All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +{% tabcontents %} + +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.TreeMap`) and install it. + +Alternatively, you can install the same package using the Package Manager Console with the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.TreeMap -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -## Create a Blazor WebAssembly App using .NET CLI +{% endtabcontent %} -Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation. +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +dotnet add package Syncfusion.Blazor.TreeMap -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install Syncfusion® Blazor packages - -Install [Syncfusion.Blazor.TreeMap](https://www.nuget.org/packages/Syncfusion.Blazor.TreeMap/) NuGet package in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI. +{% tabcontent .NET CLI %} -Alternatively, run the following command in the Package Manager Console to achieve the same. +Open the command prompt and run the following command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.TreeMap -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.TreeMap -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontent %} + +{% endtabcontents %} ## Add import namespaces After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.TreeMap` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.TreeMap @@ -110,12 +121,12 @@ After the package is installed, open the **~/_Imports.razor** file and import th {% endhighlight %} {% endtabs %} -## Register Syncfusion® Blazor service +## Register the Blazor service -Register the Syncfusion® Blazor service in the **Program.cs** file of your Blazor WebAssembly App. +Open the **Program.cs** file in Blazor WebAssembly App and register the Blazor service. {% tabs %} -{% highlight C# tabtitle="Program.cs" %} +{% highlight c# tabtitle="Program.cs" %} .... using Syncfusion.Blazor; @@ -128,24 +139,24 @@ builder.Services.AddSyncfusionBlazor(); ## Add script resources -The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include script reference in the **~/index.html** file. +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **~wwwroot/index.html** file. -```html +{% tabs %} +{% highlight html tabtitle="index.html" %} -``` - -N> Check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Syncfusion® Blazor TreeMap component +## Add Blazor TreeMap component -Add the Syncfusion® Blazor TreeMap component in the **~/Pages/Index.razor** file. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component inside the razor file. * You can use the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_DataSource) property to load the car sales details in the TreeMap component. Specify a field name from the data source in the [WeightValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_WeightValuePath) property to calculate the TreeMap item size. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.TreeMap @@ -177,16 +188,54 @@ Add the Syncfusion® Blazor TreeMap componen {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor TreeMap component in the default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor TreeMap component will render in your default web browser. + +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLzNCgtfcrsSecB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap Component](images/blazor-treemap.webp)" %} +{% endtabcontents %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhxNGjdWqATgBCz?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeMap Component](images/blazor-treemap.webp)" %} ## Adding labels in Blazor TreeMap items Add label text to the leaf items in the TreeMap component by setting the field name from data source in the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelPath) property in the [TreeMapLeafItemSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html), and it provides information to the user about the leaf items. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.TreeMap @@ -201,14 +250,14 @@ Add label text to the leaf items in the TreeMap component by setting the field n N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBpXWUjTGrcfQex?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Label](images/blazor-treemap-with-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBRDQNHiAAleuju?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeMap with Label](images/blazor-treemap-with-label.webp)" %} ## Adding title to Blazor TreeMap Add a title using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTitleSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTitleSettings_Text) property in the [TreeMapTitleSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTitleSettings.html) to provide quick information to the user about the items rendered in the TreeMap. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.TreeMap @@ -224,7 +273,7 @@ Add a title using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl N> Refer to the [code block](#adding-treemap-component) to know the property value of the **GrowthReport**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVJNWgtfGUUNerG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Title](images/blazor-treemap-with-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhnDQjRigJrxUfC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeMap with Title](images/blazor-treemap-with-title.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TreeMap). @@ -233,7 +282,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- The color mapping supports customization of item colors based on the underlying value received from the bound data source. Specify the field name from which the values have to be compared for the items in the [RangeColorValuePath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_RangeColorValuePath) property in [SfTreeMap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html). Also, specify range value and color in the [TreeMapLeafColorMapping](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafColorMapping.html). Here, in this example, **"Orange"** is specified for the range **"0 - 3000"** and **"Green"** is specified for the range **"3000 - 20000"**. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.TreeMap @@ -255,14 +304,14 @@ The color mapping supports customization of item colors based on the underlying N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBpZWAjTGKvLKSK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Color Mapping](images/blazor-treemap-color-mapping.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrRtcDdiAfxvily?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeMap with Color Mapping](images/blazor-treemap-color-mapping.webp)" %} ## Enable legend Legend items are used to denote the color mapping categories and show the legend for the TreeMap by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLegendSettings_Visible) property to **true** in the [TreeMapLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLegendSettings.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.TreeMap @@ -285,14 +334,14 @@ Legend items are used to denote the color mapping categories and show the legend N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBpDCqDJcJzjaSL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Legend](images/blazor-treemap-legend.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhnXmtniASiNaiR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeMap with Legend](images/blazor-treemap-legend.webp)" %} ## Enable tooltip -When space constraints prevents from displaying information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Visible) property to **true** in the [TreeMapTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html). +When space constraints prevent displaying information using data labels, the tooltip comes in handy. The tooltip can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Visible) property to **true** in the [TreeMapTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.TreeMap @@ -316,14 +365,11 @@ When space constraints prevents from displaying information using data labels, t N> Refer to the [code block](#adding-treemap-component) to know about the property value of the **GrowthReport**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBJXCUDJGTEuBNf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TreeMap with Tooltip](images/blazor-treemap-tooltip.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLxXGDRsUSSvBHh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor TreeMap with Tooltip](images/blazor-treemap-tooltip.webp)" %} -N> You can also explore our [Blazor TreeMap example](https://blazor.syncfusion.com/demos/treemap/default-functionalities?theme=bootstrap5) that shows you how to render and configure the treemap. +N> You can also explore our [Blazor TreeMap example](https://blazor.syncfusion.com/demos/treemap/default-functionalities?theme=fluent2) that shows you how to render and configure the treemap. ## See also -* [Getting Started with Syncfusion® Blazor for Client-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-dotnet-cli) - -* [Getting Started with Syncfusion® Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) - -* [Getting Started with Syncfusion® Blazor for Server-Side in .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-dotnet-cli) +1. [Getting Started with Blazor for Blazor Server App](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) +2. [Getting Started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/chart-sdk/blazor/treemap/how-to/place-treemap-inside-other-components.md b/chart-sdk/blazor/treemap/how-to/place-treemap-inside-other-components.md index 915bdd60b..e1cb1d392 100644 --- a/chart-sdk/blazor/treemap/how-to/place-treemap-inside-other-components.md +++ b/chart-sdk/blazor/treemap/how-to/place-treemap-inside-other-components.md @@ -1,13 +1,13 @@ --- layout: post -title: How to place TreeMap component inside other components | Syncfusion -description: Learn here about how to place the TreeMap inside other components like Dashboard Layout, Tab, Dialog and Accordion. -platform: chart-sdk +title: Place TreeMap inside other components | Syncfusion® +description: Learn how to render the Blazor TreeMap inside Dashboard Layout, Tabs, Dialog, and Accordion by deferring rendering until the host is ready. +platform: Blazor control: TreeMap documentation: ug --- -# Render TreeMap component inside other components +# How to Place TreeMap inside other components The TreeMap can be rendered within components such as the Dashboard Layout, Tabs, Dialog, and others. In general, the TreeMap component renders before other components, so a boolean variable (i.e. boolean flag) is used to determine when to begin rendering the TreeMap component. @@ -276,7 +276,7 @@ When you drag and resize the Dashboard Layout panel or resize the window, the Tr } ``` -![Blazor TreeMap inside Dashboard Layout component](../images/blazor-TreeMap-with-dashboard-layout.png) +![Blazor TreeMap inside Dashboard Layout component](../images/blazor-TreeMap-with-dashboard-layout.webp) ## TreeMap component inside Tab @@ -520,7 +520,7 @@ When the TreeMap component renders within the Tab component, its rendering begin } ``` -![Blazor TreeMap inside Tab component](../images/blazor-TreeMap-with-tab.png) +![Blazor TreeMap inside Tab component](../images/blazor-TreeMap-with-tab.webp) ## TreeMap component inside Dialog @@ -647,7 +647,7 @@ When you drag and resize the Dialog component, the TreeMap component is not noti } ``` -![Blazor TreeMap inside Dialog component](../images/blazor-TreeMap-with-dialog.png) +![Blazor TreeMap inside Dialog component](../images/blazor-TreeMap-with-dialog.webp) ## TreeMap component inside Accordion @@ -931,4 +931,4 @@ When you expand the Accordion component, the TreeMap component is not notified, } ``` -![Blazor TreeMap inside Accordion component](../images/blazor-TreeMap-with-accordion.png) \ No newline at end of file +![Blazor TreeMap inside Accordion component](../images/blazor-TreeMap-with-accordion.webp) \ No newline at end of file diff --git a/chart-sdk/blazor/treemap/images/blazor-treemap-color-mapping.webp b/chart-sdk/blazor/treemap/images/blazor-treemap-color-mapping.webp index fd9effb7d..9e50c7a90 100644 Binary files a/chart-sdk/blazor/treemap/images/blazor-treemap-color-mapping.webp and b/chart-sdk/blazor/treemap/images/blazor-treemap-color-mapping.webp differ diff --git a/chart-sdk/blazor/treemap/images/blazor-treemap-legend.webp b/chart-sdk/blazor/treemap/images/blazor-treemap-legend.webp index 9535eb405..4f0873540 100644 Binary files a/chart-sdk/blazor/treemap/images/blazor-treemap-legend.webp and b/chart-sdk/blazor/treemap/images/blazor-treemap-legend.webp differ diff --git a/chart-sdk/blazor/treemap/images/blazor-treemap-tooltip.webp b/chart-sdk/blazor/treemap/images/blazor-treemap-tooltip.webp index b21d1d724..33b9d7f4d 100644 Binary files a/chart-sdk/blazor/treemap/images/blazor-treemap-tooltip.webp and b/chart-sdk/blazor/treemap/images/blazor-treemap-tooltip.webp differ diff --git a/chart-sdk/blazor/treemap/images/blazor-treemap-with-label.webp b/chart-sdk/blazor/treemap/images/blazor-treemap-with-label.webp index 574b3ac66..5b988d7de 100644 Binary files a/chart-sdk/blazor/treemap/images/blazor-treemap-with-label.webp and b/chart-sdk/blazor/treemap/images/blazor-treemap-with-label.webp differ diff --git a/chart-sdk/blazor/treemap/images/blazor-treemap-with-title.webp b/chart-sdk/blazor/treemap/images/blazor-treemap-with-title.webp index 89d22e7f8..899239a67 100644 Binary files a/chart-sdk/blazor/treemap/images/blazor-treemap-with-title.webp and b/chart-sdk/blazor/treemap/images/blazor-treemap-with-title.webp differ diff --git a/chart-sdk/blazor/treemap/images/blazor-treemap.webp b/chart-sdk/blazor/treemap/images/blazor-treemap.webp index 2a7090b3c..6f7b2fc33 100644 Binary files a/chart-sdk/blazor/treemap/images/blazor-treemap.webp and b/chart-sdk/blazor/treemap/images/blazor-treemap.webp differ diff --git a/chart-sdk/blazor/treemap/internationalization.md b/chart-sdk/blazor/treemap/internationalization.md index f8161ac4c..d8a0794e5 100644 --- a/chart-sdk/blazor/treemap/internationalization.md +++ b/chart-sdk/blazor/treemap/internationalization.md @@ -1,13 +1,13 @@ --- layout: post -title: Globalization in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Globalization in Syncfusion Blazor TreeMap component and much more. -platform: chart-sdk +title: Blazor TreeMap Internationalization | Syncfusion® +description: Learn how to localize the Blazor TreeMap by formatting numbers, dates, and times for different cultures using the Format property. +platform: Blazor control: TreeMap documentation: ug --- -# Globalization in Blazor TreeMap Component +# Blazor TreeMap Internationalization The [Blazor TreeMap](https://www.syncfusion.com/blazor-components/blazor-treemap) component supports globalization for the following elements: @@ -49,6 +49,6 @@ In the following code example, tooltip and Data Label is globalized to currency } ``` -N> Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Syncfusion® Blazor components. +N> Refer to [Blazor Localization](https://blazor.syncfusion.com/documentation/common/localization) topic to localize Blazor components. ![Localization in Blazor TreeMap](images/Internationalization/blazor-treemap-localization.webp) \ No newline at end of file diff --git a/chart-sdk/blazor/treemap/labels.md b/chart-sdk/blazor/treemap/labels.md index c95215305..e1b14d421 100644 --- a/chart-sdk/blazor/treemap/labels.md +++ b/chart-sdk/blazor/treemap/labels.md @@ -1,13 +1,13 @@ --- layout: post -title: Labels in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Labels in Syncfusion Blazor TreeMap component and much more details. -platform: chart-sdk +title: Blazor TreeMap Labels | Syncfusion® +description: Learn how to display and format data labels on Blazor TreeMap items using LabelPath, LabelFormat, and LabelPosition. +platform: Blazor control: TreeMap documentation: ug --- -# Labels in Blazor TreeMap Component +# Blazor TreeMap Labels Data Labels are used to identify the name of items or groups in the TreeMap component. Data Labels will be shown by specifying the data source properties in the [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelPath) of the [TreeMapLeafItemSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html). diff --git a/chart-sdk/blazor/treemap/layout.md b/chart-sdk/blazor/treemap/layout.md index 882082d7f..55660a694 100644 --- a/chart-sdk/blazor/treemap/layout.md +++ b/chart-sdk/blazor/treemap/layout.md @@ -1,13 +1,13 @@ --- layout: post -title: Layout in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Layout in Syncfusion Blazor TreeMap component and much more details. -platform: chart-sdk +title: Blazor TreeMap Layout | Syncfusion® +description: Learn how to choose Squarified, SliceAndDiceVertical, SliceAndDiceHorizontal, or SliceAndDiceAuto layout in the Blazor TreeMap with rendering direction. +platform: Blazor control: TreeMap documentation: ug --- -# Layout in Blazor TreeMap Component +# Blazor TreeMap Layout Determine the visual representation of nodes belonging to all the TreeMap levels using the [LayoutType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_LayoutType) property. @@ -22,7 +22,7 @@ The available layout types are, ### Squarified -The [Squarified](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html#Syncfusion_Blazor_TreeMap_LayoutMode_Squarified) layout displays the nested rectangles based on aspect ratio in the TreeMap. The rectangles will be split based on the height and width of the parent. The default rendering type of the layout is [Squarified](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html). +The [Squarified](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html#Syncfusion_Blazor_TreeMap_LayoutMode_Squarified) layout displays the nested rectangles based on aspect ratio in the TreeMap. The rectangles will be split based on the height and width of the parent. The default rendering type of the layout is [Squarified](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html). ```cshtml @using Syncfusion.Blazor.TreeMap @@ -57,7 +57,7 @@ The [Squarified](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap ### Slice and dice vertical -The [SliceAndDiceVertical](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html) layout creates rectangles with high aspect ratio and displays items in a vertically sorted order. +The [SliceAndDiceVertical](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html) layout creates rectangles with high aspect ratio and displays items in a vertically sorted order. ```cshtml @using Syncfusion.Blazor.TreeMap; @@ -72,7 +72,7 @@ N> Refer to the [code block](#squarified) to know about the property value of th ### Slice and dice horizontal -The [SliceAndDiceHorizontal](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html) layout creates rectangles with high aspect ratio and displays items in a horizontally sorted order. +The [SliceAndDiceHorizontal](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html) layout creates rectangles with high aspect ratio and displays items in a horizontally sorted order. ```cshtml @using Syncfusion.Blazor.TreeMap; @@ -87,7 +87,7 @@ N> Refer to the [code block](#squarified) to know about the property value of th ### Slice and dice auto -The [SliceAndDiceAuto](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html) layout creates rectangles with high aspect ratio and displays items sorted both horizontally and vertically. +The [SliceAndDiceAuto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.LayoutMode.html) layout creates rectangles with high aspect ratio and displays items sorted both horizontally and vertically. ```cshtml @using Syncfusion.Blazor.TreeMap; @@ -102,16 +102,16 @@ N> Refer to the [code block](#squarified) to know about the property value of th ## Rendering direction -The direction of the TreeMap item is [TopLeftBottomRight](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html) by default and customize the rendering direction of the TreeMap item by setting the [RenderDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_RenderDirection) property. +The direction of the TreeMap item is [TopLeftBottomRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html) by default and customize the rendering direction of the TreeMap item by setting the [RenderDirection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.SfTreeMap-1.html#Syncfusion_Blazor_TreeMap_SfTreeMap_1_RenderDirection) property. The TreeMap can be rendered in the following directions: -* [TopLeftBottomRight](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html), -* [TopRightBottomLeft](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html), -* [BottomRightTopLeft](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html) -* [BottomLeftTopRight](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html) +* [TopLeftBottomRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html), +* [TopRightBottomLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html), +* [BottomRightTopLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html) +* [BottomLeftTopRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html) -The following example shows, how to render the TreeMap in the RTL direction with [TopLeftBottomRight](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). +The following example shows, how to render the TreeMap in the RTL direction with [TopLeftBottomRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). ```csharp @using Syncfusion.Blazor.TreeMap; @@ -143,7 +143,7 @@ The following example shows, how to render the TreeMap in the RTL direction with ![Blazor TreeMap in TopLeftBottomRight Direction](images/Internationalization/blazor-treemap-top-left-bottom-right-direction.webp) -The following example shows, how to render the TreeMap in the RTL direction with [TopRightBottomLeft](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). +The following example shows, how to render the TreeMap in the RTL direction with [TopRightBottomLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). ```cshtml @using Syncfusion.Blazor.TreeMap; @@ -160,7 +160,7 @@ N> Refer to the [code block](#rendering-direction) to know about the property va ![Blazor TreeMap in TopRightBottomLeft Direction](images/Internationalization/blazor-treemap-top-right-bottom-left-direction.webp) -The following example shows, how to render the TreeMap in the RTL direction with [BottomRightTopLeft](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). +The following example shows, how to render the TreeMap in the RTL direction with [BottomRightTopLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). ```cshtml @using Syncfusion.Blazor.TreeMap; @@ -177,7 +177,7 @@ N> Refer to the [code block](#rendering-direction) to know about the property va ![Blazor TreeMap with BottomRightTopLeft Direction](images/Internationalization/blazor-treemap-bottom-right-top-left-direction.webp) -The following example shows, how to render the TreeMap in the RTL direction with [BottomLeftTopRight](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). +The following example shows, how to render the TreeMap in the RTL direction with [BottomLeftTopRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.RenderingMode.html). ```cshtml @using Syncfusion.Blazor.TreeMap; diff --git a/chart-sdk/blazor/treemap/leaf-item.md b/chart-sdk/blazor/treemap/leaf-item.md index b9d522762..b57809b17 100644 --- a/chart-sdk/blazor/treemap/leaf-item.md +++ b/chart-sdk/blazor/treemap/leaf-item.md @@ -1,27 +1,27 @@ --- layout: post -title: Leaf Item in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Leaf Item in Syncfusion Blazor TreeMap component and much more details. -platform: chart-sdk +title: Blazor TreeMap Leaf Item | Syncfusion® +description: Learn how to customize Blazor TreeMap leaf items using TreeMapLeafItemSettings with label, fill, border, padding, gap, and label template. +platform: Blazor control: TreeMap documentation: ug --- -# Leaf Item in Blazor TreeMap Component +# Blazor TreeMap Leaf Item A leaf item defines a visualized data element and does not contain child nodes but contains parent node if the levels are specified in the TreeMap. ## Customization -The following properties are available to customize the leaf item in the [TreeMapLeafItemSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html). +The following properties are available to customize the leaf item in the [TreeMapLeafItemSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html). * [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) - Represents the item name, which is available in the data source. * [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) - Specifies the fill color for the leaf items. * [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) - Specifies the opacity of leaf item fill color. * [ShowLabels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_ShowLabels) - Specifies the visibility of the leaf item label. * [Padding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) - Specifies the padding of leaf items * [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelTemplate) - Specifies the template of leaf item label and the position of the template to be customized using the [TemplatePosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_TemplatePosition) property. -* [TreeMapLeafLabelStyle](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafLabelStyle.html) - To customize the label color, opacity, font size, font family, font weight and font style. -* [TreeMapLeafBorder](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafBorder.html) - Specifies leaf item border color and width. +* [TreeMapLeafLabelStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafLabelStyle.html) - To customize the label color, opacity, font size, font family, font weight and font style. +* [TreeMapLeafBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafBorder.html) - Specifies leaf item border color and width. In the following example, the name of the property **CountryName** from data source is mapped to [LabelPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html) property, so corresponding country name will be displayed in the label. @@ -62,7 +62,7 @@ In the following example, the name of the property **CountryName** from data sou ## Label position and format -Positioning the leaf item label using the [LabelPosition](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.LabelPosition.html) property and the text format can be customized by specifying data source properties name in the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelFormat) property. +Positioning the leaf item label using the [LabelPosition](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelPosition) property and the text format can be customized by specifying data source properties name in the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLeafItemSettings.html#Syncfusion_Blazor_TreeMap_TreeMapLeafItemSettings_LabelFormat) property. ```cshtml @using Syncfusion.Blazor.TreeMap diff --git a/chart-sdk/blazor/treemap/legend.md b/chart-sdk/blazor/treemap/legend.md index 21f3a9e66..9d080aed7 100644 --- a/chart-sdk/blazor/treemap/legend.md +++ b/chart-sdk/blazor/treemap/legend.md @@ -1,13 +1,13 @@ --- layout: post -title: Legend in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Legend in Syncfusion Blazor TreeMap component and much more details. -platform: chart-sdk +title: Blazor TreeMap Legend | Syncfusion® +description: Learn how to add and customize the Blazor TreeMap legend with default or interactive modes, custom position, alignment, and paging. +platform: Blazor control: TreeMap documentation: ug --- -# Legend in Blazor TreeMap Component +# Blazor TreeMap Legend Legend is used to provide valuable information for interpreting what the TreeMap displays. The legends can be represented in various colors, shapes or other identifiers based on the data. diff --git a/chart-sdk/blazor/treemap/levels.md b/chart-sdk/blazor/treemap/levels.md index 903a18a53..a45b6ff7a 100644 --- a/chart-sdk/blazor/treemap/levels.md +++ b/chart-sdk/blazor/treemap/levels.md @@ -1,13 +1,13 @@ --- layout: post -title: Levels in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Levels in Syncfusion Blazor TreeMap component and much more details. -platform: chart-sdk +title: Blazor TreeMap Levels | Syncfusion® +description: Learn how to group Blazor TreeMap data into hierarchical levels using TreeMapLevel GroupPath, GroupGap, header height, and header style. +platform: Blazor control: TreeMap documentation: ug --- -# Levels in Blazor TreeMap Component +# Blazor TreeMap Levels TreeMap supports **n** number of levels and each level is separated by using the [GroupPath](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapLevel.html#Syncfusion_Blazor_TreeMap_TreeMapLevel_GroupPath) property. diff --git a/chart-sdk/blazor/treemap/methods.md b/chart-sdk/blazor/treemap/methods.md index a1c11e7de..24e7b1b24 100644 --- a/chart-sdk/blazor/treemap/methods.md +++ b/chart-sdk/blazor/treemap/methods.md @@ -1,13 +1,13 @@ --- layout: post -title: Methods in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Methods in Syncfusion Blazor TreeMap component and much more details. -platform: chart-sdk +title: Blazor TreeMap Methods | Syncfusion® +description: Learn how to call Blazor TreeMap methods like PrintAsync, ExportAsync, RefreshAsync, and SelectItemAsync through a @ref to control the component. +platform: Blazor control: TreeMap documentation: ug --- -# Methods in Blazor TreeMap Component +# Blazor TreeMap Methods Create an object for the TreeMap component using `@ref` property and call the desired TreeMap method. diff --git a/chart-sdk/blazor/treemap/print-and-export.md b/chart-sdk/blazor/treemap/print-and-export.md index a77c35f33..0236792a8 100644 --- a/chart-sdk/blazor/treemap/print-and-export.md +++ b/chart-sdk/blazor/treemap/print-and-export.md @@ -1,13 +1,13 @@ --- layout: post -title: Print and Export in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Print and Export in Syncfusion Blazor TreeMap component and much more. -platform: chart-sdk +title: Blazor TreeMap Print and Export | Syncfusion® +description: Learn how to print the Blazor TreeMap or export it as PNG, JPEG, SVG, or PDF using AllowPrint, AllowImageExport, AllowPdfExport, and ExportAsync. +platform: Blazor control: TreeMap documentation: ug --- -# Print and Export in Blazor TreeMap Component +# Blazor TreeMap Print and Export ## Print diff --git a/chart-sdk/blazor/treemap/selection-and-highlight.md b/chart-sdk/blazor/treemap/selection-and-highlight.md index ca276134d..8feffccc8 100644 --- a/chart-sdk/blazor/treemap/selection-and-highlight.md +++ b/chart-sdk/blazor/treemap/selection-and-highlight.md @@ -1,19 +1,19 @@ --- layout: post -title: Selection and Highlight in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Selection and Highlight in Syncfusion Blazor TreeMap component and more. -platform: chart-sdk +title: Blazor TreeMap Selection and Highlight | Syncfusion® +description: Learn how to select and highlight Blazor TreeMap items with TreeMapSelectionSettings and TreeMapHighlightSettings, and customize fill and border. +platform: Blazor control: TreeMap documentation: ug --- -# Selection and Highlight in Blazor TreeMap Component +# Blazor TreeMap Selection and Highlight ## Selection Selection is used to select a particular group or item to differentiate from other items. Each item or each group can be selected and deselected while interacting with the items. The corresponding Treemap items are also selected while tapping a specific legend item, and vice versa. -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html#Syncfusion_Blazor_TreeMap_TreeMapSelectionSettings_Fill) property is used to change the selected item color. The [Color](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionBorder.html) and the [Width](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionBorder.html) properties are used to customize the selected item border, and the selection is enabled by using the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html#Syncfusion_Blazor_TreeMap_TreeMapSelectionSettings_Enable) property to **true** in the [TreeMapSelectionSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html). +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html#Syncfusion_Blazor_TreeMap_TreeMapSelectionSettings_Fill) property is used to change the selected item color. The [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapBorderSettings.html#Syncfusion_Blazor_TreeMap_TreeMapBorderSettings_Color) and the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapBorderSettings.html#Syncfusion_Blazor_TreeMap_TreeMapBorderSettings_Width) properties are used to customize the selected item border, and the selection is enabled by using the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html#Syncfusion_Blazor_TreeMap_TreeMapSelectionSettings_Enable) property to **true** in the [TreeMapSelectionSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapSelectionSettings.html). ```cshtml @using Syncfusion.Blazor.TreeMap @@ -63,7 +63,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeM Highlight is used to highlight an item or group from other items or groups. Each item or each group can be highlighted by hovering the mouse over the items. The corresponding Treemap items are also highlighted while hovering over a specific legend item, and vice versa. -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightSettings_Fill) property is used to change the highlighted item color. The [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightBorder.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightBorder__ctor) and the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightBorder.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightBorder__ctor) properties are used to customize the highlighted item border, and the highlight is enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightSettings_Enable) property to **true** in the [TreeMapHighlightSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html). +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightSettings_Fill) property is used to change the highlighted item color. The [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightBorder.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightBorder__ctor) and the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightBorder.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightBorder__ctor) properties are used to customize the highlighted item border, and the highlight is enabled by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html#Syncfusion_Blazor_TreeMap_TreeMapHighlightSettings_Enable) property to **true** in the [TreeMapHighlightSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapHighlightSettings.html). ```cshtml @using Syncfusion.Blazor.TreeMap diff --git a/chart-sdk/blazor/treemap/style-appearance.md b/chart-sdk/blazor/treemap/style-appearance.md index c6100967a..7f77df136 100644 --- a/chart-sdk/blazor/treemap/style-appearance.md +++ b/chart-sdk/blazor/treemap/style-appearance.md @@ -1,13 +1,13 @@ --- layout: post -title: Style and Appearance in Blazor TreeMap Component | Syncfusion -description: Check out and learn about Style and Appearance customization in the Syncfusion Blazor TreeMap component. -platform: chart-sdk +title: Blazor TreeMap Style and Appearance | Syncfusion® +description: Learn how to style the Blazor TreeMap with CSS by targeting SVG IDs such as RectPath, Text, and Level/Item index selectors for per-item customization. +platform: Blazor control: TreeMap documentation: ug --- -# Style and Appearance in Blazor TreeMap Component +# Blazor TreeMap Style and Appearance Style and Appearance provide options to customize the visual design of the **Syncfusion Blazor TreeMap** component, ensuring consistency with your application’s branding and theme. diff --git a/chart-sdk/blazor/treemap/tooltip.md b/chart-sdk/blazor/treemap/tooltip.md index 6720e7d68..602e8c67b 100644 --- a/chart-sdk/blazor/treemap/tooltip.md +++ b/chart-sdk/blazor/treemap/tooltip.md @@ -1,19 +1,19 @@ --- layout: post -title: Tooltip in Blazor TreeMap Component | Syncfusion -description: Checkout and learn here all about Tooltip in Syncfusion Blazor TreeMap component and much more details. -platform: chart-sdk +title: Blazor TreeMap Tooltip | Syncfusion® +description: Learn how to enable and customize the Blazor TreeMap tooltip using Visible, Format, and a custom TooltipTemplate. +platform: Blazor control: TreeMap documentation: ug --- -# Tooltip in Blazor TreeMap Component +# Blazor TreeMap Tooltip Tooltip is used to display details about the items in the TreeMap. When space constraints prevents from displaying the information using Data Labels, the tooltip comes in handy. ## Default tooltip -The tooltip is not visible by default, to make it visible, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Visible) property in the [TreeMapTooltipSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html) to **true**. +The tooltip is not visible by default, to make it visible, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_Visible) property in the [TreeMapTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html) to **true**. ```cshtml @using Syncfusion.Blazor.TreeMap @@ -87,7 +87,7 @@ N> Refer to the [code block](#default-tooltip) to know about the property value ## Tooltip template -Tooltip can be rendered as a custom component using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_TooltipTemplate) property in the [TreeMapTooltipSettings](https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html) which accepts one or more UI elements as an input, that can be rendered as a part of the tooltip rendering. +Tooltip can be rendered as a custom component using the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html#Syncfusion_Blazor_TreeMap_TreeMapTooltipSettings_TooltipTemplate) property in the [TreeMapTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.TreeMap.TreeMapTooltipSettings.html) which accepts one or more UI elements as an input, that can be rendered as a part of the tooltip rendering. ```cshtml @using Syncfusion.Blazor.TreeMap