diff --git a/chart-sdk/blazor/3d-charts/accessibility.md b/chart-sdk/blazor/3d-charts/accessibility.md index 396e98dca..bb50dba8b 100644 --- a/chart-sdk/blazor/3d-charts/accessibility.md +++ b/chart-sdk/blazor/3d-charts/accessibility.md @@ -1,13 +1,13 @@ --- layout: post -title: Accessibility in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all about Accessibility using Keyboard navigation in Blazor 3D Chart component and more. -platform: chart-sdk +title: Blazor 3D Chart Accessibility Examples | Syncfusion® +description: Learn about accessibility in Syncfusion Blazor 3D Chart, including keyboard navigation, screen reader support, and WCAG 2.2 compliance. +platform: Blazor control: 3D Chart documentation: ug --- -# Accessibility in Blazor 3D Chart Component +# Blazor 3D Chart Accessibility The Blazor 3D Chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/blazor/3d-charts/appearance.md b/chart-sdk/blazor/3d-charts/appearance.md index 7da4e2bd8..08b808a21 100644 --- a/chart-sdk/blazor/3d-charts/appearance.md +++ b/chart-sdk/blazor/3d-charts/appearance.md @@ -1,13 +1,13 @@ --- layout: post -title: Appearance in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all about Appearance Customization in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Chart Appearance Examples | Syncfusion® +description: Learn how to customize the appearance of Syncfusion Blazor 3D Chart, including custom color palettes via the Palettes property. +platform: Blazor control: 3D Chart documentation: ug --- -# Appearance in Blazor 3D Chart Component +# Blazor 3D Chart Appearance ## Custom color palette @@ -56,7 +56,7 @@ The default color of series or points can be customized by providing a custom co } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVfXxCBqRuWmxlT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Color Palette](images/appearance/blazor-column-chart-custom-color-palette.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBdtxMNTSzMfApw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom Color Palette](images/appearance/blazor-column-chart-custom-color-palette.webp)" %} @@ -98,7 +98,7 @@ The color for the points can be bound from the `DataSource` for the series by ut } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrfDxMrKwXpXlgX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with PointColorMapping](images/appearance/blazor-column-chart-with-point-color.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVRtHsZJeTeIqES?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with PointColorMapping](images/appearance/blazor-column-chart-with-point-color.webp)" %} ## Point level customization @@ -160,7 +160,7 @@ The data label and fill color of each data point can be customized using the `Po } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzXdsrUGMqoJpK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Point level customization](images/appearance/blazor-column-chart-point-level-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVnZxsNpIeNhVQX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Point level customization](images/appearance/blazor-column-chart-point-level-customization.webp)" %} ## Chart area customization @@ -206,7 +206,7 @@ The background color and border of the 3D chart can be customized using the `Bac } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptRCLgGMkWnGY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Background and Border](images/appearance/blazor-column-chart-custom-background-and-border.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrxjdCtpSopldxA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom Background and Border](images/appearance/blazor-column-chart-custom-background-and-border.webp)" %} **Chart margin** @@ -249,7 +249,7 @@ The 3D chart's margin can be set from its container using the `Chart3DMargin` pr } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLftnshAmBJsYEA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Margin](images/appearance/blazor-column-chart-custom-margin.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrxjHijToyYrTID?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom Margin](images/appearance/blazor-column-chart-custom-margin.webp)" %} ## Animation @@ -293,7 +293,7 @@ To customize the animation for a particular series, the `Chart3DAnimation` prope } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrpjRsrAmhveiAm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLRjRMNTyRULUVb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Chart rotation @@ -335,7 +335,7 @@ The 3D chart can be rotated by using the `EnableRotation` property. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVzNHWLKwqqyvoo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVxtnWtzSRbioyx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Title @@ -377,7 +377,7 @@ The 3D chart can be given a title by using `Title` property, to show the informa } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrJZRihUwKPsGvh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrRtnWZJycrhOFs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title.webp)" %} ### Title position @@ -419,7 +419,7 @@ By using the `Position`property in `TitleStyle`, the `Title` can be positioned } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDnsBKczVydKx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLRXnWNTevXreFm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Title](images/appearance/blazor-column-chart-title-position.webp)" %} The custom option is used to position the title anywhere in the 3D chart using `X` and `Y` coordinates. @@ -459,7 +459,7 @@ The custom option is used to position the title anywhere in the 3D chart using ` } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBftnWBgwTPesmR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Title](images/appearance/blazor-column-chart-title-custom.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBxNdiZfIlJVRkc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom Title](images/appearance/blazor-column-chart-title-custom.webp)" %} ## Title alignment @@ -501,7 +501,7 @@ The title can be aligned to the near, far, or center of the 3D chart by using th } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVzXdiBKwdsnLib?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Title with Text Alignment](images/appearance/blazor-column-chart-title-alignment.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrdtHMDzelPOdwY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart Title with Text Alignment](images/appearance/blazor-column-chart-title-alignment.webp)" %} ### Title customization @@ -544,7 +544,7 @@ The `TitleStyle` property of the 3D chart provides options to customize the titl } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzDHirqQwNwVvM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Title with Customization](images/appearance/blazor-column-chart-title-with-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBxjnCtfIaGfGOy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart Title with Customization](images/appearance/blazor-column-chart-title-with-customization.webp)" %} N> The chart components do not use any CSS style for customization; chart elements like axis labels, datalabel, background, series palette, legend text, and tooltip text can be customized by using the `Chart3DAxisLabelStyle`, `Chart3DDataLabelFont`, `BackGround`, `Palettes`, `Chart3DLegendTextStyle`, and `Chart3DTooltipTextStyle`, respectively. diff --git a/chart-sdk/blazor/3d-charts/axis-customization.md b/chart-sdk/blazor/3d-charts/axis-customization.md index a5e17510f..9f28e28af 100644 --- a/chart-sdk/blazor/3d-charts/axis-customization.md +++ b/chart-sdk/blazor/3d-charts/axis-customization.md @@ -1,13 +1,13 @@ --- layout: post -title: Axis Customization in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about Axis Customization in Blazor 3D Chart component and more. -platform: chart-sdk +title: Blazor 3D Chart Axis Customization Examples | Syncfusion® +description: Learn how to customize axes in Syncfusion Blazor 3D Chart, including Title, Chart3DAxisTitleStyle, and axis label styling options. +platform: Blazor control: 3D Chart documentation: ug --- -# Axis Customization in Blazor 3D Chart Component +# Blazor 3D Chart Axis Customization ## Title @@ -50,7 +50,7 @@ The title for the axis can be added by using the `Title` property. It helps to p } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhJDdChpXSmCYrG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBHjHsNTBwpVxoz?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.webp)" %} ## Title rotation @@ -92,7 +92,7 @@ The title can be rotated from 0 to 360 degree by using the `TitleRotationAngle` } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJXdWBfZniAVZI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Axis Title Rotation](images/axis-customization/blazor-column-chart-axis-title-rotation.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBnjnWjTVcvWhUS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Axis Title Rotation](images/axis-customization/blazor-column-chart-axis-title-rotation.webp)" %} ## Tick lines customization @@ -133,7 +133,7 @@ The width, color, and height of the minor and major tick lines can be custo } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLJtxChftnfOPTu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrHZRMXzhFMFPDj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.webp)" %} ## Grid lines customization @@ -174,7 +174,7 @@ The width and color of the minor and major grid lines can be customized by usin } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhzjxWLJXbLjntW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVntnitprbxCpxO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.webp)" %} ## Multiple Axis @@ -218,7 +218,7 @@ In addition to primary X and Y axis, n number of axis can be added to the chart. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhTDxirztleaKrC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrHZHsXfBbYmSwR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor 3D Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.webp)" %} ## Inversed Axis @@ -259,7 +259,7 @@ When an axis is inversed, highest value of the axis comes closer to origin and v } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrJjxWLpXlYDizR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVnNdijzADjVRaA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.webp)" %} ## Opposed position @@ -299,5 +299,5 @@ To place an axis opposite from its original position, set the `OpposedPosition` } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBzZHWhJZuVFHfl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVxXnCtJAjpMKUs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/axis-labels.md b/chart-sdk/blazor/3d-charts/axis-labels.md index 391661d36..d888eddec 100644 --- a/chart-sdk/blazor/3d-charts/axis-labels.md +++ b/chart-sdk/blazor/3d-charts/axis-labels.md @@ -1,13 +1,13 @@ --- layout: post -title: Axis Labels in Blazor 3D Chart Component Syncfusion® -description: Checkout and learn here all features about the Axis Labels in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Chart Axis Labels Examples | Syncfusion® +description: Learn how to configure and customize axis labels in Syncfusion Blazor 3D Chart, including smart label placement via LabelIntersectAction. +platform: Blazor control: 3D Chart documentation: ug --- -# Axis Labels in Blazor 3D Chart Component +# Blazor 3D Chart Axis Labels Axis labels are the labels that are positioned adjacent to the y-axis and beneath the x-axis. It provides descriptive information about the axis. @@ -55,7 +55,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBTDnMVpitELVMq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Smart Axis Label in Blazor Column 3D Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthnjRitpLpkRryH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Hiding Smart Axis Label in Blazor Column 3D Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp)" %} **Case 2:** When setting `LabelIntersectAction` as **Rotate45**. @@ -96,7 +96,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLptnWBJMsfXNjH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLdDxWjTheoBPQD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp)" %} **Case 3:** When setting `LabelIntersectAction` as **Rotate90**. @@ -137,7 +137,7 @@ When the axis labels overlap with each other, `LabelIntersectAction` property i } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBJjnsLJMrjzDrD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLxDRMjTrSYnNcK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp)" %} ## Edge label placement @@ -179,7 +179,7 @@ use the `EdgeLabelPlacement` property in axis, which moves the label inside t } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpDnsLTsLcphWe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrxNHCjprRqvFFI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Displaying Blazor Chart Axis Label in Edge Position](images/axis-labels/blazor-chart-axis-label-in-edge.webp)" %} ## Maximum labels @@ -240,4 +240,4 @@ The labels will be rendered based on the count in the `MaximumLabels` property p } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htBJNxCrTWKrGBCU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrHNHsjzhxlNbDK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} diff --git a/chart-sdk/blazor/3d-charts/category-axis.md b/chart-sdk/blazor/3d-charts/category-axis.md index 73f05b893..8a2cb9f7e 100644 --- a/chart-sdk/blazor/3d-charts/category-axis.md +++ b/chart-sdk/blazor/3d-charts/category-axis.md @@ -1,13 +1,13 @@ --- layout: post -title: Category Axis in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about Category Axis in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Chart Category Axis Examples | Syncfusion® +description: Learn how to render a Syncfusion Blazor 3D Chart with a category axis to show text values rather than numerical values on the x-axis. +platform: Blazor control: 3D Chart documentation: ug --- -# Category Axis in Blazor 3D Chart Component +# Blazor 3D Chart Category Axis The category axis is the horizontal axis of a 3D chart that shows text values rather than numerical values. Compared to the vertical axis, this axis has fewer labels. The following sample shows to render the 3D chart using category axis. @@ -46,7 +46,7 @@ The category axis is the horizontal axis of a 3D chart that shows text values ra } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhTZdMLTMTKyfTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Default Axis](images/category-axis/blazor-chart-default-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthnDdMXWwJXhjhv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Default Axis](images/category-axis/blazor-chart-default-axis.webp)" %} ## Labels placement @@ -87,7 +87,7 @@ By default, category axis labels are placed between ticks in an axis. It can als } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJjHsLTWRHhqRc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Labels Position in Blazor 3D Chart](images/category-axis/blazor-diagram-label-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthnDdMXWwJXhjhv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Labels Position in Blazor 3D Chart](images/category-axis/blazor-diagram-label-position.webp)" %} ## Range @@ -128,7 +128,7 @@ The range of the category axis can be customized using `Minimum`, `Maximum`, and } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBfNxMLficgvSbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBRXRWtqkQyelab?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Column 3D Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.webp)" %} ## Indexed category axis @@ -176,4 +176,4 @@ The category axis can also be rendered based on the index values of the data sou } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBTjniVJWQPizAl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthHjHMNUuPhqtnE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor 3D Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/chart-dimensions.md b/chart-sdk/blazor/3d-charts/chart-dimensions.md index 17a298325..1e109a56a 100644 --- a/chart-sdk/blazor/3d-charts/chart-dimensions.md +++ b/chart-sdk/blazor/3d-charts/chart-dimensions.md @@ -1,13 +1,13 @@ --- layout: post -title: Chart Dimensions in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about Chart Dimensions in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Chart Dimensions and Sizing | Syncfusion® +description: Learn how to set the dimensions of Syncfusion Blazor 3D Chart using container size, inline width and height, or CSS with code samples. +platform: Blazor control: 3D Chart documentation: ug --- -# Dimensions in Blazor 3D Chart Component +# Blazor 3D Chart Dimensions ## Size for container @@ -49,7 +49,7 @@ The 3D chart can be rendered to its container size and it can be set via inline } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrJtdsrpsPezXYL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhnjdMjiGXTAlVa?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor 3D Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.webp)" %} ## Size for chart @@ -93,7 +93,7 @@ The size of the 3D chart can be set in pixel as demonstrated below. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLTZdCrpWvYfGmi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrRXxsNiGMTlHNn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor 3D Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.webp)" %} ### In Percentage @@ -133,4 +133,4 @@ By setting the value in percentage, the 3D Chart gets its dimension with respec } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVJDxMrpsargarf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor 3D Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrntxiZsGBSYAAO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor 3D Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/chart-types/bar.md b/chart-sdk/blazor/3d-charts/chart-types/bar.md index 94bec0705..46339f348 100644 --- a/chart-sdk/blazor/3d-charts/chart-types/bar.md +++ b/chart-sdk/blazor/3d-charts/chart-types/bar.md @@ -1,13 +1,13 @@ --- layout: post -title: Bar Chart in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about the Bar Charts in Blazor 3D Chart component and much more. -platform: chart-sdk -control: 3D Chart +title: Blazor 3D Bar Chart Examples and Documentation | Syncfusion® +description: Learn how to render a Bar Chart in Syncfusion Blazor 3D Chart by setting the series Type to Bar with code samples. +platform: Blazor +control: 3D Chart documentation: ug --- -# Bar Chart in Blazor 3D Chart control +# Blazor 3D Bar Chart ## Bar chart @@ -48,7 +48,7 @@ To render a bar series, set series `Type` as `Bar`. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhJXxsKslDavsMW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart](../images/chart-types-images/blazor-bar-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBnZnsDfHZIbiFi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bar 3D Chart](../images/chart-types-images/blazor-bar-chart.webp)" %} ## Bar space and width @@ -90,7 +90,7 @@ The `ColumnSpacing` and `ColumnWidth` properties are used to customize the space } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhTXHMgilipfRPo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart with Space and Width](../images/chart-types-images/blazor-bar-chart-space-and-width.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLRNHCNfnWNAjRE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bar 3D Chart with Space and Width](../images/chart-types-images/blazor-bar-chart-space-and-width.webp)" %} ## Grouped bar @@ -131,7 +131,7 @@ The data points can be grouped in the bar type charts by using the `GroupName` p } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLfZRMUMlsmhOBI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Grouped Bar 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-bar.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLxZxiNzRsfHAuY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Grouping in Blazor Grouped Bar 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-bar.webp)" %} ## Cylindrical column chart @@ -170,7 +170,7 @@ To render a cylindrical column chart, set the `ColumnFacet` property to `Cylinde } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBfDdMAilBDiXzS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-bar-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBRNdWtfxsvqqWk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-bar-chart.webp)" %} ## Series customization @@ -214,4 +214,4 @@ The following properties can be used to customize the `Bar` series. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBTZdMKWvrLOzmq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-bar-chart-custom-series.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrxNxiXzxBLftbv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-bar-chart-custom-series.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/chart-types/column.md b/chart-sdk/blazor/3d-charts/chart-types/column.md index dbb350f59..04a9ef394 100644 --- a/chart-sdk/blazor/3d-charts/chart-types/column.md +++ b/chart-sdk/blazor/3d-charts/chart-types/column.md @@ -1,13 +1,13 @@ --- layout: post -title: Column Chart in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about the Column Chart in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Column Chart Examples and Documentation | Syncfusion® +description: Learn how to render a Column Chart in Syncfusion Blazor 3D Chart by setting the series Type to Column with code samples. +platform: Blazor control: 3D Chart documentation: ug --- -# Column Chart in Blazor 3D Chart Component +# Blazor 3D Column Chart ## Column @@ -49,7 +49,7 @@ To render a `Column Chart`, use series `Type` as `Column`. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpNRCqCFqsFuka?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart](../images/chart-types-images/blazor-column-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBRDxsXJxVQevdH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart](../images/chart-types-images/blazor-column-chart.webp)" %} ## Column space and width @@ -91,7 +91,7 @@ The `ColumnSpacing` and `ColumnWidth` properties are used to customize the space } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhTZxMgMPqSWDMz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Space and Width](../images/chart-types-images/blazor-column-chart-space-and-width.webp) %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLRXHstTHgLXaiY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Space and Width](../images/chart-types-images/blazor-column-chart-space-and-width.webp) %} ## Grouped column @@ -132,7 +132,7 @@ The data points can be grouped in the column type charts by using the `GroupName } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthTjHsUWvUFSkhR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Grouped Column 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-column.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrnZxijJxKHnJQp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Grouping in Blazor Grouped Column 3D Chart](../images/chart-types-images/blazor-column-chart-grouped-column.webp)" %} ## Cylindrical column chart @@ -170,7 +170,7 @@ To render a cylindrical column chart, set the `ColumnFacet` property to `Cylinde } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBJNxiAslpiKcOw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-column-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhRDxiZpHfMtHbu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-column-chart.webp)" %} ## Series customization @@ -214,4 +214,4 @@ The following properties can be used to customize the `Column` series. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthztRMgWFpfyYWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Series](../images/chart-types-images/blazor-column-chart-custom-series.webp) %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBdDdWZJHzIdEUN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom Series](../images/chart-types-images/blazor-column-chart-custom-series.webp) %} diff --git a/chart-sdk/blazor/3d-charts/chart-types/stack-bar.md b/chart-sdk/blazor/3d-charts/chart-types/stack-bar.md index 74846ce61..1dea6bb4d 100644 --- a/chart-sdk/blazor/3d-charts/chart-types/stack-bar.md +++ b/chart-sdk/blazor/3d-charts/chart-types/stack-bar.md @@ -1,13 +1,13 @@ --- layout: post -title: 100% Stacked Bar in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about 100% Stacked Bar Chart in Blazor 3D Chart component and more. -platform: chart-sdk +title: Blazor 3D 100% Stacked Bar Chart Examples | Syncfusion® +description: Learn how to render a 100% Stacked Bar Chart in Syncfusion Blazor 3D Chart by setting the series Type to StackingBar100. +platform: Blazor control: 3D Chart documentation: ug --- -# 100% Stacked Bar in Blazor 3D Chart Component +# Blazor 3D 100% Stacked Bar Chart ## 100% Stacked bar chart @@ -50,7 +50,7 @@ To render a `100% Stacked Bar Chart` series, use series `Type` as `StackingBar10 } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTtxCUBNtIGBRY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 3D Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLdZnsDJHoVLmPb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Bar100 3D Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.webp)" %} ## 100% Cylindrical Stacked Bar chart @@ -93,7 +93,7 @@ To render a 100% cylindrical Stacked Bar chart, set the `ColumnFacet` property } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBTtdiqrXMpthaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVRjxMjzRexUggV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.webp)" %} ## Series customization @@ -139,4 +139,4 @@ The following properties can be used to customize the `100% Stacked Bar` series. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrJNnsqhNsRoHio?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhHNRsXpHnDUFOo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Bar100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/chart-types/stack-column.md b/chart-sdk/blazor/3d-charts/chart-types/stack-column.md index 525304ced..130af955e 100644 --- a/chart-sdk/blazor/3d-charts/chart-types/stack-column.md +++ b/chart-sdk/blazor/3d-charts/chart-types/stack-column.md @@ -1,13 +1,13 @@ --- layout: post -title: 100% Stacked Column in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about 100% Stacked Column Chart in Blazor 3D Chart component and more. -platform: chart-sdk +title: Blazor 3D 100% Stacked Column Chart Examples | Syncfusion® +description: Learn how to render a 100% Stacked Column Chart in Syncfusion Blazor 3D Chart by setting the series Type to StackingColumn100. +platform: Blazor control: 3D Chart documentation: ug --- -# 100% Stacked Column in Blazor 3D Chart Component +# Blazor 3D 100% Stacked Column Chart ## 100% Stacked column chart @@ -48,7 +48,7 @@ To render a `100% Stacked Column Chart` series, use series `Type` as `StackingCo } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLfjRsqLXBJrLXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 3D Chart](../images/chart-types-images/blazor-stacked-column-100-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVnZRWjfRdfOKjW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Column100 3D Chart](../images/chart-types-images/blazor-stacked-column-100-chart.webp)" %} ## 100% Cylindrical stacked column chart @@ -91,7 +91,7 @@ To render a 100% cylindrical stacked column chart, set the `ColumnFacet` propert } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzjnCAhNBGdkGQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVdDRMXJHHlxcxf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Cylindrical Column100 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.webp)" %} ## Series customization @@ -137,4 +137,4 @@ The following properties can be used to customize the `100% Stacked Column` seri } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhptHsKBjUZKwWE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-column-100-chart-custom-series.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrxXRWXfRwLFGXv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Column100 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-column-100-chart-custom-series.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/chart-types/stacked-bar.md b/chart-sdk/blazor/3d-charts/chart-types/stacked-bar.md index c15489c23..3b7d3eef1 100644 --- a/chart-sdk/blazor/3d-charts/chart-types/stacked-bar.md +++ b/chart-sdk/blazor/3d-charts/chart-types/stacked-bar.md @@ -1,13 +1,13 @@ --- layout: post -title: Stacked Bar in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about Stacked Bar Chart in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Stacked Bar Chart Examples and Documentation | Syncfusion® +description: Learn how to render a Stacked Bar Chart in Syncfusion Blazor 3D Chart by setting the series Type to StackingBar with code samples. +platform: Blazor control: 3D Chart documentation: ug --- -# Stacked Bar in Blazor 3D Chart Component +# Blazor 3D Stacked Bar Chart ## Stacked bar chart @@ -50,7 +50,7 @@ To render a stacked bar series, use series `Type` as `StackingBar`. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrfNHMgVDXktKyD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar 3D Chart](../images/chart-types-images/blazor-stacked-Bar-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLxDGWpfclepuSO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Bar 3D Chart](../images/chart-types-images/blazor-stacked-Bar-chart.webp)" %} ## Stacking group @@ -93,7 +93,7 @@ To group the stacked bar, the `StackingGroup` property can be used. The columns } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVpZnsgsuHovTcn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Stacked Bar 3D Chart](../images/chart-types-images/blazor-stacked-bar-chart-with-grouping.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLxNnCNpHviOTRb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Grouping in Blazor Stacked Bar 3D Chart](../images/chart-types-images/blazor-stacked-bar-chart-with-grouping.webp)" %} ## Cylindrical column chart @@ -136,7 +136,7 @@ To render a cylindrical stacked bar chart, set the `ColumnFacet` property to `Cy } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLzjRCgiamCLrWZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrnZnCZzRFeQlqo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Cylindrical Bar 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.webp)" %} ## Series customization @@ -182,4 +182,4 @@ The following properties can be used to customize the `Stacked Bar` series. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpDnMqCYcOWHOq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-chart-custom-series.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVxNRstzdOjTIxZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Bar 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-bar-chart-custom-series.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/chart-types/stacked-column.md b/chart-sdk/blazor/3d-charts/chart-types/stacked-column.md index 00d6cadfa..487b9a649 100644 --- a/chart-sdk/blazor/3d-charts/chart-types/stacked-column.md +++ b/chart-sdk/blazor/3d-charts/chart-types/stacked-column.md @@ -1,13 +1,13 @@ --- layout: post -title: Stacked Column in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about Stacked Column Chart in Blazor 3D Chart component and more. -platform: chart-sdk +title: Blazor 3D Stacked Column Chart Examples | Syncfusion® +description: Learn how to render a Stacked Column Chart in Syncfusion Blazor 3D Chart by setting the series Type to StackingColumn with code samples. +platform: Blazor control: 3D Chart documentation: ug --- -# Stacked Column in Blazor 3D Chart Component +# Blazor 3D Stacked Column Chart ## Stacked column chart @@ -50,7 +50,7 @@ To render a stacked column series, use series `Type` as `StackingColumn`. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBftRMAVjJALNDA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column 3D Chart](../images/chart-types-images/blazor-stacked-column-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVHXxsZfdaGkrxt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Column 3D Chart](../images/chart-types-images/blazor-stacked-column-chart.webp)" %} ## Stacking group @@ -93,7 +93,7 @@ To group the stacked column, the `StackingGroup` property can be used. The colum } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhpZnCUhDzupZKQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Stacked Column 3D Chart](../images/chart-types-images/blazor-stacked-colum-chart-with-grouping.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLdjxCZJcZWFFMe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Grouping in Blazor Stacked Column 3D Chart](../images/chart-types-images/blazor-stacked-colum-chart-with-grouping.webp)" %} ## Cylindrical stacked column chart @@ -136,7 +136,7 @@ To render a cylindrical stacked column chart, set the `ColumnFacet` property to } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhTDnCqVjoUjFfB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-column-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLRNRWjzQDmsFSy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Cylindrical Column 3D Chart](../images/chart-types-images/blazor-cylindricaal-stacked-column-chart.webp)" %} ## Series customization @@ -182,4 +182,4 @@ The following properties can be used to customize the `Stacked Column` series. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVJXHMqLXoxCjlL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-column-chart-custom-series.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLxZxWtTGDuxrFB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Column 3D Chart with Custom Series](../images/chart-types-images/blazor-stacked-column-chart-custom-series.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/data-labels.md b/chart-sdk/blazor/3d-charts/data-labels.md index a5a1e6542..61e54fc3d 100644 --- a/chart-sdk/blazor/3d-charts/data-labels.md +++ b/chart-sdk/blazor/3d-charts/data-labels.md @@ -1,13 +1,13 @@ --- layout: post -title: Data Labels in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about the Data Labels in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Chart Data Labels Examples | Syncfusion® +description: Learn how to add and customize data labels in Syncfusion Blazor 3D Chart series using the Visible property in Chart3DDataLabel. +platform: Blazor control: 3D Chart documentation: ug --- -# Data Labels in Blazor 3D Chart Component +# Blazor 3D Chart Data Labels Data labels are fields that includes information about the sample point connected to an output. It can be added to a chart series by enabling the `Visible` property in the `Chart3DDataLabel`. By default, the labels will arrange smartly without overlapping. @@ -48,7 +48,7 @@ Data labels are fields that includes information about the sample point connecte } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzZdWrfVZpBXMM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Data Label](images/data-label/blazor-chart-data-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLnXnWNzUBPQRLc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor 3D Chart with Data Label](images/data-label/blazor-chart-data-label.webp)" %} ## Position @@ -91,7 +91,7 @@ The `Position` property is used to place the label either on `Top`, `Middle`, or } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJtxCBfBjQyAbW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Position in Blazor 3D Chart](images/data-label/blazor-chart-label-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBRXnCZfAAABpvw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Label Position in Blazor 3D Chart](images/data-label/blazor-chart-label-position.webp)" %} ## Template @@ -141,7 +141,7 @@ Label content can be formatted by using the template option. Inside the template } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBJNRWBJVChojGx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Template](images/data-label/blazor-chart-datalabel-template.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhdtHMNTqqcYdzC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor 3D Chart Label with Template](images/data-label/blazor-chart-datalabel-template.webp)" %} ## Text mapping @@ -179,7 +179,7 @@ Text from the data source can be mapped using the `NameField` property. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVJNxsrfBWdyERK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Text Mapping](images/data-label/blazor-chart-label-with-text-mapping.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrHDnitzqTVeNKr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor 3D Chart Label with Text Mapping](images/data-label/blazor-chart-label-with-text-mapping.webp)" %} ## Format @@ -217,7 +217,7 @@ Data label for the chart can be formatted using the `Format` property. The globa } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrJNnWhzrCaQgqM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Format](images/data-label/blazor-chart-label-with-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhHDdWDfqyifuVW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor 3D Chart Label with Format](images/data-label/blazor-chart-label-with-format.webp)" %} The table below shows the results of applying various commonly used label formats to numeric data. @@ -319,7 +319,7 @@ The `Margin` option can be applied to the data label to create space around the } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLpNHihJhLAjJdx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Label with Margin](images/data-label/blazor-chart-label-with-margin.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBxZnMXJAoxRvsw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor 3D Chart Label with Margin](images/data-label/blazor-chart-label-with-margin.webp)" %} ## Customization @@ -359,7 +359,7 @@ The `stroke` and `border` of data label can be customized using `Fill` and `Char } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrJXnCrfBBywLmC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Custom Label](images/data-label/blazor-chart-custom-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBdtdMNpUxBDRQl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor 3D Chart with Custom Label](images/data-label/blazor-chart-custom-label.webp)" %} ## Customizing specific label @@ -416,4 +416,4 @@ A specific label can be customized by using the `TextRender` event. The `TextR } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVzNxihTVLOVTJZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Custom Speci Label](images/data-label/blazor-chart-custom-specific-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBdZHCZpKxHpcIN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor 3D Chart with Custom Speci Label](images/data-label/blazor-chart-custom-specific-label.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/date-time-axis.md b/chart-sdk/blazor/3d-charts/date-time-axis.md index c3607889d..5b8919e44 100644 --- a/chart-sdk/blazor/3d-charts/date-time-axis.md +++ b/chart-sdk/blazor/3d-charts/date-time-axis.md @@ -1,15 +1,15 @@ --- layout: post -title: DateTime Axis in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about DateTime Axis in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Chart DateTime Axis Examples | Syncfusion® +description: Learn how to use a DateTime axis in Syncfusion Blazor 3D Chart to display date time values as axis labels in the specified format. +platform: Blazor control: 3D Chart documentation: ug --- -# DateTime Axis in Blazor 3D Chart Component +# Blazor 3D Chart DateTime Axis ## DateTime axis @@ -48,7 +48,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhTZHirphUnPCqM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with DateTime Axis](images/datetime/blazor-column-chart-datetime-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhdNRCZJsIHRQBR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor 3D Chart with DateTime Axis](images/datetime/blazor-column-chart-datetime-axis.webp)" %} ## DateTime category axis @@ -85,7 +85,7 @@ The `DateTimeCategory` axis is used to display the date time values with non-lin } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLpjHiVJrKOIbbu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with DateTime Axis](images/datetime/blazor-column-chart-with-datetime-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhnXnMNJCHoJTep?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with DateTime Axis](images/datetime/blazor-column-chart-with-datetime-axis.webp)" %} ### Range @@ -125,7 +125,7 @@ Range of an axis will be calculated automatically based on the provided data. Yo } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXdCLzhJLRmjw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart DateTime Axis based on Range](images/datetime/blazor-column-chart-axis-based-on-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLnNdWNziwszCaR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Column 3D Chart DateTime Axis based on Range](images/datetime/blazor-column-chart-axis-based-on-range.webp)" %} ### Interval customization @@ -171,7 +171,7 @@ Date time intervals can be customized by using the `Interval` and `IntervalType` } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBpDdirTBfmVqNO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart DateTime Axis based on Interval](images/datetime/blazor-column-chart-axis-based-on-interval.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVxXniDJMwEnkrv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Column 3D Chart DateTime Axis based on Interval](images/datetime/blazor-column-chart-axis-based-on-interval.webp)" %} **Applying padding to the Range** @@ -218,7 +218,7 @@ When the `RangePadding` is set to **None**, the minimum and maximum of the a } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrptHMhfBIrZRdV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart without RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-none.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhdZxCDfilTsNKt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart without RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-none.webp)" %} **DateTime - Round** @@ -258,7 +258,7 @@ When the `RangePadding` is set to `Round`, minimum and maximum will be rounded t } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rthpZRWBJVSnflQi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Round RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-round.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLxNHCDJCvvPeXf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Round RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-round.webp)" %} **DateTime - Additional** @@ -297,7 +297,7 @@ When the `RangePadding` property is set to **Additional**, the interval of an ax } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBTjdsrfrxMZeIc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Additional RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-Additional.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVnNxMXfikKKDhs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Additional RangePadding](images/datetime/blazor-column-chart-axis-based-on-range-Additional.webp)" %} ## Label format @@ -340,7 +340,7 @@ The date can be formatted and parsed to all globalize format using the `LabelFo } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLftHshTUyFcIMA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Axis Label Formatting in Blazor Column 3D Chart](images/datetime/blazor-column-chart-axis-label-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhHZdCNTWEGxMfb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Axis Label Formatting in Blazor Column 3D Chart](images/datetime/blazor-column-chart-axis-label-format.webp)" %} The table below shows the results of applying various popular date and time formats to the `LabelFormat` property. diff --git a/chart-sdk/blazor/3d-charts/getting-started-wasm.md b/chart-sdk/blazor/3d-charts/getting-started-wasm.md index 1159e3e18..4d58b8cc2 100644 --- a/chart-sdk/blazor/3d-charts/getting-started-wasm.md +++ b/chart-sdk/blazor/3d-charts/getting-started-wasm.md @@ -1,110 +1,121 @@ --- layout: post -title: Getting Stared with Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn about getting started with Blazor 3D Chart in Blazor WebAssembly (WASM) App using Visual Studio and more. -platform: chart-sdk -control: 3D Chart +title: Getting Started with Blazor 3D Charts in WASM App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor 3D Charts in a Blazor WebAssembly app, including setup, packages, and first chart. +platform: Blazor +control: 3D Charts documentation: ug --- -# Getting Started with Blazor 3D Chart Component in Blazor WASM App +# Blazor 3D Chart Getting Started in WASM App -This section briefly explains about how to include [Blazor 3D Chart](https://www.syncfusion.com/blazor-components/blazor-3d-charts) component in your 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 3D Charts](https://www.syncfusion.com/blazor-components/blazor-3d-charts) component in your 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.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) 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.Chart3D`) 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.Chart3D -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 commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +dotnet add package Syncfusion.Blazor.Chart3D -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install the required Blazor packages - -Install [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) NuGet package in the 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.Chart3D -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Chart3D -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.Chart3D` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Chart3D @@ -114,10 +125,10 @@ After the package is installed, open the **~/_Imports.razor** file and import th ## 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; @@ -128,24 +139,24 @@ 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 **~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 3D Chart component +## Add Blazor 3D Charts component -Add the Blazor 3D 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 3D Charts](https://www.syncfusion.com/blazor-components/blazor-3d-charts) component inside the razor file. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -154,15 +165,55 @@ Add the Blazor 3D 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 3D Chart component in the default web browser. +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} -## Populate Blazor 3D Chart with data +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor 3D Charts component will render in your default web browser. -To bind data for the 3D chart component, you can assign a IEnumerable object to the `DataSource` property. It can also be provided as an instance of the `DataManager`. +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% 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 %} + +## Populate Blazor 3D Charts with data + +To bind data for the 3D Charts component, you can assign a IEnumerable object to the `DataSource` property. It can also be provided as an instance of the `DataManager`. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} + +@code +{ public class SalesInfo { public string Month { get; set; } @@ -179,6 +230,7 @@ public List Sales = new List new SalesInfo { Month = "Jun", SalesValue = 32 }, new SalesInfo { Month = "Jul", SalesValue = 35 } }; +} {% endhighlight %} {% endtabs %} @@ -186,7 +238,7 @@ public List Sales = new List Now, map the data fields `Month` and `Sales` to the series `XName` and `YName` properties, then set the data to the `DataSource` property, and the `chart type` to **Column** because we will be viewing the data in a column chart. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Chart3D @@ -198,7 +250,8 @@ Now, map the data fields `Month` and `Sales` to the series `XName` and `YName` -@code { +@code +{ public class SalesInfo { public string Month { get; set;} @@ -220,14 +273,14 @@ Now, map the data fields `Month` and `Sales` to the series `XName` and `YName` {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLJZHCKiVjCNqCE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBdjRtvqQtKlaTl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -## Add 3D Chart title +## Add 3D Charts title Using the `Title` property, you can add a title to the chart and the axes to provide the user with quick information about the data plotted in the chart. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -241,14 +294,14 @@ Using the `Title` property, you can add a title to the chart and the axes to pro {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLfNRsgCVjHdioT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVdZRNlqwsNPTdn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Enable legend -You can use legend for the 3D Chart by setting the `Visible` property to **true** in `Chart3DLegendSettings`. The legend name can be changed by using the `Name` property in the series. +You can use legend for the 3D Charts by setting the `Visible` property to **true** in `Chart3DLegendSettings`. The legend name can be changed by using the `Name` property in the series. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -262,14 +315,14 @@ You can use legend for the 3D Chart by setting the `Visible` property to **true* {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhpDRiKMriVAFPn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthnNdZFKQBsJBtI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Add data label -You can add data labels to improve the readability of the 3D Chart. This can be achieved by setting the `Visible` property to **true** in the `Chart3DDataLabel`. Now, the data labels are arranged smartly based on series. +You can add data labels to improve the readability of the 3D Charts. This can be achieved by setting the `Visible` property to **true** in the `Chart3DDataLabel`. Now, the data labels are arranged smartly based on series. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -283,14 +336,14 @@ You can add data labels to improve the readability of the 3D Chart. This can be {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrfDxCqCLizaoKV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLRtdjPgGVPYKIZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Enable tooltip The tooltip is useful when you cannot display information by using the data labels due to space constraints. You can enable tooltip by setting the `Enable` property in `Chart3DTooltipSettings` to **true**. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -305,10 +358,9 @@ The tooltip is useful when you cannot display information by using the data labe {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLzXHWUiVMwxISt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrdDnNPqGqIbvpP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## 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/3d-charts/getting-started-with-web-app.md b/chart-sdk/blazor/3d-charts/getting-started-with-web-app.md index 149c99e79..52d44ed2a 100644 --- a/chart-sdk/blazor/3d-charts/getting-started-with-web-app.md +++ b/chart-sdk/blazor/3d-charts/getting-started-with-web-app.md @@ -1,51 +1,57 @@ --- layout: post -title: Getting Started with Blazor 3D Chart in Web App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor 3D Chart Component in Blazor Web App. -platform: chart-sdk -component: 3D Chart +title: Getting Started with Blazor 3D Charts in Web App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor 3D Charts in a Blazor Web App, including server and client setup, packages, and first chart. +platform: Blazor +control: 3D Charts documentation: ug --- -# Getting Started with Blazor 3D Chart Component in Web App +# Blazor 3D Chart Getting Started in Web App -This section briefly explains about how to include [Blazor 3D Chart](https://www.syncfusion.com/blazor-components/blazor-3d-charts) 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 3D Charts](https://www.syncfusion.com/blazor-components/blazor-3d-charts) 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/). -To get started quickly with Blazor 3D Chart component, check on the following video: +To get started quickly with Blazor 3D Charts component, check out the following video: {% youtube "youtube:https://www.youtube.com/watch?v=iCWdoRnu-6s" %} +## 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 @@ -54,68 +60,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.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) 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 %} -## Prerequisites +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.Chart3D`) 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.Chart3D -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.Chart3D -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 the required Blazor packages - -Install [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) NuGet package in the 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.Chart3D -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Chart3D -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 package is installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespaces. +After the package is installed, open the **~/_Imports.razor** file in the `.Client` project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Chart3D @@ -123,9 +130,9 @@ After the package is installed, open the **~/_Imports.razor** file in the client {% 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" %} @@ -139,54 +146,90 @@ 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 the Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Blazor 3D Chart component +## Add Blazor 3D Charts component -Add the Blazor 3D 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/*.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 3D Charts](https://www.syncfusion.com/blazor-components/blazor-3d-charts) 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 +@using Syncfusion.Blazor.Chart3D + + + + {% endhighlight %} {% endtabs %} +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor 3D Charts 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="Home.razor" %} +{% 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 %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor 3D Chart component in the default web browser. +{% endtabcontent %} -## Populate Blazor 3D Chart with data +{% endtabcontents %} + +## Populate Blazor 3D Charts with data -To bind data for the 3D chart component, you can assign a IEnumerable object to the `DataSource` property. It can also be provided as an instance of the `DataManager`. +To bind data for the 3D Charts component, you can assign a IEnumerable object to the `DataSource` property. It can also be provided as an instance of the `DataManager`. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@code +{ public class SalesInfo { public string Month { get; set; } @@ -203,13 +246,14 @@ public List Sales = new List new SalesInfo { Month = "Jun", SalesValue = 32 }, new SalesInfo { Month = "Jul", SalesValue = 35 } }; +} {% endhighlight %} {% endtabs %} Now, map the data fields `Month` and `Sales` to the series `XName` and `YName` properties, then set the data to the `DataSource` property, and the `chart type` to **Column** because we will be viewing the data in a column chart. -## Add 3D Chart title +## Add 3D Charts title Using the `Title` property, you can add a title to the chart and the axes to provide the user with quick information about the data plotted in the chart. @@ -228,11 +272,11 @@ Using the `Title` property, you can add a title to the chart and the axes to pro {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLfNRsgCVjHdioT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVdZRDPqtvqaKUr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Enable legend -You can use legend for the 3D Chart by setting the `Visible` property to **true** in `Chart3DLegendSettings`. The legend name can be changed by using the `Name` property in the series. +You can use legend for the 3D Charts by setting the `Visible` property to **true** in `Chart3DLegendSettings`. The legend name can be changed by using the `Name` property in the series. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -249,11 +293,11 @@ You can use legend for the 3D Chart by setting the `Visible` property to **true* {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhpDRiKMriVAFPn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLHDHtbAZEPsbwD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Add data label -You can add data labels to improve the readability of the 3D Chart. This can be achieved by setting the `Visible` property to **true** in the `Chart3DDataLabel`. Now, the data labels are arranged smartly based on series. +You can add data labels to improve the readability of the 3D Charts. This can be achieved by setting the `Visible` property to **true** in the `Chart3DDataLabel`. Now, the data labels are arranged smartly based on series. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -270,7 +314,7 @@ You can add data labels to improve the readability of the 3D Chart. This can be {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrfDxCqCLizaoKV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVRXRNvqMCiUPzs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Enable tooltip @@ -292,11 +336,10 @@ The tooltip is useful when you cannot display information by using the data labe {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLzXHWUiVMwxISt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrxDHXlgCsuGojA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## 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 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/3d-charts/getting-started.md b/chart-sdk/blazor/3d-charts/getting-started.md index a19c74911..678a215ab 100644 --- a/chart-sdk/blazor/3d-charts/getting-started.md +++ b/chart-sdk/blazor/3d-charts/getting-started.md @@ -1,112 +1,123 @@ --- layout: post -title: Getting Stared with Blazor 3DChart Component | Syncfusion® -description: Checkout and learn about getting started with Blazor 3D Chart component in Blazor Server App using Visual Studio and more. -platform: chart-sdk -control: 3D Chart +title: Getting Started with Blazor 3D Charts in Server App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor 3D Charts in a Blazor Server app, including setup, packages, and first chart. +platform: Blazor +control: 3D Charts documentation: ug --- -# Getting Started with Blazor 3D Chart Component in Blazor Server App +# Blazor 3D Chart Getting Started in Server App -This section briefly explains about how to include [Blazor 3D Chart](https://www.syncfusion.com/blazor-components/blazor-3d-charts) 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 3D Charts](https://www.syncfusion.com/blazor-components/blazor-3d-charts) 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.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) 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.Chart3D`) 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.Chart3D -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. -## Install the required Blazor packages +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -Install [Syncfusion.Blazor.Chart3D](https://www.nuget.org/packages/Syncfusion.Blazor.Chart3D/) 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. +dotnet add package Syncfusion.Blazor.Chart3D -v {{ site.releaseversion }} -Alternatively, run the following command in the Package Manager Console to achieve the same. +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following commands. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.Chart3D -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Chart3D -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.Chart3D` namespaces. +After the package is installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Chart3D` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Chart3D @@ -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; @@ -130,52 +141,85 @@ 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 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 3D Chart component +## Add Blazor 3D Charts component -Add the Blazor 3D 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 **~/Components/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor 3D Charts](https://www.syncfusion.com/blazor-components/blazor-3d-charts) 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 %} +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor 3D Charts 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="Home.razor" %} +{% 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 %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor 3D Chart component in the default web browser. +{% endtabcontent %} -## Populate Blazor 3D Chart with data +{% endtabcontents %} -To bind data for the 3D chart component, you can assign a IEnumerable object to the `DataSource` property. It can also be provided as an instance of the `DataManager`. +## Populate Blazor 3D Charts with data + +To bind data for the 3D Charts component, you can assign a IEnumerable object to the `DataSource` property. It can also be provided as an instance of the `DataManager`. {% tabs %} {% highlight razor tabtitle="Home.razor" %} +@code +{ public class SalesInfo { public string Month { get; set; } @@ -192,6 +236,7 @@ public List Sales = new List new SalesInfo { Month = "Jun", SalesValue = 32 }, new SalesInfo { Month = "Jul", SalesValue = 35 } }; +} {% endhighlight %} {% endtabs %} @@ -211,7 +256,8 @@ Now, map the data fields `Month` and `Sales` to the series `XName` and `YName` -@code { +@code +{ public class SalesInfo { public string Month { get; set;} @@ -233,9 +279,9 @@ Now, map the data fields `Month` and `Sales` to the series `XName` and `YName` {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLJZHCKiVjCNqCE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBnXHjFqigAUBMv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -## Add 3D Chart title +## Add 3D Charts title Using the `Title` property, you can add a title to the chart and the axes to provide the user with quick information about the data plotted in the chart. @@ -245,7 +291,7 @@ Using the `Title` property, you can add a title to the chart and the axes to pro - + @@ -255,11 +301,11 @@ Using the `Title` property, you can add a title to the chart and the axes to pro {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLfNRsgCVjHdioT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVdZRZbgWJkPGWh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Enable legend -You can use legend for the 3D Chart by setting the `Visible` property to **true** in `Chart3DLegendSettings`. The legend name can be changed by using the `Name` property in the series. +You can use legend for the 3D Charts by setting the `Visible` property to **true** in `Chart3DLegendSettings`. The legend name can be changed by using the `Name` property in the series. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -276,11 +322,11 @@ You can use legend for the 3D Chart by setting the `Visible` property to **true* {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhpDRiKMriVAFPn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLxDdNbqVmczTuh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Add data label -You can add data labels to improve the readability of the 3D Chart. This can be achieved by setting the `Visible` property to **true** in the `Chart3DDataLabel`. Now, the data labels are arranged smartly based on series. +You can add data labels to improve the readability of the 3D Charts. This can be achieved by setting the `Visible` property to **true** in the `Chart3DDataLabel`. Now, the data labels are arranged smartly based on series. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -297,7 +343,7 @@ You can add data labels to improve the readability of the 3D Chart. This can be {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrfDxCqCLizaoKV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVxXxNPKVlFPKwB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Enable tooltip @@ -319,10 +365,10 @@ The tooltip is useful when you cannot display information by using the data labe {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLzXHWUiVMwxISt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLnDxZbgduLcrQe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## 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/3d-charts/images/appearance/blazor-column-chart-custom-background-and-border.webp b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-custom-background-and-border.webp index 8033b0297..331add475 100644 Binary files a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-custom-background-and-border.webp and b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-custom-background-and-border.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-custom-color-palette.webp b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-custom-color-palette.webp index 76c26f59f..282c93fd3 100644 Binary files a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-custom-color-palette.webp and b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-custom-color-palette.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-custom-margin.webp b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-custom-margin.webp index 2de91ef2f..56530ea6e 100644 Binary files a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-custom-margin.webp and b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-custom-margin.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-point-level-customization.webp b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-point-level-customization.webp index 00d08c078..4088a33ff 100644 Binary files a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-point-level-customization.webp and b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-point-level-customization.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-alignment.webp b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-alignment.webp index 90dc5a98e..b076ac691 100644 Binary files a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-alignment.webp and b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-alignment.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-custom.webp b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-custom.webp index d79ad9b98..fd343e985 100644 Binary files a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-custom.webp and b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-custom.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-position.webp b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-position.webp index 4aa60f567..f301eaf1f 100644 Binary files a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-position.webp and b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-position.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-with-customization.webp b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-with-customization.webp index 8ee244f58..1b541dc93 100644 Binary files a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-with-customization.webp and b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title-with-customization.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title.webp b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title.webp index 5dec9cd75..96cb57c4f 100644 Binary files a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title.webp and b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-title.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-with-point-color.webp b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-with-point-color.webp index 364e96cfd..cedfe0bb6 100644 Binary files a/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-with-point-color.webp and b/chart-sdk/blazor/3d-charts/images/appearance/blazor-column-chart-with-point-color.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp b/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp index d0ea2636a..751e52d62 100644 Binary files a/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp and b/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-axis-title-rotation.webp b/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-axis-title-rotation.webp index 392ff3195..2bde71638 100644 Binary files a/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-axis-title-rotation.webp and b/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-axis-title-rotation.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-axis-title.webp b/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-axis-title.webp index d75a2630c..20c083f90 100644 Binary files a/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-axis-title.webp and b/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-axis-title.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-custom-gridline.webp b/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-custom-gridline.webp index 2e59db66d..d13908893 100644 Binary files a/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-custom-gridline.webp and b/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-custom-gridline.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-custom-tick-lines.webp b/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-custom-tick-lines.webp index 50b05e43f..0684f196d 100644 Binary files a/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-custom-tick-lines.webp and b/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-custom-tick-lines.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-inversed-axis.webp b/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-inversed-axis.webp index 532f1e1ca..ac9c55ee6 100644 Binary files a/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-inversed-axis.webp and b/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-inversed-axis.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-multiple-axes.webp b/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-multiple-axes.webp index bee478abf..c1b881bde 100644 Binary files a/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-multiple-axes.webp and b/chart-sdk/blazor/3d-charts/images/axis-customization/blazor-column-chart-multiple-axes.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-chart-axis-label-in-edge.webp b/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-chart-axis-label-in-edge.webp index f75bb780c..ea06c767a 100644 Binary files a/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-chart-axis-label-in-edge.webp and b/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-chart-axis-label-in-edge.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp b/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp index 3dcba3f11..c4992e641 100644 Binary files a/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp and b/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp b/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp index f166bd2a8..cc7dbe92b 100644 Binary files a/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp and b/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp b/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp index 8ab475373..96ea5d4fe 100644 Binary files a/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp and b/chart-sdk/blazor/3d-charts/images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/category-axis/blazor-chart-axis-range-and-interval.webp b/chart-sdk/blazor/3d-charts/images/category-axis/blazor-chart-axis-range-and-interval.webp index 4237f6e09..b522f0250 100644 Binary files a/chart-sdk/blazor/3d-charts/images/category-axis/blazor-chart-axis-range-and-interval.webp and b/chart-sdk/blazor/3d-charts/images/category-axis/blazor-chart-axis-range-and-interval.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/category-axis/blazor-chart-default-axis.webp b/chart-sdk/blazor/3d-charts/images/category-axis/blazor-chart-default-axis.webp index 5b2b6285b..e6b1a6800 100644 Binary files a/chart-sdk/blazor/3d-charts/images/category-axis/blazor-chart-default-axis.webp and b/chart-sdk/blazor/3d-charts/images/category-axis/blazor-chart-default-axis.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/category-axis/blazor-chart-index-category-axis.webp b/chart-sdk/blazor/3d-charts/images/category-axis/blazor-chart-index-category-axis.webp index 971f7233f..ce96041e1 100644 Binary files a/chart-sdk/blazor/3d-charts/images/category-axis/blazor-chart-index-category-axis.webp and b/chart-sdk/blazor/3d-charts/images/category-axis/blazor-chart-index-category-axis.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/category-axis/blazor-diagram-label-position.webp b/chart-sdk/blazor/3d-charts/images/category-axis/blazor-diagram-label-position.webp index c536cb486..509a6881d 100644 Binary files a/chart-sdk/blazor/3d-charts/images/category-axis/blazor-diagram-label-position.webp and b/chart-sdk/blazor/3d-charts/images/category-axis/blazor-diagram-label-position.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-dimensions/blazor-chart-size-for-container.webp b/chart-sdk/blazor/3d-charts/images/chart-dimensions/blazor-chart-size-for-container.webp index 1496796a5..0ca6028b0 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-dimensions/blazor-chart-size-for-container.webp and b/chart-sdk/blazor/3d-charts/images/chart-dimensions/blazor-chart-size-for-container.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-dimensions/blazor-chart-size-in-percentage.webp b/chart-sdk/blazor/3d-charts/images/chart-dimensions/blazor-chart-size-in-percentage.webp index fa154b355..da697b5ef 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-dimensions/blazor-chart-size-in-percentage.webp and b/chart-sdk/blazor/3d-charts/images/chart-dimensions/blazor-chart-size-in-percentage.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-dimensions/blazor-chart-size-in-pixel.webp b/chart-sdk/blazor/3d-charts/images/chart-dimensions/blazor-chart-size-in-pixel.webp index 47aaf485f..44ce07ad4 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-dimensions/blazor-chart-size-in-pixel.webp and b/chart-sdk/blazor/3d-charts/images/chart-dimensions/blazor-chart-size-in-pixel.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-bar-chart-custom-series.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-bar-chart-custom-series.webp index a9c3a08ff..124d60158 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-bar-chart-custom-series.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-bar-chart-custom-series.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-bar-chart-space-and-width.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-bar-chart-space-and-width.webp index 2437c1c70..45815ff9e 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-bar-chart-space-and-width.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-bar-chart-space-and-width.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-bar-chart.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-bar-chart.webp index 4eab55f48..a23a71345 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-bar-chart.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-bar-chart.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-custom-series.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-custom-series.webp index 4b74c67e3..375f4beb9 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-custom-series.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-custom-series.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-grouped-bar.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-grouped-bar.webp index a5dc32d86..b1aa4bf3b 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-grouped-bar.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-grouped-bar.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-grouped-column.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-grouped-column.webp index a765d8077..a7052ddb5 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-grouped-column.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-grouped-column.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-space-and-width.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-space-and-width.webp index 24f4680a8..aa964ae40 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-space-and-width.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart-space-and-width.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart.webp index 50e6adca9..b1698cc7e 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-column-chart.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-bar-chart.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-bar-chart.webp index 32f080573..f1954f103 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-bar-chart.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-bar-chart.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-column-chart.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-column-chart.webp index 71901b66b..d61746e87 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-column-chart.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-column-chart.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.webp index 0004ce231..af9c560be 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-bar-100-chart.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.webp index 032babf22..c7ae6fead 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-bar-chart.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.webp index ab3bf3c6f..3976b3d8e 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-column-100-chart.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-column-chart.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-column-chart.webp index 56fe5ed6c..fe531e295 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-column-chart.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-cylindricaal-stacked-column-chart.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-Bar-chart.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-Bar-chart.webp index 6d1ded910..00e8e7c5b 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-Bar-chart.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-Bar-chart.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.webp index d09922b37..c909eed20 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-100-chart-custom-series.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-100-chart.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-100-chart.webp index 1414d3d7e..d0124fa1b 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-100-chart.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-100-chart.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-chart-custom-series.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-chart-custom-series.webp index 15db0c94c..71714bd68 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-chart-custom-series.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-chart-custom-series.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-chart-with-grouping.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-chart-with-grouping.webp index 3184d7793..440f75706 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-chart-with-grouping.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-bar-chart-with-grouping.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.webp index de2d29d33..6db0b6342 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-colum-chart-with-grouping.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.webp index 665b41662..cd56624c2 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-100-chart-custom-series.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-100-chart.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-100-chart.webp index 6e71cde34..95db0b88f 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-100-chart.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-100-chart.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-chart-custom-series.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-chart-custom-series.webp index 522e4a744..75e744571 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-chart-custom-series.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-chart-custom-series.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-chart.webp b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-chart.webp index 6aa97a86f..0c0c56bee 100644 Binary files a/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-chart.webp and b/chart-sdk/blazor/3d-charts/images/chart-types-images/blazor-stacked-column-chart.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-custom-label.webp b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-custom-label.webp index 7ad280115..6a75a8e82 100644 Binary files a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-custom-label.webp and b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-custom-label.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-custom-specific-label.webp b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-custom-specific-label.webp index e91ed754e..195b6c84c 100644 Binary files a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-custom-specific-label.webp and b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-custom-specific-label.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-data-label.webp b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-data-label.webp index 0d8ea9b60..16e599240 100644 Binary files a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-data-label.webp and b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-data-label.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-datalabel-template.webp b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-datalabel-template.webp index 29de12414..e7be16b04 100644 Binary files a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-datalabel-template.webp and b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-datalabel-template.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-position.webp b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-position.webp index 773ba7bc5..afdfcaf21 100644 Binary files a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-position.webp and b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-position.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-with-format.webp b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-with-format.webp index 209ae8cd0..21e4a9a4a 100644 Binary files a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-with-format.webp and b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-with-format.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-with-margin.webp b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-with-margin.webp index fb73b37bd..967cf606d 100644 Binary files a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-with-margin.webp and b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-with-margin.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-with-text-mapping.webp b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-with-text-mapping.webp index 7da07bfd0..111c75ef5 100644 Binary files a/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-with-text-mapping.webp and b/chart-sdk/blazor/3d-charts/images/data-label/blazor-chart-label-with-text-mapping.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-interval.webp b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-interval.webp index 6a8edaa09..73e6b0cf2 100644 Binary files a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-interval.webp and b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-interval.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range-additional.webp b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range-additional.webp index f8d74ca96..9f9750f9a 100644 Binary files a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range-additional.webp and b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range-additional.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range-none.webp b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range-none.webp index 140ac6415..f1749f2cd 100644 Binary files a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range-none.webp and b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range-none.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range-round.webp b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range-round.webp index 459d2ff2c..e396fab7c 100644 Binary files a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range-round.webp and b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range-round.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range.webp b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range.webp index 5593d9387..9fa9210ab 100644 Binary files a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range.webp and b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-based-on-range.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-label-format.webp b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-label-format.webp index be1d2eaed..e66c6cb7a 100644 Binary files a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-label-format.webp and b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-axis-label-format.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-datetime-axis.webp b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-datetime-axis.webp index 1d3c06feb..8842fae0f 100644 Binary files a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-datetime-axis.webp and b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-datetime-axis.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-with-datetime-axis.webp b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-with-datetime-axis.webp index a14a9f715..ee3a261d3 100644 Binary files a/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-with-datetime-axis.webp and b/chart-sdk/blazor/3d-charts/images/datetime/blazor-column-chart-with-datetime-axis.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-custom-legend-shape-size.webp b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-custom-legend-shape-size.webp index 264f3c562..e84b3c1cd 100644 Binary files a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-custom-legend-shape-size.webp and b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-custom-legend-shape-size.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-hide-legend-item.webp b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-hide-legend-item.webp index 05887f1ea..2c5c71ac4 100644 Binary files a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-hide-legend-item.webp and b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-hide-legend-item.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-alignment-position.webp b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-alignment-position.webp index 7339d314c..8e4d4e4f1 100644 Binary files a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-alignment-position.webp and b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-alignment-position.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-custom-size.webp b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-custom-size.webp index 5ae486b9a..6dfcacaf8 100644 Binary files a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-custom-size.webp and b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-custom-size.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-in-custom-position.webp b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-in-custom-position.webp index dc4aaa176..761565615 100644 Binary files a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-in-custom-position.webp and b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-in-custom-position.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-item-padding.webp b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-item-padding.webp index f4ee2b8d8..fad5377d7 100644 Binary files a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-item-padding.webp and b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-item-padding.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-paging.webp b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-paging.webp index fcb1376c3..1ca985726 100644 Binary files a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-paging.webp and b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-paging.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-position.webp b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-position.webp index 0a0a98998..b1ce522f2 100644 Binary files a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-position.webp and b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-position.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-reverse.webp b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-reverse.webp index 5f9e122e1..187ce2fda 100644 Binary files a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-reverse.webp and b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-reverse.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-series-selection.webp b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-series-selection.webp index e7ae84b51..28b8a1857 100644 Binary files a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-series-selection.webp and b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-series-selection.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-shape.webp b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-shape.webp index af3e7f440..87df760ba 100644 Binary files a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-shape.webp and b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-shape.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-text-wrap.webp b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-text-wrap.webp index 2c6e2c058..d19a0c044 100644 Binary files a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-text-wrap.webp and b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-text-wrap.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-title.webp b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-title.webp index d257a4c3f..29d19149e 100644 Binary files a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-title.webp and b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-title.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-with-page-navigation.webp b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-with-page-navigation.webp index 5d1f5a0e2..7d78bb180 100644 Binary files a/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-with-page-navigation.webp and b/chart-sdk/blazor/3d-charts/images/legend/blazor-column-chart-legend-with-page-navigation.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-chart-logarithmic-axis.webp b/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-chart-logarithmic-axis.webp index 9b2dfb56b..e5abba2f9 100644 Binary files a/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-chart-logarithmic-axis.webp and b/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-chart-logarithmic-axis.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.webp b/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.webp index 3850a0831..0dfaac0de 100644 Binary files a/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.webp and b/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-column-chart-axis-based-on-range.webp b/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-column-chart-axis-based-on-range.webp index 8c5cae4fa..da48a6d9d 100644 Binary files a/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-column-chart-axis-based-on-range.webp and b/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-column-chart-axis-based-on-range.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.webp b/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.webp index 11838112c..f25582241 100644 Binary files a/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.webp and b/chart-sdk/blazor/3d-charts/images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp b/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp index c9a1db312..d75cd346b 100644 Binary files a/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp and b/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-panes-with-column.webp b/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-panes-with-column.webp index 354077fb1..234dbe3a5 100644 Binary files a/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-panes-with-column.webp and b/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-panes-with-column.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp b/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp index 7607c183d..61c6406ac 100644 Binary files a/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp and b/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp b/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp index b085996ea..a8bee1ecd 100644 Binary files a/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp and b/chart-sdk/blazor/3d-charts/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-additional-range-padding.webp b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-additional-range-padding.webp index cb88644e8..149ef7e29 100644 Binary files a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-additional-range-padding.webp and b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-additional-range-padding.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-auto-rangepadding.webp b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-auto-rangepadding.webp index 0b6941f6f..3bdf82180 100644 Binary files a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-auto-rangepadding.webp and b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-auto-rangepadding.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-axis-range.webp b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-axis-range.webp index 959e8b16d..a282e2302 100644 Binary files a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-axis-range.webp and b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-axis-range.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-custom-label-format.webp b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-custom-label-format.webp index 13d9b2e52..d182a486c 100644 Binary files a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-custom-label-format.webp and b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-custom-label-format.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-grouping-separator.webp b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-grouping-separator.webp index 0a3987e7c..3947d6b70 100644 Binary files a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-grouping-separator.webp and b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-grouping-separator.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-label-format.webp b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-label-format.webp index e7d9f2860..7f3ceb2e8 100644 Binary files a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-label-format.webp and b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-label-format.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-normal-range-padding.webp b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-normal-range-padding.webp index cce9d0af6..e8b154dce 100644 Binary files a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-normal-range-padding.webp and b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-normal-range-padding.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-numeric-axis.webp b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-numeric-axis.webp index d45ae20e0..9365b6285 100644 Binary files a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-numeric-axis.webp and b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-numeric-axis.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-range-without-padding.webp b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-range-without-padding.webp index bbb7518d0..853f438a4 100644 Binary files a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-range-without-padding.webp and b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-range-without-padding.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-round-range-padding.webp b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-round-range-padding.webp index bdd1a4d3b..0ad3b8ecd 100644 Binary files a/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-round-range-padding.webp and b/chart-sdk/blazor/3d-charts/images/numeric-axis/blazor-column-chart-round-range-padding.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-cluster-selection.webp b/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-cluster-selection.webp index 9e36d542a..155ea02aa 100644 Binary files a/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-cluster-selection.webp and b/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-cluster-selection.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-initial-selection.webp b/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-initial-selection.webp index 8177d1ec6..8adc913e2 100644 Binary files a/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-initial-selection.webp and b/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-initial-selection.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-legend-selection.webp b/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-legend-selection.webp index 1407bfecb..05a87a6af 100644 Binary files a/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-legend-selection.webp and b/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-legend-selection.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-multiple-selection.webp b/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-multiple-selection.webp index f6cb50633..e1994de76 100644 Binary files a/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-multiple-selection.webp and b/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-multiple-selection.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-point-selection.webp b/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-point-selection.webp index aeb7b061c..ecfba9acf 100644 Binary files a/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-point-selection.webp and b/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-point-selection.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-series-selection.webp b/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-series-selection.webp index 1b7b3103a..1411c277a 100644 Binary files a/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-series-selection.webp and b/chart-sdk/blazor/3d-charts/images/selection/blazor-chart-series-selection.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-custom-tooltip.webp b/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-custom-tooltip.webp index 89c27d889..ec662e2cd 100644 Binary files a/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-custom-tooltip.webp and b/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-custom-tooltip.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-fixed-tooltip.webp b/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-fixed-tooltip.webp index a2410c1a8..eed5414d3 100644 Binary files a/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-fixed-tooltip.webp and b/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-fixed-tooltip.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-tooltip-format.webp b/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-tooltip-format.webp index eba0f5da5..5b5bacdf2 100644 Binary files a/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-tooltip-format.webp and b/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-tooltip-format.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-tooltip-template.webp b/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-tooltip-template.webp index ca69f3143..a0ed76f0d 100644 Binary files a/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-tooltip-template.webp and b/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-tooltip-template.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-tooltip.webp b/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-tooltip.webp index 9126a8879..8b5012f57 100644 Binary files a/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-tooltip.webp and b/chart-sdk/blazor/3d-charts/images/tooltip/blazor-column-chart-tooltip.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-custom-empty-point.webp b/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-custom-empty-point.webp index ca4fd0394..9c835303e 100644 Binary files a/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-custom-empty-point.webp and b/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-custom-empty-point.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-data-binding.webp b/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-data-binding.webp index 1d26a9f38..6eeb9efae 100644 Binary files a/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-data-binding.webp and b/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-data-binding.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-empty-point.webp b/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-empty-point.webp index aa02ab6c9..deac8bcb9 100644 Binary files a/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-empty-point.webp and b/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-empty-point.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-remote-data-binding.webp b/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-remote-data-binding.webp index afc7f09a7..20a244bce 100644 Binary files a/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-remote-data-binding.webp and b/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-remote-data-binding.webp differ diff --git a/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-webapi-adaptor-binding.webp b/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-webapi-adaptor-binding.webp index aad176af9..03cebb66e 100644 Binary files a/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-webapi-adaptor-binding.webp and b/chart-sdk/blazor/3d-charts/images/working-data/blazor-chart-webapi-adaptor-binding.webp differ diff --git a/chart-sdk/blazor/3d-charts/legend.md b/chart-sdk/blazor/3d-charts/legend.md index f573395b6..410a5da96 100644 --- a/chart-sdk/blazor/3d-charts/legend.md +++ b/chart-sdk/blazor/3d-charts/legend.md @@ -1,13 +1,13 @@ --- layout: post -title: Legend in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all about the Legends and its customization in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Chart Legend Configuration Examples | Syncfusion® +description: Learn how to enable and customize the legend in Syncfusion Blazor 3D Chart, including position, alignment, and styling options. +platform: Blazor control: 3D Chart documentation: ug --- -# Legend in Blazor 3D Chart Component +# Blazor 3D Chart Legend Legend provides information about the series rendered in the 3D chart. @@ -56,7 +56,7 @@ By using the `Position` property, the legend can be positioned at left, right, } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVzNnMVpznHbBmn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Position in Blazor Column Chart](images/legend/blazor-column-chart-legend-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVHDdijJgmJeEtL?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Legend Position in Blazor Column Chart](images/legend/blazor-column-chart-legend-position.webp)" %} The custom position helps you to position the legend anywhere in the 3D chart using x and y coordinates. @@ -103,7 +103,7 @@ The custom position helps you to position the legend anywhere in the 3D chart us } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBJXHiLpzGiRrpE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend in Custom Position](images/legend/blazor-column-chart-legend-in-custom-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhRNdCjzKPjZElp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart Legend in Custom Position](images/legend/blazor-column-chart-legend-in-custom-position.webp)" %} @@ -152,7 +152,7 @@ The order of the legend items can be reversed by using the `Reverse` property. B } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVpXnsLpIMZlkTl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Legend Reverse](images/legend/blazor-column-chart-legend-reverse.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLxjdCjJKFTcNrH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Column 3D Chart Legend Reverse](images/legend/blazor-column-chart-legend-reverse.webp)" %} **Legend alignment** @@ -202,7 +202,7 @@ The legend can be aligned at near, far or center to the 3D chart using the `Alig } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLpDRsrTICojdGV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Legend Alignment Position](images/legend/blazor-column-chart-legend-alignment-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLHDHCjTAktsLnA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Column 3D Chart Legend Alignment Position](images/legend/blazor-column-chart-legend-alignment-position.webp)" %} ## Legend customization @@ -249,7 +249,7 @@ To change the legend icon shape, `LegendShape` property in the `Series` can be } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLTNRiBpyVrMjeP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Shape in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-shape.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBntHWNTKYIAhwe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Legend Shape in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-shape.webp)" %} ### Legend size @@ -298,7 +298,7 @@ By default, legend takes 20% - 25% of the 3D chart's height horizontally, when i } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrfDHMLpeVFwoRs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Custom Size](images/legend/blazor-column-chart-legend-custom-size.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBnNdsNJqukvRor?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart Legend with Custom Size](images/legend/blazor-column-chart-legend-custom-size.webp)" %} ### Legend item Size @@ -346,7 +346,7 @@ The size of the legend items can be customized by using the `ShapeHeight` and `S } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rthftHMLpyqztChS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Legend Shape with Custom Size](images/legend/blazor-column-chart-custom-legend-shape-size.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrxtnsjfJjUxAvs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart Legend Shape with Custom Size](images/legend/blazor-column-chart-custom-legend-shape-size.webp)" %} ### Paging for legend @@ -394,7 +394,7 @@ Paging will be enabled by default, when the legend items exceeds the legend boun } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVTDnChfygYhRAJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Paging](images/legend/blazor-column-chart-legend-paging.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrxjxijTzDPxGlW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart Legend with Paging](images/legend/blazor-column-chart-legend-paging.webp)" %} ### Legend text wrap @@ -442,7 +442,7 @@ When the legend text exceeds the container, the text can be wrapped by using the } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpXRsLJoJxytCf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart Legend with Wrap](images/legend/blazor-column-chart-legend-text-wrap.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVnjHCXJJhiRFTh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor 3D Chart Legend with Wrap](images/legend/blazor-column-chart-legend-text-wrap.webp)" %} ## Series selection through legend @@ -490,7 +490,7 @@ By default, you can collapse the series visibility by clicking the legend. On th } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhzNHiLfoSHNKph?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend with Series Selection](images/legend/blazor-column-chart-legend-series-selection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVxZRWNfTBuTcSZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart Legend with Series Selection](images/legend/blazor-column-chart-legend-series-selection.webp)" %} ## Collapsing legend item @@ -537,7 +537,7 @@ By default, series `Name` will be displayed as legend. To skip the legend for a } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLJDxWLfeYGOxOB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Legend Item in Blazor Column 3D Chart](images/legend/blazor-column-chart-hide-legend-item.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBxZniZffzsmLYu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Hiding Legend Item in Blazor Column 3D Chart](images/legend/blazor-column-chart-hide-legend-item.webp)" %} ## Legend title @@ -584,7 +584,7 @@ You can set title for legend using `Title` property in `LegendSettings`. The `Si } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhztRiBfnXfzkzm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Legend Title in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhdNRMNTJJwAgor?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Legend Title in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-title.webp)" %} ## Arrow page navigation @@ -632,7 +632,7 @@ The page number will always be visible while using legend paging. It is now poss } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLfjxChpxNYlHvV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Enabling legend pages in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-with-page-navigation.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBRtRWXpfyKrbhY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Enabling legend pages in Blazor Column 3D Chart](images/legend/blazor-column-chart-legend-with-page-navigation.webp)" %} ### Legend Item Padding @@ -680,4 +680,4 @@ The `ItemPadding` property can be used to adjust the space between the legend it } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhTjnsVpdCodgcy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Legend Shape with Item Padding](images/legend/blazor-column-chart-legend-item-padding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhHtxCtfpePfvIj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart Legend Shape with Item Padding](images/legend/blazor-column-chart-legend-item-padding.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/logarithmic-axis.md b/chart-sdk/blazor/3d-charts/logarithmic-axis.md index 2903ec093..96de91282 100644 --- a/chart-sdk/blazor/3d-charts/logarithmic-axis.md +++ b/chart-sdk/blazor/3d-charts/logarithmic-axis.md @@ -1,13 +1,13 @@ --- layout: post -title: Logarithmic Axis in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about Logarithmic Axis in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Chart Logarithmic Axis Examples | Syncfusion® +description: Learn how to use a logarithmic axis in Syncfusion Blazor 3D Chart to visualize data spanning multiple orders of magnitude. +platform: Blazor control: 3D Chart documentation: ug --- -# Logarithmic Axis in Blazor 3D Chart Component +# Blazor 3D Chart Logarithmic Axis @@ -51,7 +51,7 @@ Logarithmic axis uses logarithmic scale and it is very useful in visualizing dat } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrJtnsUsBeKhZTc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhnXnWtfLBfHkTa?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor 3D Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.webp)" %} ## Range @@ -95,7 +95,7 @@ The range of an axis will be calculated automatically based on the provided data } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhzZnCUCBSddGpF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-column-chart-axis-based-on-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrnDniZTVBYXqdB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Column 3D Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-column-chart-axis-based-on-range.webp)" %} ## Logarithmic base @@ -139,7 +139,7 @@ Logarithmic base can be customized by using the `LogBase` property of the axis } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBTZdWqWhouoYOv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVxZxstfhUoieeR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-column-chart-logarithmic-axis-with-base.webp)" %} ## Logarithmic interval @@ -183,4 +183,4 @@ The interval of the logarithmic axis can be customized by using the `Interval` p } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBTNniUMVdBYcdW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column 3D Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLHXdstTVpipeOU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Column 3D Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-column-chart-axis-based-on-range-interval.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/multiple-panes.md b/chart-sdk/blazor/3d-charts/multiple-panes.md index 7ff39d119..5afba47fb 100644 --- a/chart-sdk/blazor/3d-charts/multiple-panes.md +++ b/chart-sdk/blazor/3d-charts/multiple-panes.md @@ -1,13 +1,13 @@ --- layout: post -title: Multiple Panes in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about Multiple Panes in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Chart Multiple Panes Examples | Syncfusion® +description: Learn how to divide the Syncfusion Blazor 3D Chart area into multiple panes using the Rows and Columns properties with code samples. +platform: Blazor control: 3D Chart documentation: ug --- -# Multiple Panes in Blazor 3D Chart Component +# Blazor 3D Chart Multiple Panes The chart area can be divided into multiple panes using `Rows` and `Columns`. @@ -64,7 +64,7 @@ To split the chart area vertically into number of rows, use `Rows` property of t } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzXxiAsBdkbxIl?appbar=true&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rows with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhxtdWtJKNuhaLI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Rows with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp)" %} For spanning the vertical axis along multiple rows, use `Span` property of an axis. @@ -114,7 +114,7 @@ For spanning the vertical axis along multiple rows, use `Span` property of an a ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhzjniUWLwATaKo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Row spanning with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthHZRWZzKWpzPRp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Row spanning with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp)" %} ## Columns @@ -169,7 +169,7 @@ To split the chart area horizontally into number of columns, use `Columns` prope } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLfjdsgiVmdedVN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Columns with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLdjRCNTAsaqLOv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Columns with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.webp)" %} The `Span` property of the axis can be used to span the horizontal axis across multiple column. @@ -219,4 +219,4 @@ The `Span` property of the axis can be used to span the horizontal axis across m } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLzXRiqsVGkcDLy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Column Spanning with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBxNxitfAhrbnfP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Column Spanning with Multiple Panes in Blazor 3D Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/numeric-axis.md b/chart-sdk/blazor/3d-charts/numeric-axis.md index 6987930eb..4a7354f26 100644 --- a/chart-sdk/blazor/3d-charts/numeric-axis.md +++ b/chart-sdk/blazor/3d-charts/numeric-axis.md @@ -1,15 +1,15 @@ --- layout: post -title: Numeric Axis in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about the Numeric Axis in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Chart Numeric Axis Examples | Syncfusion® +description: Learn how to use a numeric axis in Syncfusion Blazor 3D Chart to represent numeric values, including ValueType and Double default settings. +platform: Blazor control: 3D Chart documentation: ug --- -# Numeric Axis in Blazor 3D Chart Component +# Blazor 3D Chart Numeric Axis The numeric axis can be used to represent the numeric values of data in 3D chart. By default, the `ValueType` of an axis is `Double`. @@ -44,7 +44,7 @@ The numeric axis can be used to represent the numeric values of data in 3D chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhJjRsUMqZPMXVt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Numeric Axis](images/numeric-axis/blazor-column-chart-numeric-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrnDRitUkOIjpxw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Numeric Axis](images/numeric-axis/blazor-column-chart-numeric-axis.webp)" %} ## Range @@ -82,7 +82,7 @@ The range of an axis will be calculated automatically based on the provided data } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJZHCACUsVDOLk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Column 3D Chart Axis based on Range](images/numeric-axis/blazor-column-chart-axis-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhRjnMtfDZtuEqy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Column 3D Chart Axis based on Range](images/numeric-axis/blazor-column-chart-axis-range.webp)" %} ## Range padding @@ -131,7 +131,7 @@ When the `RangePadding` is set to **None**, the minimum and maximum of an ax } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLpDnMqCKVVDIJp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart without RangePadding](images/numeric-axis/blazor-column-chart-range-without-padding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLdtdsNfNZoGcGJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart without RangePadding](images/numeric-axis/blazor-column-chart-range-without-padding.webp)" %} **Numeric - Round** @@ -169,7 +169,7 @@ When the `RangePadding` is set to **Round**, the minimum and maximum will be r } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rthTtHiUMKhdGTjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Round RangePadding](images/numeric-axis/blazor-column-chart-round-range-padding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrRtdiXzjWiSNNz?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Round RangePadding](images/numeric-axis/blazor-column-chart-round-range-padding.webp)" %} **Numeric - Additional** @@ -207,7 +207,7 @@ When the `RangePadding` is set to **Additional**, interval of an axis will be } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhpZxMAiUKXQVEl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Additional RangePadding](images/numeric-axis/blazor-column-chart-additional-range-padding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrRNnMZJCjGoCZF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Additional RangePadding](images/numeric-axis/blazor-column-chart-additional-range-padding.webp)" %} **Numeric - Normal** @@ -245,7 +245,7 @@ When the `RangePadding` is set to **Normal**, padding is applied to the axis } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBTjdsUigqzLKgV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Normal RangePadding](images/numeric-axis/blazor-column-chart-normal-range-padding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthxNHCXpiiKjvnQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Normal RangePadding](images/numeric-axis/blazor-column-chart-normal-range-padding.webp)" %} **Numeric - Auto** @@ -284,7 +284,7 @@ When the `RangePadding` is set to **Auto**, horizontal numeric axis takes **N } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBJNHWUiAgPWmCw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Auto RangePadding](images/numeric-axis/blazor-column-chart-auto-rangepadding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrRXxsZpMVKFIpL?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Auto RangePadding](images/numeric-axis/blazor-column-chart-auto-rangepadding.webp)" %} ## Label format @@ -329,7 +329,7 @@ Numeric labels can be formatted by using the `LabelFormat` property. Also, it s } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVzDRCUsATCTBYJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Formatting in Blazor Column 3D Chart](images/numeric-axis/blazor-column-chart-label-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjLdXHWjTsAXHcja?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Label Formatting in Blazor Column 3D Chart](images/numeric-axis/blazor-column-chart-label-format.webp)" %} The table below shows the results of applying various commonly used label formats to numeric data. @@ -430,7 +430,7 @@ To separate groups of thousands for numerical values, use the `UseGroupingSepara } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLfZHiUMgzGZgqO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping Separator in Blazor Column 3D Chart](images/numeric-axis/blazor-column-chart-grouping-separator.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVHXdCXJWURhSzP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Grouping Separator in Blazor Column 3D Chart](images/numeric-axis/blazor-column-chart-grouping-separator.webp)" %} ## Custom label format @@ -472,4 +472,4 @@ Axis also supports custom label format using placeholders such as {value}K, wher } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBztRiqiUoUFbWM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Label Format](images/numeric-axis/blazor-column-chart-custom-label-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLRjdstfWzVLtKf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom Label Format](images/numeric-axis/blazor-column-chart-custom-label-format.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/print-export.md b/chart-sdk/blazor/3d-charts/print-export.md index 2983c21eb..d95f12512 100644 --- a/chart-sdk/blazor/3d-charts/print-export.md +++ b/chart-sdk/blazor/3d-charts/print-export.md @@ -1,13 +1,13 @@ --- layout: post -title: Print and Export in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about Print and Export in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Chart Print and Export Examples | Syncfusion® +description: Learn how to print and export Syncfusion Blazor 3D Chart using PrintAsync, or export to image, SVG, and PDF formats. +platform: Blazor control: 3D Chart documentation: ug --- -# Print and Export in Blazor 3D Chart Component +# Blazor 3D Chart Print and Export ## Print diff --git a/chart-sdk/blazor/3d-charts/selection.md b/chart-sdk/blazor/3d-charts/selection.md index 9cba0e15b..7c88f0d57 100644 --- a/chart-sdk/blazor/3d-charts/selection.md +++ b/chart-sdk/blazor/3d-charts/selection.md @@ -1,15 +1,15 @@ --- layout: post -title: Selection in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about Selection feature in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Chart Selection Examples | Syncfusion® +description: Learn about selection in Syncfusion Blazor 3D Chart, including Point, Series, and Cluster selection modes with code samples. +platform: Blazor control: 3D Chart documentation: ug --- -# Selection in Blazor 3D Chart Component +# Blazor 3D Chart Selection The 3D chart provides selection support for the series and its data points on mouse click. @@ -67,7 +67,7 @@ To select a point, set the `SelectionMode` property to **Point**. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVpjnMgCpXGYJIf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Point Selection](images/selection/blazor-chart-point-selection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLxtHsXJJuaiovf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Point Selection](images/selection/blazor-chart-point-selection.webp)" %} ## Series @@ -114,7 +114,7 @@ To select a series, set the `SelectionMode` property to **Series**. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrpXHWUCJCTRDgK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Series Selection](images/selection/blazor-chart-series-selection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLdjxCXfIZnReZC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Series Selection](images/selection/blazor-chart-series-selection.webp)" %} ## Cluster @@ -161,7 +161,7 @@ To select the points that corresponds to the same index in all the series, set t } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhpXxsKCJCblvOv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Cluster Selection](images/selection/blazor-chart-cluster-selection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBRZdCDJoiKRbtk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Cluster Selection](images/selection/blazor-chart-cluster-selection.webp)" %} ## Selection type @@ -208,7 +208,7 @@ To select multiple points or series, enable the `AllowMultiSelection` property. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVTZxiqipLEJFtn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Multiple Selection](images/selection/blazor-chart-multiple-selection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrxNxCjToCEVMlG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Multiple Selection](images/selection/blazor-chart-multiple-selection.webp)" %} ## Selection during initial loading @@ -257,7 +257,7 @@ In a 3D chart, selecting a point or series during initial loading can only be do } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVJDnsqWfUAipdG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Selection during initial loading](images/selection/blazor-chart-initial-selection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLxNRWNTorgyrlH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Selection during initial loading](images/selection/blazor-chart-initial-selection.webp)" %} ## Selection through legend @@ -302,4 +302,4 @@ To select a point or series through legend use the `ToggleVisibility` property. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrpDRsqiTqkPxPM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Legend Selection](images/selection/blazor-chart-legend-selection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVRZRiNTyVQbBjQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Legend Selection](images/selection/blazor-chart-legend-selection.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/tool-tip.md b/chart-sdk/blazor/3d-charts/tool-tip.md index 00bccee6a..9c0dd9c14 100644 --- a/chart-sdk/blazor/3d-charts/tool-tip.md +++ b/chart-sdk/blazor/3d-charts/tool-tip.md @@ -1,13 +1,13 @@ --- layout: post -title: Tooltip in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about Tooltip and its customization in Blazor 3D Chart component and much more. -platform: chart-sdk +title: Blazor 3D Chart Tooltip Examples | Syncfusion® +description: Learn how to enable and customize tooltips in Syncfusion Blazor 3D Chart, including format, template, and styling options. +platform: Blazor control: 3D Chart documentation: ug --- -# Tooltip in Blazor 3D Chart Component +# Blazor 3D Chart Tooltip @@ -54,7 +54,7 @@ By default, tooltip is not visible. The tooltip can be enabled by setting the `E } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBfXHiKipfupKhA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip](images/tooltip/blazor-column-chart-tooltip.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhdZRWjTpGBlNUX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Tooltip](images/tooltip/blazor-column-chart-tooltip.webp)" %} ## Fixed tooltip @@ -99,7 +99,7 @@ By default, tooltip track the mouse movement, but the tooltip can be set in fixe } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBzNHiACfySnnZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Fixed Tooltip](images/tooltip/blazor-column-chart-fixed-tooltip.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVxDRMjffGmocFW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Fixed Tooltip](images/tooltip/blazor-column-chart-fixed-tooltip.webp)" %} ## Format the tooltip @@ -145,7 +145,7 @@ By default, tooltip shows information of x and y value in points. In addition to } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBpNnsgspnNkiNQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip Format](images/tooltip/blazor-column-chart-tooltip-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVdtRWNTTPBEuKj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Tooltip Format](images/tooltip/blazor-column-chart-tooltip-format.webp)" %} @@ -202,7 +202,7 @@ Any HTML elements can be displayed within the tooltip by using the `Chart3DToolt } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhpDnCUWTxpwqMH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Tooltip Template](images/tooltip/blazor-column-chart-tooltip-template.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhRDnsjpTFPCtHh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Tooltip Template](images/tooltip/blazor-column-chart-tooltip-template.webp)" %} ## Customize the appearance of tooltip @@ -247,4 +247,4 @@ The `Fill` and `Border` properties are used to customize the background color an } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrTXxsgsfmibwll?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Custom Tooltip](images/tooltip/blazor-column-chart-custom-tooltip.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhHjRsNJpEqBTda?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Custom Tooltip](images/tooltip/blazor-column-chart-custom-tooltip.webp)" %} diff --git a/chart-sdk/blazor/3d-charts/working-with-data.md b/chart-sdk/blazor/3d-charts/working-with-data.md index b7dc88411..5a8ee568d 100644 --- a/chart-sdk/blazor/3d-charts/working-with-data.md +++ b/chart-sdk/blazor/3d-charts/working-with-data.md @@ -1,17 +1,17 @@ --- layout: post -title: Working with Data in Blazor 3D Chart Component | Syncfusion® -description: Checkout and learn here all features about working with data in Blazor 3D Chart component, it's elements and more. -platform: chart-sdk +title: Blazor 3D Chart Working with Data Examples | Syncfusion® +description: Learn how to bind data to Syncfusion Blazor 3D Chart using SfDataManager, RESTful JSON services, or IEnumerable with code samples. +platform: Blazor control: 3D Chart documentation: ug --- -# Working with Data in Blazor 3D Chart Component +# Blazor 3D Chart Working with Data -The 3D Chart uses [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which supports both RESTful JSON data services binding and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart3D.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) value can be set using either [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) property values or a list of business objects. +The 3D Chart uses [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which supports both RESTful JSON data services binding and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart3D.Chart3DSeries.html#Syncfusion_Blazor_Chart3D_Chart3DSeries_DataSource) value can be set using either [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) property values or a list of business objects. It supports the following data binding methods: * List binding @@ -54,7 +54,7 @@ An IEnumerable object can be assigned to the `DataSource` property. The list dat } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrJDdCgiIrsmTGI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Colum 3D Chart with Data Binding](images/working-data/blazor-chart-data-binding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLnZxDvKmfSPkUR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Colum 3D Chart with Data Binding](images/working-data/blazor-chart-data-binding.webp)" %} N> By default, [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) uses **BlazorAdaptor** for list data-binding. @@ -175,7 +175,7 @@ The remote data can be bound to the 3D chart using the [SfDataManager](https://h ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVfjxsgWyogzTfx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Remote Data Binding in Blazor 3D Chart](images/working-data/blazor-chart-remote-data-binding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLRNRjbqwSSCiBB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Remote Data Binding in Blazor 3D Chart](images/working-data/blazor-chart-remote-data-binding.webp)" %} ### Binding with OData services @@ -227,7 +227,7 @@ The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLztdMKsxBTngfW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor 3D Chart with WebApiAdaptor Binding](images/working-data/blazor-chart-webapi-adaptor-binding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBHjRDFAGmxTPGZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor 3D Chart with WebApiAdaptor Binding](images/working-data/blazor-chart-webapi-adaptor-binding.webp)" %} ### Sending additional parameters to the server @@ -305,7 +305,7 @@ The data points that uses the `null` or `undefined` as value are considered as e } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLJZHMgMnsEADrH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Empty Points](images/working-data/blazor-chart-empty-point.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBHjdtvAGvTKTxB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Empty Points](images/working-data/blazor-chart-empty-point.webp)" %} **Customizing empty point** @@ -352,4 +352,4 @@ The specific color for empty point can be set by the `Fill` property in `Chart3D } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhzXxiUsnqLRyNK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column 3D Chart with Customized Empty Points](images/working-data/blazor-chart-custom-empty-point.webp)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhHtnWZsRbvZjPc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column 3D Chart with Customized Empty Points](images/working-data/blazor-chart-custom-empty-point.webp)" %} \ No newline at end of file diff --git a/chart-sdk/blazor/accumulation-chart/accessibility.md b/chart-sdk/blazor/accumulation-chart/accessibility.md index 2db219345..ce3d4f892 100644 --- a/chart-sdk/blazor/accumulation-chart/accessibility.md +++ b/chart-sdk/blazor/accumulation-chart/accessibility.md @@ -1,13 +1,13 @@ --- layout: post -title: Accessibility in Blazor Accumulation Chart Component | Syncfusion® -description: Checkout and learn here all about Accessibility using Keyboard navigation in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Accumulation Chart Accessibility Examples | Syncfusion® +description: Learn how to enable accessibility in Syncfusion Blazor Accumulation Chart with keyboard navigation, screen reader support, and WCAG 2.2 compliance. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Accessibility in Blazor Accumulation Chart Component +# Blazor Accumulation Chart Accessibility The Blazor Accumulation Chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/blazor/accumulation-chart/adaptive-layout.md b/chart-sdk/blazor/accumulation-chart/adaptive-layout.md index 15f9fe953..1c5a77d44 100644 --- a/chart-sdk/blazor/accumulation-chart/adaptive-layout.md +++ b/chart-sdk/blazor/accumulation-chart/adaptive-layout.md @@ -1,13 +1,13 @@ --- layout: post -title: Adaptive Layout in Blazor Accumulation Chart Component | Syncfusion® -description: Check out and learn how to configure and utilize the Adaptive Layout in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Accumulation Chart Adaptive Layout for Mobile | Syncfusion® +description: Learn how to enable adaptive layout in Syncfusion Blazor Accumulation Chart. Auto-resize chart elements for mobile and small-screen containers. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Adaptive Layout in Blazor Accumulation Chart Component +# Blazor Accumulation Chart Adaptive Layout When viewing the accumulation chart on mobile devices, some elements may not display properly due to limited screen space. The **Accumulation Chart Adaptive Layout** feature dynamically adjusts chart elements for optimal display based on screen size and orientation. Enable the `EnableAdaptiveRendering` property to allow the chart to automatically adapt to container size changes, ensuring clear alignment and visibility of elements such as the legend, data labels, chart title, and more. @@ -61,7 +61,7 @@ The table below outlines the behavior of chart elements under specific condition | Datalabel | Radius < 300 / Radius < 200 | Data label moves inside / Datalabel is disabled | | Legend | Height < 300 / Width < 300 | Moves bottom or top legend to the right if width is greater than 200px; otherwise, disabled / Moves right or left legend to bottom if height is greater than 200px; otherwise, disabled | -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=fluent2) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. ## See also diff --git a/chart-sdk/blazor/accumulation-chart/animation.md b/chart-sdk/blazor/accumulation-chart/animation.md index 0858c546b..53c23edee 100644 --- a/chart-sdk/blazor/accumulation-chart/animation.md +++ b/chart-sdk/blazor/accumulation-chart/animation.md @@ -1,13 +1,13 @@ --- layout: post -title: Animation in Blazor Accumulation Chart Component | Syncfusion® -description: Checkout and learn here all about Animation in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Accumulation Chart Animation Examples | Syncfusion® +description: Learn how to enable and customize animation in Syncfusion Blazor Accumulation Chart. Configure duration, delay, and per-series animation settings. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Animation in Blazor Accumulation Chart Component +# Blazor Accumulation Chart Animation You can customize animation for a series using [`Animation`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html) property. You can enable or disable animation of the series using [`Enable`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Enable) property. [`Duration`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Duration) specifies the duration of an animation and [`Delay`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnimation.html#Syncfusion_Blazor_Charts_AccumulationChartAnimation_Delay) allows us to start the animation at desire time. @@ -86,4 +86,4 @@ You can programmatically refresh chart using [Refresh](https://help.syncfusion.c } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBAWrMgzIuHCzXH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVRtwrXKwCqajVa?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} \ No newline at end of file diff --git a/chart-sdk/blazor/accumulation-chart/annotation.md b/chart-sdk/blazor/accumulation-chart/annotation.md index cb66eb451..5a8e0ab38 100644 --- a/chart-sdk/blazor/accumulation-chart/annotation.md +++ b/chart-sdk/blazor/accumulation-chart/annotation.md @@ -1,13 +1,13 @@ --- layout: post -title: Annotation in Blazor Accumulation Chart Component | Syncfusion® -description: Checkout and learn here all about Annotation in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Accumulation Chart Annotation Examples | Syncfusion® +description: Learn how to add annotations in Syncfusion Blazor Accumulation Chart to highlight regions of interest with text, shapes, or images. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Annotation in Blazor Accumulation Chart Component +# Blazor Accumulation Chart Annotation Annotations are texts, shapes, or images that are used to highlight a specific region of interest in a chart. The [AccumulationChartAnnotation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnnotation.html) property allows to add annotations to the chart. Specify the element that needs to be displayed in the accumulation chart area by using the [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartAnnotation.html#Syncfusion_Blazor_Charts_AccumulationChartAnnotation_Content) property of the annotation. @@ -51,7 +51,7 @@ Annotations are texts, shapes, or images that are used to highlight a specific r ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhqChsUTScrGTjL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Annotation in Blazor Accumulation Chart](images/annotation/blazor-accumulation-chart-annotation.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrnZwVZKndggkAX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Annotation in Blazor Accumulation Chart](images/annotation/blazor-accumulation-chart-annotation.webp)" %} ## Region @@ -97,7 +97,7 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrKsrMATIcPtyjZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Region](images/annotation/blazor-accumulation-chart-region.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVxNmhtKRoeFVZP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart with Region](images/annotation/blazor-accumulation-chart-region.webp)" %} ## Co-ordinate units @@ -143,9 +143,9 @@ The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgihWKpyvURKFW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays Co-ordinate Units](images/annotation/blazor-accumulation-chart-coordinate-unit.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVnNGhXqHPVgZgR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart displays Co-ordinate Units](images/annotation/blazor-accumulation-chart-coordinate-unit.webp)" %} -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=fluent2) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. ## See also diff --git a/chart-sdk/blazor/accumulation-chart/center-label.md b/chart-sdk/blazor/accumulation-chart/center-label.md index 9477d066f..2dae84d79 100644 --- a/chart-sdk/blazor/accumulation-chart/center-label.md +++ b/chart-sdk/blazor/accumulation-chart/center-label.md @@ -1,13 +1,13 @@ --- layout: post -title: Center Label in Blazor Pie and Donut Chart Component | Syncfusion® -description: Checkout and learn here all about Center Label in Blazor Pie and Donut Chart component and much more details. -platform: chart-sdk +title: Blazor Accumulation Chart Center Label Examples | Syncfusion® +description: Learn how to use center labels in Syncfusion Blazor Accumulation Chart. Display custom text, totals, or percentages at the center of pie and donut charts. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Center Label in Blazor Pie and Donut Chart Component +# Blazor Pie and Donut Chart Center Label The center label feature allows you to place custom text in the middle of pie and donut charts using the [AccumulationChartCenterLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartCenterLabel.html). This is especially useful for displaying the chart's title, percentage distribution, or other key metrics pertinent to the visualized data. @@ -44,7 +44,7 @@ You can configure the text that appears in the center using the [Text](https://h } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBetHBdgvneoPva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label](./images/center-label/blazor-accumulation-chart-with-center-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVRXmBNzZUaifGk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart with Center Label](./images/center-label/blazor-accumulation-chart-with-center-label.webp)" %} ## Hover Text @@ -83,7 +83,7 @@ N> Line breaks can be provided to texts in the `HoverTextFormat` property using } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBINdVRqvFzEVfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label Dynamic Text](./images/center-label/blazor-accumulation-chart-with-center-label-hover-text.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhRjGrZpXdgJBwK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart with Center Label Dynamic Text](./images/center-label/blazor-accumulation-chart-with-center-label-hover-text.webp)" %} ## Customization @@ -123,9 +123,9 @@ The position of the center label can be adjusted using the [XOffset](https://hel } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZryXRrRqbOzXVbD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Center Label Customization](./images/center-label/blazor-accumulation-chart-with-center-label-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVdNQBtpjwhfBMg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart with Center Label Customization](./images/center-label/blazor-accumulation-chart-with-center-label-customization.webp)" %} -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=fluent2) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. ## See also diff --git a/chart-sdk/blazor/accumulation-chart/chart-print.md b/chart-sdk/blazor/accumulation-chart/chart-print.md index 9596ce174..80cb6c014 100644 --- a/chart-sdk/blazor/accumulation-chart/chart-print.md +++ b/chart-sdk/blazor/accumulation-chart/chart-print.md @@ -1,13 +1,13 @@ --- layout: post -title: Print and Export in Blazor Accumulation Chart Component | Syncfusion® -description: Checkout and learn here all about Print and Export in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Accumulation Chart Print and Export Examples | Syncfusion® +description: Learn how to print and export Syncfusion Blazor Accumulation Chart. Use PrintAsync for browser printing and export to image, SVG, or PDF. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Print and Export in Blazor Accumulation Chart Component +# Blazor Accumulation Chart Print and Export ## Print @@ -117,7 +117,7 @@ The optional parameters for this method are, ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBAshMJWGLIalWX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrRDcBDJBahYjoF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Customizing the exported chart using Exporting event @@ -236,9 +236,9 @@ In the code example below, the accumulation chart is exported to Excel format. T } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htryXJtGrZTUKjJB?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBHjwBNprxkwsFa?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. ## See also diff --git a/chart-sdk/blazor/accumulation-chart/chart-types/funnel.md b/chart-sdk/blazor/accumulation-chart/chart-types/funnel.md index be1c300c2..9171cb266 100644 --- a/chart-sdk/blazor/accumulation-chart/chart-types/funnel.md +++ b/chart-sdk/blazor/accumulation-chart/chart-types/funnel.md @@ -1,13 +1,13 @@ --- layout: post -title: Funnel in Blazor Accumulation Chart Component | Syncfusion® -description: Checkout and learn here all about Funnel in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Funnel Chart Examples | Syncfusion® +description: Learn how to create a Funnel Chart in Syncfusion Blazor Accumulation Chart to visualize stages in a sales process and potential revenue. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Funnel in Blazor Accumulation Chart Component +# Funnel Chart in Blazor [Funnel Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/funnel-chart) is often used to represent stages in a sales process and to show the amount of potential revenue for each stage. To render the [Funnel Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/funnel-chart), set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Type) as [Funnel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationType.html#Syncfusion_Blazor_Charts_AccumulationType_Funnel). @@ -45,7 +45,7 @@ documentation: ug ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhgCrCUpgfyPyNU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart](../images/funnel/blazor-funnel-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthntmCeLoWVaYFO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Funnel Chart](../images/funnel/blazor-funnel-chart.webp)" %} ## Funnel Size @@ -85,9 +85,9 @@ The size of the funnel chart can be customized by using the [Width](https://help ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLAWVCgfAlkvtpq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Funnel Size in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-size-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhxDmWIreVBVuEB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Funnel Size in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-size-customization.webp)" %} -N> The [Blazor Funnel Chart](https://blazor.syncfusion.com/demos/chart/funnel) example can be explored to learn to render and configure the funnel chart. +N> The [Blazor Funnel Chart](https://blazor.syncfusion.com/demos/chart/funnel?theme=fluent2) example can be explored to learn to render and configure the funnel chart. ## Funnel neck size @@ -127,7 +127,7 @@ The neck size of the funnel chart can be customized by using the [NeckWidth](htt ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVKshsATguqmNHu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Funnel Neck Size in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-neck-size.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhdDcioVSqcLZqM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Funnel Neck Size in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-neck-size.webp)" %} ## Gap between funnel segments @@ -167,7 +167,7 @@ The neck size of the funnel chart can be customized by using the [NeckWidth](htt ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhgshWqpAulylIW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with Gap](../images/funnel/blazor-funnel-chart-with-gap.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhHXwCyBITHlNGm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Funnel Chart with Gap](../images/funnel/blazor-funnel-chart-with-gap.webp)" %} ## Funnel explode @@ -207,7 +207,7 @@ Points can be exploded on mouse click by setting the [Explode](https://help.sync ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLKMLsqzpZBowwH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Explode in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-explode.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBHDGWSByIedrlB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Explode in Blazor Funnel Chart](../images/funnel/blazor-funnel-chart-explode.webp)" %} ## Smart Data Label @@ -259,7 +259,7 @@ Labels will be arranged automatically on the left side of the funnel and pyramid } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVKWrCqppsLzynA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with Smart Data Label](../images/funnel/blazor-funnel-chart-smart-data-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhRXGseVIcTBxye?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Funnel Chart with Smart Data Label](../images/funnel/blazor-funnel-chart-smart-data-label.webp)" %} ## Border radius @@ -299,9 +299,9 @@ The corners of the first data point and last data point in the funnel chart seri } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjheDHBnqcxEcNgL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Funnel Chart with border radius applied.](../images/funnel/blazor-funnel-border-radius.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLRjcWohyPOvlbM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Funnel Chart with border radius applied.](../images/funnel/blazor-funnel-border-radius.webp)" %} -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/funnel?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/funnel?theme=fluent2) to know various features of accumulation charts and how it is used to represent numeric proportional data. ## See also diff --git a/chart-sdk/blazor/accumulation-chart/chart-types/pie-doughnut.md b/chart-sdk/blazor/accumulation-chart/chart-types/pie-doughnut.md index 66290c703..4086df82f 100644 --- a/chart-sdk/blazor/accumulation-chart/chart-types/pie-doughnut.md +++ b/chart-sdk/blazor/accumulation-chart/chart-types/pie-doughnut.md @@ -1,13 +1,13 @@ --- layout: post -title: Pie and Doughnut in Blazor Accumulation Chart Component | Syncfusion® -description: Checkout and learn here all about Pie and Doughnut in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Pie and Doughnut Chart Examples | Syncfusion® +description: Learn how to create Pie and Doughnut Charts in Syncfusion Blazor Accumulation Chart to display proportional data and percentage distribution. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Pie and Doughnut in Blazor Accumulation Chart Component +# Pie and Doughnut Chart in Blazor ## Pie Chart @@ -47,7 +47,7 @@ The [Pie Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsrWqJDwACRFV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBxjmseLjkZamMo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart.webp)" %} ## Radius customization @@ -87,7 +87,7 @@ The radius of the pie series will be set to 80% of its size (minimum of chart wi ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsriKfjQmubFt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Radius in Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart-radius-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrHjwMeLsjYrpXm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Radius in Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart-radius-customization.webp)" %} ## Pie center @@ -128,7 +128,7 @@ The center x and center y can be used to change the pie's center position. The p ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrqMLCUztbofzWG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Pie Chart Center Position](../images/pie-dough-nut/blazor-pie-chart-center-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrHNmiSLsTnDPdd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Pie Chart Center Position](../images/pie-dough-nut/blazor-pie-chart-center-position.webp)" %} ## Various Radius Pie Chart @@ -170,7 +170,7 @@ The [Radius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhAsLWATjPOLGxv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart displays Various Radius](../images/pie-dough-nut/blazor-pie-chart-with-various-radius.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhHNQWSriHtrDcx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Pie Chart displays Various Radius](../images/pie-dough-nut/blazor-pie-chart-with-various-radius.webp)" %} ## Doughnut chart @@ -210,7 +210,7 @@ The doughnut chart can be created by setting the [InnerRadius](https://help.sync ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrKCBsqzZagDOTz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Doughnut Chart](../images/pie-dough-nut/blazor-doughnut-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBHXwsohMbHLoWg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Doughnut Chart](../images/pie-dough-nut/blazor-doughnut-chart.webp)" %} ## Start and end angles @@ -251,7 +251,7 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhqsBCKTjkHQfyz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Start and End angles in Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart-start-angle-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVnDwMyVVCPpFlE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Start and End angles in Blazor Pie Chart](../images/pie-dough-nut/blazor-pie-chart-start-angle-customization.webp)" %} ## Color and text mapping @@ -293,7 +293,7 @@ The [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrUCrWqTiZCBNJq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart with Color and Text Mapping](../images/pie-dough-nut/blazor-pie-chart-text-mapping.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhdXcioLrzkedaa?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Pie Chart with Color and Text Mapping](../images/pie-dough-nut/blazor-pie-chart-text-mapping.webp)" %} ## Border radius @@ -327,7 +327,7 @@ The corners of all the slices in the pie/donut chart series can be rounded using } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjreZdhRKPiaFxIm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart with border radius applied.](../images/pie-dough-nut/blazor-pie-chart-border-radius.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrxtQsoVLRKQhGr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Pie Chart with border radius applied.](../images/pie-dough-nut/blazor-pie-chart-border-radius.webp)" %} ## Hide pie or doughnut border @@ -366,9 +366,9 @@ When the mouse hovers over the pie/doughnut chart, the border appears by default ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htVqCLWUzWZnpzJw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Blazor Pie Chart Border](../images/pie-dough-nut/Blazor-pie-chart-disable-border.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrxZcMIVhGKCmUd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Hiding Blazor Pie Chart Border](../images/pie-dough-nut/Blazor-pie-chart-disable-border.webp)" %} -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=fluent2) to know various features of accumulation charts and how it is used to represent numeric proportional data. ## See also diff --git a/chart-sdk/blazor/accumulation-chart/chart-types/pyramid.md b/chart-sdk/blazor/accumulation-chart/chart-types/pyramid.md index 8403f68af..876ab1c4a 100644 --- a/chart-sdk/blazor/accumulation-chart/chart-types/pyramid.md +++ b/chart-sdk/blazor/accumulation-chart/chart-types/pyramid.md @@ -1,13 +1,13 @@ --- layout: post -title: Pyramid in Blazor Accumulation Chart Component | Syncfusion® -description: Checkout and learn here all about Pyramid in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Pyramid Chart Examples | Syncfusion® +description: Learn how to render a Pyramid Chart in Syncfusion Blazor Accumulation Chart to visualize hierarchical data in a triangle with divided sections. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Pyramid in Blazor Accumulation Chart Component +# Pyramid Chart in Blazor The [Pyramid Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/pyramid-chart) is used to visualize the hierarchical data in upside triangle shape with horizontally divided section. To render the `Pyramid Chart`, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_Type) as `Pyramid`. @@ -46,7 +46,7 @@ The [Pyramid Chart](https://www.syncfusion.com/blazor-components/blazor-charts/c ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBKiBiKfsBiJKAT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBHDcMorqHYpqCl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart.webp)" %} ## Pyramid mode @@ -86,7 +86,7 @@ The Pyramid Chart can be rendered in both `Linear` or `Surface` modes by setting ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrAiBsKJsKsjaYg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with Surface Mode](../images/pyramid/blazor-pyramid-chart-with-surface-mode.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrnXcsyhzZpbOMj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Pyramid Chart with Surface Mode](../images/pyramid/blazor-pyramid-chart-with-surface-mode.webp)" %} ## Pyramid size @@ -126,7 +126,7 @@ The size of the pyramid chart can be customized by using the [Width](https://hel ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBAMLiAzszQHxDQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Pyramid Size in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-size.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrRZmCeLfrrsLax?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Pyramid Size in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-size.webp)" %} ## Gap between pyramid segments @@ -166,7 +166,7 @@ The [Pyramid Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVUWhiKJsShBUhS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with Gap](../images/pyramid/blazor-pyramid-chart-with-gap.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVdjcCoBTUWIhdS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Pyramid Chart with Gap](../images/pyramid/blazor-pyramid-chart-with-gap.webp)" %} ## Pyramid explode @@ -206,7 +206,7 @@ By setting the [Explode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAMBMATgJWwkNT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Explode in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-explode.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrnjGMehJAburOV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Explode in Blazor Pyramid Chart](../images/pyramid/blazor-pyramid-chart-explode.webp)" %} ## Border radius @@ -244,9 +244,9 @@ The corners of the first data point and last data point in the pyramid chart ser } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LthyDHBRqlAFfKbF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pyramid Chart with border radius applied.](../images/pyramid/blazor-pyramid-border-radius.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrHtwiShfICviDm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Pyramid Chart with border radius applied.](../images/pyramid/blazor-pyramid-border-radius.webp)" %} -N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pyramid?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. +N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pyramid?theme=fluent2) to know various features of accumulation charts and how it is used to represent numeric proportional data. ## See also diff --git a/chart-sdk/blazor/accumulation-chart/data-label.md b/chart-sdk/blazor/accumulation-chart/data-label.md index 55a48ef2b..1867515c6 100644 --- a/chart-sdk/blazor/accumulation-chart/data-label.md +++ b/chart-sdk/blazor/accumulation-chart/data-label.md @@ -1,13 +1,13 @@ --- layout: post -title: Data Label in Blazor Accumulation Chart Component | Syncfusion® -description: Checkout and learn here all about Data Label in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Accumulation Chart Data Label Examples | Syncfusion® +description: Learn how to add and customize data labels in Syncfusion Blazor Accumulation Chart, including position, format, and styling options. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Data Label in Blazor Accumulation Chart Component +# Blazor Accumulation Chart Data Label The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html#Syncfusion_Blazor_Charts_AccumulationDataLabelSettings_Visible) property in the [AccumulationDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationDataLabelSettings.html) can be used to add a data label to a series point. @@ -46,7 +46,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Acc ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBUCrWAJzilTTrb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Data Label](images/data-label/blazor-accumulation-chart-with-data-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrdDGMorndGijnw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart with Data Label](images/data-label/blazor-accumulation-chart-with-data-label.webp)" %} ## Text Wrap @@ -60,7 +60,7 @@ When the data label text exceeds the container, the text can be wrapped by using - + @@ -82,7 +82,7 @@ When the data label text exceeds the container, the text can be wrapped by using } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVUCVCgTfRsrPGK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Text Wrap in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhxZQsSrmndVcIH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Text Wrap in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.webp)" %} ## Position @@ -123,7 +123,7 @@ The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ac ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUMhsApTwpdpQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Data Label Position in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-label-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLHDGMSVmOhBfYN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Data Label Position in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-label-position.webp)" %} ## Smart Labels @@ -175,7 +175,7 @@ Data labels will be arranged smartly without overlapping with each other. The [E ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthqCrMgfzFDgIcO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Smart Labels](images/data-label/blazor-accumulation-chart-smart-labels.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrxtQMIVcuwRGty?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart with Smart Labels](images/data-label/blazor-accumulation-chart-smart-labels.webp)" %} ## Connector line @@ -218,7 +218,7 @@ When the data label is placed [Outside](https://help.syncfusion.com/cr/blazor/Sy ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLqWVsqzTYnAoVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Connector Line](images/data-label/blazor-accumulation-chart-connector-line.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhxZQsSVFVWsRYI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart with Connector Line](images/data-label/blazor-accumulation-chart-connector-line.webp)" %} ## Text mapping @@ -259,9 +259,9 @@ The [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrUsrsApeCPdurG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Text Mapping in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-text-mapping.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVxDwCSBPKCpwaV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Text Mapping in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-text-mapping.webp)" %} -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=fluent2) to know various features of accumulation charts and how it is used to represent numeric proportional data. ## Format @@ -302,7 +302,7 @@ Data label for the accumulation chart can be formatted using [Format](https://he ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhqMLsqzSLpcrER?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Format in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrHXmCerbzGqLZN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Format in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-format.webp)" %} ## Template @@ -368,7 +368,7 @@ Data labels can be customized using the template element for the accumulation ch ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLpZghnzXPGMCxq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Template in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-template.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLxZwiorbwBVjLC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Template in Blazor Accumulation Chart](images/data-label/blazor-accumulation-chart-with-data-label-template.webp)" %} ## See also diff --git a/chart-sdk/blazor/accumulation-chart/empty-points.md b/chart-sdk/blazor/accumulation-chart/empty-points.md index 06121275b..0ba5f9549 100644 --- a/chart-sdk/blazor/accumulation-chart/empty-points.md +++ b/chart-sdk/blazor/accumulation-chart/empty-points.md @@ -1,13 +1,13 @@ --- layout: post -title: Empty Points in Blazor Accumulation Chart Component | Syncfusion® -description: Checkout and learn here all about Empty Points in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Accumulation Chart Empty Points Examples | Syncfusion® +description: Learn how to handle empty data points in Syncfusion Blazor Accumulation Chart, including null and NaN values, and customize their rendering. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Empty Points in Blazor Accumulation Chart Component +# Blazor Accumulation Chart Empty Points Data points that contain **NaN** or **null** value are considered as empty points. The empty data points can be ignored or not plotted in the chart. Those points can be customized using the [AccumulationChartEmptyPointSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartEmptyPointSettings.html) in series. @@ -47,7 +47,7 @@ Data points that contain **NaN** or **null** value are considered as empty point ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLUZQhRVOciwQQa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Empty Points in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-with-empty-point.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrnjGLXqIQJyEIT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Empty Points in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-with-empty-point.webp)" %} ## Customization @@ -92,7 +92,7 @@ The [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVqiLMqfySLYAVU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Empty Points in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-empty-point-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLRZGhZqSYOeXNa?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Empty Points in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-empty-point-customization.webp)" %} ## Handling No Data @@ -145,9 +145,9 @@ When no data is available to render in the accumulation chart, the [NoDataTempla ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVojONbrgWPsFkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[No Data Template in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-no-data-template.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBdtwrtAxNOqjQw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[No Data Template in Blazor Accumulation Chart](images/empty/blazor-accumulation-chart-no-data-template.webp)" %} -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various chart types and how to represent time-dependent data, showing trends at equal intervals. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=fluent2) to know about the various chart types and how to represent time-dependent data, showing trends at equal intervals. ## See also diff --git a/chart-sdk/blazor/accumulation-chart/events.md b/chart-sdk/blazor/accumulation-chart/events.md index bc8210eca..3b258025e 100644 --- a/chart-sdk/blazor/accumulation-chart/events.md +++ b/chart-sdk/blazor/accumulation-chart/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Events in Blazor Accumulation Chart Component | Syncfusion® -description: Checkout and learn here all about Events in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Accumulation Chart Events Examples and Reference | Syncfusion® +description: Learn how to subscribe to Syncfusion Blazor Accumulation Chart events such as OnDataLabelRender, OnPointRender, and OnLegendItemRender. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Events in Blazor Accumulation Chart Component +# Blazor Accumulation Chart Events In this section, the list of events of Accumulation Chart component is provided which will be triggered for appropriate accumulation chart actions. diff --git a/chart-sdk/blazor/accumulation-chart/getting-started-with-server-app.md b/chart-sdk/blazor/accumulation-chart/getting-started-with-server-app.md index d89cd1a2b..cbe3ba50b 100644 --- a/chart-sdk/blazor/accumulation-chart/getting-started-with-server-app.md +++ b/chart-sdk/blazor/accumulation-chart/getting-started-with-server-app.md @@ -1,109 +1,118 @@ --- layout: post -title: Accumulation Chart with Blazor Server App | Syncfusion® -description: Checkout and learn about getting started with Blazor Accumulation Chart component in Blazor Server App and much more details. -platform: chart-sdk +title: Getting Started with Accumulation Chart in Server App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Accumulation Chart in a Blazor Server app, including setup, NuGet packages, and first chart example. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Getting Started with Blazor Accumulation Chart in Blazor Server App +# Getting Started with Blazor Accumulation Chart in Server App -This section briefly explains how to include [Blazor Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) 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 Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) 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 [Syncfusion® 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 [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 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.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) 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.Charts`) 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.Charts -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.Charts -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} -## Install required Blazor packages +{% endtabcontent %} -Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) 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.Charts --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 command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Charts -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. +After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -114,93 +123,120 @@ 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 Accumulation Chart 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 Accumulation Chart component -Add the Blazor Accumulation 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 Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) 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 defined here *@ +@page "/" @rendermode InteractiveServer -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - +@* SfAccumulationChart is the root container component for the accumulation chart *@ - + @* Container for defining chart series *@ - + @* AccumulationChartSeries defines a data series with its data source and axis mappings *@ -@code{ +@code +{ public class ChartData { - public string Country { get; set;} - public double Medals { get; set;} + public string Country { get; set; } + public double Medals { get; set; } } public List MedalDetails = new List { new ChartData { Country= "United States of America", Medals= 46 }, - new ChartData { Country= "Great Britain", Medals= 27 }, new ChartData { Country= "China", Medals= 26 }, new ChartData { Country= "United Kingdom", Medals= 23 }, new ChartData { Country= "Australia", Medals= 16 }, new ChartData { Country= "India", Medals= 36 }, new ChartData { Country= "Nigeria", Medals= 12 }, new ChartData { Country= "Brazil", Medals= 20 }, - }; + }; } {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Accumulation 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 Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) 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" %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.webp)" %} +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/LDhdDciIMbTJzWSG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart](images/getting-started/blazor-pie-chart-webapp.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart) ## 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) +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/accumulation-chart/getting-started-with-web-app.md b/chart-sdk/blazor/accumulation-chart/getting-started-with-web-app.md index bffa27b77..470d44305 100644 --- a/chart-sdk/blazor/accumulation-chart/getting-started-with-web-app.md +++ b/chart-sdk/blazor/accumulation-chart/getting-started-with-web-app.md @@ -1,129 +1,120 @@ --- layout: post -title: Getting Started with Accumulation Chart Blazor Web App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor Accumulation Chart Component in Blazor Web App. -platform: chart-sdk -component: Accumulation Chart +title: Getting Started with Accumulation Chart in Web App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Accumulation Chart in a Blazor Web App, including server and client setup, packages, and first chart example. +platform: Blazor +control: Accumulation Chart documentation: ug --- -# Getting Started with Blazor Accumulation Chart in Blazor Web App +# Getting Started with Blazor Accumulation Chart in Web App -This section briefly explains how to include [Blazor Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) 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 Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) 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. +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). {% 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, you can 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.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) 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.Charts`) 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.Charts -Version {{ 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 %} -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. +{% tabcontent Visual Studio Code %} -``` -cd BlazorWebApp.Client -cd .. -``` +Open the terminal and run the following command. -{% endtabcontent %} +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -{% endtabcontents %} +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} -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). +{% endhighlight %} +{% endtabs %} -## Install required Blazor packages +{% endtabcontent %} -Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) 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.Charts --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 command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Charts -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 package is 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" %} @@ -134,65 +125,54 @@ 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 Accumulation Chart 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 the Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor Accumulation Chart component -Add the Blazor Accumulation Chart component in the **~/Components/Pages/Home.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 Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) 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 *@ +@page "/" @rendermode InteractiveAuto -{% endhighlight %} -{% endtabs %} - -{% tabs %} -{% highlight razor tabtitle="Home.razor" %} - - +@* SfAccumulationChart is the root container component for the accumulation chart *@ - + @* Container for defining chart series *@ - + @* AccumulationChartSeries defines a data series with its data source and axis mappings *@ -@code{ +@code +{ public class ChartData { public string Country { get; set; } @@ -202,26 +182,67 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem public List MedalDetails = new List { new ChartData { Country= "United States of America", Medals= 46 }, - new ChartData { Country= "Great Britain", Medals= 27 }, new ChartData { Country= "China", Medals= 26 }, new ChartData { Country= "United Kingdom", Medals= 23 }, new ChartData { Country= "Australia", Medals= 16 }, new ChartData { Country= "India", Medals= 36 }, new ChartData { Country= "Nigeria", Medals= 12 }, new ChartData { Country= "Brazil", Medals= 20 }, - }; + }; } {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Accumulation 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 Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) 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/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart-webapp.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhdDciIMbTJzWSG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart](images/getting-started/blazor-pie-chart-webapp.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart) ## 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) +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/accumulation-chart/getting-started.md b/chart-sdk/blazor/accumulation-chart/getting-started.md index f40119aa4..d7713497f 100644 --- a/chart-sdk/blazor/accumulation-chart/getting-started.md +++ b/chart-sdk/blazor/accumulation-chart/getting-started.md @@ -1,109 +1,118 @@ --- layout: post -title: Getting Started with Accumulation Chart Blazor WASM App | Syncfusion® -description: Checkout and learn about getting started with Blazor Accumulation Chart component in Blazor WebAssembly App and much more details. -platform: chart-sdk +title: Getting Started with Accumulation Chart in WASM App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Accumulation Chart in a Blazor WebAssembly app, including setup, NuGet packages, and first chart example. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Getting Started with Blazor Accumulation Chart Component +# Getting Started with Blazor Accumulation Chart in WASM App -This section briefly explains how to include [Blazor Accumulation Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html) 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 Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) 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). -* [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 [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 %} + +## Install the required Blazor package -## Prerequisites +Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) 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.Charts`) 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.Charts -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.Charts -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install required Blazor packages - -Install the [Syncfusion.Blazor.Charts](https://www.nuget.org/packages/Syncfusion.Blazor.Charts/) NuGet package into 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.Charts --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 command. {% tabs %} -{% highlight C# tabtitle="Package Manager" %} +{% highlight razor tabtitle="Command Prompt" %} -Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Charts -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.Charts` 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 **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -114,83 +123,117 @@ 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 +## 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 **~wwwroot/index.html** file to enable Accumulation Chart 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 Accumulation Chart component -Add the Blazor Accumulation 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 Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component inside the razor file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@using Syncfusion.Blazor.Charts +@page "/" - +@* SfAccumulationChart is the root container component for the accumulation chart *@ - + @* Container for defining chart series *@ - + @* AccumulationChartSeries defines a data series with its data source and axis mappings *@ -@code{ +@code +{ public class ChartData { - public string Country { get; set;} - public double Medals { get; set;} + public string Country { get; set; } + public double Medals { get; set; } } public List MedalDetails = new List { new ChartData { Country= "United States of America", Medals= 46 }, - new ChartData { Country= "Great Britain", Medals= 27 }, new ChartData { Country= "China", Medals= 26 }, new ChartData { Country= "United Kingdom", Medals= 23 }, new ChartData { Country= "Australia", Medals= 16 }, new ChartData { Country= "India", Medals= 36 }, new ChartData { Country= "Nigeria", Medals= 12 }, new ChartData { Country= "Brazil", Medals= 20 }, - }; + }; } {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Accumulation 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 Accumulation Chart](https://www.syncfusion.com/blazor-components/blazor-charts) 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/LjhzDWVeVKeUbWGh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pie Chart](images/getting-started/blazor-pie-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhdDciIMbTJzWSG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart](images/getting-started/blazor-pie-chart-webapp.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/AccumulationChart). ## 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) -* [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +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/accumulation-chart/gradient.md b/chart-sdk/blazor/accumulation-chart/gradient.md index 302729cc3..c4cac355a 100644 --- a/chart-sdk/blazor/accumulation-chart/gradient.md +++ b/chart-sdk/blazor/accumulation-chart/gradient.md @@ -1,13 +1,13 @@ --- layout: post -title: Gradient in Blazor Accumulation Chart Component | Syncfusion® -description: Checkout and learn about applying linear and radial gradients to Accumulation Charts in Blazor Charts and much more details. -platform: chart-sdk +title: Blazor Accumulation Chart Gradient Fill Examples | Syncfusion® +description: Learn how to apply linear or radial gradients in Syncfusion Blazor Accumulation Chart to add depth and modern color blending to series. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Gradient in Blazor Accumulation Chart Component +# Blazor Accumulation Chart Gradient Gradients add depth and modern styling to charts by smoothly blending multiple colors. The Charts component supports two gradient types: @@ -315,7 +315,7 @@ The following example uses a distinct color palette and an off-center radial gra ``` ![Radial Gradient for each point in Blazor Accumulation Chart](images/gradient/blazor-accumulation-chart-radial-gradient-points.webp) -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=fluent2) to know various features of accumulation charts and how it is used to represent numeric proportional data. ## See also diff --git a/chart-sdk/blazor/accumulation-chart/grouping.md b/chart-sdk/blazor/accumulation-chart/grouping.md index 396adcabe..9e9bfafc2 100644 --- a/chart-sdk/blazor/accumulation-chart/grouping.md +++ b/chart-sdk/blazor/accumulation-chart/grouping.md @@ -1,15 +1,15 @@ --- layout: post -title: Grouping in Blazor Accumulation Chart Component | Syncfusion® -description: Checkout and learn here all about Grouping in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Accumulation Chart Grouping Examples | Syncfusion® +description: Learn how to group small slices in Syncfusion Blazor Accumulation Chart with GroupMode and GroupTo properties. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Grouping in Blazor Accumulation Chart Component +# Blazor Accumulation Chart Grouping The value set to the [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GroupTo) property can be used to club/group a few points in the series. Points with a value less than [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GroupTo) are grouped together and displayed as a single point with the label **Others**. In addition, the property value can be set in percentage (percentage of total data points value). @@ -55,7 +55,7 @@ The value set to the [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrqihiqTyhaAqqS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Accumulation Chart](images/grouping/blazor-accumulation-chart-grouping.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrRjmBNUWyrVErB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Grouping in Blazor Accumulation Chart](images/grouping/blazor-accumulation-chart-grouping.webp)" %} ## Pie Grouping @@ -109,7 +109,7 @@ The points that have been grouped together will appear as a single slice with th ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLqihMUfoqzKvcp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Broken Slice](images/grouping/blazor-accumulation-chart-with-broken-slice.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBdNQrjAMdZdaXJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart with Broken Slice](images/grouping/blazor-accumulation-chart-with-broken-slice.webp)" %} **Group Mode** When the [GroupMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GroupMode) property is set to [Point](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.GroupMode.html#Syncfusion_Blazor_Charts_GroupMode_Point), the points are displayed as separate slices according to the [GroupTo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartSeries.html#Syncfusion_Blazor_Charts_AccumulationChartSeries_GroupTo) value. The remaining points will be grouped into a single slice and displayed. @@ -160,9 +160,9 @@ The points that have been grouped together will appear as a single slice with th ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrqiViApefsiZXo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart with Group Mode](images/grouping/blazor-accumulation-chart-group-mode.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhdXmrNqCGTIGFi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart with Group Mode](images/grouping/blazor-accumulation-chart-group-mode.webp)" %} -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=fluent2) to know various features of accumulation charts and how it is used to represent numeric proportional data. * [Data Label](./data-label) * [Tooltip](./tool-tip) diff --git a/chart-sdk/blazor/accumulation-chart/how-to/do-nut.md b/chart-sdk/blazor/accumulation-chart/how-to/do-nut.md index bf9a9e291..1a6a1432e 100644 --- a/chart-sdk/blazor/accumulation-chart/how-to/do-nut.md +++ b/chart-sdk/blazor/accumulation-chart/how-to/do-nut.md @@ -1,13 +1,13 @@ --- layout: post -title: Text placing center of Blazor Doughnut Chart Component | Syncfusion® -description: Learn here all about Text placing center of the doughnut in Syncfusion Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: How to Add Text at the Center of Blazor Doughnut Chart | Syncfusion® +description: Learn how to place text in the center of a Blazor Doughnut Chart using Syncfusion annotation to display labels at the doughnut center. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Text placing center of the Blazor Doughnut Chart Component +# How to Place Text in the Center of Doughnut Chart The annotation is used to place text, shapes or images in the center of the doughnut chart. @@ -99,6 +99,6 @@ The complete code snippet for the preceding steps is as follows. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhAMLCziQTKvjhv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLxNmBjfKgxTeAK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=fluent2) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. diff --git a/chart-sdk/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-annotation.webp b/chart-sdk/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-annotation.webp index e1604eb3e..6fdbe433f 100644 Binary files a/chart-sdk/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-annotation.webp and b/chart-sdk/blazor/accumulation-chart/images/annotation/blazor-accumulation-chart-annotation.webp differ diff --git a/chart-sdk/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-connector-line.webp b/chart-sdk/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-connector-line.webp index 9e5358a80..eeb4d20c5 100644 Binary files a/chart-sdk/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-connector-line.webp and b/chart-sdk/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-connector-line.webp differ diff --git a/chart-sdk/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.webp b/chart-sdk/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.webp index 8e4d35a1f..766221292 100644 Binary files a/chart-sdk/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.webp and b/chart-sdk/blazor/accumulation-chart/images/data-label/blazor-accumulation-chart-with-data-label-text-wrapping.webp differ diff --git a/chart-sdk/blazor/accumulation-chart/images/getting-started/blazor-pie-chart-webapp.webp b/chart-sdk/blazor/accumulation-chart/images/getting-started/blazor-pie-chart-webapp.webp index 65bb5bf74..e0bce2d69 100644 Binary files a/chart-sdk/blazor/accumulation-chart/images/getting-started/blazor-pie-chart-webapp.webp and b/chart-sdk/blazor/accumulation-chart/images/getting-started/blazor-pie-chart-webapp.webp differ diff --git a/chart-sdk/blazor/accumulation-chart/legend.md b/chart-sdk/blazor/accumulation-chart/legend.md index 825689fe2..e35934eb9 100644 --- a/chart-sdk/blazor/accumulation-chart/legend.md +++ b/chart-sdk/blazor/accumulation-chart/legend.md @@ -1,13 +1,13 @@ --- layout: post -title: Legend in Blazor Accumulation Chart Component | Syncfusion® -description: Checkout and learn here all about Legend in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Accumulation Chart Legend Configuration Examples | Syncfusion® +description: Learn how to enable and customize the legend in Syncfusion Blazor Accumulation Chart, including position, alignment, and LegendSettings. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Legend in Blazor Accumulation Chart Component +# Blazor Accumulation Chart Legend The legend is available for accumulation charts, just like it is for charts, and it provides information about the points. If the chart's width is large, the legend will be placed on the right, and if the chart's height is large, the legend will be placed on the bottom. The legend for a point can be collapsed by assigning an empty string to the point's x value. @@ -45,7 +45,7 @@ The legend is available for accumulation charts, just like it is for charts, and ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBKCBWfsHSGQTvG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Legend in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrRZmBDgbpbidem?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Legend in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend.webp)" %} ## Position and alignment @@ -85,7 +85,7 @@ The legend can be placed at [Left](https://help.syncfusion.com/cr/blazor/Syncfu ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrUsLCzsHdMOzRi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Position and Alignment of Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrRZGLDqlHCjrtw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Position and Alignment of Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-position.webp)" %} ## Legend Reverse @@ -126,7 +126,7 @@ You can reverse the order of the legend items by using the [Reverse](https://hel ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rthqMVCpMRRynnnl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Reverse in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-reverse.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVHDmhjAlcZuEPi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Legend Reverse in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-reverse.webp)" %} ## Legend shape @@ -167,7 +167,7 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUMhiJMxnkMBtv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Shape in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-shape.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhRtGrjKvEAVoJr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Legend Shape in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-shape.webp)" %} ## Legend size @@ -209,7 +209,7 @@ The legend size can be customized by using the [Width](https://help.syncfusion.c ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrqsrMpixGVWbxO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Size in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-size.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVnZwhDKkNswjbN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Legend Size in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-size.webp)" %} ## Legend shape size @@ -250,7 +250,7 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLgsLsTsHQSwtZv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Legend Item Size in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-item-size.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhHjcrtUuiHtlqL?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Legend Item Size in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-item-size.webp)" %} ## Paging for Legend @@ -291,7 +291,7 @@ When the legend items exceed legend bounds, paging will be enabled by default. E ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVKWVWTiRwuHWFS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Paging for Legend in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-paging.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrxXwhXgurhFXhI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Paging for Legend in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-paging.webp)" %} ### Paging customization @@ -317,7 +317,7 @@ In legend pager, the arrow elements can be customized by using the [ArrowSize](h @code { - private Theme Theme { get; set; } = Theme.Fluent2; + private Syncfusion.Blazor.Theme Theme { get; set; } = Syncfusion.Blazor.Theme.Fluent2; public string Height { get; set; } = "30%"; public string Width { get; set; } = "33%"; public Syncfusion.Blazor.Charts.LegendPosition position { get; set; } = Syncfusion.Blazor.Charts.LegendPosition.Right; @@ -348,7 +348,7 @@ In legend pager, the arrow elements can be customized by using the [ArrowSize](h } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthTZnrTBvLmyjUM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart Legend Pager Customization](images/legend/blazor-accumulation-chart-legend-paging-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhnXmLDqkmoVqCg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart Legend Pager Customization](images/legend/blazor-accumulation-chart-legend-paging-customization.webp)" %} ## Legend text wrap @@ -359,7 +359,7 @@ When the legend text exceeds the container, the text can be wrapped by using [Te @using Syncfusion.Blazor.Charts - + @@ -387,7 +387,7 @@ When the legend text exceeds the container, the text can be wrapped by using [Te ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLqsrMJWRuPUEHB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart Legend with Wrap](images/legend/blazor-accumulation-chart-legend-wrap.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrdDQhNgaygndeX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart Legend with Wrap](images/legend/blazor-accumulation-chart-legend-wrap.webp)" %} ## Legend Template @@ -453,7 +453,7 @@ To use, add a `LegendItemTemplate` inside any [AccumulationChartSeries](https:// ``` ![Legend Template in Blazor Accumulation Chart](images/legend/blazor-accumulation-chart-legend-template.webp) -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=fluent2) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. * [Grouping](./grouping) * [Data label](./data-label) diff --git a/chart-sdk/blazor/accumulation-chart/title-and-sub-title.md b/chart-sdk/blazor/accumulation-chart/title-and-sub-title.md index 244cbefb4..35a3dc1e3 100644 --- a/chart-sdk/blazor/accumulation-chart/title-and-sub-title.md +++ b/chart-sdk/blazor/accumulation-chart/title-and-sub-title.md @@ -1,15 +1,15 @@ --- layout: post -title: Title and Subtitle in Blazor Accumulation Chart | Syncfusion® -description: Checkout and learn here all about Title and Subtitle in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Accumulation Chart Title and Subtitle Examples | Syncfusion® +description: Learn how to add a title and subtitle in Syncfusion Blazor Accumulation Chart, including text, alignment, and font styling. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Title and Subtitle in Blazor Accumulation Chart Component +# Blazor Accumulation Chart Title and Subtitle The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAccumulationChart.html#Syncfusion_Blazor_Charts_SfAccumulationChart_Title) property can be used to give the accumulation chart a title in-order to provide information about the data displayed. @@ -47,7 +47,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAcc ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrqCViTsGXMlSaD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLRNQLXTtYnBred?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-title.webp)" %} ## Title customization @@ -89,7 +89,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfAcc ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBUMVCpMmDIcLry?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-title-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthxZchDzCZzDwAH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-title-customization.webp)" %} ### Title position @@ -131,7 +131,7 @@ N> The subtitle, which appears below the title, will also be positioned along wi } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLSZJNzBeDlhwIW?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Position customization of title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrHZwhNTsCbKyTD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Position customization of title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-position.webp)" %} When the `Position` is set to `Custom`, the title can be positioned anywhere on the chart using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html#Syncfusion_Blazor_Charts_AccumulationChartTitleStyle_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html#Syncfusion_Blazor_Charts_AccumulationChartTitleStyle_Y) properties in [AccumulationChartTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTitleStyle.html). This provides precise control over the title’s location, enabling customization to fit specific design or layout needs. The `X` and `Y` values specify the horizontal and vertical coordinates, respectively. @@ -169,7 +169,7 @@ When the `Position` is set to `Custom`, the title can be positioned anywhere on } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhoNJNQqAoFwbVK?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Custom position of title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-position-custom.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrRXwrXJMhFkZXM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Custom position of title in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-position-custom.webp)" %} ## Subtitle @@ -209,7 +209,7 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrgMrCpiGjaRMic?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Subtitle in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-with-subtitle.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVnDmhjpWpUhWEg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Subtitle in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-with-subtitle.webp)" %} ## Subtitle customization @@ -250,9 +250,9 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhUihWfiGMgtYfB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Subtitle in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLHDcLZpiIFvfGX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Subtitle in Blazor Accumulation Chart](images/title/blazor-accumulation-chart-subtitle-customization.webp)" %} -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know various features of accumulation charts and how it is used to represent numeric proportional data. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=fluent2) to know various features of accumulation charts and how it is used to represent numeric proportional data. ## See also diff --git a/chart-sdk/blazor/accumulation-chart/tool-tip.md b/chart-sdk/blazor/accumulation-chart/tool-tip.md index 0bff6a743..ad13feec6 100644 --- a/chart-sdk/blazor/accumulation-chart/tool-tip.md +++ b/chart-sdk/blazor/accumulation-chart/tool-tip.md @@ -1,13 +1,13 @@ --- layout: post -title: Tooltip in Blazor Accumulation Chart Component | Syncfusion® -description: Checkout and learn here all the features about Tooltip in Blazor Accumulation Chart component and much more details. -platform: chart-sdk +title: Blazor Accumulation Chart Tooltip Examples | Syncfusion® +description: Learn how to enable and customize tooltips in Syncfusion Blazor Accumulation Chart, including format, template, and styling. +platform: Blazor control: Accumulation Chart documentation: ug --- -# Tooltip in Blazor Accumulation Chart Component +# Blazor Accumulation Chart Tooltip The [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html#Syncfusion_Blazor_Charts_AccumulationChartTooltipSettings_Enable) property in [AccumulationChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.AccumulationChartTooltipSettings.html) can be set to **true** to enable the tooltip. @@ -47,7 +47,7 @@ The [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVUirMUTHNidTzn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays ToolTip](images/tool-tip/blazor-accumulation-chart-tooltip.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLdjcBNUGJVcxJU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart displays ToolTip](images/tool-tip/blazor-accumulation-chart-tooltip.webp)" %} ## Header @@ -90,7 +90,7 @@ The [Header](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accu ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVqChsApHestEJW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Accumulation Chart displays ToolTip for Header](images/tool-tip/blazor-accumulation-chart-header-tooltip.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVxZQhXgwmACcLQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Accumulation Chart displays ToolTip for Header](images/tool-tip/blazor-accumulation-chart-header-tooltip.webp)" %} ## Tooltip format @@ -133,7 +133,7 @@ By default, tooltip shows information about x and y value in points. In addition ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLgsLCKzRIODYxT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing ToolTip Format in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrRDQBjAGGupkey?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing ToolTip Format in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-format.webp)" %} ## Tooltip customization @@ -177,7 +177,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Accumu ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLKsriUJxRffqTe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Tooltip in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrHXmhjgcYZRwkM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Tooltip in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-customization.webp)" %} ## Tooltip Text Mapping @@ -226,9 +226,9 @@ By default, tooltip shows information of x and y value in points. In addition, b ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVUshCTCHSgEYgI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[ToolTip Text Mapping in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-mapping.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBdZmLDKlhVVFzn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[ToolTip Text Mapping in Blazor Accumulation Chart](images/tool-tip/blazor-accumulation-chart-tooltip-mapping.webp)" %} -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=bootstrap5) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore the [Blazor Accumulation Chart Example](https://blazor.syncfusion.com/demos/chart/pie?theme=fluent2) to know about the various features of accumulation charts and how it is used to represent numeric proportional data. ## See also diff --git a/chart-sdk/blazor/bullet-chart/accessibility.md b/chart-sdk/blazor/bullet-chart/accessibility.md index 668cedc1e..e76c6376b 100644 --- a/chart-sdk/blazor/bullet-chart/accessibility.md +++ b/chart-sdk/blazor/bullet-chart/accessibility.md @@ -1,13 +1,13 @@ --- layout: post -title: Accessibility in Blazor Bullet Chart Component | Syncfusion® -description: Checkout and learn here all about Accessibility using Keyboard navigation in Blazor Bullet Chart component and more. -platform: chart-sdk +title: Blazor Bullet Chart Accessibility Examples | Syncfusion® +description: Learn how to enable accessibility in Syncfusion Blazor Bullet Chart with keyboard navigation, screen reader support, and WCAG 2.2 compliance. +platform: Blazor control: Bullet Chart documentation: ug --- -# Accessibility in Blazor Bullet Chart Component +# Blazor Bullet Chart Accessibility The Blazor Bullet chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/blazor/bullet-chart/actual-bar.md b/chart-sdk/blazor/bullet-chart/actual-bar.md index 979121957..82795a379 100644 --- a/chart-sdk/blazor/bullet-chart/actual-bar.md +++ b/chart-sdk/blazor/bullet-chart/actual-bar.md @@ -1,13 +1,13 @@ --- layout: post -title: Actual Bar in Blazor Bullet Chart Component | Syncfusion® -description: Checkout and learn here all features about Actual Bar in Blazor Bullet Chart component and much more. -platform: chart-sdk -control: Bullet Chart +title: Blazor Bullet Chart Actual Bar Examples | Syncfusion® +description: Learn how to render the actual bar (feature measure) in Syncfusion Blazor Bullet Chart by mapping ValueField to your data source. +platform: Blazor +control: Bullet Chart documentation: ug --- -# Actual Bar in Blazor Bullet Chart Component +# Blazor Bullet Chart Actual Bar To display the primary data or the current value of the data being measured known as the **Feature Measure** that should be encoded as a bar. This is called as the **Actual Bar** or the **Feature Bar** in the Bullet Chart, and to display the actual bar the [ValueField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_ValueField) should be mapped to the appropriate field from the data source. @@ -33,7 +33,7 @@ To display the primary data or the current value of the data being measured know }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVyXuBzBauPiECo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVRXHiLBCQqHDVF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar.webp)" %} ## Types of actual bar @@ -53,7 +53,7 @@ The shape of the actual bar can be customized using the [Type](https://help.sync N> Refer to the [code block](#actual-bar-in-blazor-bullet-chart-component) to know more about the property value of the **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVSZuLfKNDhZQsy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Dot Actual Bar](images/blazor-bullet-chart-dot-actual-bar.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrdDdsrLiQORPQW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bullet Chart with Dot Actual Bar](images/blazor-bullet-chart-dot-actual-bar.webp)" %} ## Actual bar customization @@ -78,4 +78,4 @@ The following properties will be used to customize the actual bar. N> Refer to the [code block](#actual-bar-in-blazor-bullet-chart-component) to know more about the property value of the **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVIDEVTKZNwIDPb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar-customization.webp)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBRZxiBLWPdiIUb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Actual Bar in Blazor Bullet Chart](images/blazor-bullet-chart-actual-bar-customization.webp)" %} \ No newline at end of file diff --git a/chart-sdk/blazor/bullet-chart/axis-customization.md b/chart-sdk/blazor/bullet-chart/axis-customization.md index 6a24b1286..de82e4ada 100644 --- a/chart-sdk/blazor/bullet-chart/axis-customization.md +++ b/chart-sdk/blazor/bullet-chart/axis-customization.md @@ -1,13 +1,13 @@ --- layout: post -title: Axis Customization in Blazor Bullet Chart Component | Syncfusion® -description: Checkout and learn here all features about Axis Customization in Blazor Bullet Chart component and more. -platform: chart-sdk -control: Bullet Chart +title: Blazor Bullet Chart Axis Customization Examples | Syncfusion® +description: Learn how to customize the axis in Syncfusion Blazor Bullet Chart, including major and minor tick lines, labels, and range colors. +platform: Blazor +control: Bullet Chart documentation: ug --- -# Axis Customization in Blazor Bullet Chart Component +# Blazor Bullet Chart Axis Customization ## MajorTickLines and MinorTickLines Customization @@ -43,7 +43,7 @@ The following properties can be used to customize [MajorTicklines](https://help. }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthAshrMpzsZIqTR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Major and Minor TickLines in Blazor Bullet Chart](images/blazor-bullet-chart-tick-line-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLnZnsWJcBdndGw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Major and Minor TickLines in Blazor Bullet Chart](images/blazor-bullet-chart-tick-line-customization.webp)" %} ## Tick placement @@ -63,7 +63,7 @@ The major and the minor ticks can be placed [Inside](https://help.syncfusion.com N> Refer to the [code block](#majorticklines-and-minorticklines-customization) to know about the property value of **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVgiLVCTTsfCtyC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Tick Position in Blazor Bullet Chart](images/blazor-bullet-chart-tick-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLnNnMCTQVadaKh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Tick Position in Blazor Bullet Chart](images/blazor-bullet-chart-tick-position.webp)" %} ## Label format @@ -83,7 +83,7 @@ The axis labels support all the globalize formats and can be changed using the [ N> Refer to the [code block](#majorticklines-and-minorticklines-customization) to know about the property value of **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgMBVMpfCnRdov?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Format in Blazor Bullet Chart](images/blazor-bullet-chart-label-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBHNHCCzcAASWeh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Label Format in Blazor Bullet Chart](images/blazor-bullet-chart-label-format.webp)" %} The following table describes the result of applying some commonly used formats to numeric axis values. @@ -173,7 +173,7 @@ To separate the groups of thousands, set the [EnableGroupSeparator](https://help } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthqsBLMzfBQwPJD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping in Blazor Bullet Chart](images/blazor-bullet-chart-grouping.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBRjnChBXXBpxPB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Grouping in Blazor Bullet Chart](images/blazor-bullet-chart-grouping.webp)" %} ## Custom label format @@ -193,7 +193,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. N> Refer to the [code block](#grouping-separator) to know about the property value of **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUshVCfpgssdbx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Custom Label Format](images/blazor-bullet-chart-custom-label-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrdDHsLrDiRjaAp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bullet Chart with Custom Label Format](images/blazor-bullet-chart-custom-label-format.webp)" %} ## Label placement @@ -213,7 +213,7 @@ Label can be placed [Inside](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl N> Refer to the [code block](#grouping-separator) to know about the property value of **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrUMrBWJfgftZky?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Label Position in Blazor Bullet Chart](images/blazor-bullet-chart-labels-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhnDdsVBiZDmeZw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Label Position in Blazor Bullet Chart](images/blazor-bullet-chart-labels-position.webp)" %} ## Opposed position @@ -233,7 +233,7 @@ To place an axis opposite to its original position, set the [OpposedPosition](ht N> Refer to the [code block](#grouping-separator) to know about the property value of **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBqMBVWzJqnbrpi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Opposed Position](images/blazor-bullet-chart-opposed-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVdDHWhBCZeabMX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bullet Chart with Opposed Position](images/blazor-bullet-chart-opposed-position.webp)" %} ## Category label @@ -264,7 +264,7 @@ The [Bullet Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhgsrViJpTWnjZN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Category Label](images/blazor-bullet-chart-category-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrdZxChrCMtgXKJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bullet Chart with Category Label](images/blazor-bullet-chart-category-label.webp)" %} ## Axis label and category label customization @@ -286,4 +286,4 @@ The label color, opacity, font size, font family, font weight, and font style ca N> Refer to the [code block](#category-label) to know about the property value of **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgWrLCzTJTgHRy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Axis and Category Label in Blazor Bullet Chart](images/blazor-bullet-chart-label-customization.webp)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrHZxChrssSBsgJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Axis and Category Label in Blazor Bullet Chart](images/blazor-bullet-chart-label-customization.webp)" %} \ No newline at end of file diff --git a/chart-sdk/blazor/bullet-chart/bullet-chart-dimensions.md b/chart-sdk/blazor/bullet-chart/bullet-chart-dimensions.md index 3cd7795dc..a7937154d 100644 --- a/chart-sdk/blazor/bullet-chart/bullet-chart-dimensions.md +++ b/chart-sdk/blazor/bullet-chart/bullet-chart-dimensions.md @@ -1,15 +1,15 @@ --- layout: post -title: Bullet Chart Dimensions in Blazor Bullet Chart Component | Syncfusion® -description: Checkout and learn here all about Bullet Chart Dimensions in Blazor Bullet Chart component and more. -platform: chart-sdk -control: Bullet Chart +title: Blazor Bullet Chart Dimensions and Sizing | Syncfusion® +description: Learn how to set the size of Syncfusion Blazor Bullet Chart using container width, height, and inline CSS or Size for container. +platform: Blazor +control: Bullet Chart documentation: ug --- -# Bullet Chart Dimensions in Blazor Bullet Chart Component +# Blazor Bullet Chart Dimensions ## Size for container @@ -41,7 +41,7 @@ The size of the [Blazor Bullet Chart](https://help.syncfusion.com/cr/blazor/Sync }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrgsVVCzqENDzfI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBxZnMipcWLvBSR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Size for Bullet Chart @@ -63,7 +63,7 @@ N> If the size is not specified, the Bullet Chart will be rendered with a heigh ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htrgWhLCJqkfMCtE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrxZdiWpQWHZCuo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} N> Refer to the [code block](#size-for-container) to know about the property value of **BulletChartData**. @@ -90,4 +90,4 @@ The [BulletChartMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. N> Refer to the [code block](#size-for-container) to know about the property value of **BulletChartData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBACrrWzKabABVG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Margin](images/blazor-bullet-chart-margin.webp)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLdtnsMfcCkPVlE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bullet Chart with Margin](images/blazor-bullet-chart-margin.webp)" %} \ No newline at end of file diff --git a/chart-sdk/blazor/bullet-chart/customization.md b/chart-sdk/blazor/bullet-chart/customization.md index 399749e46..3753da041 100644 --- a/chart-sdk/blazor/bullet-chart/customization.md +++ b/chart-sdk/blazor/bullet-chart/customization.md @@ -1,13 +1,13 @@ --- layout: post -title: Customization in Blazor Bullet Chart Component | Syncfusion® -description: Checkout and learn here all features about Customization in Blazor Bullet Chart component and more more. -platform: chart-sdk -control: Bullet Chart +title: Blazor Bullet Chart Customization Examples | Syncfusion® +description: Learn how to customize Syncfusion Blazor Bullet Chart, including orientation, flow direction, and overall appearance of the chart. +platform: Blazor +control: Bullet Chart documentation: ug --- -# Customization in Blazor Bullet Chart Component +# Blazor Bullet Chart Customization ## Orientation diff --git a/chart-sdk/blazor/bullet-chart/data-binding.md b/chart-sdk/blazor/bullet-chart/data-binding.md index e23365ee2..e5a42f555 100644 --- a/chart-sdk/blazor/bullet-chart/data-binding.md +++ b/chart-sdk/blazor/bullet-chart/data-binding.md @@ -1,13 +1,13 @@ --- layout: post -title: Working with Data in Blazor Bullet Chart Component | Syncfusion® -description: Checkout and learn here all features about working with data in Blazor Bullet Chart component and much more. -platform: chart-sdk -control: Bullet Chart +title: Blazor Bullet Chart Working with Data Examples | Syncfusion® +description: Learn how to bind data to Syncfusion Blazor Bullet Chart using DataSource, ValueField, TargetField, and CategoryField with code samples. +platform: Blazor +control: Bullet Chart documentation: ug --- -# Working with Data in Blazor Bullet Chart Component +# Blazor Bullet Chart Working with Data The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_DataSource) property accepts a collection of values as input that helps to display measures, and compares them to a target bar. To display the actual and target bar, specify the property from the datasource into the [ValueField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_ValueField) and [TargetField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TargetField) respectively. @@ -41,4 +41,4 @@ The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVKshVizpSfJRvO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor Bullet Chart](images/blazor-bullet-chart-data-binding.webp)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrxNnsVLCpMXlIO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Data Binding in Blazor Bullet Chart](images/blazor-bullet-chart-data-binding.webp)" %} \ No newline at end of file diff --git a/chart-sdk/blazor/bullet-chart/data-label.md b/chart-sdk/blazor/bullet-chart/data-label.md index af7a08856..c5431b311 100644 --- a/chart-sdk/blazor/bullet-chart/data-label.md +++ b/chart-sdk/blazor/bullet-chart/data-label.md @@ -1,13 +1,13 @@ --- layout: post -title: Data Labels in Blazor Bullet Chart Component | Syncfusion® -description: Checkout and learn here all features about Data Labels in Blazor Bullet Chart component and much more. -platform: chart-sdk -control: Bullet Chart +title: Blazor Bullet Chart Data Labels Examples | Syncfusion® +description: Learn how to add and customize data labels in Syncfusion Blazor Bullet Chart, including position, format, and label style. +platform: Blazor +control: Bullet Chart documentation: ug --- -# Data Labels in Blazor Bullet Chart Component +# Blazor Bullet Chart Data Labels Data Labels are used to identify the value of actual bar in the [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) component. The Data Labels will be shown by specifying the [BulletChartDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartDataLabel.html) setting. diff --git a/chart-sdk/blazor/bullet-chart/events.md b/chart-sdk/blazor/bullet-chart/events.md index 4f2a7eb15..0cb3f503b 100644 --- a/chart-sdk/blazor/bullet-chart/events.md +++ b/chart-sdk/blazor/bullet-chart/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Events in Blazor Bullet Chart Component | Syncfusion® -description: Checkout and learn here all features about available Events in Blazor Bullet Chart component and much more. -platform: chart-sdk -control: Bullet Chart +title: Blazor Bullet Chart Events Examples and Reference | Syncfusion® +description: Learn about events in Syncfusion Blazor Bullet Chart such as Loaded, OnLegendItemRender, and TooltipRender with usage examples. +platform: Blazor +control: Bullet Chart documentation: ug --- -# Events in Blazor Bullet Chart Component +# Blazor Bullet Chart Events This section describes about the [Blazor Bullet](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) Chart component's events that will be triggered when appropriate actions are performed. The events should be provided to the Bullet Chart through the [BulletChartEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartEvents.html). diff --git a/chart-sdk/blazor/bullet-chart/getting-started-with-server-app.md b/chart-sdk/blazor/bullet-chart/getting-started-with-server-app.md index e54d39eed..3c95e6780 100644 --- a/chart-sdk/blazor/bullet-chart/getting-started-with-server-app.md +++ b/chart-sdk/blazor/bullet-chart/getting-started-with-server-app.md @@ -1,103 +1,114 @@ --- layout: post -title: Getting Started with BulletChart in Blazor Server App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor Bullet Chart Component in Blazor Server App. -platform: chart-sdk -component: Bullet Chart +title: Getting Started with Blazor Bullet Chart in Server App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Bullet Chart in a Blazor Server app, including setup, packages, and first chart. +platform: Blazor +control: Bullet Chart documentation: ug --- -# Getting Started with Blazor BulletChart Component in Blazor Server App +# Blazor Bullet Chart Getting Started in Server App -This section briefly explains about how to include [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-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 Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-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.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart) 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.BulletChart`) 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.BulletChart -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.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart/) 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. +dotnet add package Syncfusion.Blazor.BulletChart -v {{ site.releaseversion }} -Alternatively, run the following command 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.BulletChart -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.BulletChart -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 @@ -112,9 +123,9 @@ 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" %} @@ -129,41 +140,34 @@ builder.Services.AddSyncfusionBlazor(); {% endtabs %} ## 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 **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 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 the Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor Bullet Chart component -Add the Blazor Bullet 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 Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-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.Charts +@page "/" +@rendermode InteractiveServer -@code{ +@code +{ public class ChartData { public double FieldValue { get; set; } @@ -178,9 +182,47 @@ 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 Bullet 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 Bullet 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 %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJZMByKuOOgQjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.webp)" %} +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/BXBdjHiMJdxpZLsR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BulletChart). @@ -197,7 +239,7 @@ Add a title by using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusio {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhpXWByfNMLYFQO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Title](images/blazor-bullet-chart-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLHjRiCzHdclwiM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bullet Chart with Title](images/blazor-bullet-chart-title.webp)" %} ## Adding ranges @@ -218,7 +260,7 @@ Add ranges by using the [BulletChartRangeCollection](https://help.syncfusion.com {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrJXMhezDHBfdQU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Range in Blazor Bullet Chart](images/blazor-bullet-chart-ranges.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLxtnMszRcrejzZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Adding Range in Blazor Bullet Chart](images/blazor-bullet-chart-ranges.webp)" %} ## Adding tooltip @@ -239,11 +281,9 @@ Use the tooltip to show the measured values by setting the [Enable](https://help {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBzDWVITXPjsQbH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart displays ToolTip](images/blazor-bullet-chart-tooltip.webp)" %} - -N> You can also explore our [Blazor Bullet Chart example](https://blazor.syncfusion.com/demos/bullet-chart/default-functionalities?theme=bootstrap5) that shows you how to render and configure the bullet chart. +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhRXniWTxmeRSpM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bullet Chart displays ToolTip](images/blazor-bullet-chart-tooltip.webp)" %} ## 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) +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/bullet-chart/getting-started-with-web-app.md b/chart-sdk/blazor/bullet-chart/getting-started-with-web-app.md index 97ff8ce66..25f4184fb 100644 --- a/chart-sdk/blazor/bullet-chart/getting-started-with-web-app.md +++ b/chart-sdk/blazor/bullet-chart/getting-started-with-web-app.md @@ -1,46 +1,52 @@ --- layout: post -title: Getting Started with BulletChart in Blazor Web App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor Bullet Chart Component in Blazor Web App. -platform: chart-sdk -component: Bullet Chart +title: Getting Started with Blazor Bullet Chart in Web App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Bullet Chart in a Blazor Web App, including server and client setup, packages, and first chart. +platform: Blazor +control: Bullet Chart documentation: ug --- -# Getting Started with Blazor BulletChart in Blazor Web App +# Blazor Bullet Chart Getting Started in Web App -This section briefly explains about how to include [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-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 Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-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 command 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,65 +55,66 @@ 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.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart) 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.BulletChart`) 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 command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.BulletChart -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.BulletChart -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 Blazor BulletChart NuGet in the App - -Install [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart/) 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 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.BulletChart -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.BulletChart -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 package is installed, open the **~/_Imports.razor** file in the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. +After the package is 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" %} @@ -118,9 +125,9 @@ After the package is installed, open the **~/_Imports.razor** file in the client {% 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" %} @@ -134,44 +141,35 @@ 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 references](https://blazor.syncfusion.com/documentation/common/adding-script-references) in the **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 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 the Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor Bullet Chart component -Add the Blazor Bullet 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/*.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 Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-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. - -{% tabs %} -{% highlight razor %} - -@* desired render mode define 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. {% tabs %} {% highlight razor tabtitle="Home.razor" %} -@using Syncfusion.Blazor.Charts +@page "/" +@rendermode InteractiveAuto -@code{ +@code +{ public class ChartData { public double FieldValue { get; set; } @@ -186,9 +184,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 Bullet 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 Bullet Chart component will render in your default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLJZMByKuOOgQjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.webp)" %} +{% 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/BXBdjHiMJdxpZLsR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BulletChart). @@ -205,7 +245,7 @@ Add a title by using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusio {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhpXWByfNMLYFQO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Title](images/blazor-bullet-chart-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLHjRiCzHdclwiM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bullet Chart with Title](images/blazor-bullet-chart-title.webp)" %} ## Adding ranges @@ -226,7 +266,7 @@ Add ranges by using the [BulletChartRangeCollection](https://help.syncfusion.com {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrJXMhezDHBfdQU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Range in Blazor Bullet Chart](images/blazor-bullet-chart-ranges.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLxtnMszRcrejzZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Adding Range in Blazor Bullet Chart](images/blazor-bullet-chart-ranges.webp)" %} ## Adding tooltip @@ -247,13 +287,10 @@ Use the tooltip to show the measured values by setting the [Enable](https://help {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBzDWVITXPjsQbH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart displays ToolTip](images/blazor-bullet-chart-tooltip.webp)" %} - -N> You can also explore our [Blazor Bullet Chart example](https://blazor.syncfusion.com/demos/bullet-chart/default-functionalities?theme=bootstrap5) that shows you how to render and configure the bullet chart. +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhRXniWTxmeRSpM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bullet Chart displays ToolTip](images/blazor-bullet-chart-tooltip.webp)" %} ## 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 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/bullet-chart/getting-started.md b/chart-sdk/blazor/bullet-chart/getting-started.md index bc8fb5aaf..ad02b5c7e 100644 --- a/chart-sdk/blazor/bullet-chart/getting-started.md +++ b/chart-sdk/blazor/bullet-chart/getting-started.md @@ -1,103 +1,114 @@ --- layout: post -title: Getting Started with Blazor Bullet Chart Component | Syncfusion® -description: Checkout and learn about getting started with Blazor Bullet Chart component in Blazor WebAssembly App. -platform: chart-sdk +title: Getting Started with Blazor Bullet Chart in WASM App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Bullet Chart in a Blazor WebAssembly app, including setup, packages, and first chart. +platform: Blazor control: Bullet Chart documentation: ug --- -# Getting Started with Blazor Bullet Chart Component +# Blazor Bullet Chart Getting Started in WASM App -This section briefly explains about how to include [Blazor Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-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 Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-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 + +Install the [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart) 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 %} -## Prerequisites +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.BulletChart`) 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 command. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Package Manager Console" %} -dotnet --version +Install-Package Syncfusion.Blazor.BulletChart -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.BulletChart -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install required Blazor packages - -Install [Syncfusion.Blazor.BulletChart](https://www.nuget.org/packages/Syncfusion.Blazor.BulletChart/) 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.BulletChart -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.BulletChart -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 +### Add import namespaces After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. @@ -110,9 +121,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" %} @@ -127,30 +138,31 @@ builder.Services.AddSyncfusionBlazor(); {% endtabs %} ## 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 **~wwwroot/index.html** file. -The script can be accessed 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. - -```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 Blazor application. +{% endhighlight %} +{% endtabs %} ## Add Blazor Bullet Chart component -Add the Blazor Bullet 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 Bullet Chart](https://www.syncfusion.com/blazor-components/blazor-bullet-chart) component inside the razor file. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} -@using Syncfusion.Blazor.Charts +@page "/" -@code{ +@code +{ public class ChartData { public double FieldValue { get; set; } @@ -165,9 +177,47 @@ Add the Blazor Bullet 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 Bullet 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 Bullet 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/hNLJZMByKuOOgQjA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBdjHiMJdxpZLsR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bullet Chart Component](images/blazor-bullet-chart-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/BulletChart). @@ -176,9 +226,7 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting- Add a title by using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_Title) property in the Bullet Chart to provide quick information to the user about the data plotted in the component. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Charts +{% highlight razor tabtitle="Home.razor" %} @@ -186,16 +234,14 @@ Add a title by using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusio {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhpXWByfNMLYFQO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart with Title](images/blazor-bullet-chart-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLHjRiCzHdclwiM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bullet Chart with Title](images/blazor-bullet-chart-title.webp)" %} ## Adding ranges Add ranges by using the [BulletChartRangeCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRangeCollection.html) to measure the qualitative state by observing the distance between each range. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Charts +{% highlight razor tabtitle="Home.razor" %} @@ -208,16 +254,14 @@ Add ranges by using the [BulletChartRangeCollection](https://help.syncfusion.com {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrJXMhezDHBfdQU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Adding Range in Blazor Bullet Chart](images/blazor-bullet-chart-ranges.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLxtnMszRcrejzZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Adding Range in Blazor Bullet Chart](images/blazor-bullet-chart-ranges.webp)" %} ## Adding tooltip Use the tooltip to show the measured values by setting the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltip-1.html#Syncfusion_Blazor_Charts_BulletChartTooltip_1_Enable) property to **true** in the [BulletChartTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartTooltip-1.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} - -@using Syncfusion.Blazor.Charts +{% highlight razor tabtitle="Home.razor" %} @@ -231,6 +275,9 @@ Use the tooltip to show the measured values by setting the [Enable](https://help {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBzDWVITXPjsQbH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bullet Chart displays ToolTip](images/blazor-bullet-chart-tooltip.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhRXniWTxmeRSpM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bullet Chart displays ToolTip](images/blazor-bullet-chart-tooltip.webp)" %} + +## See also -N> You can also explore our [Blazor Bullet Chart example](https://blazor.syncfusion.com/demos/bullet-chart/default-functionalities?theme=bootstrap5) that shows you how to render and configure the bullet chart. +1. [Getting Started with Blazor Web App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +2. [Getting Started with Blazor Server App in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) \ No newline at end of file diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.webp index 8f231f03d..ab53ae2f5 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar-customization.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.webp index 622bc21e6..b39612630 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-actual-bar.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-category-label.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-category-label.webp index f1a409655..717a4aed5 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-category-label.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-category-label.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-component.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-component.webp index 43577b021..804c97dfa 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-component.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-component.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-custom-label-format.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-custom-label-format.webp index 45af62a53..c1de8a259 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-custom-label-format.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-custom-label-format.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-data-binding.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-data-binding.webp index e67cb7c6e..b2e21a501 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-data-binding.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-data-binding.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.webp index e9e11d9ed..9c5fbb09d 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-dot-actual-bar.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-grouping.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-grouping.webp index a796fff3b..542d19052 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-grouping.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-grouping.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-label-customization.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-label-customization.webp index d1f38f863..46feddaab 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-label-customization.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-label-customization.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-label-format.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-label-format.webp index 0a26999dc..34d930b11 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-label-format.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-label-format.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-labels-position.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-labels-position.webp index 938ec0136..7d17a2ff3 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-labels-position.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-labels-position.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-margin.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-margin.webp index 2abb28d29..9a0a58b6c 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-margin.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-margin.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-opposed-position.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-opposed-position.webp index ed094e5c3..76a486024 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-opposed-position.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-opposed-position.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-range-customization.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-range-customization.webp index 273106265..7ddfc9cb6 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-range-customization.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-range-customization.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-range.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-range.webp index da0622215..5b78500cd 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-range.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-range.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-ranges.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-ranges.webp index 10213bcb4..74878983c 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-ranges.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-ranges.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-tick-line-customization.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-tick-line-customization.webp index c30fa91dd..51f9d2b51 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-tick-line-customization.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-tick-line-customization.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-tick-position.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-tick-position.webp index dbdb0d82d..941048e18 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-tick-position.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-tick-position.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-title.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-title.webp index 72ce62bf8..14c8b59c4 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-title.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-title.webp differ diff --git a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-tooltip.webp b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-tooltip.webp index b8379467d..26352dc3c 100644 Binary files a/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-tooltip.webp and b/chart-sdk/blazor/bullet-chart/images/blazor-bullet-chart-tooltip.webp differ diff --git a/chart-sdk/blazor/bullet-chart/legend.md b/chart-sdk/blazor/bullet-chart/legend.md index 6676efbf0..57ab73a8a 100644 --- a/chart-sdk/blazor/bullet-chart/legend.md +++ b/chart-sdk/blazor/bullet-chart/legend.md @@ -1,13 +1,13 @@ --- layout: post -title: Legend in Blazor Bullet Chart Component | Syncfusion® -description: Checkout and learn here all features about the Legend in Blazor Bullet Chart component and much more. -platform: chart-sdk -control: Bullet Chart +title: Blazor Bullet Chart Legend Configuration Examples | Syncfusion® +description: Learn how to enable and customize the legend in Syncfusion Blazor Bullet Chart, including position, alignment, and BulletChartLegendSettings. +platform: Blazor +control: Bullet Chart documentation: ug --- -# Legend in Blazor Bullet Chart Component +# Blazor Bullet Chart Legend Legend is used to provide valuable information for interpreting what the Bullet Chart displays. The legends can be represented in various colors, positions, shapes or other identifiers based on the data and it can be enabled by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html#Syncfusion_Blazor_Charts_BulletChartLegendSettings_Visible) property to **true** in the [BulletChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartLegendSettings.html). diff --git a/chart-sdk/blazor/bullet-chart/ranges.md b/chart-sdk/blazor/bullet-chart/ranges.md index 8de3710a4..02d684149 100644 --- a/chart-sdk/blazor/bullet-chart/ranges.md +++ b/chart-sdk/blazor/bullet-chart/ranges.md @@ -1,13 +1,13 @@ --- layout: post -title: Ranges in Blazor Bullet Chart Component | Syncfusion® -description: Checkout and learn here all features about the ranges in Blazor Bullet Chart component and much more. -platform: chart-sdk -control: Bullet Chart +title: Blazor Bullet Chart Ranges Examples | Syncfusion® +description: Learn how to define qualitative ranges in Syncfusion Blazor Bullet Chart using BulletChartRangeCollection with Good, Satisfactory, and Bad values. +platform: Blazor +control: Bullet Chart documentation: ug --- -# Ranges in Blazor Bullet Chart Component +# Blazor Bullet Chart Ranges Ranges represent the quality of a specific range such as **Good**, **Bad** and **Satisfactory** in the Bullet Chart scale. The ending point of a qualitative range is specified in the [End](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BulletChartRange.html#Syncfusion_Blazor_Charts_BulletChartRange_End) property. The minimum value of a quantitative scale is considered the starting point of the first range or the previous range end point. @@ -34,7 +34,7 @@ Ranges represent the quality of a specific range such as **Good**, **Bad** and * }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLUiLLiTfIkQhfG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Ranges in Blazor Bullet Chart](images/blazor-bullet-chart-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLHZniLrCyJeDQw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Ranges in Blazor Bullet Chart](images/blazor-bullet-chart-range.webp)" %} ## Color customization @@ -68,4 +68,4 @@ Enhance the readability of ranges with color and opacity. It can be applied usin }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBUWBrWJJHrSIXJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Ranges with Color in Blazor Bullet Chart](images/blazor-bullet-chart-range-customization.webp)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrnDHCLBCIkyJWS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Ranges with Color in Blazor Bullet Chart](images/blazor-bullet-chart-range-customization.webp)" %} \ No newline at end of file diff --git a/chart-sdk/blazor/bullet-chart/target-bar.md b/chart-sdk/blazor/bullet-chart/target-bar.md index 1f7fd058f..2c5ecfc39 100644 --- a/chart-sdk/blazor/bullet-chart/target-bar.md +++ b/chart-sdk/blazor/bullet-chart/target-bar.md @@ -1,13 +1,13 @@ --- layout: post -title: Target Bar in Blazor Bullet Chart Component | Syncfusion® -description: Checkout and learn here all features about Target Bar in Blazor Bullet Chart component and much more. -platform: chart-sdk -control: Bullet Chart +title: Blazor Bullet Chart Target Bar Examples | Syncfusion® +description: Learn how to render the target bar (comparative measure) in Syncfusion Blazor Bullet Chart by mapping TargetField to your data source. +platform: Blazor +control: Bullet Chart documentation: ug --- -# Target Bar in Blazor Bullet Chart Component +# Blazor Bullet Chart Target Bar The line marker that runs perpendicular to the orientation of the graph is known as the **Comparative Measure** and it is used as a target marker to compare against the feature measure value. This is also called as the **Target Bar** in the Bullet Chart. To display the target bar, the [TargetField](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfBulletChart-1.html#Syncfusion_Blazor_Charts_SfBulletChart_1_TargetField) should be mapped to the appropriate field from the datasource. diff --git a/chart-sdk/blazor/bullet-chart/title.md b/chart-sdk/blazor/bullet-chart/title.md index 5b5299927..24f458aaa 100644 --- a/chart-sdk/blazor/bullet-chart/title.md +++ b/chart-sdk/blazor/bullet-chart/title.md @@ -1,13 +1,13 @@ --- layout: post -title: Title and Subtitle in Blazor Bullet Chart Component | Syncfusion® -description: Checkout and learn here all about Title and Subtitle in Blazor Bullet Chart component and much more. -platform: chart-sdk -control: Bullet Chart +title: Blazor Bullet Chart Title and Subtitle Examples | Syncfusion® +description: Learn how to add a title and subtitle to Syncfusion Blazor Bullet Chart, including text, alignment, and font styling options. +platform: Blazor +control: Bullet Chart documentation: ug --- -# Title and Subtitle in Blazor Bullet Chart Component +# Blazor Bullet Chart Title and Subtitle ## Title diff --git a/chart-sdk/blazor/bullet-chart/tool-tip.md b/chart-sdk/blazor/bullet-chart/tool-tip.md index e5c11ed8f..17f274a43 100644 --- a/chart-sdk/blazor/bullet-chart/tool-tip.md +++ b/chart-sdk/blazor/bullet-chart/tool-tip.md @@ -1,13 +1,13 @@ --- layout: post -title: Tooltip in Blazor Bullet Chart Component | Syncfusion® -description: Checkout and learn here all about Tooltip in Blazor Bullet Chart component including customization and templates. -platform: chart-sdk -control: Bullet Chart +title: Blazor Bullet Chart Tooltip Examples | Syncfusion® +description: Learn how to enable and customize tooltips in Syncfusion Blazor Bullet Chart, including format, template, and styling options. +platform: Blazor +control: Bullet Chart documentation: ug --- -# Tooltip in Blazor Bullet Chart Component +# Blazor Bullet Chart Tooltip When the mouse is hovered over a bar in the Bullet Chart, the tooltip displays important summary about the actual and the target bar values. diff --git a/chart-sdk/blazor/chart-wizard/accessibility.md b/chart-sdk/blazor/chart-wizard/accessibility.md index 9ba70ad9c..0fbe587b9 100644 --- a/chart-sdk/blazor/chart-wizard/accessibility.md +++ b/chart-sdk/blazor/chart-wizard/accessibility.md @@ -1,14 +1,14 @@ --- layout: post -title: Accessibility in Blazor Chart Wizard Component | Syncfusion® -description: Check out and learn here all about accessibility using keyboard navigation in Blazor Chart Wizard component and more. -platform: chart-sdk +title: Blazor Chart Wizard Accessibility Examples | Syncfusion® +description: Learn about accessibility in Syncfusion Blazor Chart Wizard with keyboard navigation, screen reader support, and WCAG 2.2 compliance. +platform: Blazor control: Chart Wizard documentation: ug keywords: chart wizard, blazor, accessibility --- -# Accessibility in Blazor Chart Wizard Component +# Blazor Chart Wizard Accessibility The Blazor Chart Wizard 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/chart-wizard/appearance.md b/chart-sdk/blazor/chart-wizard/appearance.md index 64406f3c4..31decf5c2 100644 --- a/chart-sdk/blazor/chart-wizard/appearance.md +++ b/chart-sdk/blazor/chart-wizard/appearance.md @@ -1,15 +1,15 @@ --- layout: post -title: Appearance | Blazor Chart Wizard Component | Syncfusion® -description: Check out and learn how to customize the appearance of the Blazor Chart Wizard component including themes and layout. -platform: chart-sdk +title: Blazor Chart Wizard Appearance Examples | Syncfusion® +description: Learn how to customize the appearance of Syncfusion Blazor Chart Wizard, including theme, width, height, RTL, and property panel settings. +platform: Blazor control: Chart Wizard documentation: ug keywords: chart wizard, blazor, chart --- -# Customizing Appearance in the Blazor Chart Wizard Component +# Blazor Chart Wizard Appearance This guide explains how to tailor the appearance of the `Chart Wizard` component in Blazor. Discover the available properties and see practical examples for each customization option. diff --git a/chart-sdk/blazor/chart-wizard/getting-started-with-wasm.md b/chart-sdk/blazor/chart-wizard/getting-started-with-wasm.md index 04610c108..0ec86e59a 100644 --- a/chart-sdk/blazor/chart-wizard/getting-started-with-wasm.md +++ b/chart-sdk/blazor/chart-wizard/getting-started-with-wasm.md @@ -1,8 +1,8 @@ --- layout: post -title: Getting Started | Blazor Chart Wizard Component in WASM | Syncfusion® -description: Check out and learn about getting started with Blazor Chart Wizard in Blazor WebAssembly (WASM) App using Visual Studio and more. -platform: chart-sdk +title: Getting Started with Blazor Chart Wizard in WASM App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Chart Wizard in a Blazor WebAssembly app, including setup, packages, and first chart. +platform: Blazor control: Chart Wizard documentation: ug keywords: chart wizard, blazor, chart @@ -14,93 +14,107 @@ keywords: chart wizard, blazor, chart This section briefly explains about how to include the [Blazor Chart Wizard](https://www.syncfusion.com/blazor-components/blazor-chart-wizard) 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/). -> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) + +## 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 %} -## Prerequisites +## Install the required Blazor packages + +Install the [Syncfusion.Blazor.ChartWizard](https://www.nuget.org/packages/Syncfusion.Blazor.ChartWizard/) and [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. -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 packages (`Syncfusion.Blazor.ChartWizard` and `Syncfusion.Blazor.Themes`) and install them. + +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.ChartWizard -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -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 commands. {% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazorwasm -o BlazorApp -cd BlazorApp +dotnet add package Syncfusion.Blazor.ChartWizard -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install required Blazor packages - -Install [Syncfusion.Blazor.ChartWizard](https://www.nuget.org/packages/Syncfusion.Blazor.ChartWizard/) 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.ChartWizard -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.ChartWizard -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 @@ -115,12 +129,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; @@ -131,42 +145,83 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add script resources +## 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 reference in the **~/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](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 [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 Chart Wizard Component +## Add Blazor Chart Wizard component -Add the Blazor Chart Wizard component in the **~/Pages/Index.razor** file. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Chart Wizard](https://www.syncfusion.com/blazor-components/blazor-chart-wizard) component inside the razor file. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} - + {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Chart Wizard 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 Chart Wizard 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/hjLRtHiyAsLphCAN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Chart Wizard Default](images/chart-wizard-default.webp)" %} ## Populate Blazor Chart Wizard data -To bind data for the Chart Wizard component, you can assign a IEnumerable object to the `DataSource` property. +To bind data for the Chart Wizard component, you can assign an IEnumerable object to the `DataSource` property. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} public class OlympicsData { @@ -201,7 +256,7 @@ N> The default series type is Line. Use the `SeriesType` property to change the series type. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.ChartWizard @@ -215,7 +270,8 @@ The default series type is Line. Use the `SeriesType` property to change the ser -@code { +@code +{ private readonly List chartSeries = new() { "Gold", "Silver", "Bronze" }; private readonly List categories = new() { "Country", "CountryCode" }; @@ -248,16 +304,12 @@ The default series type is Line. Use the `SeriesType` property to change the ser ![Chart Wizard Example](images/chart-wizard-getting-started-example.webp) -## Theme - -Blazor Chart Wizard has built-in themes that can be used to change the appearance of the chart. - -### Prerequisites +## Prerequisites -In order to apply same theme update for the overall Chart Wizard UI, include the same theme stylesheet (this can be accessed from NuGet through Static Web Assets) in the tag in the App.razor file as shown below: +In order to apply same theme update for the overall Chart Wizard UI, include the same theme [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) (this can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets)) in the **** tag in the **~wwwroot/index.html** file as shown below: {% tabs %} -{% highlight razor %} +{% highlight html tabtitle="index.html" %} .... @@ -270,7 +322,7 @@ In order to apply same theme update for the overall Chart Wizard UI, include the The `Theme` property is used to specify the visual theme applied to the chart. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.ChartWizard @@ -284,7 +336,8 @@ The `Theme` property is used to specify the visual theme applied to the chart. -@code { +@code +{ private readonly List chartSeries = new() { "Gold", "Silver", "Bronze" }; private readonly List categories = new() { "Country", "CountryCode" }; @@ -319,6 +372,6 @@ The `Theme` property is used to specify the visual theme applied to the chart. ## 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-web-app) -* [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-web-app) +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/chart-wizard/getting-started-with-web-app.md b/chart-sdk/blazor/chart-wizard/getting-started-with-web-app.md index 5f2271cea..2803b90f7 100644 --- a/chart-sdk/blazor/chart-wizard/getting-started-with-web-app.md +++ b/chart-sdk/blazor/chart-wizard/getting-started-with-web-app.md @@ -1,49 +1,55 @@ --- layout: post -title: Getting Started with Blazor Chart Wizard in WebApp | Syncfusion® -description: Check out and learn about the documentation for getting started with Blazor Chart Wizard Component in Blazor Web App. -platform: chart-sdk +title: Getting Started with Blazor Chart Wizard in Web App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Chart Wizard in a Blazor Web App, including server and client setup, packages, and first chart. +platform: Blazor control: Chart Wizard documentation: ug keywords: chart wizard, blazor, chart --- -# Getting Started with Blazor Chart Wizard Component in Web App +# Getting Started with Blazor Chart Wizard Component in Blazor Web App -This section briefly explains about how to include [Blazor Chart Wizard](https://www.syncfusion.com/blazor-components/blazor-chart-wizard) 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 Chart Wizard](https://www.syncfusion.com/blazor-components/blazor-chart-wizard) 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/). -> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) + +## 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 @@ -52,68 +58,72 @@ cd BlazorWebApp.Client {% 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 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 the [Syncfusion.Blazor.ChartWizard](https://www.nuget.org/packages/Syncfusion.Blazor.ChartWizard/) and [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. -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). +{% tabcontents %} + +{% tabcontent Visual Studio %} + +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet packages (`Syncfusion.Blazor.ChartWizard` and `Syncfusion.Blazor.Themes`) and install them. + +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.ChartWizard -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=".NET CLI" %} +{% highlight razor tabtitle="Terminal" %} -dotnet new blazor -o BlazorApp -int Auto -cd BlazorApp -cd BlazorApp.Client +dotnet add package Syncfusion.Blazor.ChartWizard -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](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=linux-macos&view=aspnetcore-8.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.ChartWizard](https://www.nuget.org/packages/Syncfusion.Blazor.ChartWizard/) 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.ChartWizard -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.ChartWizard -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 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 package is installed, open the **~/_Imports.razor** file from the client project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ChartWizard` namespaces. +After the package is installed, open the **~/_Imports.razor** file from the `.Client` project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ChartWizard` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.ChartWizard @@ -121,9 +131,9 @@ After the package is installed, open the **~/_Imports.razor** file from 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" %} @@ -137,52 +147,88 @@ 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](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. -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. +{% endhighlight %} +{% endtabs %} ## Add Blazor Chart Wizard component -Add the Blazor Chart Wizard 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 Chart Wizard](https://www.syncfusion.com/blazor-components/blazor-chart-wizard) 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 %} +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Chart Wizard 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="Home.razor" %} +{% 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 %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Chart Wizard component in the default web browser. +{% endtabcontent %} + +{% endtabcontents %} ![Chart Wizard Default](images/chart-wizard-default.webp) ## Populate Blazor Chart Wizard data -To bind data for the chart wizard component, you can assign a IEnumerable object to the [DataSource]() property. +To bind data for the chart wizard component, you can assign an IEnumerable object to the `DataSource` property. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -233,7 +279,8 @@ The default series type is Line. Use the `SeriesType` property to change the ser -@code { +@code +{ private readonly List chartSeries = new() { "Gold", "Silver", "Bronze" }; private readonly List categories = new() { "Country", "CountryCode" }; @@ -266,16 +313,12 @@ The default series type is Line. Use the `SeriesType` property to change the ser ![Chart Wizard Example](images/chart-wizard-getting-started-example.webp) -## Theme - -Blazor Chart Wizard has built-in themes that can be used to change the appearance of the chart. - -### Prerequisites +## Prerequisites -In order to apply same theme update for the overall Chart Wizard UI, include the same theme stylesheet (this can be accessed from NuGet through Static Web Assets) in the tag in the App.razor file as shown below: +In order to apply same theme update for the overall Chart Wizard UI, include the same theme [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) (this can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets)) in the **** tag in the **~/Components/App.razor** file as shown below: {% tabs %} -{% highlight razor %} +{% highlight razor tabtitle="App.razor" %} .... @@ -302,7 +345,8 @@ The `Theme` property is used to specify the visual theme applied to the chart. -@code { +@code +{ private readonly List chartSeries = new() { "Gold", "Silver", "Bronze" }; private readonly List categories = new() { "Country", "CountryCode" }; diff --git a/chart-sdk/blazor/chart-wizard/getting-started.md b/chart-sdk/blazor/chart-wizard/getting-started.md index 255268010..3fd1435c7 100644 --- a/chart-sdk/blazor/chart-wizard/getting-started.md +++ b/chart-sdk/blazor/chart-wizard/getting-started.md @@ -1,8 +1,8 @@ --- layout: post -title: Getting Started | Blazor Chart Wizard Component | Syncfusion® -description: Check out and learn about getting started with Blazor Chart Wizard component in Blazor Server App using Visual Studio and more. -platform: chart-sdk +title: Getting Started with Blazor Chart Wizard in Server App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Chart Wizard in a Blazor Server app, including setup, packages, and first chart. +platform: Blazor control: Chart Wizard documentation: ug keywords: chart wizard, blazor, chart @@ -10,103 +10,117 @@ keywords: chart wizard, blazor, chart -# Getting Started with Blazor Chart Wizard Component in Server App +# Getting Started with Blazor Chart Wizard in Blazor Server App -This section briefly explains about how to include [Blazor Chart Wizard](https://www.syncfusion.com/blazor-components/blazor-chart-wizard) 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 the [Blazor Chart Wizard](https://www.syncfusion.com/blazor-components/blazor-chart-wizard) 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/). -> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, CodeStudio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) +> **Ready to streamline your Blazor development?**
Discover the full potential of Blazor components with AI Coding Assistants. Effortlessly integrate, configure, and enhance your projects with intelligent, context-aware code suggestions, streamlined setups, and real-time insights—all seamlessly integrated into your preferred AI-powered IDEs like VS Code, Cursor, Code Studio and more. [Explore AI Coding Assistants](https://blazor.syncfusion.com/documentation/ai-coding-assistant/overview) + +## 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 packages -{% tabs %} -{% highlight c# tabtitle=".NET CLI" %} +Install the [Syncfusion.Blazor.ChartWizard](https://www.nuget.org/packages/Syncfusion.Blazor.ChartWizard/) and [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. -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 packages (`Syncfusion.Blazor.ChartWizard` and `Syncfusion.Blazor.Themes`) and install them. -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 packages 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.ChartWizard -Version {{ site.releaseversion }} +Install-Package Syncfusion.Blazor.Themes -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" %} -## Install required Blazor packages +dotnet add package Syncfusion.Blazor.ChartWizard -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} -Install [Syncfusion.Blazor.ChartWizard](https://www.nuget.org/packages/Syncfusion.Blazor.ChartWizard/) 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. +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% 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.ChartWizard -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.ChartWizard -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 package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ChartWizard` namespaces. +After the packages are installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.ChartWizard` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -117,9 +131,9 @@ 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" %} @@ -133,50 +147,84 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add script resources +## 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 script reference in the **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](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 [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 Chart Wizard component -Add the Blazor Chart Wizard 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 Chart Wizard](https://www.syncfusion.com/blazor-components/blazor-chart-wizard) 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 %} +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Chart Wizard 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="Home.razor" %} +{% 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 %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Chart Wizard component in the default web browser. +{% endtabcontent %} + +{% endtabcontents %} ![Chart Wizard Default](images/chart-wizard-default.webp) ## Populate Blazor Chart Wizard data -To bind data for the chart wizard component, you can assign a IEnumerable object to the `DataSource` property. +To bind data for the chart wizard component, you can assign an IEnumerable object to the `DataSource` property. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -227,7 +275,8 @@ The default series type is Line. Use the `SeriesType` property to change the ser -@code { +@code +{ private readonly List chartSeries = new() { "Gold", "Silver", "Bronze" }; private readonly List categories = new() { "Country", "CountryCode" }; @@ -260,16 +309,12 @@ The default series type is Line. Use the `SeriesType` property to change the ser ![Chart Wizard Example](images/chart-wizard-getting-started-example.webp) -## Theme - -Blazor Chart Wizard has built-in themes that can be used to change the appearance of the chart. - -### Prerequisites +## Prerequisites -In order to apply same theme update for the overall Chart Wizard UI, include the same theme stylesheet (this can be accessed from NuGet through Static Web Assets) in the tag in the App.razor file as shown below: +In order to apply same theme update for the overall Chart Wizard UI, include the same theme [stylesheet](https://blazor.syncfusion.com/documentation/appearance/themes) (this can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets)) in the **** tag in the **~/Components/App.razor** file as shown below: {% tabs %} -{% highlight razor tabtitle="Home.razor" %} +{% highlight razor tabtitle="App.razor" %} .... @@ -296,7 +341,8 @@ The `Theme` property is used to specify the visual theme applied to the chart. -@code { +@code +{ private readonly List chartSeries = new() { "Gold", "Silver", "Bronze" }; private readonly List categories = new() { "Country", "CountryCode" }; @@ -331,5 +377,5 @@ The `Theme` property is used to specify the visual theme applied to the chart. ## 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) -* [Getting Started with Blazor Web App in Visual Studio or .NET CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-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) +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/chart-wizard/print-export.md b/chart-sdk/blazor/chart-wizard/print-export.md index a57782909..20d7674a7 100644 --- a/chart-sdk/blazor/chart-wizard/print-export.md +++ b/chart-sdk/blazor/chart-wizard/print-export.md @@ -1,14 +1,14 @@ --- layout: post -title: Export | Blazor ChartWizard Component | Syncfusion® -description: Check out and learn here all the features about print and export in Blazor Chart Wizard component and much more. -platform: chart-sdk +title: Blazor Chart Wizard Print and Export Examples | Syncfusion® +description: Learn how to print and export Syncfusion Blazor Chart Wizard to PNG, JPEG, SVG, PDF, CSV, and XLSX using ChartExportSettings. +platform: Blazor control: Chart Wizard documentation: ug keywords: chart wizard, blazor, chart --- -# Print and Export in Blazor Chart Wizard Component +# Blazor Chart Wizard Print and Export The Chart Wizard support the export of current chart to a variety of popular file formats. Supported export options include: `PNG`, `JPEG`, `SVG`, `PDF`, `CSV`, `XLSX`, and `PRINT`. diff --git a/chart-sdk/blazor/chart-wizard/serialization.md b/chart-sdk/blazor/chart-wizard/serialization.md index db2c5d1a8..de65b75dc 100644 --- a/chart-sdk/blazor/chart-wizard/serialization.md +++ b/chart-sdk/blazor/chart-wizard/serialization.md @@ -1,14 +1,14 @@ --- layout: post -title: Serialization | Blazor Chart Wizard Component | Syncfusion® -description: Check out and learn here all the features about serialization in Blazor Chart Wizard component and much more. -platform: chart-sdk +title: Blazor Chart Wizard Serialization Examples | Syncfusion® +description: Learn how to save and restore Syncfusion Blazor Chart Wizard configuration using SaveChart and LoadChartAsync for JSON-based persistence. +platform: Blazor control: Chart Wizard documentation: ug keywords: chart wizard, blazor, serialization --- -# Serialization in Blazor Chart Wizard Component +# Blazor Chart Wizard Serialization The `Chart Wizard` component makes it simple to save and restore your entire chart wizard configuration. This is useful for persisting user settings, sharing chart setups, or restoring previous states. diff --git a/chart-sdk/blazor/chart-wizard/working-with-data.md b/chart-sdk/blazor/chart-wizard/working-with-data.md index 98fdcf81e..9e84b395b 100644 --- a/chart-sdk/blazor/chart-wizard/working-with-data.md +++ b/chart-sdk/blazor/chart-wizard/working-with-data.md @@ -1,14 +1,14 @@ --- layout: post -title: Working with data in Blazor Chart Wizard Component | Syncfusion® -description: Check out and learn here all about working with data in Blazor Chart Wizard component, it's elements and more. -platform: chart-sdk +title: Blazor Chart Wizard Working with Data Examples | Syncfusion® +description: Learn how to configure data sources, category fields, series fields, and chart types in Syncfusion Blazor Chart Wizard using ChartSettings. +platform: Blazor control: Chart Wizard documentation: ug keywords: chart wizard, blazor, chart --- -# Working with Data in Blazor Chart Wizard Component +# Blazor Chart Wizard Working with Data The primary configuration for the chart wizard is provided via the `ChartSettings`. Key properties: diff --git a/chart-sdk/blazor/range-selector/accessibility.md b/chart-sdk/blazor/range-selector/accessibility.md index 16ae43cf6..430c3c571 100644 --- a/chart-sdk/blazor/range-selector/accessibility.md +++ b/chart-sdk/blazor/range-selector/accessibility.md @@ -1,13 +1,13 @@ --- layout: post -title: Accessibility in Blazor Range Selector Component | Syncfusion® -description: Checkout and learn here all about Accessibility using Keyboard navigation in Blazor Range Selector component with examples and much more details. -platform: chart-sdk +title: Blazor Range Selector Accessibility Guide | Syncfusion® +description: Learn about accessibility in Syncfusion Blazor Range Selector with keyboard navigation, screen reader support, and WCAG 2.2 compliance. +platform: Blazor control: Range Selector documentation: ug --- -# Accessibility in Blazor Range Selector Component +# Blazor Range Selector Accessibility The Blazor Range Selector 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/range-selector/custom.md b/chart-sdk/blazor/range-selector/custom.md index de0c542fc..9ff3b2d11 100644 --- a/chart-sdk/blazor/range-selector/custom.md +++ b/chart-sdk/blazor/range-selector/custom.md @@ -1,13 +1,13 @@ --- layout: post -title: Customization in Blazor Range Selector Component | Syncfusion® -description: Checkout and learn here all about customization in Blazor Range Selector component with examples and much more details. -platform: chart-sdk +title: Blazor Range Selector Customization Examples | Syncfusion® +description: Configure Syncfusion Blazor Range Selector with RangeNavigatorStyleSettings, SelectedRegionColor, and UnselectedRegionColor for a tailored look. +platform: Blazor control: Range Selector documentation: ug --- -# Customization in Blazor Range Selector Component +# Blazor Range Selector Customization ## Navigator Appearance diff --git a/chart-sdk/blazor/range-selector/data.md b/chart-sdk/blazor/range-selector/data.md index 461bb9810..db1a6c794 100644 --- a/chart-sdk/blazor/range-selector/data.md +++ b/chart-sdk/blazor/range-selector/data.md @@ -1,15 +1,15 @@ --- layout: post -title: Type of Data in Blazor Range Selector Component | Syncfusion® -description: Checkout and learn here all about type of data in Blazor Range Selector component with examples and much more details. -platform: chart-sdk +title: Blazor Range Selector Type of Data Examples | Syncfusion® +description: Learn about the supported data types in Syncfusion Blazor Range Selector, including Numeric, DateTime, and logarithmic value types. +platform: Blazor control: Range Selector documentation: ug --- -# Type of Data in Blazor Range Selector Component +# Blazor Range Selector Type of Data ## Numeric diff --git a/chart-sdk/blazor/range-selector/events.md b/chart-sdk/blazor/range-selector/events.md index 243200c0a..8f3640531 100644 --- a/chart-sdk/blazor/range-selector/events.md +++ b/chart-sdk/blazor/range-selector/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Events in Blazor Range Selector Component | Syncfusion® -description: Checkout and learn here all about events in Blazor Range Selector component with examples and much more details. -platform: chart-sdk +title: Blazor Range Selector Events Examples and Reference | Syncfusion® +description: Learn about events in Syncfusion Blazor Range Selector such as Loaded, Changed, OnTooltipRender, and SelectorRender with usage examples. +platform: Blazor control: Range Selector documentation: ug --- -# Events in Blazor Range Selector Component +# Blazor Range Selector Events This section describes about the Range Selector component's events, that is triggered when appropriate actions are performed. The events should be provided to the Range Selector through the **RangeNavigatorEvents** component. diff --git a/chart-sdk/blazor/range-selector/export.md b/chart-sdk/blazor/range-selector/export.md index 9080ad3d6..8144699a8 100644 --- a/chart-sdk/blazor/range-selector/export.md +++ b/chart-sdk/blazor/range-selector/export.md @@ -1,13 +1,13 @@ --- layout: post -title: Print and Export in Blazor Range Selector Component | Syncfusion® -description: Checkout and learn here all about print and export in Blazor Range Selector component with examples and much more details. -platform: chart-sdk +title: Blazor Range Selector Print and Export Examples | Syncfusion® +description: Learn how to print and export Syncfusion Blazor Range Selector using PrintAsync, or export to image, SVG, and PDF formats. +platform: Blazor control: Range Selector documentation: ug --- -# Print and Export in Blazor Range Selector Component +# Blazor Range Selector Print and Export ## Print diff --git a/chart-sdk/blazor/range-selector/getting-started-webapp.md b/chart-sdk/blazor/range-selector/getting-started-webapp.md index 7ce5b7d4a..2551d5bd9 100644 --- a/chart-sdk/blazor/range-selector/getting-started-webapp.md +++ b/chart-sdk/blazor/range-selector/getting-started-webapp.md @@ -1,46 +1,52 @@ --- layout: post -title: Getting Started with Range Selector in Blazor Web App | Syncfusion® -description: Check out the documentation for getting started with Blazor Range Selector Components in Blazor Web App with examples and much more details. -platform: chart-sdk +title: Getting Started with Blazor Range Selector in Web App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Range Selector in a Blazor Web App, including server and client setup, packages, and first chart. +platform: Blazor control: Range Selector documentation: ug --- -# Getting Started with Blazor Range Selector in Web App +# Blazor Range Selector Getting Started in Web App -This section briefly explains about how to include [Blazor Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) (RangeNavigator) 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 Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) (RangeNavigator) 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,67 +55,72 @@ 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.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator) and [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.RangeNavigator` 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.RangeNavigator -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 -cd BlazorWebApp.Client +dotnet add package Syncfusion.Blazor.RangeNavigator -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -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.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator) 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.RangeNavigator -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.RangeNavigator -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. +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 @@ -117,9 +128,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" %} @@ -133,40 +144,32 @@ 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 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 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 Range Selector component -Add the Blazor Range Selector 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 Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) 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" %} - @@ -176,7 +179,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem ## Populate Blazor Range Navigator with Data -To bind the data for the Range Navigator component, assign a `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). +To bind the data for the Range Navigator component, assign an `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -203,7 +206,7 @@ To bind the data for the Range Navigator component, assign a `IEnumerable` objec {% endhighlight %} {% endtabs %} -Now map `Date` and `Close` fields from the datasource to [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_YName) properties of the [RangeNavigatorSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html) and then set the `StockDetails` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. +Now map `Date` and `Close` fields from the data source to [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_YName) properties of the [RangeNavigatorSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html) and then set the `StockDetails` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -217,15 +220,56 @@ Now map `Date` and `Close` fields from the datasource to [XName](https://help.sy {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Range Selector 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 Range Selector 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/BZrJDWAtULnzQnOO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor RangeNavigator Component](images/blazor-range-navigator.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/VjBnjGDipsUUzNYM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor RangeNavigator Component](images/blazor-range-navigator.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RangeSelector). ## 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](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 Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) \ No newline at end of file diff --git a/chart-sdk/blazor/range-selector/getting-started.md b/chart-sdk/blazor/range-selector/getting-started.md index d1e539a2b..6548cd0cb 100644 --- a/chart-sdk/blazor/range-selector/getting-started.md +++ b/chart-sdk/blazor/range-selector/getting-started.md @@ -1,109 +1,122 @@ --- layout: post -title: Getting Started with Blazor Range Selector Component | Syncfusion -description: Checkout and learn about getting started with Blazor Range Selector component in Blazor WebAssembly Application with examples and much more details. -platform: chart-sdk +title: Getting Started with Blazor Range Selector in WASM App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Range Selector in a Blazor WebAssembly app, including setup, packages, and first chart. +platform: Blazor control: Range Selector documentation: ug --- -# Getting Started with Blazor Range Selector (RangeNavigator) Component +# Blazor Range Selector Getting Started in WASM App -This section briefly explains about how to include [Blazor Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) 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 Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) 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 WASM 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 -## Prerequisites +Install [Syncfusion.Blazor.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator/) and [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. -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 packages (`Syncfusion.Blazor.RangeNavigator` and `Syncfusion.Blazor.Themes`) and install them. + +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.RangeNavigator -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.RangeNavigator -v {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install required Blazor packages - -Install [Syncfusion.Blazor.RangeNavigator](https://www.nuget.org/packages/Syncfusion.Blazor.RangeNavigator/) 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.RangeNavigator -Version {{ site.releaseversion }} -Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.RangeNavigator -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. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts @@ -111,12 +124,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; @@ -129,24 +142,25 @@ builder.Services.AddSyncfusionBlazor(); ## Add stylesheet and script resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/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](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 Range Selector component -Add the Blazor Range Selector component in the **~/Pages/Index.razor** file. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) component inside the razor file. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -157,10 +171,10 @@ Add the Blazor Range Selector component in the **~/Pages/Index.razor** file. ## Populate Blazor Range Navigator with Data -To bind the data for the Range Navigator component, assign a `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). +To bind the data for the Range Navigator component, assign an `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @code { public class StockPrice @@ -184,10 +198,10 @@ To bind the data for the Range Navigator component, assign a `IEnumerable` objec {% endhighlight %} {% endtabs %} -Now map `Date` and `Close` fields from the datasource to [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_YName) properties of the [RangeNavigatorSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html) and then set the `StockDetails` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. +Now map `Date` and `Close` fields from the data source to [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_YName) properties of the [RangeNavigatorSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html) and then set the `StockDetails` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) property. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -198,14 +212,52 @@ Now map `Date` and `Close` fields from the datasource to [XName](https://help.sy {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Range Selector 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 Range Selector 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/BZrJDWAtULnzQnOO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor RangeNavigator Component](images/blazor-range-navigator.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhdZctWzWQIJXca?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor RangeNavigator Component](images/blazor-range-navigator.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/RangeSelector). ## 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 WebAssembly App](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 Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/chart-sdk/blazor/range-selector/grid-tick.md b/chart-sdk/blazor/range-selector/grid-tick.md index 86c6a8271..26635e1e2 100644 --- a/chart-sdk/blazor/range-selector/grid-tick.md +++ b/chart-sdk/blazor/range-selector/grid-tick.md @@ -1,13 +1,13 @@ --- layout: post -title: Grid Lines and Tick Lines in Blazor Range Selector | Syncfusion® -description: Learn here all about grid lines and tick lines in Blazor Range Selector component with examples and much more details. -platform: chart-sdk +title: Blazor Range Selector Grid Lines Examples | Syncfusion® +description: Learn how to customize grid lines and tick lines in Syncfusion Blazor Range Selector, including Width, Color, and DashArray settings. +platform: Blazor control: Range Selector documentation: ug --- -# Grid Lines and Tick Lines in Blazor Range Selector Component +# Blazor Range Selector Grid Lines and Tick Lines ## Gridline Customization diff --git a/chart-sdk/blazor/range-selector/images/blazor-range-navigator.webp b/chart-sdk/blazor/range-selector/images/blazor-range-navigator.webp index 29e516209..674524125 100644 Binary files a/chart-sdk/blazor/range-selector/images/blazor-range-navigator.webp and b/chart-sdk/blazor/range-selector/images/blazor-range-navigator.webp differ diff --git a/chart-sdk/blazor/range-selector/labels.md b/chart-sdk/blazor/range-selector/labels.md index b549d3fa4..68cbdd0ca 100644 --- a/chart-sdk/blazor/range-selector/labels.md +++ b/chart-sdk/blazor/range-selector/labels.md @@ -1,13 +1,13 @@ --- layout: post -title: Labels in Blazor Range Selector Component | Syncfusion® -description: Checkout and learn here all about labels in Blazor Range Selector component with examples and much more details. -platform: chart-sdk +title: Blazor Range Selector Labels Examples | Syncfusion® +description: Learn how to configure labels in Syncfusion Blazor Range Selector, including multi-level labels, format, and LabelPosition options. +platform: Blazor control: Range Selector documentation: ug --- -# Labels in Blazor Range Selector Component +# Blazor Range Selector Labels ## Multi-level labels diff --git a/chart-sdk/blazor/range-selector/light-weight.md b/chart-sdk/blazor/range-selector/light-weight.md index c78749ad5..5575c0563 100644 --- a/chart-sdk/blazor/range-selector/light-weight.md +++ b/chart-sdk/blazor/range-selector/light-weight.md @@ -1,13 +1,13 @@ --- layout: post -title: Lightweight in Blazor Range Selector Component | Syncfusion® -description: Checkout and learn here all about lightweight in Blazor Range Selector component with examples and much more details. -platform: chart-sdk +title: Blazor Range Selector Lightweight Examples | Syncfusion® +description: Learn how to enable lightweight mode in Syncfusion Blazor Range Selector to render the navigator without a chart when DataSource is empty. +platform: Blazor control: Range Selector documentation: ug --- -# Lightweight in Blazor Range Selector Component +# Blazor Range Selector Lightweight By default, when the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_DataSource) for [RangeNavigatorSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html) is empty, a lightweight Range Selector will be shown without Chart. diff --git a/chart-sdk/blazor/range-selector/period-selector.md b/chart-sdk/blazor/range-selector/period-selector.md index a6bee0247..c5f779651 100644 --- a/chart-sdk/blazor/range-selector/period-selector.md +++ b/chart-sdk/blazor/range-selector/period-selector.md @@ -1,13 +1,13 @@ --- layout: post -title: Period Selector in Blazor Range Selector Component | Syncfusion® -description: Checkout and learn here all about period selector in Blazor Range Selector component with examples and much more details. -platform: chart-sdk +title: Blazor Range Selector Period Selector Examples | Syncfusion® +description: Learn how to configure the period selector in Syncfusion Blazor Range Selector to let users choose time ranges with pre-defined intervals. +platform: Blazor control: Range Selector documentation: ug --- -# Period Selector in Blazor Range Selector Component +# Blazor Range Selector Period Selector The period selector allows to choose a time range with specific periods. diff --git a/chart-sdk/blazor/range-selector/r-t-l.md b/chart-sdk/blazor/range-selector/r-t-l.md index 9ff743566..330e56a27 100644 --- a/chart-sdk/blazor/range-selector/r-t-l.md +++ b/chart-sdk/blazor/range-selector/r-t-l.md @@ -1,13 +1,13 @@ --- layout: post -title: RTL in Blazor Range Selector Component | Syncfusion® -description: Checkout and learn here all about RTL in Blazor Range Selector component with examples and much more details. -platform: chart-sdk +title: Blazor Range Selector RTL Examples | Syncfusion® +description: Learn how to enable right-to-left (RTL) rendering in Syncfusion Blazor Range Selector using the EnableRtl property with code samples. +platform: Blazor control: Range Selector documentation: ug --- -# RTL in Blazor Range Selector Component +# Blazor Range Selector RTL The Range Selector supports right-to-left (RTL), which can be enabled with the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfRangeNavigator.html#Syncfusion_Blazor_Charts_SfRangeNavigator_EnableRtl) property. diff --git a/chart-sdk/blazor/range-selector/range.md b/chart-sdk/blazor/range-selector/range.md index 85463e63e..bf59f1cbe 100644 --- a/chart-sdk/blazor/range-selector/range.md +++ b/chart-sdk/blazor/range-selector/range.md @@ -1,13 +1,13 @@ --- layout: post -title: Range in Blazor Range Selector Component | Syncfusion® -description: Checkout and learn here all about range in Blazor Range Selector component with examples and much more details. -platform: chart-sdk +title: Blazor Range Selector Range Examples | Syncfusion® +description: Learn how to select a range in Syncfusion Blazor Range Selector using thumbs, label taps, or the Value property for one-way and two-way binding. +platform: Blazor control: Range Selector documentation: ug --- -# Range in Blazor Range Selector Component +# Blazor Range Selector Range The Range Selector's left and right thumbs are used to indicate the selected range in the large collection of data. A range can be selected in the following ways: diff --git a/chart-sdk/blazor/range-selector/series-type.md b/chart-sdk/blazor/range-selector/series-type.md index be75ee56b..13a3b7032 100644 --- a/chart-sdk/blazor/range-selector/series-type.md +++ b/chart-sdk/blazor/range-selector/series-type.md @@ -1,13 +1,13 @@ --- layout: post -title: Series Type in Blazor Range Selector Component | Syncfusion® -description: Checkout and learn here all about Series Type in Blazor Range Selector component with examples and much more details. -platform: chart-sdk +title: Blazor Range Selector Series Type Examples | Syncfusion® +description: Learn about the supported series types in Syncfusion Blazor Range Selector, including Line, Area, and StepLine series. +platform: Blazor control: Range Selector documentation: ug --- -# Series Type in Blazor Range Selector Component +# Blazor Range Selector Series Type To render the data, the Range Selector supports three types of series. diff --git a/chart-sdk/blazor/range-selector/style-appearance.md b/chart-sdk/blazor/range-selector/style-appearance.md index 3db4ac75e..40178e134 100644 --- a/chart-sdk/blazor/range-selector/style-appearance.md +++ b/chart-sdk/blazor/range-selector/style-appearance.md @@ -1,13 +1,13 @@ --- layout: post -title: Style and Appearance in Blazor Range Selector | Syncfusion® -description: Check out and learn about Style and Appearance customization in Blazor Range Selector component with examples and much more details. -platform: chart-sdk +title: Blazor Range Selector Style and Appearance Examples | Syncfusion® +description: Customize the visual style of Syncfusion Blazor Range Selector with CSS selectors, theme variables, and ID-based styling for full control. +platform: Blazor control: Range Selector documentation: ug --- -# Style and Appearance in Blazor Range Navigator Component +# Blazor Range Selector Style and Appearance Style and Appearance provide options to customize the visual design of the **Syncfusion Blazor Range Navigator** component, ensuring consistency with your application’s branding and theme. diff --git a/chart-sdk/blazor/range-selector/tool-tip.md b/chart-sdk/blazor/range-selector/tool-tip.md index ad0085acd..314dcb05d 100644 --- a/chart-sdk/blazor/range-selector/tool-tip.md +++ b/chart-sdk/blazor/range-selector/tool-tip.md @@ -1,13 +1,13 @@ --- layout: post -title: Tooltip in Blazor Range Selector Component | Syncfusion® -description: Checkout and learn here all about tooltip in Blazor Range Selector component with examples and much more details. -platform: chart-sdk +title: Blazor Range Selector Tooltip Examples | Syncfusion® +description: Learn how to enable and customize tooltips in Syncfusion Blazor Range Selector, including slider tooltips that show the selected start and end values. +platform: Blazor control: Range Selector documentation: ug --- -# Tooltip in Blazor Range Selector Component +# Blazor Range Selector Tooltip diff --git a/chart-sdk/blazor/range-selector/working-with-data.md b/chart-sdk/blazor/range-selector/working-with-data.md index e30bff847..635b067f8 100644 --- a/chart-sdk/blazor/range-selector/working-with-data.md +++ b/chart-sdk/blazor/range-selector/working-with-data.md @@ -1,15 +1,15 @@ --- layout: post -title: Working with Data in Blazor Range Selector Component | Syncfusion® -description: Checkout and learn here all about Working with Data in Blazor Range Selector Component with examples and much more details. -platform: chart-sdk -control: Chart +title: Blazor Range Selector Working with Data Examples | Syncfusion® +description: Learn how to bind data to Syncfusion Blazor Range Selector using SfDataManager, RESTful JSON services, or IEnumerable with code samples. +platform: Blazor +control: Range Selector documentation: ug --- -# Working with Data in Blazor Range Selector Component +# Blazor Range Selector Working with Data The Range Selector uses [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html), which supports both RESTful JSON data services binding and IEnumerable binding. The [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.RangeNavigatorSeries.html#Syncfusion_Blazor_Charts_RangeNavigatorSeries_DataSource) value can be set using either [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) property value or a list of business objects. @@ -184,7 +184,7 @@ Range Selector supports **DynamicObject** data source when the model type is unk ### Binding with OData v4 services -The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can retrieve and consume OData v4 services, which is an upgraded version of OData protocols. Refer to the [OData documentation](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 on OData v4 services. To bind an OData v4 service, use the **ODataV4Adaptor**. +The [SfDataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) can retrieve and consume OData v4 services, which is an upgraded version of OData protocols. Refer to the [OData documentation](https://docs.oasis-open.org/odata/odata/v4.0/errata03/os/complete/part1-protocol/odata-v4.0-errata03-os-part1-protocol-complete.html) for additional information on OData v4 services. To bind an OData v4 service, use the **ODataV4Adaptor**. ```cshtml @@ -303,4 +303,4 @@ The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.c ![Blazor Chart with Web API Binding](images/working-data/blazor-range-observable-collection.webp) -N> Refer to our [Blazor Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) feature tour page for its groundbreaking feature representations and also explore our [Blazor Range Selector Example](https://blazor.syncfusion.com/demos/range-selector/range-navigator) to know various Range Selector types and how to represent time-dependent data, showing trends at equal intervals. \ No newline at end of file +N> Refer to our [Blazor Range Selector](https://www.syncfusion.com/blazor-components/blazor-range-selector) feature tour page for its groundbreaking feature representations and also explore our [Blazor Range Selector Example](https://blazor.syncfusion.com/demos/range-selector/range-navigator?theme=fluent2) to know various Range Selector types and how to represent time-dependent data, showing trends at equal intervals. \ No newline at end of file diff --git a/chart-sdk/blazor/smith-chart/accessibility.md b/chart-sdk/blazor/smith-chart/accessibility.md index ef9db0845..35386da58 100644 --- a/chart-sdk/blazor/smith-chart/accessibility.md +++ b/chart-sdk/blazor/smith-chart/accessibility.md @@ -1,13 +1,13 @@ --- layout: post -title: Accessibility in Blazor Smith Chart Component | Syncfusion -description: Checkout and learn here all about Accessibility using Keyboard navigation in Blazor Smith Chart component and more. -platform: chart-sdk +title: Blazor Smith Chart Accessibility Examples | Syncfusion® +description: Learn how to enable accessibility in Syncfusion Blazor Smith Chart with keyboard navigation, screen reader support, and WCAG 2.2 compliance. +platform: Blazor control: Smith Chart documentation: ug --- -# Accessibility in Blazor Smith Chart Component +# Blazor Smith Chart Accessibility The Blazor Smith Chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/chart-sdk/blazor/smith-chart/events.md b/chart-sdk/blazor/smith-chart/events.md index 76fd3a71b..c9b869c0e 100644 --- a/chart-sdk/blazor/smith-chart/events.md +++ b/chart-sdk/blazor/smith-chart/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Events in Blazor Smith Chart Component | Syncfusion® -description: Checkout and learn here all the features about events in Blazor Smith Chart component and much more details. -platform: chart-sdk +title: Blazor Smith Chart Events Examples and Reference | Syncfusion® +description: Learn about events in Syncfusion Blazor Smith Chart such as Loaded, OnLegendItemRender, OnSeriesRender, and TooltipRender with usage examples. +platform: Blazor control: Smith Chart documentation: ug --- -# Events in Blazor Smith Chart Component +# Blazor Smith Chart Events This section describes about the Smith Chart component's events that will be triggered when appropriate actions are performed. The events should be provided to the Smith Chart through the **SmithChartEvents** component. diff --git a/chart-sdk/blazor/smith-chart/getting-started-webapp.md b/chart-sdk/blazor/smith-chart/getting-started-webapp.md index 21955cc39..5f5fa338f 100644 --- a/chart-sdk/blazor/smith-chart/getting-started-webapp.md +++ b/chart-sdk/blazor/smith-chart/getting-started-webapp.md @@ -1,46 +1,52 @@ --- layout: post -title: Getting started with Smith Chart in Blazor Web App | Syncfusion® -description: Check out the documentation for getting started with Blazor Smith Chart Component in Blazor Web App. -platform: chart-sdk +title: Getting Started with Blazor Smith Chart in Web App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Smith Chart in a Blazor Web App, including server and client setup, packages, and first chart. +platform: Blazor control: Smith Chart documentation: ug --- -# Getting Started with Blazor Smith Chart in Blazor Web App +# Blazor Smith Chart Getting Started in Web App -This section briefly explains about how to include [Blazor Smith Chart](https://www.syncfusion.com/blazor-components/blazor-smith-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 Smith Chart](https://www.syncfusion.com/blazor-components/blazor-smith-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 [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,74 +55,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.SmithChart](https://www.nuget.org/packages/Syncfusion.Blazor.SmithChart) 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.SmithChart`) 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.SmithChart -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.SmithChart](https://www.nuget.org/packages/Syncfusion.Blazor.SmithChart) NuGet package using one of the following methods. +dotnet add package Syncfusion.Blazor.SmithChart -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.SmithChart`) and install it. +{% endtabcontent %} -**Visual Studio Code or .NET CLI**: +{% tabcontent .NET CLI %} -Open the terminal or command prompt and run the following command: +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.SmithChart -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} +{% endtabcontent %} -If using the `WebAssembly` or `Auto` render modes in the Blazor Web App, install this package in the client project. - -N> All 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. +After the package is 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 @@ -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,26 +141,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 +## 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 **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 Smith Chart component -* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor Smith 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 Smith Chart](https://www.syncfusion.com/blazor-components/blazor-smith-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 tabtitle="Home.razor" %} @@ -247,29 +245,57 @@ The following sample demonstrates adding two series to Smith Chart in both ways. {% endhighlight %} {% endtabs %} -### Run the application +**Run the application** -**Visual Studio**: +{% tabcontents %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Smith Chart component will render in your default web browser. +{% tabcontent Visual Studio %} -**Visual Studio Code or .NET CLI**: +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Smith Chart component will render in your default web browser. -1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. -2. Run the following command: +{% endtabcontent %} - ``` - dotnet run - ``` -3. The application will start and display in your default web browser. +{% tabcontent Visual Studio Code %} + +Open the terminal and navigate to the main project folder (for example, `BlazorWebApp`) and run the following command. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLzXCAtAueCOnlF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Transmission Series](./images/blazor-smith-chart-series.webp)" %} +{% 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/VNVHDwtdNfWZoMYS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Smith Chart with Transmission Series](./images/blazor-smith-chart-series.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/SmithChart). ## Adding Title -Title can be added to the Smith Chart to provide a quick information to the users about the context of the rendered component. Add a title by using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html#Syncfusion_Blazor_Charts_SmithChartTitle_Text) property in the [SmithChartTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html). +Title can be added to the Smith Chart to provide quick information to the users about the context of the rendered component. Add a title by using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html#Syncfusion_Blazor_Charts_SmithChartTitle_Text) property in the [SmithChartTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -294,9 +320,9 @@ Title can be added to the Smith Chart to provide a quick information to the user {% endhighlight %} {% endtabs %} -N> Refer to the [code block](#adding-series-to-smith-chart) to know about the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`. +N> Refer to the [code block](#adding-series-to-blazor-smith-chart) to know about the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBJXMUNfrbavmEP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Title](./images/blazor-smith-chart-with-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhnNQZnXJUOelcl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Smith Chart with Title](./images/blazor-smith-chart-with-title.webp)" %} ## Enable Marker @@ -326,9 +352,9 @@ To display marker for particular series, set the [Visible](https://help.syncfusi {% endhighlight %} {% endtabs %} -N> Refer to the [code block](#adding-series-to-smith-chart) to know about the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`. +N> Refer to the [code block](#adding-series-to-blazor-smith-chart) to know about the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJZMANTVYSwBSX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Marker](./images/blazor-smith-chart-marker.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBRNQtxDpolNtnK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Smith Chart with Marker](./images/blazor-smith-chart-marker.webp)" %} ## Enable Data Label @@ -360,9 +386,9 @@ To display data label for particular marker series, set the [Visible](https://he {% endhighlight %} {% endtabs %} -N> Refer to the [code block](#adding-series-to-smith-chart) to know the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`. +N> Refer to the [code block](#adding-series-to-blazor-smith-chart) to know the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLzjCANJgZtmWaL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Data Label](./images/blazor-smith-chart-data-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLRXQtnZIhAzZyP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Smith Chart with Data Label](./images/blazor-smith-chart-data-label.webp)" %} ## Enable Legend @@ -394,9 +420,9 @@ Use legend for the Smith Chart by setting the [Visible](https://help.syncfusion. {% endhighlight %} {% endtabs %} -N> Refer to the [code block](#adding-series-to-smith-chart) to know the property value of the `FirstTransmissionSeries` and the `SecondTransmissionSeries`. +N> Refer to the [code block](#adding-series-to-blazor-smith-chart) to know the property value of the `FirstTransmissionSeries` and the `SecondTransmissionSeries`. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLfDCAjfUjfvoAi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Legend](./images/blazor-smith-chart-legend.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrxDQXdjSfyMzcn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Smith Chart with Legend](./images/blazor-smith-chart-legend.webp)" %} ## Enable Tooltip @@ -430,14 +456,11 @@ When space constraints prevents from displaying information using data labels, t {% endhighlight %} {% endtabs %} -N> Refer to the [code block](#adding-series-to-smith-chart) to know about the property value of the `FirstTransmissionSeries` and the `SecondTransmissionSeries`. +N> Refer to the [code block](#adding-series-to-blazor-smith-chart) to know about the property value of the `FirstTransmissionSeries` and the `SecondTransmissionSeries`. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhztsKjJAXFyuof?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Tooltip](./images/blazor-smith-chart-tooltip.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVdZmtnjyRfnAoC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Smith Chart with Tooltip](./images/blazor-smith-chart-tooltip.webp)" %} ## 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) \ 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/smith-chart/getting-started.md b/chart-sdk/blazor/smith-chart/getting-started.md index 6d296afc1..92ddec66b 100644 --- a/chart-sdk/blazor/smith-chart/getting-started.md +++ b/chart-sdk/blazor/smith-chart/getting-started.md @@ -1,108 +1,119 @@ --- layout: post -title: Getting Started with Blazor Smith Chart Component | Syncfusion® -description: Check out the documentation for getting started with Blazor Smith Chart Component in Blazor WebAssembly Application. -platform: chart-sdk +title: Getting Started with Blazor Smith Chart in WASM App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Smith Chart in a Blazor WebAssembly app, including setup, packages, and first chart. +platform: Blazor control: Smith Chart documentation: ug --- -# Getting Started with Blazor Smith Chart Component +# Blazor Smith Chart Getting Started in WASM App -This section briefly explains about how to include [Blazor Smith Chart](https://www.syncfusion.com/blazor-components/blazor-smith-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 Smith Chart](https://www.syncfusion.com/blazor-components/blazor-smith-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 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.SmithChart](https://www.nuget.org/packages/Syncfusion.Blazor.SmithChart/) 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.SmithChart`) 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.SmithChart -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.SmithChart -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install required Blazor packages - -Install [Syncfusion.Blazor.SmithChart](https://www.nuget.org/packages/Syncfusion.Blazor.SmithChart/) 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.SmithChart -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.SmithChart -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.Charts` namespaces. {% tabs %} -{% highlight C# tabtitle="~/_Imports.razor" %} +{% highlight razor tabtitle="~/_Imports.razor" %} @using Syncfusion.Blazor @using Syncfusion.Blazor.Charts @@ -110,12 +121,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; @@ -126,24 +137,24 @@ 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 **~/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 Smith Chart component -Add the Blazor Smith 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 Smith Chart](https://www.syncfusion.com/blazor-components/blazor-smith-chart) component inside the razor file. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Charts @@ -168,7 +179,7 @@ The following sample demonstrates adding two series to Smith Chart in both ways. * Second series `Transmission2` shows `Points` bound series. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Charts @@ -226,16 +237,54 @@ The following sample demonstrates adding two series to Smith Chart in both ways. {% endhighlight %} {% endtabs %} -Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Smith 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 Smith 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 %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLzXCAtAueCOnlF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Transmission Series](./images/blazor-smith-chart-series.webp)" %} +{% endtabcontents %} + +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthnXQXdjSlWLoSP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Smith Chart with Transmission Series](./images/blazor-smith-chart-series.webp)" %} ## Adding Title -Title can be added to the Smith Chart to provide a quick information to the users about the context of the rendered component. Add a title by using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html#Syncfusion_Blazor_Charts_SmithChartTitle_Text) property in the [SmithChartTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html). +Title can be added to the Smith Chart to provide quick information to the users about the context of the rendered component. Add a title by using the [Text](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html#Syncfusion_Blazor_Charts_SmithChartTitle_Text) property in the [SmithChartTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartTitle.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Charts @@ -257,16 +306,16 @@ Title can be added to the Smith Chart to provide a quick information to the user {% endhighlight %} {% endtabs %} -N> Refer to the [code block](#adding-series-to-smith-chart) to know about the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`. +N> Refer to the [code block](#adding-series-to-blazor-smith-chart) to know about the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBJXMUNfrbavmEP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Title](./images/blazor-smith-chart-with-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhHNctntSvooJRX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Smith Chart with Title](./images/blazor-smith-chart-with-title.webp)" %} ## Enable Marker To display marker for particular series, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Visible) property to **true** in the [SmithChartSeriesMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Charts @@ -289,16 +338,16 @@ To display marker for particular series, set the [Visible](https://help.syncfusi {% endhighlight %} {% endtabs %} -N> Refer to the [code block](#adding-series-to-smith-chart) to know about the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`. +N> Refer to the [code block](#adding-series-to-blazor-smith-chart) to know about the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJZMANTVYSwBSX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Marker](./images/blazor-smith-chart-marker.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBRZGNnZSvOvSFA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Smith Chart with Marker](./images/blazor-smith-chart-marker.webp)" %} ## Enable Data Label To display data label for particular marker series, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDatalabel.html#Syncfusion_Blazor_Charts_SmithChartSeriesDatalabel_Visible) property to **true** in the [SmithChartSeriesDatalabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesDatalabel.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Charts @@ -323,16 +372,16 @@ To display data label for particular marker series, set the [Visible](https://he {% endhighlight %} {% endtabs %} -N> Refer to the [code block](#adding-series-to-smith-chart) to know the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`. +N> Refer to the [code block](#adding-series-to-blazor-smith-chart) to know the property value of `FirstTransmissionSeries` and `SecondTransmissionSeries`. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLzjCANJgZtmWaL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Data Label](./images/blazor-smith-chart-data-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrHjQNHjeOQYYJP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Smith Chart with Data Label](./images/blazor-smith-chart-data-label.webp)" %} ## Enable Legend Use legend for the Smith Chart by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html#Syncfusion_Blazor_Charts_SmithChartLegendSettings_Visible) property to **true** in the [SmithChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartLegendSettings.html). The legend name can be changed by using the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithchartSeries.html#Syncfusion_Blazor_Charts_SmithChartSeries_Name) property in the [SmithChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithchartSeries.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Charts @@ -357,16 +406,16 @@ Use legend for the Smith Chart by setting the [Visible](https://help.syncfusion. {% endhighlight %} {% endtabs %} -N> Refer to the [code block](#adding-series-to-smith-chart) to know the property value of the `FirstTransmissionSeries` and the `SecondTransmissionSeries`. +N> Refer to the [code block](#adding-series-to-blazor-smith-chart) to know the property value of the `FirstTransmissionSeries` and the `SecondTransmissionSeries`. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLfDCAjfUjfvoAi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Legend](./images/blazor-smith-chart-legend.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVRNcNRXHXPJqsY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Smith Chart with Legend](./images/blazor-smith-chart-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.Charts.SmithChartSeriesTooltip.html#Syncfusion_Blazor_Charts_SmithChartSeriesTooltip_Visible) property to **true** in the [SmithChartSeriesTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltip.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @using Syncfusion.Blazor.Charts @@ -393,16 +442,13 @@ When space constraints prevents from displaying information using data labels, t {% endhighlight %} {% endtabs %} -N> Refer to the [code block](#adding-series-to-smith-chart) to know about the property value of the `FirstTransmissionSeries` and the `SecondTransmissionSeries`. +N> Refer to the [code block](#adding-series-to-blazor-smith-chart) to know about the property value of the `FirstTransmissionSeries` and the `SecondTransmissionSeries`. -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhztsKjJAXFyuof?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Smith Chart with Tooltip](./images/blazor-smith-chart-tooltip.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLRZcNHjnCqvITq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Smith Chart with Tooltip](./images/blazor-smith-chart-tooltip.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/SmithChart). ## 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 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) diff --git a/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-data-label.webp b/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-data-label.webp index 1374e0d09..a0bc4669e 100644 Binary files a/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-data-label.webp and b/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-data-label.webp differ diff --git a/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-legend.webp b/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-legend.webp index 2659fef99..9c8e137f7 100644 Binary files a/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-legend.webp and b/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-legend.webp differ diff --git a/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-marker.webp b/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-marker.webp index 8d2438f9a..76546e665 100644 Binary files a/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-marker.webp and b/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-marker.webp differ diff --git a/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-series.webp b/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-series.webp index 0c3f48c67..3d71aee40 100644 Binary files a/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-series.webp and b/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-series.webp differ diff --git a/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-tooltip.webp b/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-tooltip.webp index 1145cae1b..1a87eead7 100644 Binary files a/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-tooltip.webp and b/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-tooltip.webp differ diff --git a/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-with-title.webp b/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-with-title.webp index b8ae38f01..8c227e260 100644 Binary files a/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-with-title.webp and b/chart-sdk/blazor/smith-chart/images/blazor-smith-chart-with-title.webp differ diff --git a/chart-sdk/blazor/smith-chart/smith-chart-axis.md b/chart-sdk/blazor/smith-chart/smith-chart-axis.md index 3aa02c910..7ffbaf695 100644 --- a/chart-sdk/blazor/smith-chart/smith-chart-axis.md +++ b/chart-sdk/blazor/smith-chart/smith-chart-axis.md @@ -1,13 +1,13 @@ --- layout: post -title: Axis in Blazor Smith Chart Component | Syncfusion® -description: Checkout and learn here all the features about axis in Blazor Smith Chart component and much more details. -platform: chart-sdk +title: Blazor Smith Chart Axis Examples | Syncfusion® +description: Learn how to configure and customize the axis in Syncfusion Blazor Smith Chart, including horizontal and radial axis labels and tick lines. +platform: Blazor control: Smith Chart documentation: ug --- -# Axis in Blazor Smith Chart Component +# Blazor Smith Chart Axis Smith Chart supports two different types of axes. They are: * **Horizontal Axis** - The axis is drawn as a straight line in the horizontal direction of the Smith Chart. diff --git a/chart-sdk/blazor/smith-chart/smith-chart-dimensions.md b/chart-sdk/blazor/smith-chart/smith-chart-dimensions.md index 771318a18..41ad71ac2 100644 --- a/chart-sdk/blazor/smith-chart/smith-chart-dimensions.md +++ b/chart-sdk/blazor/smith-chart/smith-chart-dimensions.md @@ -1,13 +1,13 @@ --- layout: post -title: Dimensions in Blazor Smith Chart Component | Syncfusion® -description: Checkout and learn here all the features about dimensions in Blazor Smith Chart component and much more. -platform: chart-sdk +title: Blazor Smith Chart Dimensions and Sizing | Syncfusion® +description: Learn how to set the size of Syncfusion Blazor Smith Chart using CSS or the Width and Height API with code samples. +platform: Blazor control: Smith Chart documentation: ug --- -# Dimensions in Blazor Smith Chart Component +# Blazor Smith Chart Dimensions The dimensions of the Smith Chart can be modified in the following ways. diff --git a/chart-sdk/blazor/smith-chart/smith-chart-legend.md b/chart-sdk/blazor/smith-chart/smith-chart-legend.md index ae09fc4e1..452d093bc 100644 --- a/chart-sdk/blazor/smith-chart/smith-chart-legend.md +++ b/chart-sdk/blazor/smith-chart/smith-chart-legend.md @@ -1,13 +1,13 @@ --- layout: post -title: Legend in Blazor Smith Chart Component | Syncfusion® -description: Checkout and learn here all the features about Legend in Blazor Smith Chart component and much more details. -platform: chart-sdk +title: Blazor Smith Chart Legend Examples | Syncfusion® +description: Learn how to enable and customize the legend in Syncfusion Blazor Smith Chart, including position, alignment, and SmithChartLegendSettings. +platform: Blazor control: Smith Chart documentation: ug --- -# Legend in Blazor Smith Chart Component +# Blazor Smith Chart Legend In the Smith Chart, a legend is a key containing symbols and descriptions. It can be interpreted in various colors, shapes, or other identifiers based on the data, and it provides valuable information for interpreting what the Smith Chart is displaying. In simple words, the legend is used to denote the series rendered in the Smith Chart. diff --git a/chart-sdk/blazor/smith-chart/smith-chart-marker.md b/chart-sdk/blazor/smith-chart/smith-chart-marker.md index 9471c7abe..cfd6a7eb1 100644 --- a/chart-sdk/blazor/smith-chart/smith-chart-marker.md +++ b/chart-sdk/blazor/smith-chart/smith-chart-marker.md @@ -1,13 +1,13 @@ --- layout: post -title: Marker and Data labels in Blazor Smith Chart Component | Syncfusion® -description: Checkout and learn here all the features about marker and data labels in Blazor Smith Chart component and more. -platform: chart-sdk +title: Blazor Smith Chart Markers and Data Labels Examples | Syncfusion® +description: Learn how to add and customize markers and data labels in Syncfusion Blazor Smith Chart, including shape, size, position, and label format. +platform: Blazor control: Smith Chart documentation: ug --- -# Marker and Data labels in Blazor Smith Chart Component +# Blazor Smith Chart Markers and Data Labels Markers and data labels are used to provide information about the data points in the series. Both the marker and the datalabel are disabled by default in the Smith Chart. Both can be enabled by making the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesMarker.html#Syncfusion_Blazor_Charts_SmithChartSeriesMarker_Visible) property in the marker and the datalabel settings to **true**. diff --git a/chart-sdk/blazor/smith-chart/smith-chart-print.md b/chart-sdk/blazor/smith-chart/smith-chart-print.md index 200356a59..77cf65ea4 100644 --- a/chart-sdk/blazor/smith-chart/smith-chart-print.md +++ b/chart-sdk/blazor/smith-chart/smith-chart-print.md @@ -1,13 +1,13 @@ --- layout: post -title: Print and Export in Blazor Smith Chart Component | Syncfusion® -description: Checkout and learn here all the features about print and export in Blazor Smith Chart component and more. -platform: chart-sdk +title: Blazor Smith Chart Print and Export Examples | Syncfusion® +description: Learn how to print and export Syncfusion Blazor Smith Chart using PrintAsync, or export to image, SVG, and PDF formats. +platform: Blazor control: Smith Chart documentation: ug --- -# Print and Export in Blazor Smith Chart Component +# Blazor Smith Chart Print and Export ## Print diff --git a/chart-sdk/blazor/smith-chart/smith-chart-series.md b/chart-sdk/blazor/smith-chart/smith-chart-series.md index 49df6d631..c27609f59 100644 --- a/chart-sdk/blazor/smith-chart/smith-chart-series.md +++ b/chart-sdk/blazor/smith-chart/smith-chart-series.md @@ -1,13 +1,13 @@ --- layout: post -title: Series in Blazor Smith Chart Component | Syncfusion® -description: Checkout and learn here all the features about series in Blazor Smith Chart component and much more details. -platform: chart-sdk +title: Blazor Smith Chart Series Examples | Syncfusion® +description: Learn how to add and customize series in Syncfusion Blazor Smith Chart, including Fill, Width, Opacity, and Visibility properties. +platform: Blazor control: Smith Chart documentation: ug --- -# Series in Blazor Smith Chart Component +# Blazor Smith Chart Series The [SmithChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#properties) is the visual representation of the data. Using the following options in the [SmithChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeries.html#properties), each series can be customized in the Smith Chart. diff --git a/chart-sdk/blazor/smith-chart/smith-chart-tool-tip.md b/chart-sdk/blazor/smith-chart/smith-chart-tool-tip.md index 849f3176e..d362f9d2a 100644 --- a/chart-sdk/blazor/smith-chart/smith-chart-tool-tip.md +++ b/chart-sdk/blazor/smith-chart/smith-chart-tool-tip.md @@ -1,13 +1,13 @@ --- layout: post -title: Tooltip in Blazor Smith Chart Component | Syncfusion® -description: Checkout and learn here all the features about tooltip in Blazor Smith Chart component and much more details. -platform: chart-sdk +title: Blazor Smith Chart Tooltip Examples | Syncfusion® +description: Learn how to enable and customize tooltips in Syncfusion Blazor Smith Chart, including format, template, and styling options. +platform: Blazor control: Smith Chart documentation: ug --- -# Tooltip in Blazor Smith Chart Component +# Blazor Smith Chart Tooltip When the mouse is moved over a point in the Smith Chart, a tooltip will appear displaying information about the point. By default, the tooltip is disabled. To enable the tooltip, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltip.html#Syncfusion_Blazor_Charts_SmithChartSeriesTooltip_Visible) property to **true** in the [SmithChartSeriesTooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SmithChartSeriesTooltip.html). diff --git a/chart-sdk/blazor/smith-chart/title-subtitle.md b/chart-sdk/blazor/smith-chart/title-subtitle.md index 0a1755082..c9e3cd6f7 100644 --- a/chart-sdk/blazor/smith-chart/title-subtitle.md +++ b/chart-sdk/blazor/smith-chart/title-subtitle.md @@ -1,13 +1,13 @@ --- layout: post -title: Title and Subtitle in Blazor Smith Chart Component | Syncfusion® -description: Checkout and learn here all the features about title and subtitle in Blazor Smith Chart component and more. -platform: chart-sdk +title: Blazor Smith Chart Title and Subtitle Examples | Syncfusion® +description: Learn how to add a title and subtitle to Syncfusion Blazor Smith Chart, including text, alignment, and font styling options. +platform: Blazor control: Smith Chart documentation: ug --- -# Title and Subtitle in Blazor Smith Chart Component +# Blazor Smith Chart Title and Subtitle ## Enable Title diff --git a/chart-sdk/blazor/sparkline-charts/accessibility.md b/chart-sdk/blazor/sparkline-charts/accessibility.md index 980d85ecb..a017072b6 100644 --- a/chart-sdk/blazor/sparkline-charts/accessibility.md +++ b/chart-sdk/blazor/sparkline-charts/accessibility.md @@ -1,13 +1,13 @@ --- layout: post -title: Accessibility in Blazor Sparkline Component | Syncfusion® -description: Learn about accessibility, keyboard navigation, and compliance in the Blazor Sparkline component and much more details. -platform: chart-sdk -control: Sparkline +title: Blazor Sparkline Charts Accessibility Examples | Syncfusion® +description: Learn about accessibility in Syncfusion Blazor Sparkline, including keyboard navigation, screen reader support, and WCAG 2.2 compliance. +platform: Blazor +control: Sparkline Charts documentation: ug --- -# Accessibility in Blazor Sparkline Component +# Blazor Sparkline Charts Accessibility The Blazor Sparkline component follows accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/), and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles). diff --git a/chart-sdk/blazor/sparkline-charts/appearance.md b/chart-sdk/blazor/sparkline-charts/appearance.md index 0045c3975..d4a1e799c 100644 --- a/chart-sdk/blazor/sparkline-charts/appearance.md +++ b/chart-sdk/blazor/sparkline-charts/appearance.md @@ -1,13 +1,13 @@ --- layout: post -title: Appearance in Blazor Sparkline Component | Syncfusion® -description: Check out and learn here all the features about appearance customization in the Blazor Sparkline component. -platform: chart-sdk +title: Blazor Sparkline Charts Appearance Examples | Syncfusion® +description: Learn how to customize the appearance of Syncfusion Blazor Sparkline, including RTL, padding, border, and background options. +platform: Blazor control: Sparkline Charts documentation: ug --- -# Appearance in Blazor Sparkline Component +# Blazor Sparkline Charts Appearance The rendering direction, padding, border, and background appearance of the Sparkline can be customized. @@ -30,7 +30,7 @@ Right-to-left (RTL) rendering is supported and can be enabled by setting the [En ## Border -The border can be enabled and customized by specifying the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderSettings.html#Syncfusion_Blazor_Charts_BorderSettings_Color) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderSettings.html#Syncfusion_Blazor_Charts_BorderSettings_Width) properties of [SparklineContainerAreaBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.SparklineContainerAreaBorder.html). +The border can be enabled and customized by specifying the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderSettings.html#Syncfusion_Blazor_Charts_BorderSettings_Color) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.BorderSettings.html#Syncfusion_Blazor_Charts_BorderSettings_Width) properties of [SparklineContainerAreaBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineContainerAreaBorder.html). ```cshtml diff --git a/chart-sdk/blazor/sparkline-charts/axis-customization.md b/chart-sdk/blazor/sparkline-charts/axis-customization.md index b603dabbe..d0ea308fc 100644 --- a/chart-sdk/blazor/sparkline-charts/axis-customization.md +++ b/chart-sdk/blazor/sparkline-charts/axis-customization.md @@ -1,13 +1,13 @@ --- layout: post -title: Axis Customization in Blazor Sparkline Component | Syncfusion® -description: Check out and learn here all about axis customization options in Blazor Sparkline component and more. -platform: chart-sdk +title: Blazor Sparkline Charts Axis Customization Examples | Syncfusion® +description: Learn how to customize the axis in Syncfusion Blazor Sparkline, including ValueType, Numeric, Category, and DateTime axis options. +platform: Blazor control: Sparkline Charts documentation: ug --- -# Axis Customization in Blazor Sparkline Component +# Blazor Sparkline Charts Axis Customization ## Change the Value Type of the Sparkline Chart diff --git a/chart-sdk/blazor/sparkline-charts/chart-types.md b/chart-sdk/blazor/sparkline-charts/chart-types.md index 95f21af0f..bb850f560 100644 --- a/chart-sdk/blazor/sparkline-charts/chart-types.md +++ b/chart-sdk/blazor/sparkline-charts/chart-types.md @@ -1,13 +1,13 @@ --- layout: post -title: Chart Types in Blazor Sparkline Component | Syncfusion® -description: Check out and learn the features about the different chart types available in the Blazor Sparkline component. -platform: chart-sdk +title: Blazor Sparkline Charts Chart Types Examples | Syncfusion® +description: Learn about the chart types available in Syncfusion Blazor Sparkline, including Line, Column, Area, and WinLoss shapes. +platform: Blazor control: Sparkline Charts documentation: ug --- -# Chart Types in Blazor Sparkline Component +# Blazor Sparkline Charts Chart Types Different shapes can be used to represent the Sparkline Chart by specifying the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Type) property. diff --git a/chart-sdk/blazor/sparkline-charts/data-labels.md b/chart-sdk/blazor/sparkline-charts/data-labels.md index 99d26e357..d7f23a8ce 100644 --- a/chart-sdk/blazor/sparkline-charts/data-labels.md +++ b/chart-sdk/blazor/sparkline-charts/data-labels.md @@ -1,13 +1,13 @@ --- layout: post -title: Data Labels in Blazor Sparkline Component | Syncfusion® -description: Check out and learn how to configure and customize Data Labels in Blazor Sparkline component and much more details. -platform: chart-sdk +title: Blazor Sparkline Charts Data Labels Examples | Syncfusion® +description: Learn how to enable and customize data labels in Syncfusion Blazor Sparkline, including special points, format, and label position. +platform: Blazor control: Sparkline Charts documentation: ug --- -# Data Labels in Blazor Sparkline Component +# Blazor Sparkline Charts Data Labels To improve readability, data labels display the value of data points. @@ -43,9 +43,9 @@ The following properties can be used to customize Sparkline data labels: * [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Fill) – Specifies color for the Data Label * [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Opacity) – Specifies opacity of the data label [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Fill) color * [EdgeLabelMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_EdgeLabelMode) – Specifies controlling option when the label comes in the edge. Available options are the [Shift](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EdgeLabelMode.html#Syncfusion_Blazor_Charts_EdgeLabelMode_Shift), the [None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EdgeLabelMode.html#Syncfusion_Blazor_Charts_EdgeLabelMode_None) and the [Hide](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EdgeLabelMode.html#Syncfusion_Blazor_Charts_EdgeLabelMode_Hide) -* [SparklineFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.SparklineFont.html) – Customize the Data Label font family, font style, font weight, color, opacity and size -* [SparklineDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.SparklineDataLabelBorder.html) – Specifies the color and the width for the Data Label border -* [SparklineDataLabelOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Charts.SparklineDataLabelOffset.html) – Specifies the label offset position from its default position +* [SparklineFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineFont.html) – Customize the Data Label font family, font style, font weight, color, opacity and size +* [SparklineDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelBorder.html) – Specifies the color and the width for the Data Label border +* [SparklineDataLabelOffset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelOffset.html) – Specifies the label offset position from its default position ```cshtml diff --git a/chart-sdk/blazor/sparkline-charts/dimensions.md b/chart-sdk/blazor/sparkline-charts/dimensions.md index 68fe79d15..c6da2487c 100644 --- a/chart-sdk/blazor/sparkline-charts/dimensions.md +++ b/chart-sdk/blazor/sparkline-charts/dimensions.md @@ -1,13 +1,13 @@ --- layout: post -title: Dimensions in Blazor Sparkline Component | Syncfusion® -description: Check out and learn how to set and customize dimensions in the Blazor Sparkline component and much more details. -platform: chart-sdk +title: Blazor Sparkline Charts Dimensions and Sizing | Syncfusion® +description: Learn how to set the size of Syncfusion Blazor Sparkline using container width, height, and inline CSS with code samples. +platform: Blazor control: Sparkline Charts documentation: ug --- -# Dimensions in Blazor Sparkline Component +# Blazor Sparkline Charts Dimensions ## Size for the Container diff --git a/chart-sdk/blazor/sparkline-charts/events.md b/chart-sdk/blazor/sparkline-charts/events.md index 20a1143e1..bade84b55 100644 --- a/chart-sdk/blazor/sparkline-charts/events.md +++ b/chart-sdk/blazor/sparkline-charts/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Events in Blazor Sparkline Component | Syncfusion® -description: Check out and learn about available events and event handling in the Blazor Sparkline component and much more details. -platform: chart-sdk +title: Blazor Sparkline Charts Events Examples and Reference | Syncfusion® +description: Learn about events in Syncfusion Blazor Sparkline such as Loaded, OnMarkerRender, OnDataLabelRender, and AxisLabelRender with examples. +platform: Blazor control: Sparkline Charts documentation: ug --- -# Events in Blazor Sparkline Component +# Blazor Sparkline Charts Events This section describes the Sparkline component's events that are triggered when actions are performed. Events are provided through the [SparklineEvents](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineEvents.html) component. diff --git a/chart-sdk/blazor/sparkline-charts/getting-started-webapp.md b/chart-sdk/blazor/sparkline-charts/getting-started-webapp.md index 5b0019e62..4f3de0548 100644 --- a/chart-sdk/blazor/sparkline-charts/getting-started-webapp.md +++ b/chart-sdk/blazor/sparkline-charts/getting-started-webapp.md @@ -1,46 +1,52 @@ --- layout: post -title: Getting started with Sparkline in Blazor Web App | Syncfusion® -description: Check out the documentation for getting started with Blazor Sparkline Component in Blazor Web App and much more details. -platform: chart-sdk +title: Getting Started with Blazor Sparkline Charts in Web App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Sparkline in a Blazor Web App, including server and client setup, packages, and first chart. +platform: Blazor control: Sparkline Charts documentation: ug --- -# Getting Started with Blazor Sparkline in Blazor Web App +# Blazor Sparkline Charts Getting Started in Web App -This section briefly explains about how to include [Blazor Sparkline](https://www.syncfusion.com/blazor-components/blazor-sparkline) 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 Sparkline Charts](https://www.syncfusion.com/blazor-components/blazor-sparkline) 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,70 +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.Sparkline](https://www.nuget.org/packages/Syncfusion.Blazor.Sparkline) 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 Package for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.Sparkline`) 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.Sparkline -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.Sparkline](https://www.nuget.org/packages/Syncfusion.Blazor.Sparkline) NuGet package using one of the following methods. +dotnet add package Syncfusion.Blazor.Sparkline -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.Sparkline`) and install it. +{% endtabcontent %} -**Visual Studio Code or .NET CLI**: +{% tabcontent .NET CLI %} -Open the terminal or command prompt and run the following command: +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.Sparkline -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.Charts` 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. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -123,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" %} @@ -139,26 +141,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 **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 Sparkline component +## Add Blazor Sparkline Charts component -* Open a Razor file located in the **~/Components/Pages** (for example, **Home.razor**) and add the Blazor Sparkline 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 Sparkline Charts](https://www.syncfusion.com/blazor-components/blazor-sparkline) 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" %} @@ -172,9 +171,9 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% endhighlight %} {% endtabs %} -## Populate Blazor Sparkline with Data +## Populate Blazor Sparkline Charts with data -To bind data for the Sparkline component, assign a `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). +To bind data for the Sparkline Charts component, assign a `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -184,7 +183,7 @@ To bind data for the Sparkline component, assign a `IEnumerable` object to the [ { public string Month { get; set; } public double Celsius { get; set; } - }; + } public List ClimateData = new List { new WeatherReport { Month= "Jan", Celsius= 34 }, new WeatherReport { Month= "Feb", Celsius= 36 }, @@ -204,7 +203,7 @@ To bind data for the Sparkline component, assign a `IEnumerable` object to the [ {% endhighlight %} {% endtabs %} -Now map the `Month` and the `Celsius` fields from the datasource to [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_YName) properties for x-axis and y-axis in the Sparkline and then set the `ClimateData` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_DataSource) property. Because the `Month` field is a value-based category, the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_ValueType) property is used to specify it. +Now map the `Month` and the `Celsius` fields from the datasource to [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_YName) properties for x-axis and y-axis in the Sparkline Charts and then set the `ClimateData` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_DataSource) property. Because the `Month` field is a value-based category, the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_ValueType) property is used to specify it. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -221,29 +220,57 @@ Now map the `Month` and the `Celsius` fields from the datasource to [XName](http {% endhighlight %} {% endtabs %} -### Run the application +## Run the application -**Visual Studio**: +{% tabcontents %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Sparkline component will render in your default web browser. +{% tabcontent Visual Studio %} -**Visual Studio Code or .NET CLI**: +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Sparkline Charts component will render in your default web browser. -1. Open the terminal (Visual Studio Code) or command prompt (.NET CLI) and navigate to the `Client` project folder. -2. Run the following command: +{% endtabcontent %} - ``` - dotnet run - ``` -3. The application will start and display in your default web browser. +{% tabcontent Visual Studio Code %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrJXWqjfqKBvkdq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart](./images/blazor-sparkline.webp)" %} +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/rZVdDQDRtmNUMSyI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Sparkline Charts](./images/blazor-sparkline.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Sparkline). -## Blazor Sparkline chart types +## Blazor Sparkline Charts types -Change the Sparkline type using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Type) property set to **Line**, **Column**, **WinLoss**, **Pie** or **Area**. Here, the Sparkline type is set to **Area**. +Change the Sparkline Charts type using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Type) property set to **Line**, **Column**, **WinLoss**, **Pie** or **Area**. Here, the Sparkline type is set to **Area**. {% tabs %} {% highlight razor tabtitle="Home.razor" %} @@ -261,13 +288,13 @@ Change the Sparkline type using the [Type](https://help.syncfusion.com/cr/blazor {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLTtsqNTqqdYsqg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Area Chart](./images/blazor-area-sparkline.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBdZcZdNmrZAISz?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Sparkline Area Chart](./images/blazor-area-sparkline.webp)" %} -N> Refer to [code block](#populate-sparkline-with-data) to know about the property value of **ClimateData**. +N> Refer to [code block](#populate-blazor-sparkline-charts-with-data) to know about the property value of the **ClimateData**. ## Adding Data Label -Add the Data Labels to improve the readability of the Sparkline component. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Visible) property to **true** in the [SparklineDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html). +Add the Data Labels to improve the readability of the Sparkline Charts component. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Visible) property to **true** in the [SparklineDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html). Available types are: @@ -295,9 +322,9 @@ Available types are: {% endhighlight %} {% endtabs %} -N> Refer to the [code block](#populate-sparkline-with-data) to know about the property value of **ClimateData**. +N> Refer to the [code block](#populate-sparkline-with-data) to know about the property value of the **ClimateData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXsqtfqzDdTTI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Data Label](./images/blazor-sparkline-data-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVRXGjdtQApBCIY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Sparkline Charts with Data Label](./images/blazor-sparkline-data-label.webp)" %} ## Enable tooltip @@ -323,14 +350,9 @@ When space constraints prevent from displaying information using Data Labels, th N> Refer to the [code block](#populate-sparkline-with-data) to know about the property value of the **ClimateData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLfDsUNfgJpNFjr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Tooltip](./images/blazor-sparkline-tooltip.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBHNmNdXmcKOFsY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Sparkline Charts with Tooltip](./images/blazor-sparkline-tooltip.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) - -N> You can also explore our [Blazor Sparkline Chart example](https://blazor.syncfusion.com/demos/sparkline/default-functionalities?theme=bootstrap5) that shows you how to render and configure the sparkline chart. \ 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/sparkline-charts/getting-started.md b/chart-sdk/blazor/sparkline-charts/getting-started.md index de5b87206..d78fbc5a4 100644 --- a/chart-sdk/blazor/sparkline-charts/getting-started.md +++ b/chart-sdk/blazor/sparkline-charts/getting-started.md @@ -1,101 +1,112 @@ --- layout: post -title: Getting Started with Blazor Sparkline Component | Syncfusion® -description: Checkout and learn about getting started with Blazor Sparkline component in Blazor WebAssembly Application. -platform: chart-sdk +title: Getting Started with Blazor Sparkline Charts in WASM App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Sparkline in a Blazor WebAssembly app, including setup, packages, and first chart. +platform: Blazor control: Sparkline Charts documentation: ug --- -# Getting Started with Blazor Sparkline Component +# Blazor Sparkline Charts Getting Started in WASM App -This section briefly explains about how to include [Blazor Sparkline](https://www.syncfusion.com/blazor-components/blazor-sparkline) 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 Sparkline Charts](https://www.syncfusion.com/blazor-components/blazor-sparkline) 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 WASM 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.Sparkline](https://www.nuget.org/packages/Syncfusion.Blazor.Sparkline/) 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 Package for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.Sparkline`) 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.Sparkline -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.Sparkline -v {{ site.releaseversion }} {% endhighlight %} {% endtabs %} {% endtabcontent %} -{% endtabcontents %} - -## Install required Blazor packages - -Install [Syncfusion.Blazor.Sparkline](https://www.nuget.org/packages/Syncfusion.Blazor.Sparkline/) 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.Sparkline -Version {{ site.releaseversion }} +dotnet add package Syncfusion.Blazor.Sparkline -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 @@ -110,9 +121,9 @@ 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" %} @@ -128,22 +139,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 Sparkline component +## Add Blazor Sparkline Charts component -Add the Blazor Sparkline component in the **~/Pages/Index.razor** file. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Sparkline Charts](https://www.syncfusion.com/blazor-components/blazor-sparkline) component inside the razor file. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @@ -152,19 +163,19 @@ Add the Blazor Sparkline component in the **~/Pages/Index.razor** file. {% endhighlight %} {% endtabs %} -## Populate Blazor Sparkline with Data +## Populate Blazor Sparkline Charts with data -To bind data for the Sparkline component, assign a `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). +To bind data for the Sparkline Charts component, assign a `IEnumerable` object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} @code { public class WeatherReport { public string Month { get; set; } public double Celsius { get; set; } - }; + } public List ClimateData = new List { new WeatherReport { Month= "Jan", Celsius= 34 }, new WeatherReport { Month= "Feb", Celsius= 36 }, @@ -184,10 +195,10 @@ To bind data for the Sparkline component, assign a `IEnumerable` object to the [ {% endhighlight %} {% endtabs %} -Now map the `Month` and the `Celsius` fields from the datasource to [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_YName) properties for x-axis and y-axis in the Sparkline and then set the `ClimateData` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_DataSource) property. Because the `Month` field is a value-based category, the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_ValueType) property is used to specify it. +Now map the `Month` and the `Celsius` fields from the datasource to [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_YName) properties for x-axis and y-axis in the Sparkline Charts and then set the `ClimateData` to [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_DataSource) property. Because the `Month` field is a value-based category, the [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_ValueType) property is used to specify it. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor Sparkline component in the default web browser. +## Run the application + +{% tabcontents %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrJXWqjfqKBvkdq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart](./images/blazor-sparkline.webp)" %} +{% tabcontent Visual Studio %} -## Blazor Sparkline chart types +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor Sparkline Charts component will render in your default web browser. -Change the Sparkline type using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Type) property set to **Line**, **Column**, **WinLoss**, **Pie** or **Area**. Here, the Sparkline type is set to **Area**. +{% endtabcontent %} + +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% 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/LtVdXGZdXGmYzGQO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Sparkline Charts](./images/blazor-sparkline.webp)" %} + +## Blazor Sparkline Charts types + +Change the Sparkline Charts type using the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Type) property set to **Line**, **Column**, **WinLoss**, **Pie** or **Area**. Here, the Sparkline type is set to **Area**. + +{% tabs %} +{% highlight razor tabtitle="Home.razor" %} Refer to [code block](#populate-sparkline-with-data) to know about the property value of **ClimateData**. +N> Refer to [code block](#populate-blazor-sparkline-charts-with-data) to know about the property value of the **ClimateData**. ## Adding Data Label -Add the Data Labels to improve the readability of the Sparkline component. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Visible) property to **true** in the [SparklineDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html). +Add the Data Labels to improve the readability of the Sparkline Charts component. This can be achieved by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html#Syncfusion_Blazor_Charts_SparklineDataLabelSettings_Visible) property to **true** in the [SparklineDataLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineDataLabelSettings.html). Available types are: @@ -243,7 +292,7 @@ Available types are: * Negative {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} Refer to the [code block](#populate-sparkline-with-data) to know about the property value of **ClimateData**. +N> Refer to the [code block](#populate-sparkline-with-data) to know about the property value of the **ClimateData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrJXsqtfqzDdTTI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Data Label](./images/blazor-sparkline-data-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrdtGtxDwlFlrSn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Sparkline Chart with Data Label](./images/blazor-sparkline-data-label.webp)" %} ## Enable tooltip When space constraints prevent 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.Charts.SparklineTooltipSettings-1.html#Syncfusion_Blazor_Charts_SparklineTooltipSettings_1_Visible) property to **true** in the [SparklineTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineTooltipSettings-1.html). {% tabs %} -{% highlight razor tabtitle="Index.razor" %} +{% highlight razor tabtitle="Home.razor" %} Refer to the [code block](#populate-sparkline-with-data) to know about the property value of the **ClimateData**. -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLfDsUNfgJpNFjr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Sparkline Chart with Tooltip](./images/blazor-sparkline-tooltip.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrxZGZRZcYIIukq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Sparkline Charts with Tooltip](./images/blazor-sparkline-tooltip.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Sparkline). ## 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) +1. [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 .NET Core CLI](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) +2. [Getting Started with Blazor for Server-Side in Visual Studio](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) -N> You can also explore our [Blazor Sparkline Chart example](https://blazor.syncfusion.com/demos/sparkline/default-functionalities?theme=bootstrap5) that shows you how to render and configure the sparkline chart. +3. [Getting Started with Blazor Web App](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) diff --git a/chart-sdk/blazor/sparkline-charts/globalization.md b/chart-sdk/blazor/sparkline-charts/globalization.md index c3ca50720..df1c7e39e 100644 --- a/chart-sdk/blazor/sparkline-charts/globalization.md +++ b/chart-sdk/blazor/sparkline-charts/globalization.md @@ -1,13 +1,13 @@ --- layout: post -title: Globalization in Blazor Sparkline Component | Syncfusion® -description: Check out and learn about globalization support in the Blazor Sparkline component for better adaptability. -platform: chart-sdk +title: Blazor Sparkline Charts Globalization Examples | Syncfusion® +description: Learn how to use globalization in Syncfusion Blazor Sparkline to format numbers, dates, and times for different cultures. +platform: Blazor control: Sparkline Charts documentation: ug --- -# Globalization in Blazor Sparkline Component +# Blazor Sparkline Charts Globalization Globalization is the process of designing and developing a component to work in different cultures or locations. In the Sparkline component, the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfSparkline-1.html#Syncfusion_Blazor_Charts_SfSparkline_1_Format) property is used to globalize number, date, and time values. The following example shows the tooltip globalized to currency format in the Deutsch culture. diff --git a/chart-sdk/blazor/sparkline-charts/images/blazor-area-sparkline.webp b/chart-sdk/blazor/sparkline-charts/images/blazor-area-sparkline.webp index c6838b301..d4eecf82c 100644 Binary files a/chart-sdk/blazor/sparkline-charts/images/blazor-area-sparkline.webp and b/chart-sdk/blazor/sparkline-charts/images/blazor-area-sparkline.webp differ diff --git a/chart-sdk/blazor/sparkline-charts/images/blazor-sparkline-data-label.webp b/chart-sdk/blazor/sparkline-charts/images/blazor-sparkline-data-label.webp index a002f0c7c..f097b44c7 100644 Binary files a/chart-sdk/blazor/sparkline-charts/images/blazor-sparkline-data-label.webp and b/chart-sdk/blazor/sparkline-charts/images/blazor-sparkline-data-label.webp differ diff --git a/chart-sdk/blazor/sparkline-charts/images/blazor-sparkline-tooltip.webp b/chart-sdk/blazor/sparkline-charts/images/blazor-sparkline-tooltip.webp index 0ede7983e..283ee2d67 100644 Binary files a/chart-sdk/blazor/sparkline-charts/images/blazor-sparkline-tooltip.webp and b/chart-sdk/blazor/sparkline-charts/images/blazor-sparkline-tooltip.webp differ diff --git a/chart-sdk/blazor/sparkline-charts/images/blazor-sparkline.webp b/chart-sdk/blazor/sparkline-charts/images/blazor-sparkline.webp index 64b5d98a7..b1df316c0 100644 Binary files a/chart-sdk/blazor/sparkline-charts/images/blazor-sparkline.webp and b/chart-sdk/blazor/sparkline-charts/images/blazor-sparkline.webp differ diff --git a/chart-sdk/blazor/sparkline-charts/localization.md b/chart-sdk/blazor/sparkline-charts/localization.md index d21c4783b..8b00fb563 100644 --- a/chart-sdk/blazor/sparkline-charts/localization.md +++ b/chart-sdk/blazor/sparkline-charts/localization.md @@ -1,13 +1,13 @@ --- layout: post -title: Localization in Blazor Sparkline Charts Component | Syncfusion® -description: Learn about localization support in the Blazor Sparkline Charts component, including culture and RTL settings. -platform: chart-sdk +title: Blazor Sparkline Charts Localization Examples | Syncfusion® +description: Learn how to localize Syncfusion Blazor Sparkline using LoadCldrData and setCulture, with tooltip format and RTL examples. +platform: Blazor control: Sparkline Charts documentation: ug --- -# Localization in Blazor Sparkline Charts Component +# Blazor Sparkline Charts Localization The Sparkline Charts component supports localization. The default culture is `en-US`. The culture can be changed using the `LoadCldrData` and `setCulture` methods. diff --git a/chart-sdk/blazor/sparkline-charts/markers.md b/chart-sdk/blazor/sparkline-charts/markers.md index 59b78dcab..c24f0cfd4 100644 --- a/chart-sdk/blazor/sparkline-charts/markers.md +++ b/chart-sdk/blazor/sparkline-charts/markers.md @@ -1,13 +1,13 @@ --- layout: post -title: Markers in Blazor Sparkline Component | Syncfusion® -description: Check out and learn about marker options and customization in the Blazor Sparkline component and much more details. -platform: chart-sdk +title: Blazor Sparkline Charts Markers Examples | Syncfusion® +description: Learn how to add and customize markers in Syncfusion Blazor Sparkline using SparklineMarkerSettings for special points and styles. +platform: Blazor control: Sparkline Charts documentation: ug --- -# Markers in Blazor Sparkline Component +# Blazor Sparkline Charts Markers Data markers provide information about data points in the Sparkline series. diff --git a/chart-sdk/blazor/sparkline-charts/methods.md b/chart-sdk/blazor/sparkline-charts/methods.md index 97749e9ab..92ac4cf0b 100644 --- a/chart-sdk/blazor/sparkline-charts/methods.md +++ b/chart-sdk/blazor/sparkline-charts/methods.md @@ -1,13 +1,13 @@ --- layout: post -title: Methods in Blazor Sparkline Component | Syncfusion® -description: Learn about available methods in the Blazor Sparkline component, including how to refresh the chart. -platform: chart-sdk +title: Blazor Sparkline Charts Methods Examples | Syncfusion® +description: Learn about available methods in Syncfusion Blazor Sparkline, including how to use RefreshAsync with @ref to update the chart. +platform: Blazor control: Sparkline Charts documentation: ug --- -# Methods in Blazor Sparkline Component +# Blazor Sparkline Charts Methods The `@ref` property can be used to create an object reference for the Sparkline component and call its methods. diff --git a/chart-sdk/blazor/sparkline-charts/range-band.md b/chart-sdk/blazor/sparkline-charts/range-band.md index 1268e1916..343959434 100644 --- a/chart-sdk/blazor/sparkline-charts/range-band.md +++ b/chart-sdk/blazor/sparkline-charts/range-band.md @@ -1,13 +1,13 @@ --- layout: post -title: Range Band in Blazor Sparkline Component | Syncfusion® -description: Explore and understand how to customize range bands in the Blazor Sparkline component for better visuals. -platform: chart-sdk +title: Blazor Sparkline Charts Range Band Examples | Syncfusion® +description: Learn how to customize range bands in Syncfusion Blazor Sparkline to highlight y-axis ranges with StartRange, EndRange, color, and opacity. +platform: Blazor control: Sparkline Charts documentation: ug --- -# Range Band in Blazor Sparkline Component +# Blazor Sparkline Charts Range Band A range band represents a specific range on the Sparkline y-axis, improving readability or highlighting quality by specifying the [StartRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBand.html#Syncfusion_Blazor_Charts_SparklineRangeBand_StartRange) and [EndRange](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBand.html#Syncfusion_Blazor_Charts_SparklineRangeBand_EndRange) properties in the [SparklineRangeBand](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBand.html) within [SparklineRangeBandSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SparklineRangeBandSettings.html). diff --git a/chart-sdk/blazor/sparkline-charts/special-points-customization.md b/chart-sdk/blazor/sparkline-charts/special-points-customization.md index b3e10cebc..983652035 100644 --- a/chart-sdk/blazor/sparkline-charts/special-points-customization.md +++ b/chart-sdk/blazor/sparkline-charts/special-points-customization.md @@ -1,13 +1,13 @@ --- layout: post -title: Special Points Customization in Blazor Sparkline | Syncfusion® -description: Learn here all the features about special points customization in Blazor Sparkline component and much more details. -platform: chart-sdk +title: Blazor Sparkline Charts Special Points Customization | Syncfusion® +description: Learn how to customize special points in Syncfusion Blazor Sparkline, including Start, End, High, Low, and Negative point colors. +platform: Blazor control: Sparkline Charts documentation: ug --- -# Special Points Customization in Blazor Sparkline Component +# Blazor Sparkline Charts Special Points Customization ## Add Custom Color for Special Points diff --git a/chart-sdk/blazor/sparkline-charts/user-interaction.md b/chart-sdk/blazor/sparkline-charts/user-interaction.md index 48fd957d7..0b26d2a47 100644 --- a/chart-sdk/blazor/sparkline-charts/user-interaction.md +++ b/chart-sdk/blazor/sparkline-charts/user-interaction.md @@ -1,13 +1,13 @@ --- layout: post -title: User Interaction in Blazor Sparkline Component | Syncfusion® -description: Check out and learn here all the features about user interaction in Blazor Sparkline component and much more details. -platform: chart-sdk +title: Blazor Sparkline Charts User Interaction Examples | Syncfusion® +description: Learn about user interaction features in Syncfusion Blazor Sparkline, including tooltip and tracker line with format examples. +platform: Blazor control: Sparkline Charts documentation: ug --- -# User Interaction in Blazor Sparkline Component +# Blazor Sparkline Charts User Interaction User interaction features in the Sparkline include the tooltip and the tracker line.