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/charts/accessibility.md b/chart-sdk/blazor/charts/accessibility.md index e107f91c3..b4f888f0b 100644 --- a/chart-sdk/blazor/charts/accessibility.md +++ b/chart-sdk/blazor/charts/accessibility.md @@ -1,15 +1,15 @@ --- layout: post -title: Accessibility in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all about Accessibility using Keyboard navigation in Blazor Charts component and more. -platform: chart-sdk -control: Chart +title: Blazor Charts Accessibility Compliance and Examples | Syncfusion® +description: Learn about Syncfusion Blazor Charts accessibility compliance. Review WCAG 2.2, Section 508, screen reader, and keyboard navigation support. +platform: Blazor +control: Charts documentation: ug --- -# Accessibility in Blazor Chart Component +# Blazor Charts Accessibility Compliance -The Blazor Chart component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. +The [Blazor Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. The accessibility compliance for the Blazor Chart component is outlined below. diff --git a/chart-sdk/blazor/charts/adaptive-layout.md b/chart-sdk/blazor/charts/adaptive-layout.md index 7919c9224..1a224f341 100644 --- a/chart-sdk/blazor/charts/adaptive-layout.md +++ b/chart-sdk/blazor/charts/adaptive-layout.md @@ -1,15 +1,15 @@ --- layout: post -title: Adaptive Layout in Blazor Charts Component | Syncfusion® -description: Check out and learn all the features how to configure and utilize Adaptive Layout in Blazor Charts component. -platform: chart-sdk -control: Chart +title: Blazor Charts Adaptive Layout for Mobile | Syncfusion® +description: Learn how to enable adaptive layout in Syncfusion Blazor Charts. Auto-resize chart elements for mobile and small-screen containers. +platform: Blazor +control: Charts documentation: ug --- -# Adaptive Layout in Blazor Charts Component +# Blazor Charts Adaptive Layout -Adaptive layout in Blazor Charts ensures optimal display of chart elements on mobile devices and screens with limited space. By enabling the [EnableAdaptiveRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_EnableAdaptiveRendering) property, the chart automatically adjusts to container size changes, maintaining clear alignment and visibility for elements such as legend, axis titles, axis labels, data labels, chart title, and more. +Adaptive layout in [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) ensures optimal display of chart elements on mobile devices and screens with limited space. By enabling the [EnableAdaptiveRendering](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_EnableAdaptiveRendering) property, the chart automatically adjusts to container size changes, maintaining clear alignment and visibility for elements such as legend, axis titles, axis labels, data labels, chart title, and more. ```cshtml @@ -91,7 +91,7 @@ The table below outlines the behavior of chart elements based on chart height an | Zoom Toolkit | Height < 200 / Width < 200 | Zoom toolkit is disabled | | Datalabel
(Column and Bar Chart Types)| | Datalabel rotates based on rectangle size; hidden if it exceeds available size | -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/line?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/line?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/charts/advanced-accessibility-configuration.md b/chart-sdk/blazor/charts/advanced-accessibility-configuration.md index da0da9efa..97be24b35 100644 --- a/chart-sdk/blazor/charts/advanced-accessibility-configuration.md +++ b/chart-sdk/blazor/charts/advanced-accessibility-configuration.md @@ -1,15 +1,15 @@ --- layout: post -title: Accessibility Customization in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Accessibility Customization in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Accessibility Customization | Syncfusion® +description: Learn how to configure accessibility in Syncfusion Blazor Charts. Set AccessibilityDescription, AccessibilityRole, and Focusable for screen readers. +platform: Blazor +control: Charts documentation: ug --- -# Accessibility Customization in Blazor Chart Component +# Blazor Charts Accessibility Customization -The Blazor Chart component is structured to visualize data in a graphical manner. It provides robust customization options for accessibility, allowing you to enhance the user experience for those with disabilities. The main attributes of the Blazor Chart component's accessibility customization are briefly explained in this section. +The [Blazor Chart](https://www.syncfusion.com/blazor-components/blazor-charts) component is structured to visualize data in a graphical manner. It provides robust customization options for accessibility, allowing you to enhance the user experience for those with disabilities. The main attributes of the Blazor Chart component's accessibility customization are briefly explained in this section. The chart component has a number of characteristics that enable accessibility features to be customized, including: * [AccessibilityDescription](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_AccessibilityDescription) - Provides a text description for the chart, improving support for screen readers. @@ -319,4 +319,4 @@ The [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo ``` Here is a preview sample demonstrating the accessibility customization support for all chart elements: -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhfXnWhVHFlrqSz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhRDHsreiUpbASQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} diff --git a/chart-sdk/blazor/charts/axis-customization.md b/chart-sdk/blazor/charts/axis-customization.md index 9a4f1a632..7bc3551a6 100644 --- a/chart-sdk/blazor/charts/axis-customization.md +++ b/chart-sdk/blazor/charts/axis-customization.md @@ -1,13 +1,13 @@ --- layout: post -title: Axis Customization in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Axis Customization in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Axis Customization Examples | Syncfusion® +description: Learn how to customize axes in Syncfusion Blazor Charts. Configure position, crossing, CrossesAt, and CrossesInAxis for numeric, datetime, or log axes. +platform: Blazor +control: Charts documentation: ug --- -# Axis Customization in Blazor Charts Component +# Blazor Charts Axis Customization This section provides a brief explanation on how to customize the Blazor Charts axis. @@ -54,7 +54,7 @@ An axis can be positioned in the chart area using [CrossesAt](https://help.syncf } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrUChLRrTftoDAz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Cross Axis](images/axis-customization/blazor-column-chart-cross-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrRtHWrJfXEbwFP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Cross Axis](images/axis-customization/blazor-column-chart-cross-axis.webp)" %} ## Title @@ -95,7 +95,7 @@ A title can be added to the axis using [Title](https://help.syncfusion.com/cr/bl } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhUihhRhzzqpdFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhntRMrpTMfoZfw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Axis Title](images/axis-customization/blazor-column-chart-axis-title.webp)" %} ### Axis title alignment @@ -139,7 +139,7 @@ The axis title's position can be aligned using the `TextAlignment` property in [ } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVfDHirzNGCVAZq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Axis Title Alignment](images/axis-customization/blazor-column-chart-axis-title-alignment.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhHXxMLpfskCfWE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Axis Title Alignment](images/axis-customization/blazor-column-chart-axis-title-alignment.webp)" %} ## Tick lines @@ -182,7 +182,7 @@ The width, color, and size of the minor and major tick lines can be customi } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLgiBBdLTzRploJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrRNRCBJJAGlRxp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Custom Tick Lines](images/axis-customization/blazor-column-chart-custom-tick-lines.webp)" %} ## Grid lines customization @@ -224,7 +224,7 @@ The width, color, and dash array of the minor and major grid lines can be c } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVAWVVnBzoAhreS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVHXdCVzzzhMFYW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Custom GridLines](images/axis-customization/blazor-column-chart-custom-gridline.webp)" %} ## Multiple Axis @@ -269,7 +269,7 @@ The [ChartAxes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVqirBHhzyoYHVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhntRWVppfdrHDT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Multiple Axes](images/axis-customization/blazor-column-chart-multiple-axes.webp)" %} ## See also @@ -316,7 +316,7 @@ When an axis is inversed, the greatest value on the axis moves closer to the ori } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhgMBBRLzoOWYHq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBnXHCLJpfEyWys?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Inversed Axis](images/axis-customization/blazor-column-chart-inversed-axis.webp)" %} ## Opposed position @@ -357,9 +357,9 @@ To place an axis in the opposite position of its original position, set its [Opp } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrRtHihJzSryWPT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart Axis in Opposed Position](images/axis-customization/blazor-column-chart-axis-at-opposed-position.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/line?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/line?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/charts/axis-labels.md b/chart-sdk/blazor/charts/axis-labels.md index 77b8b7f15..6ac12bbe0 100644 --- a/chart-sdk/blazor/charts/axis-labels.md +++ b/chart-sdk/blazor/charts/axis-labels.md @@ -1,13 +1,13 @@ --- layout: post -title: Axis Labels in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Axis Labels in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Axis Labels Configuration | Syncfusion® +description: Learn how to configure axis labels in Syncfusion Blazor Charts. Use LabelIntersectAction to hide, rotate, or trim overlapping text. +platform: Blazor +control: Charts documentation: ug --- -# Axis Labels in Blazor Charts Component +# Blazor Charts Axis Labels This section provides a brief explanation on how to customize the Blazor Charts axis labels. @@ -60,7 +60,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrUWhVxrUeUPizH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hiding Smart Axis Label in Blazor Column Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBHZHMrzgSBqKay?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Hiding Smart Axis Label in Blazor Column Chart](images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp)" %} **Case 2:** When [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_LabelIntersectAction) is set to **Rotate45**. @@ -102,7 +102,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhUWrhdBKnQRxlc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVxNnCLpqoSQjrY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate45](images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp)" %} **Case 3:** When [LabelIntersectAction](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_LabelIntersectAction) is set to **Rotate90**. @@ -144,7 +144,7 @@ When the axis labels overlap, the [LabelIntersectAction](https://help.syncfusion } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVKsVhHBgQNxgcg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBnNdiBJAoPOXAx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Smart Axis Label in Rotate90](images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp)" %} ## Axis labels positioning @@ -188,7 +188,7 @@ The axis labels can be put **Outside** of the axis line by default, however the } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVACVhHLgcAIDVs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Axis Label Position in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrnXdiVpgnClUcS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Axis Label Position in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-position.webp)" %} ## Multilevel labels @@ -243,7 +243,7 @@ The [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLgMLLxrgGHhnQF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Multilevel Labels](images/axis-labels/blazor-column-chart-multi-labels.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLRtxWrJqneRbjw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Multilevel Labels](images/axis-labels/blazor-column-chart-multi-labels.webp)" %} ### Overflow @@ -295,7 +295,7 @@ Using the [Overflow](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrAirBRVqmaLxUH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Multilevel Labels with Overflow](images/axis-labels/blazor-column-chart-axis-label-overflow.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLRXxMVTAHarkMR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart Multilevel Labels with Overflow](images/axis-labels/blazor-column-chart-axis-label-overflow.webp)" %} ### Alignment @@ -347,7 +347,7 @@ The [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBUWLVnrqvhmHGl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Multilevel Labels Alignment in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-alignment.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrHZHsLpUQqQGmT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Multilevel Labels Alignment in Blazor Column Chart](images/axis-labels/blazor-column-chart-axis-label-alignment.webp)" %} ### Text customization @@ -400,7 +400,7 @@ The [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartA } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVAMBrHLqPoocKv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Multilevel Labels Text in Blazor Column Chart](images/axis-labels/blazor-column-chart-custom-axis-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBxXnMBpgcmomUl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Multilevel Labels Text in Blazor Column Chart](images/axis-labels/blazor-column-chart-custom-axis-label.webp)" %} ### Border customization @@ -453,7 +453,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXVKMLLxVqlbslqT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Multilevel Labels Border in Blazor Column Chart](images/axis-labels/blazor-column-chart-label-with-custom-border.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLdNnihJKFCjqNj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Customizing Multilevel Labels Border in Blazor Column Chart](images/axis-labels/blazor-column-chart-label-with-custom-border.webp)" %} ## Edge label placement @@ -501,7 +501,7 @@ The longer text labels at the axes edges may only be partially visible in the c } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrqWVVHhTXtqqWR?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/rNrntnsrpqbeqVsF?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)" %} ## Labels customization @@ -543,7 +543,7 @@ The label [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLUCVrRhftplXww?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Custom Label](images/axis-labels/blazor-column-chart-axis-custom-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBnZnCBTgPPuXVx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart Axis with Custom Label](images/axis-labels/blazor-column-chart-axis-custom-label.webp)" %} ## Trim label @@ -584,7 +584,7 @@ The label can be trimmed using the [EnableTrim](https://help.syncfusion.com/cr/b } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVqMrLdVzXPKHis?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Trimming in Blazor Column Chart Axis](images/axis-labels/blazor-column-chart-axis-label-trim.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrxtnChTKuBXOyK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Label Trimming in Blazor Column Chart Axis](images/axis-labels/blazor-column-chart-axis-label-trim.webp)" %} ## Line break @@ -626,7 +626,7 @@ The `
` tag can used to separate the long axis label into multiple lines. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLgCBLdVJBNXepm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Line break Label](images/axis-labels/blazor-column-chart-axis-line-break-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLdtxCBJqESmnux?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart Axis with Line break Label](images/axis-labels/blazor-column-chart-axis-line-break-label.webp)" %} ## Label format @@ -706,7 +706,7 @@ You can customize the axis labels by using [OnAxisLabelRender](https://help.sync } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVqCrrHLpVyohwI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Label customization](images/axis-labels/blazor-column-chart-label-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBHjdCVTUkYTNzR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart Axis with Label customization](images/axis-labels/blazor-column-chart-label-customization.webp)" %} ## Axis label template @@ -760,7 +760,7 @@ Within the `LabelTemplate`, the implicit parameter context provides access to la } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLHjrXgKgtAxgoC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart Axis with Template using Text](images/axis-labels/blazor-column-chart-axis-text-template.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVHNHChJzjTfWZv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart Axis with Template using Text](images/axis-labels/blazor-column-chart-axis-text-template.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Chart-Axis-Label-Customization). @@ -770,4 +770,4 @@ N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Chart-Ax * [Tooltip](./tool-tip) * [Marker](./data-markers) -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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/chart-sdk/blazor/charts/category-axis.md b/chart-sdk/blazor/charts/category-axis.md index a4f128ee2..4da8d05f3 100644 --- a/chart-sdk/blazor/charts/category-axis.md +++ b/chart-sdk/blazor/charts/category-axis.md @@ -1,13 +1,13 @@ --- layout: post -title: Category Axis in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Category Axis in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Category Axis Examples | Syncfusion® +description: Learn how to use the category axis in Syncfusion Blazor Charts. Plot string-typed X values such as months or product names. +platform: Blazor +control: Charts documentation: ug --- -# Category Axis in Blazor Charts Component +# Blazor Charts Category Axis The category axis is used to represent string values instead of integers. @@ -50,7 +50,7 @@ A detailed walkthrough for customizing the category axis is provided in the vide } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLgWrhVAEwCkOWl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Default Axis](images/category-axis/blazor-chart-default-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBRNnWLJtOKpNdh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Default Axis](images/category-axis/blazor-chart-default-axis.webp)" %} ## Labels placement @@ -91,7 +91,7 @@ The category labels are positioned between ticks by default, but the [LabelPlace } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLgWVrBgOQpAjdB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Labels Position in Blazor Chart](images/category-axis/blazor-diagram-label-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBnNHWLpNObjzKi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Labels Position in Blazor Chart](images/category-axis/blazor-diagram-label-position.webp)" %} ## Range and interval @@ -132,7 +132,7 @@ The [Minimum](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLqWrrhTtLJCSXT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Column Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBdjRCBTiXVEqgt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Column Chart Axis based on Range and Interval](images/category-axis/blazor-chart-axis-range-and-interval.webp)" %} ## Indexed category axis @@ -181,9 +181,9 @@ The category axis can also be rendered using the data source index values. This } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVAiVrVTDrcDBLL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLnjHiLTCXlIRxD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart with Indexed Category Axis](images/category-axis/blazor-chart-index-category-axis.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/line?theme=bootstrap5) to knows various chart types and how to represent time-dependent data, showing trends in data 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/line?theme=fluent2) to knows various chart types and how to represent time-dependent data, showing trends in data at equal intervals. ## See also diff --git a/chart-sdk/blazor/charts/chart-annotations.md b/chart-sdk/blazor/charts/chart-annotations.md index 5e32c6e38..a353986e3 100644 --- a/chart-sdk/blazor/charts/chart-annotations.md +++ b/chart-sdk/blazor/charts/chart-annotations.md @@ -1,13 +1,13 @@ --- layout: post -title: Annotation in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about using Annotation in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Annotation Examples | Syncfusion® +description: Learn how to add annotations in Syncfusion Blazor Charts. Highlight regions of interest with custom HTML text, shapes, or images. +platform: Blazor +control: Charts documentation: ug --- -# Annotation in Blazor Charts Component +# Blazor Charts Annotation Annotations are texts, shapes, or images that are used to highlight a specific region of interest in a chart. @@ -167,7 +167,7 @@ The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch ![Inserting Annotation using Coordinate in Blazor Column Chart](images/annotation/blazor-column-chart-coordinate-annotation.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/line?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/line?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/charts/chart-appearance.md b/chart-sdk/blazor/charts/chart-appearance.md index 9c68d79cc..43cf8ede6 100644 --- a/chart-sdk/blazor/charts/chart-appearance.md +++ b/chart-sdk/blazor/charts/chart-appearance.md @@ -1,13 +1,13 @@ --- layout: post -title: Appearance in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Appearance Customization in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Appearance Customization | Syncfusion® +description: Learn how to customize appearance in Syncfusion Blazor Charts. Apply a custom color palette via the Palettes property to change series colors. +platform: Blazor +control: Charts documentation: ug --- -# Appearance in Blazor Charts Component +# Blazor Charts Appearance ## Custom color palette @@ -330,7 +330,7 @@ N> The subtitle, which appears below the title, will also be positioned along wi } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthIjzjTrISHobHi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Position customization of title in Blazor Chart](images/appearance/blazor-chart-title-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVRtnCLTIgzfrSp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Position customization of title in Blazor Chart](images/appearance/blazor-chart-title-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.ChartTitleStyle.html#Syncfusion_Blazor_Charts_ChartTitleStyle_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html#Syncfusion_Blazor_Charts_ChartTitleStyle_Y) properties in [ChartTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.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. @@ -373,7 +373,7 @@ When the `Position` is set to `Custom`, the title can be positioned anywhere on } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLoXTtfLyEQbMWr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Custom position of title in Blazor Chart](images/appearance/blazor-chart-title-position-custom.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBnXxCLTeKkvACG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Custom position of title in Blazor Chart](images/appearance/blazor-chart-title-position-custom.webp)" %} ## Chart subtitle diff --git a/chart-sdk/blazor/charts/chart-dimensions.md b/chart-sdk/blazor/charts/chart-dimensions.md index b697b4a2c..a0d19b103 100644 --- a/chart-sdk/blazor/charts/chart-dimensions.md +++ b/chart-sdk/blazor/charts/chart-dimensions.md @@ -1,13 +1,13 @@ --- layout: post -title: Chart Dimensions in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Chart Dimensions in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Dimensions and Sizing | Syncfusion® +description: Learn how to set Blazor Charts dimensions with Width and Height properties. Use percentages and a CDN script to avoid layout redraws. +platform: Blazor +control: Charts documentation: ug --- -# Chart Dimensions in Blazor Charts Component +# Blazor Charts Dimensions N> * When no size is specified, the default height and width are 450px and 600px, respectively. @@ -61,7 +61,7 @@ The chart can be scaled to fit the container. As shown in the below example, the } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVqWLrhgORNWnqy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrHNnMrKObdFZel?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Chart Size as Fit to Container](images/chart-dimensions/blazor-chart-size-for-container.webp)" %} ## Size for chart @@ -105,7 +105,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfCha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLUCrhhUOHBRpDP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVHZdWBKOuiSdXp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Chart Size in Pixel](images/chart-dimensions/blazor-chart-size-in-pixel.webp)" %} ### In percentage @@ -145,9 +145,9 @@ By setting the values of [Width](https://help.syncfusion.com/cr/blazor/Syncfusio } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLUMrVLAEHSsNxA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVRjniVKOYcqiis?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Chart Size in Percentage](images/chart-dimensions/blazor-chart-size-in-percentage.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/line?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/line?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/charts/chart-print.md b/chart-sdk/blazor/charts/chart-print.md index 4c9183a83..50bc72c03 100644 --- a/chart-sdk/blazor/charts/chart-print.md +++ b/chart-sdk/blazor/charts/chart-print.md @@ -1,13 +1,13 @@ --- layout: post -title: Print and Export in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Print and Export in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Print and Export Examples | Syncfusion® +description: Learn how to print and export Blazor Charts using Syncfusion. Use PrintAsync for browser printing and export to image, SVG, or PDF. +platform: Blazor +control: Charts documentation: ug --- -# Print and Export in Blazor Charts Component +# Blazor Charts Print and Export ## Print @@ -482,9 +482,9 @@ In the code example below, the chart is exported to Excel format. The exported E } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrStfNGMaalzwin?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrdtRCVoMLHBfGP?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/line?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/line?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/charts/chart-series.md b/chart-sdk/blazor/charts/chart-series.md index 59c176621..0d6ef3425 100644 --- a/chart-sdk/blazor/charts/chart-series.md +++ b/chart-sdk/blazor/charts/chart-series.md @@ -1,13 +1,13 @@ --- layout: post -title: Mixed Chart in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Mixed Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Mixed Series Examples | Syncfusion® +description: Learn how to combine multiple chart types in Syncfusion Blazor Charts. Add several ChartSeries entries to render in declaration order. +platform: Blazor +control: Charts documentation: ug --- -# Mixed Chart in Blazor Charts Component +# Blazor Charts Mixed Series ## Multiple chart series @@ -115,7 +115,7 @@ N> Bar series cannot be combined with any other series as the axis orientation i ![Displaying Combination of Blazor Chart](images/multiple-series/blazor-chart-combination.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/line?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/line?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/charts/chart-sorting.md b/chart-sdk/blazor/charts/chart-sorting.md index 19cbbfed5..b8f1ac455 100644 --- a/chart-sdk/blazor/charts/chart-sorting.md +++ b/chart-sdk/blazor/charts/chart-sorting.md @@ -1,13 +1,13 @@ --- layout: post -title: Sorting in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about sorting functionality in Blazor Charts component and more -platform: chart-sdk -control: Chart +title: Blazor Charts Sorting Examples | Syncfusion® +description: Learn how to sort Blazor Charts data in ascending or descending order. Set ChartSorting PropertyName to the Y-axis field to sort series. +platform: Blazor +control: Charts documentation: ug --- -# Sorting in Blazor Chart Component +# Blazor Charts Sorting Sorting enables you to sort data in ascending or descending order. To sort the chart based on the y-axis value, set **Y** to the [PropertyName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSorting.html#Syncfusion_Blazor_Charts_ChartSorting_PropertyName) property. diff --git a/chart-sdk/blazor/charts/chart-types/area.md b/chart-sdk/blazor/charts/chart-types/area.md index edc15500d..d01a68c16 100644 --- a/chart-sdk/blazor/charts/chart-types/area.md +++ b/chart-sdk/blazor/charts/chart-types/area.md @@ -1,13 +1,13 @@ --- layout: post -title: Area in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Area Chart in Blazor Charts component and much more details. -platform: chart-sdk -control: Chart +title: Blazor Area Chart Examples and Documentation | Syncfusion® +description: Learn how to create and customize Blazor Area Charts using Syncfusion. Display trends with filled area series, data labels, markers, and legends. +platform: Blazor +control: Charts documentation: ug --- -# Area in Blazor Charts Component +# Area Chart in Blazor ## Area @@ -42,9 +42,9 @@ The [Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/char } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpXuWryXlXgwKd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Area Chart](../images/chart-types-images/blazor-area-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrdtxMBfvnkGZZv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Area Chart](../images/chart-types-images/blazor-area-chart.webp)" %} -N> Refer to the [Blazor Area Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) feature page for more details and explore the [Blazor Area Chart Example](https://blazor.syncfusion.com/demos/chart/area) to see usage for time-dependent data and trend visualization. +N> Refer to the [Blazor Area Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/area-chart) feature page for more details and explore the [Blazor Area Chart Example](https://blazor.syncfusion.com/demos/chart/area?theme=fluent2) to see usage for time-dependent data and trend visualization. ## Binding data with series @@ -79,7 +79,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVpXuWryXlXgwKd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrRZRWrzFGykRIF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -118,7 +118,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLpZEsAskSOfqwj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhntRMhJFljvXfU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the area series. By configuring this property with gradient values will create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -160,7 +160,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrJNYMgWYHvmzqy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVxNHirpPlnWvIg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -195,7 +195,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrzjOCAskcSagDx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrRNRshJPONSIqi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -231,7 +231,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhzZEiKLZhKgsrU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLnNRMBpluIrFPj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Area Border @@ -270,7 +270,7 @@ The following properties in the [ChartSeriesBorder](https://help.syncfusion.com/ } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVTXkiULjzABdzB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBnDRMrfuXDswUx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Multicolored area @@ -321,7 +321,7 @@ To render a multicolored area series in a chart, a few configuration steps must ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLztasALpNKGzvX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLHZRsrJYZeXCET?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -361,7 +361,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthTjuWKrHZUaoWm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthnNRMLpkMNiZaB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -398,7 +398,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLzDuiABnhktkFL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrxXRMVfuMpwPRv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -437,7 +437,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBfDkMKhnzthxFm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVdXRihfuMFOgLf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -480,7 +480,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBzXYWUrRxwmCnS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVxXdWVTkLgMpAG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -523,9 +523,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrptOsABxvHjKqa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLdXnihTkBwciRf?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/line?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/line?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/charts/chart-types/bar.md b/chart-sdk/blazor/charts/chart-types/bar.md index 529f4af4c..ef9ab6e14 100644 --- a/chart-sdk/blazor/charts/chart-types/bar.md +++ b/chart-sdk/blazor/charts/chart-types/bar.md @@ -1,13 +1,13 @@ --- layout: post -title: Bar Charts in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Bar Charts in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Bar Chart Examples and Documentation | Syncfusion® +description: Learn how to create and customize Blazor Bar Charts using Syncfusion. Compare frequency, count, total, or average across categories with horizontal bars. +platform: Blazor +control: Charts documentation: ug --- -# Bar Charts in Blazor Charts Component +# Bar Chart Series in Blazor ## Bar @@ -50,9 +50,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLTNYsqpkzRkDLi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar Chart](../images/chart-types-images/blazor-bar-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhRZnihTkKqtdDG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bar Chart](../images/chart-types-images/blazor-bar-chart.webp)" %} -N> Refer to the [Blazor Bar Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Bar Chart Example](https://blazor.syncfusion.com/demos/chart/bar?theme=bootstrap5) to compare values across categories by using horizontal bars. +N> Refer to the [Blazor Bar Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bar-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Bar Chart Example](https://blazor.syncfusion.com/demos/chart/bar?theme=fluent2) to compare values across categories by using horizontal bars. ## Binding data with series @@ -95,7 +95,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLTNYsqpkzRkDLi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLxZdCByLcbweoO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -142,7 +142,7 @@ Use the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrJNOMAzkGIHLBV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLxjniBILFhYqNK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the bar series. By configuring the fill property with gradient values will create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -192,7 +192,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhJZYMUTOFVhLEz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVxtRshyBbnaDFN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -235,7 +235,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBJZOCKpYPQQtuq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrdtnihoBOCRLTR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -279,7 +279,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTtuWUTuOhOKlj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLRZnChIBOxisvd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Series Border** @@ -323,7 +323,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTtuWUTuOhOKlj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLdtRiryqttwTLy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Corner radius @@ -368,7 +368,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBINTjfrHKsRaBF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar Chart with corner radius](../images/chart-types-images/blazor-bar-chart-corner-radius.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVHZRiBIUDctvWV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bar Chart with corner radius](../images/chart-types-images/blazor-bar-chart-corner-radius.webp)" %} Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -418,7 +418,7 @@ Customize the corner radius for individual points in the chart series using the } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBejJXJVPrWIMKc?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVHjHWhyKCVMxFD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.webp)" %} ## Bar spacing and width @@ -462,7 +462,7 @@ The [ColumnSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBfjaWUejsQPZoB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrdDRsheKCxNClo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Column width in pixels @@ -504,7 +504,7 @@ The [ColumnWidthInPixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDreDxhnJqkknbxM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bar Chart with column width set in pixel](../images/chart-types-images/blazor-bar-chart-width-in-pixels.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBHDdWVIABNQbUK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bar Chart with column width set in pixel](../images/chart-types-images/blazor-bar-chart-width-in-pixels.webp)" %} ## Grouped bar @@ -549,7 +549,7 @@ Group related series using the [GroupName](https://help.syncfusion.com/cr/blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrpZFrZMwknOUgV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrHZdiLIAhohPFT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -597,7 +597,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVpjaigoNLmAhdP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhxtxiVIqqsHRtF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -641,7 +641,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBTNYCqIXKgENws?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVdXdMBSgqeDIhY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -687,7 +687,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhpDYWAyDKOnNtK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLRtnMhIgKFIhHp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -738,7 +738,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVTjYMKyDTFzNmG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVntHsVSKJLfplY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -787,13 +787,13 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVJNaCUIXSpUkTS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBHNnMVygzePqEH?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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. ## See also -* [Creating stacked waterfall chart using Blazor bar chart](https://support.syncfusion.com/kb/article/11589/creating-stacked-waterfall-chart-using-blazor-bar-chart) +* [Creating stacked waterfall chart using Blazor bar chart](https://support.syncfusion.com/kb/article/11589/how-to-create-a-stacked-waterfall-chart-using-a-blazor-bar-chart) * [Data Label](../data-labels) * [Tooltip](../tool-tip) diff --git a/chart-sdk/blazor/charts/chart-types/box-whisker.md b/chart-sdk/blazor/charts/chart-types/box-whisker.md index 0fd602dc5..4d6e47f3b 100644 --- a/chart-sdk/blazor/charts/chart-types/box-whisker.md +++ b/chart-sdk/blazor/charts/chart-types/box-whisker.md @@ -1,13 +1,13 @@ --- layout: post -title: Box and Whisker in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Box and Whisker Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Box and Whisker Chart Examples and Documentation | Syncfusion® +description: Learn how to visualize statistical distributions in Blazor Box and Whisker Charts using Syncfusion. Plot min, Q1, median, Q3, and max with five Y values. +platform: Blazor +control: Charts documentation: ug --- -# Box and Whisker in Blazor Charts Component +# Box and Whisker Chart in Blazor ## Box and Whisker @@ -53,9 +53,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzjFVZSMTofoJN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Box and Whisker Charts](../images/othertypes/blazor-box-whisker-charts.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLHtdWLIfriQmSR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Box and Whisker Charts](../images/othertypes/blazor-box-whisker-charts.webp)" %} -N> Refer to our [Blazor Box and Whisker Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/box-and-whisker-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Box and Whisker Chart Example](https://blazor.syncfusion.com/demos/chart/box-and-whisker) to know how to render and configure the box and whisker type charts. +N> Refer to our [Blazor Box and Whisker Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/box-and-whisker-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Box and Whisker Chart Example](https://blazor.syncfusion.com/demos/chart/box-and-whisker?theme=fluent2) to know how to render and configure the box and whisker type charts. ## Binding data with series @@ -97,7 +97,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzjFVZSMTofoJN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBRjRiSgmkXRhxA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -144,7 +144,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLzjbrNIWmRppje?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrxXxWIgQYzlikX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -186,7 +186,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLJXPLjorqNXiVj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrHXnsSqwukAuPl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -228,7 +228,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhTDPhNyVTUAEnI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhnXnWyqFtKfzNJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Series Border** @@ -271,7 +271,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBztvBNILeJqLQs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLHXRiegbDcTmCs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Box plot @@ -314,7 +314,7 @@ To change the rendering mode of the Box and Whisker series, use the [BoxPlotMode } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrJNbLZyqNmLSfX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBRtdMSUviWggaq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Show mean @@ -356,7 +356,7 @@ In Box and Whisker series, [ShowMean](https://help.syncfusion.com/cr/blazor/Sync } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLTjlrtyAViHspW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrRXHWoKvsdqCcc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -405,7 +405,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVfDvVZeKUSJylc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVRNHWeqviboKfo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -452,9 +452,9 @@ Use the [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVfZPBDSqpPmFsZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBRDRiyKPhLAurZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -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 Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. +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 Chart Example](https://blazor.syncfusion.com/demos/chart/line?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/charts/chart-types/bubble.md b/chart-sdk/blazor/charts/chart-types/bubble.md index d8eb44725..70579e12e 100644 --- a/chart-sdk/blazor/charts/chart-types/bubble.md +++ b/chart-sdk/blazor/charts/chart-types/bubble.md @@ -1,13 +1,13 @@ --- layout: post -title: Bubble in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Bubble Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Bubble Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Bubble Charts using Syncfusion. Visualize three parameters—X, Y, and Size—where point size encodes an extra dimension. +platform: Blazor +control: Charts documentation: ug --- -# Bubble in Blazor Charts Component +# Bubble Chart in Blazor ## Bubble @@ -56,9 +56,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVfZlVZAFsaTHgz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Bubble Chart](../images/chart-types-images/blazor-bubble-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLHXRiIgPLmJsJW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Bubble Chart](../images/chart-types-images/blazor-bubble-chart.webp)" %} -N> Refer to the [Blazor Bubble Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bubble-chart) feature tour page to know about its other groundbreaking feature representations and also explore the [Blazor Bubble Chart Example](https://blazor.syncfusion.com/demos/chart/bubble?theme=bootstrap5) to know how to render and configure the bubble type charts. +N> Refer to the [Blazor Bubble Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bubble-chart) feature tour page to know about its other groundbreaking feature representations and also explore the [Blazor Bubble Chart Example](https://blazor.syncfusion.com/demos/chart/bubble?theme=fluent2) to know how to render and configure the bubble type charts. ## Binding data with series @@ -107,7 +107,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVfZlVZAFsaTHgz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthntHCeqFUtCIPZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -160,7 +160,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJjFLDKFITLPEy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhdjHMoAFKfIESA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the bubble series. By configuring this property with gradient values will create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -216,7 +216,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBfZlVjgFdRuSQm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLHNdWyAlKcXfvq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -266,7 +266,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhpNbhjgvPifngh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhxZRMSAlJCHoPy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Bubble size mapping @@ -316,7 +316,7 @@ The [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLfZPVXqYFMgJrs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhRNdMoqbJTTDLC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -370,7 +370,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrTZbhZqkBHEzZc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhRZnieAPfmPFbF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -421,7 +421,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLJjlrjqEAmyrpm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrRjxWeglSMFShc?appbar=false&editor=false&result=false&errorlist=true&theme=fluent2" %} **Border** @@ -473,7 +473,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrfNFBNAEzlQWwl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrnNHiSUvdFjRgJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -530,7 +530,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBJNbhjgEOdityZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLRjnCyqlSkdJqC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -585,11 +585,11 @@ Use the [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBJtFhNpNKNdooM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrxXxiIUbdVMHTl?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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. ## See also * [Data Label](../data-labels) -* [Tooltip](../tool-tip) \ No newline at end of file +* [Tooltip](../tool-tip) diff --git a/chart-sdk/blazor/charts/chart-types/candle.md b/chart-sdk/blazor/charts/chart-types/candle.md index b7765b584..513d958ac 100644 --- a/chart-sdk/blazor/charts/chart-types/candle.md +++ b/chart-sdk/blazor/charts/chart-types/candle.md @@ -1,13 +1,13 @@ --- layout: post -title: Candle in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Candle Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Candle Chart Examples and Documentation | Syncfusion® +description: Learn how to render Blazor Candle Charts using Syncfusion. Visualize stock open, high, low, and close prices with a five-field data source per point. +platform: Blazor +control: Charts documentation: ug --- -# Candle in Blazor Charts Component +# Candle Chart in Blazor ## Candle @@ -59,7 +59,7 @@ To render a [`Candle`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpZFLtJkIBDGOn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Candle Chart](../images/financial-types/blazor-candle-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrdZRCoAPGoGeHq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Candle Chart](../images/financial-types/blazor-candle-chart.webp)" %} ## Binding data with series @@ -101,7 +101,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpZFLtJkIBDGOn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVntHCoUbvirMxC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Hollow candle @@ -162,7 +162,7 @@ The color of the candle will be defined by comparing with previous values. [Bull } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhTtlrZzYcERtLX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrRjHWoKvlgwilj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Solid candles @@ -205,7 +205,7 @@ The color of the candle will be defined by comparing with previous values. [Bull } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrJZPrNfEvwlPNT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhRXdCoglYBaUNu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -252,7 +252,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrJNvhZyNKfjiBM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBdjnMeqPOcrLzC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -295,7 +295,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBTZFLjSjxgzXQt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVdjRsSgOtjCvAB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -343,7 +343,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBpXbhjyNwaIvNz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBdZRseKEtxCSJd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -389,10 +389,10 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrfZbVDoNPkKESJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhHXxsSKYtgvlbT?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/line?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/line?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/charts/chart-types/column.md b/chart-sdk/blazor/charts/chart-types/column.md index 76b47ada2..2fe6e6d5c 100644 --- a/chart-sdk/blazor/charts/chart-types/column.md +++ b/chart-sdk/blazor/charts/chart-types/column.md @@ -1,13 +1,13 @@ --- layout: post -title: Column Chart in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Column Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Column Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Column Charts using Syncfusion. Compare frequency, count, total, or average across categories with vertical bars. +platform: Blazor +control: Charts documentation: ug --- -# Column Chart in Blazor Charts Component +# Column Chart in Blazor ## Column @@ -56,9 +56,9 @@ To render a [Column Chart](https://www.syncfusion.com/blazor-components/blazor-c } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVTDasqTXEkwQxd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor column Chart.](../images/chart-types-images/blazor-column-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBnXxiyqOWhYDOS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor column Chart.](../images/chart-types-images/blazor-column-chart.webp)" %} -N> Refer to our [Blazor Column Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Column Charts Example](https://blazor.syncfusion.com/demos/chart/column?theme=bootstrap5) to compare **Frequency**, **Count**, **Total**, or **Average** of data in different categories. +N> Refer to our [Blazor Column Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/column-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Column Charts Example](https://blazor.syncfusion.com/demos/chart/column?theme=fluent2) to compare **Frequency**, **Count**, **Total**, or **Average** of data in different categories. ## Binding data with series @@ -101,7 +101,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVTDasqTXEkwQxd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrHjHWSgYMeNwKb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -148,7 +148,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhzZaMUpCssORCj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhRNHCygYCmymvy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the column series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -198,7 +198,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrpDYWUTiWFhKiA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBRjnMIUarXbVfv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -241,7 +241,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXOMUzCryhKbs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVRDxieAOBLuoUJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -285,7 +285,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVpDOCgzizWIYnW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrHDHsIAaVPmprP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Series Border** @@ -331,7 +331,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVptaigJiSoAyNW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrxjnsoKEUsCbux?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Corner radius @@ -370,7 +370,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZretpNTBvfSKfSg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with corner radius](../images/chart-types-images/blazor-column-chart-corner-radius.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthnDxiSAEqgSxbl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with corner radius](../images/chart-types-images/blazor-column-chart-corner-radius.webp)" %} Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -420,7 +420,7 @@ Customize the corner radius for individual points in the chart series using the } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLetfjzLvFuJDKv?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor column chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVRtRWogkzZfEYn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor column chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.webp)" %} ## Column space and width @@ -466,7 +466,7 @@ The [ColumnSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVJZuWgzrbsWdYi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhHNnCyguJUqTKF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Column width @@ -510,7 +510,7 @@ The [ColumnSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBTjaiKzKALphJK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhnXRiygYJnCXlr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Column width in pixel @@ -552,7 +552,7 @@ The [ColumnWidthInPixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhSNxBxzUFmUfTx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with column width set in pixel](../images/chart-types-images/blazor-column-chart-width-in-pixels.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrnZRiyAufvOXUR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with column width set in pixel](../images/chart-types-images/blazor-column-chart-width-in-pixels.webp)" %} ## Grouped column @@ -597,7 +597,7 @@ Group series using [GroupName](https://help.syncfusion.com/cr/blazor/Syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLAWrVdzxoVOMsL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVxZxsIUEoCEiyh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -645,7 +645,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrfZkMKzMEIFjsg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLHNHCSAuolbvrE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -689,7 +689,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVJXYMKfhAQSZgW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhnjRMIAuHrtIby?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -735,7 +735,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBzDYCgTVpYKdZP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrxNRMeAOnfcDoR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -786,7 +786,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhTtkMAzUToYLEu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLxDxMyAOdwSFjV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -835,9 +835,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhJXOCAfqywAsbM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLRDRWIKkcsfKSD?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/line?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/line?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/charts/chart-types/error-bar.md b/chart-sdk/blazor/charts/chart-types/error-bar.md index 1613d1ac2..03e9e61fd 100644 --- a/chart-sdk/blazor/charts/chart-types/error-bar.md +++ b/chart-sdk/blazor/charts/chart-types/error-bar.md @@ -1,13 +1,13 @@ --- layout: post -title: Error Bar in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Error Bar Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Error Bar Chart Examples and Documentation | Syncfusion® +description: Learn how to add error bars to Blazor Charts using Syncfusion. Show measurement uncertainty on series by enabling ChartErrorBarSettings. +platform: Blazor +control: Charts documentation: ug --- -# Error Bar in Blazor Charts Component +# Error Bar Chart in Blazor ## Error bar @@ -49,7 +49,7 @@ Error bars are graphical representations of the variability of data that are use } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrJXvLtoGKlZQco?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Error Bar](../images/othertypes/blazor-error-bar-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVRjdCeAakdQhfU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart with Error Bar](../images/othertypes/blazor-error-bar-chart.webp)" %} ## Error bar type @@ -91,7 +91,7 @@ To change the error bar rendering type, set [Type](https://help.syncfusion.com/c } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVptlLDSQfSIQbX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrdtdMeTtjZdXEM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Customizing error bar type @@ -134,7 +134,7 @@ To customize the error bar type, specify the [Type](https://help.syncfusion.com/ } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVpjbVteQTEHUBm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLxDdieptNJZxUC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Error bar mode @@ -176,7 +176,7 @@ Error bar mode is used to define whether the error bar line should be drawn hori } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrJXlrZemozoWbI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLxtdMIzNWtKKBe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Error bar direction @@ -218,7 +218,7 @@ To change the error bar direction to plus, minus, or both sides, use [Direction] } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVfjbBNSQIYbupQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrRNnioJZiBGwUC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Customizing error bar cap @@ -261,7 +261,7 @@ To customize the error bar cap [Length](https://help.syncfusion.com/cr/blazor/Sy } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVJXbVDIGdTeIOM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBdNxsozXMSwmCb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -312,7 +312,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htBJjPrtyQcdqASQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVdNHWoJtWGkuwQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -362,9 +362,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVzXbhXScaLsKPU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBdZdWoJtBNIRrS?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/line?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/line?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/charts/chart-types/high-low-open-close.md b/chart-sdk/blazor/charts/chart-types/high-low-open-close.md index f82df8bea..69faf4deb 100644 --- a/chart-sdk/blazor/charts/chart-types/high-low-open-close.md +++ b/chart-sdk/blazor/charts/chart-types/high-low-open-close.md @@ -1,13 +1,13 @@ --- layout: post -title: High Low Open Close in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about High Low Open Close Chart in Blazor Charts component and more. -platform: chart-sdk -control: Chart +title: Blazor High Low Open Close Chart Examples | Syncfusion® +description: Learn how to render Blazor High Low Open Close Charts using Syncfusion. Show stock open, high, low, and close values with a five-field data source. +platform: Blazor +control: Charts documentation: ug --- -# High Low Open Close in Blazor Charts Component +# High Low Open Close Chart in Blazor ## High Low Open Close @@ -53,7 +53,7 @@ A detailed demonstration of the process for creating a HiloOpenClose chart using } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJNlLNJmhnNTVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor High Low Open Close Chart](../images/chart-types-images/blazor-high-low-open-close-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrHDHWeTigXIISL?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor High Low Open Close Chart](../images/chart-types-images/blazor-high-low-open-close-chart.webp)" %} ## Binding data with series @@ -93,7 +93,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJNlLNJmhnNTVP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVdDdMoTMUJToYf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -133,7 +133,7 @@ In [HiloOpenClose](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhfDPhDJGyAaMRW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVnXnieTWURuJPe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -178,7 +178,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhTNvLjJcGnFLlA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVHtnWIJMgaOUQX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -219,7 +219,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVJZPVjzwkgtqWL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVnNRWIJizLYwas?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -266,7 +266,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVTZvhNzPUybXnQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVRtniofCzoSfTr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -311,9 +311,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhzDlBDpbdSnHLC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhRZHiyfWzwnpEX?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/line?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/line?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/charts/chart-types/high-low.md b/chart-sdk/blazor/charts/chart-types/high-low.md index 3a2810eb7..f2a324bdf 100644 --- a/chart-sdk/blazor/charts/chart-types/high-low.md +++ b/chart-sdk/blazor/charts/chart-types/high-low.md @@ -1,13 +1,13 @@ --- layout: post -title: Hilo in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Hilo Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Hilo Chart Examples and Documentation | Syncfusion® +description: Learn how to render Blazor Hilo Charts using Syncfusion. Plot stock high and low price movements over time for each data point. +platform: Blazor +control: Charts documentation: ug --- -# Hilo in Blazor Charts Component +# Hilo Chart in Blazor ## Hilo @@ -58,9 +58,9 @@ This indicates that the data should be represented as a hilo chart, which shows } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrzNPLjzSqgHuAy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Hilo Chart](../images/financial-types/blazor-hilo-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhxZdsozWHsAlYC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Hilo Chart](../images/financial-types/blazor-hilo-chart.webp)" %} -N> Refer to the [Blazor Hilo Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/hilo-chart) feature tour page to know about its other groundbreaking feature representations and also explore the [Blazor Hilo Chart Example](https://blazor.syncfusion.com/demos/chart/hilo) to know how to render and configure the Hilo type series. +N> Refer to the [Blazor Hilo Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/hilo-chart) feature tour page to know about its other groundbreaking feature representations and also explore the [Blazor Hilo Chart Example](https://blazor.syncfusion.com/demos/chart/hilo?theme=fluent2) to know how to render and configure the Hilo type series. ## Binding data with series @@ -105,7 +105,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZrzNPLjzSqgHuAy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVxtRiyTsxJclLp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -154,7 +154,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBpjPVXpydPcQUK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrdNnCeTMnGqkcP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the hilo series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -206,7 +206,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrJjvrjpyuiQFNZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrxNniozMGZWtxz?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -252,7 +252,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBJXPhtpxNMtCrv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVRtHCoJMwKKiLF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -302,7 +302,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVJtFVjpRrQLAvc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBdDxMoJMGRJTSn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -349,7 +349,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhJXvVDTnpBHPCo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrHXdCIfiQEAddE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -400,7 +400,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLpNvLXpxyGcrgZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBRNxCIfWvrJFiT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -449,9 +449,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthTXPBZzRmJfCpW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrHNxWofWPJmGDm?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/line?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/line?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/charts/chart-types/histogram.md b/chart-sdk/blazor/charts/chart-types/histogram.md index bc7b628cf..dc8103eac 100644 --- a/chart-sdk/blazor/charts/chart-types/histogram.md +++ b/chart-sdk/blazor/charts/chart-types/histogram.md @@ -1,13 +1,13 @@ --- layout: post -title: Histogram in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Histogram Chart in Blazor Charts component and more. -platform: chart-sdk -control: Chart +title: Blazor Histogram Chart Examples and Documentation | Syncfusion® +description: Learn how to render Blazor Histogram Charts using Syncfusion. Display large data distributions visually with bin-based frequency aggregation. +platform: Blazor +control: Charts documentation: ug --- -# Histogram in Blazor Charts Component +# Histogram Chart in Blazor ## Histogram @@ -65,7 +65,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVpXPLjednCMkiw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Histogram Chart](../images/othertypes/blazor-histogram-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBdDdseJCEZMSUR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Histogram Chart](../images/othertypes/blazor-histogram-chart.webp)" %} ## Events @@ -132,7 +132,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrptbLDonwJmUEp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBnXxWSTsYhgybd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -197,9 +197,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhJXbLtoGiMbJGp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVdZHiozMuzKIBX?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/line?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/line?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/charts/chart-types/line.md b/chart-sdk/blazor/charts/chart-types/line.md index eebb11472..f28cfb5a0 100644 --- a/chart-sdk/blazor/charts/chart-types/line.md +++ b/chart-sdk/blazor/charts/chart-types/line.md @@ -1,13 +1,13 @@ --- layout: post -title: Line Chart in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Line Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Line Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Line Charts using Syncfusion. Visualize time-dependent data and trends at equal intervals with markers and tooltips. +platform: Blazor +control: Charts documentation: ug --- -# Line Chart in Blazor Charts Component +# Line Chart in Blazor ## Line @@ -56,9 +56,9 @@ To render a [Line](https://www.syncfusion.com/blazor-components/blazor-charts/ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLfNkWrgrqqRINz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart.](../images/chart-types-images/blazor-line-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhnDRCIzVNIknqD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart.](../images/chart-types-images/blazor-line-chart.webp)" %} -N> Refer to the [Blazor Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Line Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know how to represent time-dependent data, showing trends at equal intervals. +N> Refer to the [Blazor Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/line-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Line Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=fluent2) to know how to represent time-dependent data, showing trends at equal intervals. ## Binding data with series @@ -101,7 +101,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLfNkWrgrqqRINz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBdDnMyfLXbaCor?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -148,7 +148,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBpNasrAVmsWGMK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLnNHCyphiWonwH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the line series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -198,7 +198,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrfDYCBKrPPwAeD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLHZxCyprCJFVwL?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -241,7 +241,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLzZuWVAgVSvsir?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrnDHCSThBjCtMr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -284,7 +284,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVzDuWBAUUspqiL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVxtxWeJrrLUWEu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Width** @@ -327,7 +327,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLJXkMhKAzqdmaj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjrnDHMIpVBHrcAZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Multicolored line @@ -371,7 +371,7 @@ To render a multicolored line series in your chart, define the series [`Type`](h } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhfZYMLUfkRrUcB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhxjniSJBhbQKvs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -419,7 +419,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrTjasBgzXXURKs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhnXxCofrgjGfdG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -464,7 +464,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htBJXusBqzACyxwK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBdXRsefLKLEJTv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -511,7 +511,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthftYsrUzeKyodV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrnZnCyfhUSfkbD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -562,7 +562,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVTDkMhAIHPfJFn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLdZxWoTLUcFLTc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -612,9 +612,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLfDYsrUxgtYVoO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBRZHCeJVTrcdBT?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/line?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/line?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/charts/chart-types/pare-to.md b/chart-sdk/blazor/charts/chart-types/pare-to.md index 0e99e0e2b..1122da610 100644 --- a/chart-sdk/blazor/charts/chart-types/pare-to.md +++ b/chart-sdk/blazor/charts/chart-types/pare-to.md @@ -1,13 +1,13 @@ --- layout: post -title: Pareto in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Pareto chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Pareto Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Pareto Charts using Syncfusion. Combine column and line series to show individual values and their cumulative totals. +platform: Blazor +control: Charts documentation: ug --- -# Pareto in Blazor Charts Component +# Pareto Chart in Blazor ## Pareto @@ -63,7 +63,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVptvWuVRmwVTbC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Pareto Chart](../images/othertypes/blazor-pareto-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhntxiypUtzrGJW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Pareto Chart](../images/othertypes/blazor-pareto-chart.webp)" %} ## Binding data with series @@ -119,7 +119,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVptvWuVRmwVTbC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrHDHseTUXwimTq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -182,7 +182,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrTXPsYqgLVodRw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVRjdsIJAZkVFyp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -243,9 +243,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrJNbMOKUJJkngK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhdZHMozAsrnJzD?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/line?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/line?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/charts/chart-types/polar.md b/chart-sdk/blazor/charts/chart-types/polar.md index 9341880e6..a348ec2ee 100644 --- a/chart-sdk/blazor/charts/chart-types/polar.md +++ b/chart-sdk/blazor/charts/chart-types/polar.md @@ -1,13 +1,13 @@ --- layout: post -title: Polar in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Polar Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Polar Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Polar Charts using Syncfusion. Plot data by value and angle on a circular graph to compare quantitative aspects. +platform: Blazor +control: Charts documentation: ug --- -# Polar in Blazor Charts Component +# Polar Chart in Blazor ## Polar @@ -51,9 +51,9 @@ To render a [polar](https://www.syncfusion.com/blazor-components/blazor-charts/c } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthpXPhXfsXrrssZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Polar Chart](../images/polar-radar/blazor-polar-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrnDdiSJqrCwMSK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Polar Chart](../images/polar-radar/blazor-polar-chart.webp)" %} -N> Refer to our [Blazor Polar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/polar-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Polar Chart Example](https://blazor.syncfusion.com/demos/chart/polar-line) to know how to render and configure the Polar type chart. +N> Refer to our [Blazor Polar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/polar-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Polar Chart Example](https://blazor.syncfusion.com/demos/chart/polar-line?theme=fluent2) to know how to render and configure the Polar type chart. ## Binding data with series @@ -91,7 +91,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthpXPhXfsXrrssZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVdtxsyzKrTFWGn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Draw types @@ -134,7 +134,7 @@ To render a [line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzDbVjfMVssote?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVRNdCIJghGmvro?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Spline @@ -173,7 +173,7 @@ To render a [spline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthpNlLZTCqugtIw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBRNHiyzgKtsCBO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Area @@ -212,7 +212,7 @@ To render an [area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBzjlBXTWSRXqYZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhRXdiIJqgrYZwf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Stacked Area @@ -266,7 +266,7 @@ To render a [stacking area](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhJNvrtTiQtUrwf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhxDdiofAgoWzIA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Column @@ -305,7 +305,7 @@ To render a [column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrJZbhZfivRPCTM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrRDdsITATVQMOT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Stacked column @@ -356,7 +356,7 @@ To render a [stacking column](https://help.syncfusion.com/cr/blazor/Syncfusion.B } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLJXbBDTLZKLCRn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrnjdsyzApeUTnS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Range column @@ -403,7 +403,7 @@ To render a [range column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLpjlhZfVAjIYyK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhRZnieJUzQwlAV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Scatter @@ -444,7 +444,7 @@ To render a [scatter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LthfNlrDfBJUztOA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhRDxMIzAetNcOQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -487,7 +487,7 @@ To customize the start angle of the [Polar Chart](https://help.syncfusion.com/cr } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhTDPBZphQtaNHK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLHZnieJAImsbzI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Radius @@ -528,7 +528,7 @@ To customize the radius of the [Polar Chart](https://help.syncfusion.com/cr/blaz } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLJjFLZfLwTKJNf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBRNHsIJgyOncQJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -572,7 +572,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBztbVZJhErYnKm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhnjRWepAHrgWIx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -612,7 +612,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBJjFBjzqNSgVGn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLnZxWyTUHfdPob?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -654,7 +654,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhJtbhjTKiJHKjz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhHDniopAHxuFeT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -700,7 +700,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLTNPhDfKqtDxKX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrnZHWSfKxuAHZh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -745,9 +745,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLJDFBtfUpPvAFQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVxNnMSpKGilirT?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/line?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/line?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/charts/chart-types/radar.md b/chart-sdk/blazor/charts/chart-types/radar.md index b4fc080af..5f54f18b9 100644 --- a/chart-sdk/blazor/charts/chart-types/radar.md +++ b/chart-sdk/blazor/charts/chart-types/radar.md @@ -1,13 +1,13 @@ --- layout: post -title: Radar in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Radar Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Radar Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Radar Charts using Syncfusion. Plot data by value and angle on a circular graph to compare qualitative aspects. +platform: Blazor +control: Charts documentation: ug --- -# Radar in Blazor Charts Component +# Radar Chart in Blazor ## Radar @@ -54,9 +54,9 @@ To render a radar chart, set the series [Type](https://help.syncfusion.com/cr/bl } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXbrXfzZtZPkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Radar Chart with Line Series](../images/polar-radar/blazor-radar-chart-line-series.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVnjdMIfqQPknwH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Radar Chart with Line Series](../images/polar-radar/blazor-radar-chart-line-series.webp)" %} -N> Refer to the [Blazor Radar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/radar-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Radar Chart Example](https://blazor.syncfusion.com/demos/chart/polar-line) to know how to render and configure the Radar type chart. +N> Refer to the [Blazor Radar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/radar-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Radar Chart Example](https://blazor.syncfusion.com/demos/chart/polar-line?theme=fluent2) to know how to render and configure the Radar type chart. ### Draw type @@ -97,7 +97,7 @@ Similar to the polar chart, use the [`DrawType`](https://help.syncfusion.com/cr/ } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXbrXfzZtZPkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBxXnsopAlLnwmd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Binding data with series @@ -138,7 +138,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXbrXfzZtZPkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLnNRWepgvQLxld?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -181,7 +181,7 @@ To customize the start angle of the [Radar Chart](https://help.syncfusion.com/cr } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBpZPhtzpLTqzjV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVxjHiSzgaKIFvi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Coefficient in axis @@ -222,9 +222,9 @@ To customize the radius of the [Radar Chart](https://help.syncfusion.com/cr/blaz } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLJNPVjfzqCoYbb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLxtxCepqudAajV?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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. ## Empty points Data points with `null`, `double.NaN` or `undefined` values are considered empty. Empty data points are ignored and not plotted on the chart. @@ -267,7 +267,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhpXlLtzzpCwIHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLRtnWSzfCCnrqO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -307,7 +307,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLftFLZzTzHMHqg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBdDdWoJpMcePDn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -349,7 +349,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBTDFBNpJSRZBjo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrnZnWoffVsrkvy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -394,7 +394,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBJZFhjfzHWXEmy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrRZHMIzfhJuWQY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -439,9 +439,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrpNlrjpJdmOFva?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVHXRCyzpVwogJB?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/line?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/line?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/charts/chart-types/range-area.md b/chart-sdk/blazor/charts/chart-types/range-area.md index e9dd27145..6da2e5a1b 100644 --- a/chart-sdk/blazor/charts/chart-types/range-area.md +++ b/chart-sdk/blazor/charts/chart-types/range-area.md @@ -1,13 +1,13 @@ --- layout: post -title: Range Area in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Range Area Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Range Area Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Range Area Charts using Syncfusion. Visualize a range between high and low values per point with a filled area. +platform: Blazor +control: Charts documentation: ug --- -# Range Area in Blazor Charts Component +# Range Area Chart in Blazor ## Range area @@ -52,9 +52,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLKiLrRzNeaIzwr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Area Chart](../images/chart-types-images/blazor-range-area-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhdZHCSzfqGQwlI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Range Area Chart](../images/chart-types-images/blazor-range-area-chart.webp)" %} -N> Refer to our [Blazor Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Range Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-area?theme=bootstrap5) to know how to show variations in the data values for a given time. +N> Refer to our [Blazor Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Range Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-area?theme=fluent2) to know how to show variations in the data values for a given time. ## Binding data with series @@ -94,7 +94,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLKiLrRzNeaIzwr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLdDHCyfTfDRWBd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -136,7 +136,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVJXFiuLpnrqRsI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrxDxiSzzJUVgQP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the range area series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -181,7 +181,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVTZvskLpbcrqUA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVxZRseJTJntkwj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -219,7 +219,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLTjbWOLyWjwVNg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrdXxMIzzpYrBsM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -261,7 +261,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrKsLrRJtxArrAq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVHZnCIJTIWFeUy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Series Border** @@ -303,7 +303,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrKsLrRJtxArrAq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVdXdCITTopwXPG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -347,7 +347,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrfjYCUVcRPTeWM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBHXRMyJpIcphty?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -388,7 +388,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrpZOMgBGvjLZRF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthxtniyJpdNNgqr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -431,7 +431,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBpXksArwOUEwRY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhdjxCyfJdVokYw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -478,7 +478,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhfDYWghlZFKfRQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhHNxMIfJHejDAA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -524,9 +524,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrJZECqhFrrVKBi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBHNdMITpHPsYOi?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/line?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/line?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/charts/chart-types/range-column.md b/chart-sdk/blazor/charts/chart-types/range-column.md index 132134d97..a268f85a6 100644 --- a/chart-sdk/blazor/charts/chart-types/range-column.md +++ b/chart-sdk/blazor/charts/chart-types/range-column.md @@ -1,13 +1,13 @@ --- layout: post -title: Range Column in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Range Column Chart in Blazor Charts component and more. -platform: chart-sdk -control: Chart +title: Blazor Range Column Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Range Column Charts using Syncfusion. Visualize min and max values per category as vertical bars with two Y values. +platform: Blazor +control: Charts documentation: ug --- -# Range Column in Blazor Charts Component +# Range Column Chart in Blazor ## Range Column @@ -64,9 +64,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLgCLrnzdoaeqgs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart](../images/chart-types-images/blazor-range-column-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrRtRsoJJPUGkNx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Range Column Chart](../images/chart-types-images/blazor-range-column-chart.webp)" %} -N> Refer to the [Blazor Range Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Range Column Chart Example](https://blazor.syncfusion.com/demos/chart/range-column?theme=bootstrap5) to know how to show variations in the data values for a given time. +N> Refer to the [Blazor Range Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Range Column Chart Example](https://blazor.syncfusion.com/demos/chart/range-column?theme=fluent2) to know how to show variations in the data values for a given time. ## Binding data with series @@ -119,7 +119,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLgCLrnzdoaeqgs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLdtxMozTFEzDUv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -175,7 +175,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVTjPsuPHANPsBK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBRZdCIpTaURVZk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the range column series. By configuring this property with gradient values will create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -243,7 +243,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLzXvrDDXLBCKlj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVxDRsyTJYoEPWx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -296,7 +296,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrfjlVjXDAdyObH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBHtnWyTpYlTLeU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -352,7 +352,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrztbhXXZogMLpu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhHjnCIJeDWqkHO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Series Border** @@ -408,7 +408,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrztbhXXZogMLpu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVHXnCofSNTXSUY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Column Spacing** @@ -464,7 +464,7 @@ The [ColumnSpacing](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLUWrrnTnRLsksm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrRNdMezetGJwnh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Corner radius @@ -518,7 +518,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBSDTtTAfxgaRes?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart with corner radius](../images/chart-types-images/blazor-range-column-corner-radius.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthdtdCIpeDkFZox?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Range Column Chart with corner radius](../images/chart-types-images/blazor-range-column-corner-radius.webp)" %} Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -582,7 +582,7 @@ Customize the corner radius for individual points in the chart series using the } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLejTXzqothXDiL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Range Column Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-range-column-corner-radius-onPointRender.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLxDdWozSCBqmQz?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Range Column Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-range-column-corner-radius-onPointRender.webp)" %} ## Empty points @@ -644,7 +644,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBJDPLjtjuPynMF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhRXHsSToCooMTw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -702,7 +702,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBztlBtDsChfQHL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBxZHCSzoMbUwoq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -764,7 +764,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htBzXFVjtshfELkG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBHZdCSJIrtedNG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -830,7 +830,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthfZvBDXMSZESmh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthnjHWeTSBqtbPB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -888,9 +888,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVztaigzJrTUPvR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhntdiypIBIURJF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -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 Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. +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 Chart Example](https://blazor.syncfusion.com/demos/chart/line?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/charts/chart-types/range-step-area.md b/chart-sdk/blazor/charts/chart-types/range-step-area.md index 255e529dd..c3a1d5dd7 100644 --- a/chart-sdk/blazor/charts/chart-types/range-step-area.md +++ b/chart-sdk/blazor/charts/chart-types/range-step-area.md @@ -1,13 +1,13 @@ --- layout: post -title: Range Step Area in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Range Step Area Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Range Step Area Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Range Step Area Charts using Syncfusion. Show continuous data as a step pattern between high and low values. +platform: Blazor +control: Charts documentation: ug --- -# Range Step Area in Blazor Charts Component +# Range Step Area Chart in Blazor ## Range Step Area @@ -58,7 +58,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJZlsOgSpJondZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Range Step Area Chart](../images/chart-types-images/blazor-range-step-area.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhHNdCSTeUUWnBW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Range Step Area Chart](../images/chart-types-images/blazor-range-step-area.webp)" %} ## Binding data with series @@ -105,9 +105,9 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJZlsOgSpJondZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhxNHCefyKmumOG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -> Refer to the [Blazor Range Step Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-step-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Range Step Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-step-area?theme=bootstrap5) to know how to show variations in the data values for a given time. +> Refer to the [Blazor Range Step Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-step-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Range Step Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-step-area?theme=fluent2) to know how to show variations in the data values for a given time. ## Series customization @@ -158,7 +158,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrJjFMuAepPfLMK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhxjdCepyztmnhW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the range step area series. By configuring this property with gradient values will create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -212,7 +212,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrfZFWYKegwYTsm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrxtRMSTSfKdkID?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -259,7 +259,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLzDvWYKIIkDoAH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrxtHseTefmBrTx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -306,7 +306,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVztFsugovVdcLp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLnjHWyTISDCWzj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **StepPosition** @@ -353,7 +353,7 @@ Use the [`StepPosition`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhTNliuUdrVOsTt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhHZxWyzoSLQhXO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Series Border** @@ -400,9 +400,9 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVztFsugovVdcLp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrxNxiopeSoKvyh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -> 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/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. +> 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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. ## Events @@ -456,7 +456,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVptbCagmtfNOtA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVRDnCyzyomeaIN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -509,7 +509,7 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVJXkWKqjxGQeNS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBdXRWeJSRsLBwT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## See also diff --git a/chart-sdk/blazor/charts/chart-types/scatter.md b/chart-sdk/blazor/charts/chart-types/scatter.md index 0d21555e7..9dcb152b7 100644 --- a/chart-sdk/blazor/charts/chart-types/scatter.md +++ b/chart-sdk/blazor/charts/chart-types/scatter.md @@ -1,13 +1,13 @@ --- layout: post -title: Scatter in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Scatter Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Scatter Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Scatter Charts using Syncfusion. Visualize the relationship between two numeric parameters as individual data points. +platform: Blazor +control: Charts documentation: ug --- -# Scatter in Blazor Charts Component +# Scatter Chart in Blazor ## Scatter @@ -50,9 +50,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfXFhZrfpVHHMy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Scatter Chart](../images/chart-types-images/blazor-scatter-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBdjxiSzymgPeku?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Scatter Chart](../images/chart-types-images/blazor-scatter-chart.webp)" %} -N> Refer to the [Blazor Scatter Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Scatter Chart Example](https://blazor.syncfusion.com/demos/chart/scatter?theme=bootstrap5) to know how to plot data with two numeric parameters. +N> Refer to the [Blazor Scatter Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Scatter Chart Example](https://blazor.syncfusion.com/demos/chart/scatter?theme=fluent2) to know how to plot data with two numeric parameters. ## Binding data with series @@ -95,7 +95,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfXFhZrfpVHHMy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhdZnsepecGWwBX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -142,7 +142,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htrfXbhXVJoqDDfv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhdXdsSfylBdcFe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the scatter series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -203,7 +203,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVftlhXLzbEWQlQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBxtnMSJIlIgsQI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -250,7 +250,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhTjFhNLoCriEer?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLdtnCITSvcEUKe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Shape** @@ -295,7 +295,7 @@ The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLptlrZVoTGBDGT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVRjHMIToEtOwxC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -346,7 +346,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLJXvLDrSGcnrLx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLxXdsSzSkgnaRb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -393,7 +393,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBJDbBjrelxszvS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVdDRMezIuReXth?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -444,7 +444,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBpjbrXVSOoenjQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBdjHWeJnDNJsoD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -500,7 +500,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBpNvrDVRtfleFJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLdDxCypRtLEDhI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -551,9 +551,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthJDPhDUwdAWIyK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVxZdiyTnteGhgD?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/line?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/line?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/charts/chart-types/spline-area.md b/chart-sdk/blazor/charts/chart-types/spline-area.md index dc5fa0b7c..307ff15dd 100644 --- a/chart-sdk/blazor/charts/chart-types/spline-area.md +++ b/chart-sdk/blazor/charts/chart-types/spline-area.md @@ -1,13 +1,13 @@ --- layout: post -title: Spline Area in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Spline Area Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Spline Area Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Spline Area Charts using Syncfusion. Visualize time-dependent data with smooth curved boundaries and filled regions. +platform: Blazor +control: Charts documentation: ug --- -# Spline Area in Blazor Charts Component +# Spline Area Chart in Blazor ## Spline area @@ -50,9 +50,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhfXaCAqYANeOoh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Area Chart](../images/chart-types-images/blazor-spline-area-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrnDRCSzdWxgsyX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Spline Area Chart](../images/chart-types-images/blazor-spline-area-chart.webp)" %} -N> Refer to the [Blazor Spline Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Spline Area Chart Example](https://blazor.syncfusion.com/demos/chart/spline-area?theme=bootstrap5) to know how to connect the data points with smooth curves. +N> Refer to the [Blazor Spline Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Spline Area Chart Example](https://blazor.syncfusion.com/demos/chart/spline-area?theme=fluent2) to know how to connect the data points with smooth curves. ## Binding data with series @@ -95,7 +95,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhfXaCAqYANeOoh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrHZdCefnVDxJeZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -142,7 +142,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthTDECqUufPwlLm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVRDxiyfxhxkeQM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the spline area series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -192,7 +192,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrTXasAquooCQwR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBdXxWIfRKMpqJb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -236,7 +236,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLfjYiAqaxUiimx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVdDdsozRqynyGu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -280,7 +280,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLfZuiqUEmHRzWx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrxtHiIpxAvOywu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Series Border** @@ -323,7 +323,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLfZuiqUEmHRzWx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVdtRsopHJAzzaR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -371,7 +371,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBpDOWAUkEkACCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBnDdiSzHTdmiAz?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -416,7 +416,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLzNusKJDMZQXEW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBdDRsIpnIDrqvW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -463,7 +463,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrJtuMqTDVNZqYo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVdNdMopxIgkyDX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -514,7 +514,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLTXOMgptKfYVRT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrHXdMoznSRMPEE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -564,9 +564,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVJZYCUptJWVhWX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBdjRiSznnWyaXm?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/line?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/line?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/charts/chart-types/spline-range-area.md b/chart-sdk/blazor/charts/chart-types/spline-range-area.md index d79d6f11f..f3da68451 100644 --- a/chart-sdk/blazor/charts/chart-types/spline-range-area.md +++ b/chart-sdk/blazor/charts/chart-types/spline-range-area.md @@ -1,13 +1,13 @@ --- layout: post -title: Spline Range Area in Blazor Charts component | Syncfusion® -description: Checkout and learn here all the features about Spline Range Area Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Spline Range Area Chart Examples | Syncfusion® +description: Learn how to create Blazor Spline Range Area Charts using Syncfusion. Visualize high and low ranges with smooth curves over continuous time. +platform: Blazor +control: Charts documentation: ug --- -# Spline Range Area in Blazor Charts Component +# Spline Range Area Chart in Blazor ## Spline Range Area @@ -50,9 +50,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqMVBdfdNOtUiF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Range Area Chart](../images/chart-types-images/blazor-spline-range-area-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrHNdWITGNWlHjS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Spline Range Area Chart](../images/chart-types-images/blazor-spline-range-area-chart.webp)" %} -> Refer to the [Blazor Spline Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Spline Range Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-area?theme=bootstrap5) to know how to show variations in the data values for a given time. +> Refer to the [Blazor Spline Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Spline Range Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-area?theme=fluent2) to know how to show variations in the data values for a given time. ## Binding data with series @@ -91,7 +91,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBqMVBdfdNOtUiF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhHDHieTmDeUYIH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -134,7 +134,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVfDvCaUYLJHtBm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBRNHMeTQMWnJQM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the spline range area series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -180,7 +180,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBzNvCEqYUQXrjC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhHDnsepGCoUwAK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -219,7 +219,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpDPWOKOILrqNs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhdZnMyTQWlBFEx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -261,7 +261,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVKiVVHpnirchKL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLHNdWoJQrhXhPz?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -303,7 +303,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVKiVVHpnirchKL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLHjnCSzwBoePzM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -347,7 +347,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthzDOiUgzqrNpYT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBxjRsSfcVvHscU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -388,7 +388,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVfXOsgKpAGzyOB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLntHiyTwUXlyoT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -431,7 +431,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBJjaCqApyWTnmd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhRNRMIzmAxEhtP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -478,7 +478,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBfZliuzDpTiTHL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtLnjHWITwKuVTJI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -524,9 +524,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthJjOWAAyDCPNQg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBdXdiypwfsyFUJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} -> 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/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. +> 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/line?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/charts/chart-types/spline.md b/chart-sdk/blazor/charts/chart-types/spline.md index fc37ae592..0c51f50ce 100644 --- a/chart-sdk/blazor/charts/chart-types/spline.md +++ b/chart-sdk/blazor/charts/chart-types/spline.md @@ -1,13 +1,13 @@ --- layout: post -title: Spline in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Spline Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Spline Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Spline Charts using Syncfusion. Connect data points with smooth curves for visually continuous trends over time. +platform: Blazor +control: Charts documentation: ug --- -# Spline in Blazor Charts Component +# Spline Chart in Blazor ## Spline @@ -50,9 +50,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrzNECVpIkCNalF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Spline Chart](../images/chart-types-images/blazor-spline-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZhHtxMofGoshPEc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Spline Chart](../images/chart-types-images/blazor-spline-chart.webp)" %} -N> Refer to the [Blazor Spline Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Spline Chart Example](https://blazor.syncfusion.com/demos/chart/spline?theme=bootstrap5) to know how to connect the data points with smooth curves. +N> Refer to the [Blazor Spline Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/spline-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Spline Chart Example](https://blazor.syncfusion.com/demos/chart/spline?theme=fluent2) to know how to connect the data points with smooth curves. ## Binding data with series @@ -95,7 +95,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrzNECVpIkCNalF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrxDRCeJwISAtJc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Type of spline @@ -138,7 +138,7 @@ To specify the type of [Spline Chart](https://help.syncfusion.com/cr/blazor/Sync } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfDECrfnTCtZRL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLHNHsyTcdqIjgI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -185,7 +185,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrJXkiLJnynkhnP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhnZnCSTQnGpWXO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the spline series. By configuring this property with gradient values will create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -235,7 +235,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBTtEMrfnbhFqAx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVdXRWyTcwXZwlb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -278,7 +278,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVpjaWVJHYZXtWY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBHXRMopwGeAGlZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -321,7 +321,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBzjasVzwMBgJRe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLxDdMoTQmwySCT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Width** @@ -364,7 +364,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBfDYCrpmhBcEPx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhxZxCyzcmavFSk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -412,7 +412,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htVpXEWBJwUvJUOz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBnXnsyfGPqimfW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -457,7 +457,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrptEWrfGoDmItg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhnXRWeJQlnPnRz?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Border) property to customize the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointBorder.html#Syncfusion_Blazor_Charts_ChartEmptyPointBorder_Width) and [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointBorder.html#Syncfusion_Blazor_Charts_ChartEmptyPointBorder_Color) of the border for empty points. @@ -502,7 +502,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVTjuCrTQHNhrUl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVnjRWepQOSJATJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -553,7 +553,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLpXuMLzmHEOphb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhxNRMofQOEoorL?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -603,9 +603,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBzjYCrTmlVsnFi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLHDnMoTvXKrEhR?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/line?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/line?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/charts/chart-types/stack-area.md b/chart-sdk/blazor/charts/chart-types/stack-area.md index 39e4b4857..7a207e60c 100644 --- a/chart-sdk/blazor/charts/chart-types/stack-area.md +++ b/chart-sdk/blazor/charts/chart-types/stack-area.md @@ -1,13 +1,13 @@ --- layout: post -title: 100% Stacked Area in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about 100% Stacked Area Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor 100% Stacked Area Chart Examples | Syncfusion® +description: Learn how to render 100% Stacked Area Charts in Blazor using Syncfusion. Each series is shown as a percentage of the total, summing to 100. +platform: Blazor +control: Charts documentation: ug --- -# 100% Stacked Area in Blazor Charts Component +# 100% Stacked Area Chart in Blazor ## 100% Stacked Area Chart @@ -52,9 +52,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBAiVhnTxBScRGk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Area100 Chart](../images/chart-types-images/blazor-stacked-area-100-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLRXRCyTFVmbpcI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Area100 Chart](../images/chart-types-images/blazor-stacked-area-100-chart.webp)" %} -N> Refer to the [Blazor 100% Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor 100% Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-area?theme=bootstrap5) to know how to render and configure the 100% Stacked Area type chart. +N> Refer to the [Blazor 100% Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor 100% Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-area?theme=fluent2) to know how to render and configure the 100% Stacked Area type chart. ## Binding data with series @@ -99,7 +99,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBAiVhnTxBScRGk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBRtRWITPqhAFbo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -148,7 +148,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBztPikzoCgUnJJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrHNRCoJbURZQdi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the 100% stacked area series. By configuring this property with gradient values will create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -218,7 +218,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVfjFsEJyUoObkx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthRZxsSTbAYSlxo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -263,7 +263,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhpZFskTeJApMPq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthxXnseJvTbQAnQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -314,7 +314,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLpNvCEpoorqjBb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVxDnsoJvHTCPck?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Series Border** @@ -365,7 +365,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLAiBrHpHBFoZcx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhHNnCepFRdqRKC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -429,7 +429,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrTZECqgmjYQlyI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVntHCSfbdFQgrD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -489,7 +489,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLfjOMAKcWwKCGj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhdZHWepPmMVcOd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -551,7 +551,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVpNasqqwTjdxmq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVnNHMIfPQgLkDk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Stack labels @@ -609,7 +609,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXByDxrngYpMFkxd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBRXdsIJlwbPkhK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Customization @@ -695,7 +695,7 @@ Customize the border of the stack labels using the [ChartStackLabelBorder](https }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBSZxVnqOcrRgBw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLRjxMITFbsywsv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -759,7 +759,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhztliaTolOBJmw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBdNHMozvbTNCmB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -816,9 +816,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLTXuCUUmeoHyRh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBnZnWITllRijAH?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/line?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/line?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/charts/chart-types/stack-bar.md b/chart-sdk/blazor/charts/chart-types/stack-bar.md index 157a3d083..42c10c274 100644 --- a/chart-sdk/blazor/charts/chart-types/stack-bar.md +++ b/chart-sdk/blazor/charts/chart-types/stack-bar.md @@ -1,13 +1,13 @@ --- layout: post -title: 100% Stacked Bar in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about 100% Stacked Bar Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor 100% Stacked Bar Chart Examples | Syncfusion® +description: Learn how to render 100% Stacked Bar Charts in Blazor using Syncfusion. Each segment is shown as a percentage share of the total per category. +platform: Blazor +control: Charts documentation: ug --- -# 100% Stacked Bar in Blazor Charts Component +# 100% Stacked Bar Chart in Blazor ## 100% Stacked Bar @@ -56,9 +56,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBpNksqIVtklZvQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar100 Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhnZdCeplYcrvqE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Bar100 Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.webp)" %} -N> Refer to the [Blazor 100% Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart) feature tour page to know about its other groundbreaking feature representations. You can also explore the [Blazor 100% Stacked Bar Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-bar?theme=bootstrap5) to know how to render and configure the 100% Stacked Bar type chart. +N> Refer to the [Blazor 100% Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart) feature tour page to know about its other groundbreaking feature representations. You can also explore the [Blazor 100% Stacked Bar Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-bar?theme=fluent2) to know how to render and configure the 100% Stacked Bar type chart. ## Binding data with series @@ -107,7 +107,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBpNksqIVtklZvQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthRDHCSTEjAtIiD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -160,7 +160,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrpZYsKIrKbzufU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrRtnMITutyaPYS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the 100% stacked bar series. By configuring this property with gradient values will create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -244,7 +244,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLfjEMKehTFTSff?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLnjnCIJYXloKgl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -293,7 +293,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrztkMqIhobKOaD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhHZxCIJEijeiKq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -346,7 +346,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBpDkMAeBRSeNjy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrxNRWopaMLRFUX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Series Border** @@ -399,7 +399,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBpDkMAeBRSeNjy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrntHCSzOCHgSkg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Corner radius @@ -451,7 +451,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVejpNfAyexsHPk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked bar 100 with corner radius](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVHjRiSJYrfvrJS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked bar 100 with corner radius](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.webp)" %} Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -508,7 +508,7 @@ Customize the corner radius for individual points in the chart series using the } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVSNTZzKmxcZcBe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked bar 100 with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointRender.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLxNRCyJaVcVrNy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked bar 100 with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointRender.webp)" %} ## Empty points @@ -563,7 +563,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVfXEMAIhPsbKKj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLxDnWSJahaPsxP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -614,7 +614,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLTNkCUehvvJXOw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDLxNxMozaghClCA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -667,7 +667,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLfNuMASAjCTbTh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNrHjxMefYgTlZeZ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Stack labels @@ -739,7 +739,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhojdrHpjhTEnIB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLRDnsIJaUQrCRx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Customization @@ -838,7 +838,7 @@ Customize the border of the stack labels using the [ChartStackLabelBorder](https } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIXnLHpDphNnvF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBRDHWIfYqkaptg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -910,7 +910,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBJNYiqSKsXlnsN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBxjHMyTkzBqjQw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -958,9 +958,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrpXusgoUVCdWTL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVHZxMofafpzXIZ?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/line?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/line?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/charts/chart-types/stack-column.md b/chart-sdk/blazor/charts/chart-types/stack-column.md index 4c1067abe..503f10fb1 100644 --- a/chart-sdk/blazor/charts/chart-types/stack-column.md +++ b/chart-sdk/blazor/charts/chart-types/stack-column.md @@ -1,13 +1,13 @@ --- layout: post -title: 100% Stacked Column in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about 100% Stacked Column Chart in Blazor Charts component and more. -platform: chart-sdk -control: Chart +title: Blazor 100% Stacked Column Chart Examples | Syncfusion® +description: Learn how to render 100% Stacked Column Charts in Blazor using Syncfusion. Each segment is shown as a percentage contribution to the total. +platform: Blazor +control: Charts documentation: ug --- -# 100% Stacked Column in Blazor Charts Component +# 100% Stacked Column Chart in Blazor ## 100% Stacked Column @@ -56,9 +56,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrfZusKfwGsxziN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column100 Chart](../images/chart-types-images/blazor-stacked-column-100-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhnNniyzESblqnr?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Column100 Chart](../images/chart-types-images/blazor-stacked-column-100-chart.webp)" %} -N> Refer to the [Blazor 100% Stacked Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor 100% Stacked Column Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-column?theme=bootstrap5) to know how to render and configure the 100% Stacked Column type chart. +N> Refer to the [Blazor 100% Stacked Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor 100% Stacked Column Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-column?theme=fluent2) to know how to render and configure the 100% Stacked Column type chart. ## Binding data with series @@ -107,7 +107,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrfZusKfwGsxziN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrnNRCyTYdrHhbs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -160,7 +160,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLJZEMqpcuWJVqq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhRZnWeJkHSrFqa?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the 100% stacked column series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -244,7 +244,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLpjuMAzvXXBMPY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLHDxsefYdQTnQk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -293,7 +293,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhzNEWUfbhCGWta?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBxNRMSzYROPFjN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -346,7 +346,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLfNkWqJvLPaVvE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhHDxWyTacVDDCd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Series Border** @@ -399,7 +399,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLfNkWqJvLPaVvE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthnXnWefuQSuSGu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Corner radius @@ -451,7 +451,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrytzZpqmFAhCEn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Stacked Column 100 Chart with corner radius](../images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBHXRMopumbBjUv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Stacked Column 100 Chart with corner radius](../images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.webp)" %} Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -508,7 +508,7 @@ Customize the corner radius for individual points in the chart series using the } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjroXTtTUvBXPRDt?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Stacked Column 100 Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrHDdMofElDqCaR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Stacked Column 100 Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.webp)" %} ## Empty points @@ -563,7 +563,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVTDOsUTvSZFJrs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVdtRWIJEvUfXmj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -614,7 +614,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBftOigTlvMAcAr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrntRsefOPySIQM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -667,7 +667,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBzjOiKJPvwwvgy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBHDdWeJYvQmFTF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Stack labels @@ -737,7 +737,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrSNdhdTtoODqWV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLRjdMITkuXBGmh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Customization @@ -834,7 +834,7 @@ Customize the border of the stack labels using the [ChartStackLabelBorder](https }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjByDnrnpjdwQmCP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrxZdCofOkBnVJx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -905,7 +905,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrfXEWAJvYesKuJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLHZHiIpaEkHRlC?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -952,10 +952,10 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLzjOsUzYZXkqsk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVnXnCofOOeRyeF?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/line?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/line?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/charts/chart-types/stack-line.md b/chart-sdk/blazor/charts/chart-types/stack-line.md index b256f7ab7..65920b941 100644 --- a/chart-sdk/blazor/charts/chart-types/stack-line.md +++ b/chart-sdk/blazor/charts/chart-types/stack-line.md @@ -1,13 +1,13 @@ --- layout: post -title: 100% Stacked Line in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about 100% Stacked Line Chart in Blazor Charts component and more. -platform: chart-sdk -control: Chart +title: Blazor 100% Stacked Line Chart Examples | Syncfusion® +description: Learn how to render 100% Stacked Line Charts in Blazor using Syncfusion. Each series is shown as a percentage of the total, summing to 100. +platform: Blazor +control: Charts documentation: ug --- -# 100% Stacked Line in Blazor Charts Component +# 100% Stacked Line Chart in Blazor ## 100% Stacked Line @@ -73,9 +73,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthfjusLTJpWigyi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Line100 Chart](../images/chart-types-images/blazor-stacked-line-100-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthRZHCySWYQLCMB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Line100 Chart](../images/chart-types-images/blazor-stacked-line-100-chart.webp)" %} -N> Refer to the [Blazor 100% Stacked Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-line-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor 100% Stacked Line Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-line?theme=bootstrap5) to know how to render and configure the 100% Stacked Line type chart. +N> Refer to the [Blazor 100% Stacked Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-line-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor 100% Stacked Line Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-line?theme=fluent2) to know how to render and configure the 100% Stacked Line type chart. ## Binding data with series @@ -141,7 +141,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthfjusLTJpWigyi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVRDxCyerZrprat?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -211,7 +211,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhpNvMxVrNGkxdr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthxNxieIrNzQCBf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the 100% stacked line series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -295,7 +295,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBTXlMxLPhEYpdw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVRXnCeShjcVyCt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -361,7 +361,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhJtPixLVgdYjtA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhdDHWySVtEpGxQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Width** @@ -427,7 +427,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrTDFWRrUwyyFzg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htVdXxCoerirtjhT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -493,7 +493,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhUsBrnVIxJdFqq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrnjHMIerWfoqWk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -557,7 +557,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBzjkCLTJvEceAo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhHXHWyIVMwIlBo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -617,7 +617,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhzZECrpyXsTCTm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrdZxCSSBrigRxM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -679,7 +679,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhpjaihpyjGvmon?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDrRjnMIIBLJhDsA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Stack labels @@ -752,7 +752,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLeNxrxptwavgKW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBnNnWeoLUQpFre?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Customization @@ -854,7 +854,7 @@ Customize the border of the stack labels using the [ChartStackLabelBorder](https } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDByZdBHfjFPhexI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrHNRWyyhJDNHrU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -926,7 +926,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLpZvBiCLhmMMJU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXhdNniIoLzVRzqt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -997,9 +997,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXLpZlhMCrpBJvmA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBxNnseeLzIBMfv?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/line?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/line?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/charts/chart-types/stacked-area.md b/chart-sdk/blazor/charts/chart-types/stacked-area.md index 624852a44..f182b4abd 100644 --- a/chart-sdk/blazor/charts/chart-types/stacked-area.md +++ b/chart-sdk/blazor/charts/chart-types/stacked-area.md @@ -1,13 +1,13 @@ --- layout: post -title: Stacked Area in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Stacked Area Chart in Blazor Charts component and more. -platform: chart-sdk -control: Chart +title: Blazor Stacked Area Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Stacked Area Charts using Syncfusion. Show individual contributions to a total over time by stacking Y values. +platform: Blazor +control: Charts documentation: ug --- -# Stacked Area in Blazor Charts Component +# Stacked Area Chart in Blazor ## Stacked Area @@ -52,9 +52,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsVLxzRMlYUSx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Area Chart](../images/chart-types-images/blazor-stacked-area-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBHDxMySLSkqXCu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Area Chart](../images/chart-types-images/blazor-stacked-area-chart.webp)" %} -N> Refer to the [Blazor Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-area?theme=bootstrap5) to know how to render and configure the Stacked Area type chart. +N> Refer to the [Blazor Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-area?theme=fluent2) to know how to render and configure the Stacked Area type chart. ## Binding data with series @@ -99,7 +99,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsVLxzRMlYUSx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhxXdMeeVHrKRjX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -148,7 +148,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLTNPsufiIAQhTr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBnjxWeSBneTQAO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the stacked area series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -218,7 +218,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBpXbWYTilVqwGp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBdtnWySVdwoIdH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -264,7 +264,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLTXvsYzrjDnWhZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrRNxCeeVQXIarx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -315,7 +315,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhKsrhdpxrCydRe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBxDdWoyVQfZHpg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Series Border** @@ -366,7 +366,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhKsrhdpxrCydRe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjhxXniSoBGkVNPO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -430,7 +430,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBpjEsgAolUQBDo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDrRZdiyoBbKWrAT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -490,7 +490,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhJXksUqIaKdTsV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBdjHWoIVbSTEdn?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -552,7 +552,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBTNaCggdjLzXLg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLxZnieeVlFRacU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Stack labels @@ -616,7 +616,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNryjdBnTsAhjnHH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLHjHWIyLkijnpi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Customization @@ -708,7 +708,7 @@ Customize the border of the stack labels using the [ChartStackLabelBorder](https }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLoDxLdfizfRptS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLHDxseyhkUUvoR?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -772,7 +772,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVTjviYzAmlMaxt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBnNnMyyrOenPZY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -843,9 +843,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrfZuMAURdafsLu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhdZnsSILYwRKSs?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/line?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/line?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/charts/chart-types/stacked-bar.md b/chart-sdk/blazor/charts/chart-types/stacked-bar.md index 2b8aabd05..8a4939f68 100644 --- a/chart-sdk/blazor/charts/chart-types/stacked-bar.md +++ b/chart-sdk/blazor/charts/chart-types/stacked-bar.md @@ -1,13 +1,13 @@ --- layout: post -title: Stacked Bar in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Stacked Bar Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Stacked Bar Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Stacked Bar Charts using Syncfusion. Show individual Y values contributing to a total per category as horizontal bars. +platform: Blazor +control: Charts documentation: ug --- -# Stacked Bar in Blazor Charts Component +# Stacked Bar Chart in Blazor ## Stacked Bar @@ -56,9 +56,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTtEsUyZmdwAXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Bar Chart](../images/chart-types-images/blazor-stacked-bar-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBdXdMdiaLeBUGA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Bar Chart](../images/chart-types-images/blazor-stacked-bar-chart.webp)" %} -N> Refer to the [Blazor Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-bar-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Stacked Bar Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-bar?theme=bootstrap5) to know how to to render and configure the Stacked Bar type chart. +N> Refer to the [Blazor Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-bar-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Stacked Bar Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-bar?theme=fluent2) to know how to to render and configure the Stacked Bar type chart. ## Binding data with series @@ -107,7 +107,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTtEsUyZmdwAXe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBHZnCRCugWVigJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -160,7 +160,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhpZEiqICMUekYe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthdXRiRsuUmCYNI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the stacked bar series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -244,7 +244,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthpjuCqesrLAxoa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBHDxWHsOTUNDeN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -293,7 +293,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBfXkWUeCAMCYmg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLdtRMdVdmBJpaA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -346,7 +346,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrTDEWKesAljlaK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNBRtHMRLnFdktCO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Series Border** @@ -399,7 +399,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrTDEWKesAljlaK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBxjRMRhRujXbxu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Corner radius @@ -451,7 +451,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLIXzXpqbHxThSx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked bar chart with corner radius](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBRNxMnVHuVFmMW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked bar chart with corner radius](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius.webp)" %} Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -507,7 +507,7 @@ Customize the corner radius for individual points in the chart series using the } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVIjTXJKkhNeecS?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhHjxWnBxubKzsB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.webp)" %} ## Stacking group @@ -553,7 +553,7 @@ The [StackingGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBzZFrZWEJlJFRK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVHjdiHrwtUhRYG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -608,7 +608,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhJNaiKeMoNBCQx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhRjniHBcZondri?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -659,7 +659,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLTtaMAoConUbUM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBdDxMHVmZbMLkX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -712,7 +712,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htVTNuWAoCRpQIFu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtVxXHsxLQCEXHur?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Stack labels @@ -781,7 +781,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrSNxhHTLzDPlkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBdNnsnhchrKRfy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Customization @@ -878,7 +878,7 @@ Customize the border of the stack labels using the [ChartStackLabelBorder](https }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLeXRBdJVyXgzXA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBHtxixLcLyuZUY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -949,7 +949,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBJjYMAosmGPGaJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLRtHiRrcUZRCYb?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -996,9 +996,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLztOMgIiFJUSqt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrdDxWnBwKgyLpP?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/line?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/line?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/charts/chart-types/stacked-column.md b/chart-sdk/blazor/charts/chart-types/stacked-column.md index 033c8ac24..20ef7f3ee 100644 --- a/chart-sdk/blazor/charts/chart-types/stacked-column.md +++ b/chart-sdk/blazor/charts/chart-types/stacked-column.md @@ -1,13 +1,13 @@ --- layout: post -title: Stacked Column in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Stacked Column Chart in Blazor Charts component and more. -platform: chart-sdk -control: Chart +title: Blazor Stacked Column Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Stacked Column Charts using Syncfusion. Show individual Y values contributing to a total per category as vertical bars. +platform: Blazor +control: Charts documentation: ug --- -# Stacked Column in Blazor Charts Component +# Stacked Column Chart in Blazor ## Stacked Column @@ -62,9 +62,9 @@ To render a [stacked column](https://www.syncfusion.com/blazor-components/blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBJXasqJzvlIjSR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Column Chart](../images/chart-types-images/blazor-stacked-column-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDhnjxWnLcSBVHZf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Column Chart](../images/chart-types-images/blazor-stacked-column-chart.webp)" %} -N> Refer to the [Blazor Stacked Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Stacked Column Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-column?theme=bootstrap5) to know how to render and configure the Stacked Column type chart. +N> Refer to the [Blazor Stacked Column Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-column-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Stacked Column Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-column?theme=fluent2) to know how to render and configure the Stacked Column type chart. ## Binding data with series @@ -113,7 +113,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBJXasqJzvlIjSR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrHjdCdLmeImSVV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -166,7 +166,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrfDkMKfeMORbzp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVxNHWxBwSvSbwS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the stacked column series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -250,7 +250,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLztEWATezfZfuv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBHtHMnBcnCSzBf?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -299,7 +299,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthTtOsgJeIvtQui?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZLHZdWdBmxfAoWN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -352,7 +352,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLpXEsqfecVJWHB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLdNxWnLmHHRMnP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Series Border** @@ -405,7 +405,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLpXEsqfecVJWHB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLxDHMHrQwXaiHy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Corner radius @@ -456,7 +456,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZByXTjJqkyCcSge?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked column chart with corner radius](../images/chart-types-images/blazor-stacked-column-chart-corner-radius.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNBdNdCdBGmgIHRs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked column chart with corner radius](../images/chart-types-images/blazor-stacked-column-chart-corner-radius.webp)" %} Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -513,7 +513,7 @@ Customize the corner radius for individual points in the chart series using the } } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBIZpjfKYcxqQNe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Stacked column chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrxNxMHLwcRTQWv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked column chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.webp)" %} ## Stacking group @@ -559,7 +559,7 @@ The [StackingGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrqWBhRJHPHyIOf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLHXRMdVwwOMgjM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -614,7 +614,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrJZOMgpnLtYgjH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLHNdiHLcFgnkiu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -665,7 +665,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLpjYMqTRAYWJsJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVnNRiRrmaiBKwd?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -718,7 +718,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrJXaMqTnowQIMp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVnNHCxVcEGZVie?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Stack labels @@ -787,7 +787,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBSjRhHzLworgii?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthHjHsxVlDLeRlv?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Customization @@ -884,7 +884,7 @@ Customize the border of the stack labels using the [ChartStackLabelBorder](https }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLStxVnzLkSWnhh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVxDnMdLPjYWRUo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -955,7 +955,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLTtEiqTnvuoeLx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLnjxWdBvMKXGzD?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -1002,9 +1002,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hthzDuMqfmTHohdi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVntHsxhvqGYcWY?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/line?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/line?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/charts/chart-types/stacked-line.md b/chart-sdk/blazor/charts/chart-types/stacked-line.md index d8e805fb3..230e36f39 100644 --- a/chart-sdk/blazor/charts/chart-types/stacked-line.md +++ b/chart-sdk/blazor/charts/chart-types/stacked-line.md @@ -1,13 +1,13 @@ --- layout: post -title: Stacked Line Chart in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Stacked Line Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Stacked Line Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Stacked Line Charts using Syncfusion. Compare each series contribution to the total over time by stacking lines. +platform: Blazor +control: Charts documentation: ug --- -# Stacked Line Chart in Blazor Charts Component +# Stacked Line Chart in Blazor ## Stacked Line @@ -80,9 +80,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBzNOsLpWPFqTrE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Stacked Line Chart](../images/chart-types-images/blazor-stacked-line-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLxDniHhbeBoddc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Stacked Line Chart](../images/chart-types-images/blazor-stacked-line-chart.webp)" %} -N> Refer to the [Blazor Stacked Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-line-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Stacked Line Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-line?theme=bootstrap5) to know how to render and configure the Stacked Line type chart. +N> Refer to the [Blazor Stacked Line Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-line-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Stacked Line Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-line?theme=fluent2) to know how to render and configure the Stacked Line type chart. ## Binding data with series @@ -155,7 +155,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVKsVhdBSeqWaEP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrHZHiHVPSevmcX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -232,7 +232,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrJNEiRhFnJvxNW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhnXxWnhFoPdzAF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the stacked line series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -315,7 +315,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLTtbMnzCNKzmNV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLHtHiRLPdhlGhx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -384,7 +384,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhTNFMxqTtCGpWO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLRjHMnBbdSyWld?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Width** @@ -458,7 +458,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVTtlCxKpUgqisy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLdNxWdBFHvUhLe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -531,7 +531,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBKWVLRBIeyYwAD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhHtRixLbwicomq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -595,7 +595,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVJXkiLJqXivjQB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhRZRsdLbmfbFBK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -655,7 +655,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZrpXYWrpUVKeYvo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLHZHsxhlcmPolB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -717,7 +717,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXLTNOMLJAgFYYbg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVnDnCHLlPNytJI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Stack labels @@ -790,7 +790,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVStnhHpUjFzPHz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVHtxsxBFbghAjq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Customization @@ -890,7 +890,7 @@ Customize the border of the stack labels using the [ChartStackLabelBorder](https }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthyDnhRpUCdUdvZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXVRtdixVFFHAmdP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -978,7 +978,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVpNEiKARThPPAR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhnZHWHhblkODPV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -1049,9 +1049,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrzjuiqgdSSdptl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhxtHsdhluVucrT?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/line?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/line?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/charts/chart-types/step-area.md b/chart-sdk/blazor/charts/chart-types/step-area.md index feffde7c9..1b6c615db 100644 --- a/chart-sdk/blazor/charts/chart-types/step-area.md +++ b/chart-sdk/blazor/charts/chart-types/step-area.md @@ -1,13 +1,13 @@ --- layout: post -title: Step Area in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Step Area Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Step Area Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Step Area Charts using Syncfusion. Connect data points with vertical and horizontal lines to form a step pattern. +platform: Blazor +control: Charts documentation: ug --- -# Step Area in Blazor Charts Component +# Step Area Chart in Blazor ## Step Area @@ -47,9 +47,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsBhHTngrkaFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Step Area Chart](../images/chart-types-images/blazor-step-area-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrdjnixrYNIReGk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Step Area Chart](../images/chart-types-images/blazor-step-area-chart.webp)" %} -N> Refer to the [Blazor Step Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/step-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Step Area Chart Example](https://blazor.syncfusion.com/demos/chart/step-area?theme=bootstrap5) to know how to render and configure the Step Area type chart. +N> Refer to the [Blazor Step Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/step-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore the [Blazor Step Area Chart Example](https://blazor.syncfusion.com/demos/chart/step-area?theme=fluent2) to know how to render and configure the Step Area type chart. ## Binding data with series @@ -89,7 +89,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsBhHTngrkaFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLnZHinBaXwgvDs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -133,7 +133,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBpjlCufmZYLVMX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLxjninhYsthOhS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the step area series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -180,7 +180,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrztPMEzcTnzOXU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrRZxMdhOMUCFUq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -220,7 +220,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrzXbMuTcIuVPvx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZLdjdsRLusPRRgx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -260,7 +260,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgWhBxpxgIqdqw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthHtxWnVEVhLtCi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Series Border** @@ -300,7 +300,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgWhBxpxgIqdqw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLHXxMnVOLpRtAj?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Show Risers** @@ -402,7 +402,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBpNYiKqFybwcxy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtrxtxCxVkVcBhUx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -444,7 +444,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDBftkMqAPbZoJkr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhRjRMnVEKigbJh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -488,7 +488,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBzXuMqKvEjAFVY?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjBdZxCdVuKpIPRW?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -536,7 +536,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVfjbMEJFUSbqGV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrRDdiHBOAmvwJi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -582,9 +582,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVfZaWgUFkdqzow?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLxXnWnruJjtkFK?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/line?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/line?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/charts/chart-types/step-line.md b/chart-sdk/blazor/charts/chart-types/step-line.md index 0dea4a42d..a7c6f930e 100644 --- a/chart-sdk/blazor/charts/chart-types/step-line.md +++ b/chart-sdk/blazor/charts/chart-types/step-line.md @@ -1,13 +1,13 @@ --- layout: post -title: Step Line Chart in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Step Line Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Step Line Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Step Line Charts using Syncfusion. Connect data points with horizontal and vertical lines for a staircase effect. +platform: Blazor +control: Charts documentation: ug --- -# Step Line Chart in Blazor Charts Component +# Step Line Chart in Blazor ## Step Line @@ -50,7 +50,7 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhfXairAFPdRAGd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Step Line Chart](../images/chart-types-images/blazor-step-line-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVHjnWRVuSNRAkE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Step Line Chart](../images/chart-types-images/blazor-step-line-chart.webp)" %} ## Binding data with series @@ -93,7 +93,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhfXairAFPdRAGd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVHjnWRVuSNRAkE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -140,7 +140,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVpjuCrqYtgCBif?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVdXxCRrkoSCkVO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the step line series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. @@ -191,7 +191,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htrpjOihAOWsDTFn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthRDRCdBkSwvSig?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Opacity** @@ -234,7 +234,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLpDYMLKkBsvVyk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhnjHWnVunXJkim?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DashArray** @@ -277,7 +277,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrTNYiLgaqPetFV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVnDRWRhYHVbJGc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Width** @@ -320,7 +320,7 @@ The [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVJDOMBUOTGcVIW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrdNxCHhORyFOnN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -368,7 +368,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htrzNYshAkHtHcQv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhxNdMxBuxlLIiA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -413,7 +413,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBpXYMhKalMzpKq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZLnDxsnVuQWpvBY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -460,7 +460,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLzXuMhUuuubOsL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBHtdidBEmdJCag?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -511,7 +511,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVJNaCBJNMRpLYb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVdNxMHrkmFeAWJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -561,9 +561,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBfZaCVfDghVyhV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhxjnsxralsgfmL?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/line?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/line?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/charts/chart-types/vertical-chart.md b/chart-sdk/blazor/charts/chart-types/vertical-chart.md index cef284ffa..a16fc41de 100644 --- a/chart-sdk/blazor/charts/chart-types/vertical-chart.md +++ b/chart-sdk/blazor/charts/chart-types/vertical-chart.md @@ -1,13 +1,13 @@ --- layout: post -title: Vertical Chart in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Vertical Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Vertical Chart Examples and Documentation | Syncfusion® +description: Learn how to render a Blazor Vertical Chart using Syncfusion. Swap X and Y axis orientation by setting SfChart IsTransposed to true. +platform: Blazor +control: Charts documentation: ug --- -# Vertical Chart in Blazor Charts Component +# Vertical Chart in Blazor ## Vertical chart @@ -44,7 +44,7 @@ One can draw a vertical chart by changing the axis orientation, and all series t } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrzXFhjSvWwRZBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Vertical Spline Chart](../images/othertypes/blazor-vertical-spline-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLRZHMBeLsOkQPq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Vertical Spline Chart](../images/othertypes/blazor-vertical-spline-chart.webp)" %} ## Binding data with series @@ -81,7 +81,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrzXFhjSvWwRZBo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhdXxWBILVIDJEo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Empty points @@ -124,7 +124,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLTXvhXoPpvTSiM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrnDxsBIrhkxwft?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -163,7 +163,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBzDbhNyvnMrQhi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLxZxCVeLASSsbV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -204,7 +204,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htBpXvrDyvQhZCyn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthntnsheBftGcYJ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -249,7 +249,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLTDFLZSllvdqCl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVHXRsBeLToFsUO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -293,9 +293,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrztlLNoFEcaytl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtVdXxsrSrpbyEKM?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/line?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/line?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/charts/chart-types/waterfall.md b/chart-sdk/blazor/charts/chart-types/waterfall.md index aa766cd47..8514578f4 100644 --- a/chart-sdk/blazor/charts/chart-types/waterfall.md +++ b/chart-sdk/blazor/charts/chart-types/waterfall.md @@ -1,13 +1,13 @@ --- layout: post -title: Waterfall in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Waterfall Chart in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Waterfall Chart Examples and Documentation | Syncfusion® +description: Learn how to create Blazor Waterfall Charts using Syncfusion. Show the cumulative effect of sequential positive and negative values. +platform: Blazor +control: Charts documentation: ug --- -# Waterfall in Blazor Charts Component +# Waterfall Chart in Blazor ## Waterfall @@ -52,9 +52,9 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhzNbVjepXCmPUR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart](../images/othertypes/blazor-waterfall-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhRDHCLysdCeIuP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Waterfall Chart](../images/othertypes/blazor-waterfall-chart.webp)" %} -N> Explore the [Blazor Waterfall Chart Example](https://blazor.syncfusion.com/demos/chart/waterfall?theme=bootstrap5) to know how to render and configure the Waterfall type chart. +N> Explore the [Blazor Waterfall Chart Example](https://blazor.syncfusion.com/demos/chart/waterfall?theme=fluent2) to know how to render and configure the Waterfall type chart. ## Binding data with series @@ -99,7 +99,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNhzNbVjepXCmPUR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBdZxWLIsnSbonu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Series customization @@ -145,7 +145,7 @@ The negative changes of waterfall charts are represented by using [NegativeFillC ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhTtuiqSypahHvu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrxjHMLSMwZKzGF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Corner radius @@ -189,7 +189,7 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBINztpgOESJjZh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart with corner radius](../images/chart-types-images/blazor-waterfall-chart-corner-radius.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhdtxsBoiwxaGyi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Waterfall Chart with corner radius](../images/chart-types-images/blazor-waterfall-chart-corner-radius.webp)" %} Customize the corner radius for individual points in the chart series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by utilizing the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) property in its event argument. @@ -242,7 +242,7 @@ Customize the corner radius for individual points in the chart series using the } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtrSZfDfpXVcpRWL?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" backgroundimage "[Blazor Waterfall Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBdXRsLoCFTkiLm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Waterfall Chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.webp)" %} ## Empty points @@ -292,7 +292,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhptlBXopnVPtmr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthnZHCreWkCTHcl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Fill** @@ -338,7 +338,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLTXlVNSzGeHAIC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZVnNHCrIMaylXLp?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Border** @@ -386,7 +386,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrJNvBZIJlcWPCQ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjLHXRMhSVNijbaN?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Events @@ -439,7 +439,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhpZvrtIHLqzmYX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrdDdsVyhZRSkVt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ### Point render @@ -490,9 +490,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVJtbVtIdfizCZu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjBnXnMLeBWgBnvV?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/line?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/line?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/charts/cross-hair-and-track-ball.md b/chart-sdk/blazor/charts/cross-hair-and-track-ball.md index ae08c421c..98976f1b5 100644 --- a/chart-sdk/blazor/charts/cross-hair-and-track-ball.md +++ b/chart-sdk/blazor/charts/cross-hair-and-track-ball.md @@ -1,17 +1,17 @@ --- layout: post -title: Crosshair and Trackball in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Crosshair and Trackball in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Crosshair and Trackball | Syncfusion® +description: Learn how to enable crosshair and trackball in Syncfusion Blazor Charts. Inspect data points with a tooltip on mouse move or touch. +platform: Blazor +control: Charts documentation: ug --- -# Crosshair and Trackball in Blazor Charts Component +# Blazor Charts Crosshair and Trackball Inspect or target any data point on mouse move or touch with the help of crosshair. A thin horizontal line and vertical line indicate the data point with the information displayed in an interactive tooltip. The crosshair can be enabled using the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCrosshairSettings.html#Syncfusion_Blazor_Charts_ChartCrosshairSettings_Enable) property in the [ChartCrosshairSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCrosshairSettings.html). -A detailed walkthrough demonstrating how to enable and customize the crosshair and trackball in Blazor charts is presented in the video below +A detailed walkthrough demonstrating how to enable and customize the crosshair and trackball in [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) is presented in the video below {% youtube "youtube:https://www.youtube.com/watch?v=ASrWXJh0khI" %} @@ -274,9 +274,9 @@ The [HighlightCategory](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNBIjJjJztIfQRsg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Crosshair in Blazor Line Chart with highlight background](images/crosshair/blazor-line-chart-with-highlight-background-trackball.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNrHNxWheMMTwPXL?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Crosshair in Blazor Line Chart with highlight background](images/crosshair/blazor-line-chart-with-highlight-background-trackball.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/line?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/line?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/charts/data-editing.md b/chart-sdk/blazor/charts/data-editing.md index 90fdf2f29..58fcf567a 100644 --- a/chart-sdk/blazor/charts/data-editing.md +++ b/chart-sdk/blazor/charts/data-editing.md @@ -1,13 +1,13 @@ --- layout: post -title: Data Editing in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Data Editing in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Data Editing Examples | Syncfusion® +description: Learn how to enable drag-and-drop data editing in Syncfusion Blazor Charts. Set ChartDataEditSettings Enable to true with MinY, MaxY, and Fill. +platform: Blazor +control: Charts documentation: ug --- -# Data Editing in Blazor Charts Component +# Blazor Charts Data Editing Data editing allows rendered data points to be dragged and dropped at run time. The position or value of a point can be adjusted based on its y‑value. To enable data editing, set the [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataEditSettings.html#Syncfusion_Blazor_Charts_ChartDataEditSettings_Enable) property in the [ChartDataEditSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_ChartDataEditSettings) to **true**. Use the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataEditSettings.html#Syncfusion_Blazor_Charts_ChartDataEditSettings_Fill) property to specify the edited point color, and the [MinY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataEditSettings.html#Syncfusion_Blazor_Charts_ChartDataEditSettings_MinY) and [MaxY](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataEditSettings.html#Syncfusion_Blazor_Charts_ChartDataEditSettings_MaxY) properties to determine data editing's minimum and maximum range. @@ -71,7 +71,7 @@ Data editing allows rendered data points to be dragged and dropped at run time. ![Data Editing in Blazor Chart](images/data-editing/blazor-chart-data-editing.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/line?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/line?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/charts/data-label-template.md b/chart-sdk/blazor/charts/data-label-template.md index b997ec1bd..b34daa63f 100644 --- a/chart-sdk/blazor/charts/data-label-template.md +++ b/chart-sdk/blazor/charts/data-label-template.md @@ -1,15 +1,15 @@ --- layout: post -title: Datalabel Template in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Datalabel Template in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Data Label Template Examples | Syncfusion® +description: Learn how to customize data labels in Syncfusion Blazor Charts. Use a Template that casts context to ChartDataPointInfo for inline values. +platform: Blazor +control: Charts documentation: ug --- -# Datalabel Template in Blazor Charts Component +# Blazor Charts Data Label Template Text and interior information for a point can be bound from a datasource other than the x and y values. The implicit named parameter context can be used to access the aggregate values within the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Template). To retrieve aggregate values inside the template, type cast the context as [ChartDataPointInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataPointInfo.html). The context attribute can also be used to modify the name of this implicit parameter. For example, the data label information can be accessed using context in the template as shown below. @@ -76,4 +76,4 @@ Text and interior information for a point can be bound from a datasource other t ![Blazor Chart Label with Template](images/data-label/blazor-chart-label-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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/chart-sdk/blazor/charts/data-labels.md b/chart-sdk/blazor/charts/data-labels.md index d96004382..3c1ff7096 100644 --- a/chart-sdk/blazor/charts/data-labels.md +++ b/chart-sdk/blazor/charts/data-labels.md @@ -1,13 +1,13 @@ --- layout: post -title: Data Labels in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Data Labels in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Data Labels Examples | Syncfusion® +description: Learn how to show data labels on Syncfusion Blazor Charts. Enable ChartDataLabel Visible to display point values with auto-arrange. +platform: Blazor +control: Charts documentation: ug --- -# Data Labels in Blazor Charts Component +# Blazor Charts Data Labels [Data label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html) can be added to a [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html) by enabling the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Visible) option in the data label settings. By default, the labels will organize themselves intelligently without overlapping. @@ -263,7 +263,7 @@ Data label can be customized using [Fill](https://help.syncfusion.com/cr/blazor/ ![Blazor Chart with Custom Label](images/data-label/blazor-chart-custom-label.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/line?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/line?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/charts/data-markers.md b/chart-sdk/blazor/charts/data-markers.md index 3423bb3cb..c532994ab 100644 --- a/chart-sdk/blazor/charts/data-markers.md +++ b/chart-sdk/blazor/charts/data-markers.md @@ -1,13 +1,13 @@ --- layout: post -title: Markers in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the available Markers in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Data Markers Examples | Syncfusion® +description: Learn how to add data markers in Syncfusion Blazor Charts. Enable ChartMarker Visible to adorn each point with circle, square, or other shapes. +platform: Blazor +control: Charts documentation: ug --- -# Markers in Blazor Charts Component +# Blazor Charts Data Markers [Data markers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html) are used to provide information about the data points in a series. Each data point can be adorned with a shape. @@ -278,7 +278,7 @@ Markers color can be customized using [Fill](https://help.syncfusion.com/cr/blaz ![Blazor Line Chart with Custom Markers](images/marker/blazor-line-chart-custom-marker.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/line?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/line?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/charts/date-time-axis.md b/chart-sdk/blazor/charts/date-time-axis.md index 3c192465c..719e2873c 100644 --- a/chart-sdk/blazor/charts/date-time-axis.md +++ b/chart-sdk/blazor/charts/date-time-axis.md @@ -1,15 +1,15 @@ --- layout: post -title: DateTime Axis in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about DateTime Axis in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts DateTime Axis Examples | Syncfusion® +description: Learn how to use the DateTime axis in Syncfusion Blazor Charts. Plot date-time values with a configurable label format such as yyyy or MMM. +platform: Blazor +control: Charts documentation: ug --- -# DateTime Axis in Blazor Charts Component +# Blazor Charts DateTime Axis ## DateTime axis @@ -50,7 +50,7 @@ A detailed walkthrough for customizing the dateTime axis is provided in the vide } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXBAMLVBfMpwmDHF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with DateTime Axis](images/datetime/blazor-line-chart-datetime-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhxDnCrJWRuHHpe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart with DateTime Axis](images/datetime/blazor-line-chart-datetime-axis.webp)" %} ## DateTime category axis @@ -87,7 +87,7 @@ The [DateTime Category](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjLAWVVVTCIjNxnP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with DateTime Axis](images/datetime/blazor-line-chart-with-datetime-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhHjHsLfiGqdHKu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart with DateTime Axis](images/datetime/blazor-line-chart-with-datetime-axis.webp)" %} ### Range @@ -127,7 +127,7 @@ The axis range will be calculated automatically based on the provided data; howe } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrUirVVpWyKBAAB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart DateTime Axis based on Range](images/datetime/blazor-line-chart-axis-based-on-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhdZRMBTiwvqqLh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Line Chart DateTime Axis based on Range](images/datetime/blazor-line-chart-axis-based-on-range.webp)" %} ### Interval customization @@ -176,7 +176,7 @@ The [Interval](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htVgCLLrTWoQFSbR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart DateTime Axis based on Interval](images/datetime/blazor-line-chart-axis-based-on-interval.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVxNdMLfWvMcOcG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Line Chart DateTime Axis based on Interval](images/datetime/blazor-line-chart-axis-based-on-interval.webp)" %} **Applying padding to the Range** @@ -221,7 +221,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVnZLXqBdqfnaMB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart without RangePadding](images/datetime/blazor-line-chart-axis-based-on-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXhRjHiBzMFGgGhA?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart without RangePadding](images/datetime/blazor-line-chart-axis-based-on-range.webp)" %} **DateTime - Round** @@ -258,7 +258,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBnZLZKrRHJgzgq?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVntxMLJVYeODlE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **DateTime - Additional** @@ -294,7 +294,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLRZVjUBdFmrpNy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLdXdirJqDBndTw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Label format @@ -329,7 +329,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhdXhNgLdCIhTrD?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Axis Label Formatting in Blazor Line Chart](images/datetime/blazor-line-chart-axis-label-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDVntnMLpqjGHWfF?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Axis Label Formatting in Blazor Line Chart](images/datetime/blazor-line-chart-axis-label-format.webp)" %} The table below shows the results of applying various popular date and time formats to the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_LabelFormat) property. @@ -376,7 +376,7 @@ The table below shows the results of applying various popular date and time form -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/line?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/line?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/charts/events.md b/chart-sdk/blazor/charts/events.md index b75a5b9d6..5fff7c883 100644 --- a/chart-sdk/blazor/charts/events.md +++ b/chart-sdk/blazor/charts/events.md @@ -1,13 +1,13 @@ --- layout: post -title: Events in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Events usage in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Events Examples and Reference | Syncfusion® +description: Learn how to subscribe to Syncfusion Blazor Charts events. Use ChartEvents for OnZoomStart, OnZoomEnd, OnDataLabelRender, and OnPointRender. +platform: Blazor +control: Charts documentation: ug --- -# Events in Blazor Charts Component +# Blazor Charts Events This section provides a list of chart component events that are triggered by corresponding chart actions. @@ -1547,4 +1547,4 @@ The following properties are available in the [SharedTooltipRenderEventArgs](htt ``` -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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/chart-sdk/blazor/charts/getting-started-wasm.md b/chart-sdk/blazor/charts/getting-started-wasm.md index 7fa5219f6..b774b418f 100644 --- a/chart-sdk/blazor/charts/getting-started-wasm.md +++ b/chart-sdk/blazor/charts/getting-started-wasm.md @@ -1,112 +1,121 @@ --- layout: post -title: Getting Started with Blazor Chart Component | Syncfusion® -description: Checkout and learn about getting started with Blazor Charts in Blazor WebAssembly (WASM) App using Visual Studio and more. -platform: chart-sdk -control: Chart +title: Getting Started with Blazor Charts in WASM App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Charts in a Blazor WebAssembly standalone app. Explore setup, packages, and first chart example. +platform: Blazor +control: Charts documentation: ug --- -# Getting Started with Blazor Chart Component in Blazor WASM App +# Getting Started with Blazor Charts in WASM App -This section briefly explains how to include [Blazor Charts](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/). +This section briefly explains how to include the [Blazor Charts](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/). -> **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 [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 + +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. -## Prerequisites +{% tabcontents %} + +{% tabcontent Visual Studio %} -Install the latest version of [.NET SDK](https://dotnet.microsoft.com/en-us/download). If the .NET SDK is already installed, determine the installed version by running the following command in a command prompt (Windows), terminal (macOS), or command shell (Linux). +1. Go to *Tools → NuGet Package Manager → Manage NuGet Packages for Solution*. +2. Search the required NuGet package (`Syncfusion.Blazor.Charts`) and install it. + +Alternatively, you can install the 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 %} + +{% 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.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 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 package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. -N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder. - {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -116,42 +125,38 @@ 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 Blazor 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 JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/index.html** file (this is the main HTML entry point of your WebAssembly application). +Include the required [script references](https://blazor.syncfusion.com/documentation/common/adding-script-references) at the end of the `` section in the **~wwwroot/index.html** file to enable Charts 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 Chart component +## Add Blazor Charts component -Add the Blazor 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 Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component inside the razor file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} - +@* SfChart is the root container component for the chart *@ @@ -159,13 +164,51 @@ Add the Blazor Chart component in the **~/Pages/Home.razor** file. {% endhighlight %} {% endtabs %} -* Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Blazor 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 Charts component](https://www.syncfusion.com/blazor-components/blazor-charts) 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/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBRjRiBKleQGqKo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} -## Populate Blazor chart with data +## Populate Blazor Charts with data -To bind data for the chart component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_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 Blazor charts component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). Map the data fields `Month` and `SalesValue` to the series [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YName) properties, then set the data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property, and the [chart type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to **Column** because we will be viewing the data in a column chart. @@ -185,11 +228,12 @@ Map the data fields `Month` and `SalesValue` to the series [XName](https://help. -@code { +@code +{ public class SalesInfo { - public string Month { get; set;} - public double SalesValue { get; set;} + public string Month { get; set; } + public double SalesValue { get; set; } } public List Sales = new List @@ -207,12 +251,12 @@ Map the data fields `Month` and `SalesValue` to the series [XName](https://help. {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTNiLezckHqsGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrRZdMVgPGhfPSi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.webp)" %} -N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Chart) +N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/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/charts/getting-started-with-maui-app.md b/chart-sdk/blazor/charts/getting-started-with-maui-app.md index 17aca17a6..e3c1359c4 100644 --- a/chart-sdk/blazor/charts/getting-started-with-maui-app.md +++ b/chart-sdk/blazor/charts/getting-started-with-maui-app.md @@ -1,46 +1,49 @@ --- layout: post -title: Getting Started with Chart Component in Blazor MAUI App | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor Chart Component in Blazor MAUI App. -platform: chart-sdk -control: Chart +title: Getting Started with Blazor Charts in MAUI App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Charts in a Blazor MAUI hybrid app. Explore setup, packages, and first chart example. +platform: Blazor +control: Charts documentation: ug --- -# Getting Started with Blazor Chart Component in Blazor MAUI App +# Getting Started with Blazor Charts in MAUI App -This section explains the step-by-step process of integrating the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component in your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [Visual Studio Code](https://code.visualstudio.com/). +This section explains the step-by-step process of integrating the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-Charts) component in your Blazor MAUI App using both [Visual Studio](https://visualstudio.microsoft.com/vs/) and [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 MAUI Blazor Hybrid App {% tabcontents %} {% tabcontent Visual Studio %} -## Prerequisites - -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). - -## Create a new Blazor MAUI App in Visual Studio - -Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=vswin). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +Create a Blazor MAUI App using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/hybrid/tutorials/maui?view=aspnetcore-10.0). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. {% endtabcontent %} {% tabcontent Visual Studio Code %} -## Prerequisites +Run the following command to create a new MAUI Blazor Hybrid App. -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio Code. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/maui/get-started/installation?view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). +{% tabs %} +{% highlight razor tabtitle="Terminal" %} -## Create a new Blazor MAUI App in Visual Studio Code +dotnet new maui-blazor -o MauiBlazorApp +cd MauiBlazorApp -Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +{% endhighlight %} +{% endtabs %} -Alternatively, create a MAUI application by using the following command in the integrated terminal (Ctrl+`). +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Run the following command to create a new MAUI Blazor Hybrid App. {% tabs %} -{% highlight c# tabtitle="Blazor MAUI App" %} +{% highlight razor tabtitle="Command Prompt" %} dotnet new maui-blazor -o MauiBlazorApp cd MauiBlazorApp @@ -52,47 +55,81 @@ cd MauiBlazorApp {% endtabcontents %} -## Install required Blazor packages +## Install the required Blazor package -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 }}). +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. -Alternatively, run the following command in the Package Manager Console to achieve the same. +{% 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="Package Manager" %} +{% highlight razor tabtitle="Package Manager Console" %} Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} -N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details. +{% endtabcontent %} -## Add import namespaces +{% tabcontent Visual Studio Code %} + +Open the terminal and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Terminal" %} + +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% tabcontent .NET CLI %} + +Open the command prompt and run the following command. + +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} -After the package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. +{% endtabcontents %} -N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder. +## Add import namespaces + +After the package is installed, open the **~/Components/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} -@using Syncfusion.Blazor +@using Syncfusion.Blazor @using Syncfusion.Blazor.Charts {% endhighlight %} {% endtabs %} -## Register Blazor service +## Register the Blazor service -Register the Blazor service in the **~/MauiProgram.cs** file. This step enables the Blazor components to work in your application. +Open the **MauiProgram.cs** file in Blazor MAUI App and register the Blazor service. {% tabs %} -{% highlight c# tabtitle="~/MauiProgram.cs" %} +{% highlight c# tabtitle="MauiProgram.cs" %} .... using Syncfusion.Blazor; - .... public static class MauiProgram @@ -108,26 +145,26 @@ public static class MauiProgram {% endhighlight %} {% endtabs %} -## Add script resources +## Add script resource -The JavaScript library needs to be included in your application. The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/common/adding-script-references#static-web-assets). Include the script reference in the **~/index.html** file (this is the main HTML entry point of your MAUI Blazor application). +The script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the [script 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 your Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Blazor Chart component +## Add the Blazor Charts component -Add the Blazor Chart component in the **~/Pages/Home.razor** file. +Open a Razor file located in the **~/Components/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-Charts) component inside the razor file. {% tabs %} {% highlight razor tabtitle="Home.razor" %} - +@* SfChart is the root container component for the chart *@ @@ -135,23 +172,59 @@ Add the Blazor Chart component in the **~/Pages/Home.razor** file. {% endhighlight %} {% endtabs %} -### How to run the sample on windows +## Run the application on Windows + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Blazor 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. -Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. +{% tabs %} +{% highlight razor tabtitle="Command Prompt" %} + +dotnet run + +{% endhighlight %} +{% endtabs %} + +{% endtabcontent %} + +{% endtabcontents %} -![Blazor Chart Component](images/blazor-chart-maui-app.webp) +![Blazor Charts Component](images/blazor-chart-maui-app.webp) -### How to run the sample on android +## Run the application on Android -To run the Blazor Chart in a Blazor Android MAUI application using the Android emulator, follow these steps: +To run the Blazor Charts in a Blazor Android MAUI application using the Android emulator, follow these steps: Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch the Android emulator. -N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance[Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). +N> If you encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). -![Blazor Chart Component](images/getting-started/blazor-chart.webp) +![Blazor Charts Component](images/getting-started/blazor-chart.webp) ## 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/charts/getting-started-with-web-app.md b/chart-sdk/blazor/charts/getting-started-with-web-app.md index 87c852a4f..5598e7713 100644 --- a/chart-sdk/blazor/charts/getting-started-with-web-app.md +++ b/chart-sdk/blazor/charts/getting-started-with-web-app.md @@ -1,132 +1,122 @@ --- layout: post -title: Getting Started with Blazor Chart Component in WebApp | Syncfusion® -description: Checkout and learn about the documentation for getting started with Blazor Chart Component in Blazor Web App. -platform: chart-sdk -component: Chart +title: Getting Started with Blazor Charts in Web App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Charts in a Blazor Web App. Explore setup, server and client configuration, and first chart example. +platform: Blazor +control: Charts documentation: ug --- -# Getting Started with Blazor Chart Component in Blazor Web App +# Getting Started with Blazor Charts in Web App -This section briefly explains how to include [Blazor 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 Charts](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/). -> **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 - -* [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 %} -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. +{% endtabcontents %} -For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands: +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 %} + +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 new blazor -o BlazorApp -int Auto -cd BlazorApp +Install-Package Syncfusion.Blazor.Charts -Version {{ site.releaseversion }} {% endhighlight %} {% endtabs %} +{% endtabcontent %} -This command creates a new Blazor Web App and places it in a new directory called `BlazorApp` 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=linux-macos&view=aspnetcore-8.0) topics for more details. - -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 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.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 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.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 from the `.Client` project and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. {% tabs %} {% highlight C# tabtitle="~/_Imports.razor" %} @@ -137,69 +127,98 @@ 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 Blazor 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 resources +## Add script resource -The 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 Charts 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 your Blazor application. +{% endhighlight %} +{% endtabs %} -## Add Blazor Chart component +## Add Blazor Charts component -Add the Blazor 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 Charts](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 *@ @rendermode InteractiveAuto +@* SfChart is the root container component for the chart *@ + + + + {% endhighlight %} {% endtabs %} +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Charts component](https://www.syncfusion.com/blazor-components/blazor-charts) 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 component in the default web browser. +{% endtabcontent %} + +{% endtabcontents %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBRjRiBKleQGqKo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} -## Populate Blazor chart with data +## Populate Blazor Charts with data -To bind data for the chart component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_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 Blazor charts component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). Map the data fields `Month` and `SalesValue` to the series [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YName) properties, then set the data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property, and the [chart type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to **Column** because we will be viewing the data in a column chart. @@ -217,11 +236,12 @@ Map the data fields `Month` and `SalesValue` to the series [XName](https://help. -@code { +@code +{ public class SalesInfo { - public string Month { get; set;} - public double SalesValue { get; set;} + public string Month { get; set; } + public double SalesValue { get; set; } } public List Sales = new List @@ -239,7 +259,7 @@ Map the data fields `Month` and `SalesValue` to the series [XName](https://help. {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTNiLezckHqsGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrRZdMVgPGhfPSi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Chart). diff --git a/chart-sdk/blazor/charts/getting-started.md b/chart-sdk/blazor/charts/getting-started.md index e09877b68..55ebbb2f5 100644 --- a/chart-sdk/blazor/charts/getting-started.md +++ b/chart-sdk/blazor/charts/getting-started.md @@ -1,114 +1,123 @@ --- layout: post -title: Getting Started | Blazor Chart Component | Syncfusion® -description: Checkout and learn about getting started with Blazor Charts component in Blazor Server App using Visual Studio and more. -platform: chart-sdk -control: Chart +title: Getting Started with Blazor Charts in Server App | Syncfusion® +description: Learn how to get started with Syncfusion Blazor Charts in a Blazor Server App. Explore setup, NuGet packages, registration, and first chart example. +platform: Blazor +control: Charts documentation: ug --- -# Getting Started with Blazor Chart Component in Blazor Server App +# Getting Started with Blazor Charts in Server App -This section briefly explains how to include [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) 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 Charts](https://www.syncfusion.com/blazor-components/blazor-charts) 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 [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 [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 [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.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" %} -## Install Blazor packages +dotnet add package Syncfusion.Blazor.Charts -v {{ site.releaseversion }} -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. +{% endhighlight %} +{% endtabs %} -Alternatively, run the following command in the Package Manager Console to achieve the same. +{% 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.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 package is installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Charts` namespaces. -N> The `~/` notation represents the root directory of your project. This file is typically located in your project's root folder. - {% tabs %} {% highlight razor tabtitle="~/_Imports.razor" %} @@ -118,67 +127,93 @@ 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 Charts 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 Chart component +## Add Blazor Charts component -Add the Blazor 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 as shown below. +Open a Razor file located in the **~/Pages/*.razor** (for example, **Home.razor**) and add the [Blazor Charts](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 *@ @rendermode InteractiveServer +@* SfChart is the root container component for the chart *@ + + + {% endhighlight %} {% endtabs %} +## Run the application + +{% tabcontents %} + +{% tabcontent Visual Studio %} + +Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The [Blazor Charts component](https://www.syncfusion.com/blazor-components/blazor-charts) 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 component in the default web browser. +{% endtabcontent %} + +{% endtabcontents %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLzNsLepwXKBvNw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBRjRiBKleQGqKo?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart Component](images/getting-started/blazor-chart.webp)" %} -## Populate Blazor chart with data +## Populate Blazor Charts with data -To bind data for the chart component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_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 Blazor charts component, you can assign an IEnumerable object to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It can also be provided as an instance of the [DataManager](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataManager.html). Map the data fields `Month` and `SalesValue` to the series [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_XName) and [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YName) properties, then set the data to the [DataSource](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property, and the [chart type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to **Column** because we will be viewing the data in a column chart. @@ -196,11 +231,12 @@ Map the data fields `Month` and `SalesValue` to the series [XName](https://help. -@code { +@code +{ public class SalesInfo { - public string Month { get; set;} - public double SalesValue { get; set;} + public string Month { get; set; } + public double SalesValue { get; set; } } public List Sales = new List @@ -218,11 +254,11 @@ Map the data fields `Month` and `SalesValue` to the series [XName](https://help. {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtBTNiLezckHqsGf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrRZdMVgPGhfPSi?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart](images/getting-started/blazor-chart-column.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/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/charts/gradient.md b/chart-sdk/blazor/charts/gradient.md index f05340d9a..8d1c653ee 100644 --- a/chart-sdk/blazor/charts/gradient.md +++ b/chart-sdk/blazor/charts/gradient.md @@ -1,13 +1,13 @@ --- layout: post -title: Gradient in Blazor Charts Component | Syncfusion® -description: Checkout and learn about applying linear and radial gradients to series, trendlines and indicators in the Blazor Charts component. -platform: chart-sdk -control: Chart +title: Blazor Charts Gradient Fill Examples | Syncfusion® +description: Learn how to apply linear or radial gradients in Syncfusion Blazor Charts. Use ChartLinearGradient and color stops on series, trendlines, and indicators. +platform: Blazor +control: Charts documentation: ug --- -# Gradient in Blazor Charts Component +# Blazor Charts Gradient Gradients add depth and modern styling to charts by smoothly blending multiple colors. The Charts component supports two gradient types: diff --git a/chart-sdk/blazor/charts/how-to/add-remove.md b/chart-sdk/blazor/charts/how-to/add-remove.md index 1cab7d560..7467f030c 100644 --- a/chart-sdk/blazor/charts/how-to/add-remove.md +++ b/chart-sdk/blazor/charts/how-to/add-remove.md @@ -1,15 +1,15 @@ --- layout: post -title: Add or Remove Series in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Add or Remove Series in Blazor Charts component and more. -platform: chart-sdk -control: Chart +title: How to Add or Remove Series in Blazor Charts | Syncfusion® +description: Learn how to add or remove chart series dynamically in Blazor Charts using Syncfusion. Modify ChartSeriesCollection at runtime with simple code changes. +platform: Blazor +control: Charts documentation: ug --- -# Add or Remove Series in Blazor Charts Component +# How to Add or Remove Series in Blazor Charts The chart series can be dynamically added or removed by adding and removing a series to the [ChartSeriesCollection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesCollection.html). Follow the steps below to dynamically add or remove a series. @@ -189,4 +189,4 @@ By clicking the **Add Chart Series** button a new series will be added to the ch } ``` -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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/chart-sdk/blazor/charts/how-to/axis-hide.md b/chart-sdk/blazor/charts/how-to/axis-hide.md index 072386f85..1f3d420a5 100644 --- a/chart-sdk/blazor/charts/how-to/axis-hide.md +++ b/chart-sdk/blazor/charts/how-to/axis-hide.md @@ -1,15 +1,15 @@ --- layout: post -title: Hiding Axis in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Hiding Axis in Blazor Charts component and much more details. -platform: chart-sdk -control: Chart +title: How to Hide an Axis in Blazor Charts | Syncfusion® +description: Learn how to hide a chart axis in Blazor Charts using Syncfusion. Toggle the legend item of the series that uses the axis via YAxisName. +platform: Blazor +control: Charts documentation: ug --- -# Hiding Axis in Blazor Charts Component +# How to Hide an Axis in Blazor Charts The axis associated with the series can be hidden by toggling the legend item of the relevant series. Follow the steps below to hide the measure axis associated with the series. @@ -95,4 +95,4 @@ By clicking the legend items, one can now toggle the visibility of the associate } ``` -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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/chart-sdk/blazor/charts/how-to/convert-millisecond-to-date-time.md b/chart-sdk/blazor/charts/how-to/convert-millisecond-to-date-time.md index 40c3720fe..ad9890c0f 100644 --- a/chart-sdk/blazor/charts/how-to/convert-millisecond-to-date-time.md +++ b/chart-sdk/blazor/charts/how-to/convert-millisecond-to-date-time.md @@ -1,15 +1,15 @@ --- layout: post -title: Convert millisecond to date time in Blazor Chart | Syncfusion® -description: Learn here all the features about Convert millisecond to date time in Blazor Charts component and more. -platform: chart-sdk -control: Chart +title: How to Convert Milliseconds to DateTime in Blazor Chart | Syncfusion® +description: Learn how to convert milliseconds to a DateTime value in Blazor Charts using Syncfusion. Use the OnZoomEnd event to convert axis range after zoom. +platform: Blazor +control: Charts documentation: ug --- -# Convert Millisecond to Date Time in Blazor Charts Component +# How to Convert Milliseconds to DateTime in Blazor Charts Chart converts the datetime to milliseconds to calculate the bounds, so all events for datetime axis returns the value in milliseconds. For example, after zoom completion, the ranges for axis will be in the milliseconds. By using the [OnZoomEnd](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnZoomEnd) event, you can convert millisecond value to date time format. diff --git a/chart-sdk/blazor/charts/how-to/dynamic-points.md b/chart-sdk/blazor/charts/how-to/dynamic-points.md index 29c2467e0..6711961b7 100644 --- a/chart-sdk/blazor/charts/how-to/dynamic-points.md +++ b/chart-sdk/blazor/charts/how-to/dynamic-points.md @@ -1,13 +1,13 @@ --- layout: post -title: Dynamic Points in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Dynamic Points in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: How to Add Dynamic Points in Blazor Charts | Syncfusion® +description: Learn how to add dynamic data points in Blazor Charts using Syncfusion. Use the ChartMouseClick event to add or remove points on click. +platform: Blazor +control: Charts documentation: ug --- -# Dynamic Points in Blazor Charts Component +# How to Add Dynamic Points in Blazor Charts We can use chart mouse/touch events to dynamically add or remove points from an existing data source by clicking within the chart area. These events allow us to obtain the location of the current cursor as X and Y values in the event arguments. The point's X and Y values can then be updated with new data from the existing data source. To achieve dynamic points, follow the steps outlined below. @@ -195,7 +195,7 @@ The below code snippet illustrates a chart that allows users to add new data and ![Dynamic Points](../images/dynamic-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 Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap4) 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/line?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/charts/how-to/lazy-loading.md b/chart-sdk/blazor/charts/how-to/lazy-loading.md index dce616436..854627f9e 100644 --- a/chart-sdk/blazor/charts/how-to/lazy-loading.md +++ b/chart-sdk/blazor/charts/how-to/lazy-loading.md @@ -1,13 +1,13 @@ --- layout: post -title: Lazy Loading in Blazor Charts Component | Syncfusion® -description: Checkout and Checkout and learn here all the features about Lazy Loading in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: How to Enable Lazy Loading in Blazor Charts | Syncfusion® +description: Learn how to enable lazy loading in Blazor Charts using Syncfusion. Use the OnScrollChanged event to fetch data on demand for the visible range. +platform: Blazor +control: Charts documentation: ug --- -# Lazy Loading in Blazor Charts Component +# How to Enable Lazy Loading in Blazor Charts The lazy loading loads data for the chart on demand. The [OnScrollChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnScrollChanged) event will be fired by the chart, allowing us to get the minimum and maximum ranges of the axes and then upload the data to the chart. @@ -98,10 +98,10 @@ else ### Line -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjVpZhLxzguqSeHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[LazyLoad Column](../images/lazyload-column.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLdtnWLeifIjcYa?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[LazyLoad Column](../images/lazyload-column.webp)" %} ### Column -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrTXBLdpqQSSsSy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBHjdMLyiSjFBzI?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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/chart-sdk/blazor/charts/how-to/live-chart.md b/chart-sdk/blazor/charts/how-to/live-chart.md index 80e01cda1..0149d17e3 100644 --- a/chart-sdk/blazor/charts/how-to/live-chart.md +++ b/chart-sdk/blazor/charts/how-to/live-chart.md @@ -1,15 +1,15 @@ --- layout: post -title: Live Chart in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Live Chart in Blazor Charts component and much more details. -platform: chart-sdk -control: Chart +title: How to Update Live Data in Blazor Charts | Syncfusion® +description: Learn how to update a Blazor Chart with live data using Syncfusion. Use a timer to refresh the DataSource and re-render the chart at intervals. +platform: Blazor +control: Charts documentation: ug --- -# Live Chart in Blazor Charts Component +# How to Update Live Data in Blazor Charts Live update in a chart can be achieved using the timer to update the datasource with real-time data and refresh the chart. Follow the steps below to update a chart with real-time data. @@ -161,4 +161,4 @@ The complete code snippet for the preceding steps is available below. ``` -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/line?theme=bootstrap4) 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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/chart-sdk/blazor/charts/how-to/selected-data.md b/chart-sdk/blazor/charts/how-to/selected-data.md index 807e671c5..e9fb3609c 100644 --- a/chart-sdk/blazor/charts/how-to/selected-data.md +++ b/chart-sdk/blazor/charts/how-to/selected-data.md @@ -1,13 +1,13 @@ --- layout: post -title: Visualize grid data in chart in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Visualize grid data in chart in Blazor Charts component and more. -platform: chart-sdk -control: Chart +title: How to Get Selected Data in Blazor Charts | Syncfusion® +description: Learn how to get selected data in Blazor Charts using Syncfusion. Use the OnSelectionChanged event to read SelectedDataValues into your model. +platform: Blazor +control: Charts documentation: ug --- -# Visualize Grid Data in Chart in Blazor Charts Component +# How to Get Selected Data in Blazor Charts Use the chart's [OnSelectionChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSelectionChanged) event to get the list of selected data from the chart. @@ -141,4 +141,4 @@ The complete code snippet is available below. ``` -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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/chart-sdk/blazor/charts/how-to/synchronized-chart.md b/chart-sdk/blazor/charts/how-to/synchronized-chart.md index c3b4d515b..1b8a398e2 100644 --- a/chart-sdk/blazor/charts/how-to/synchronized-chart.md +++ b/chart-sdk/blazor/charts/how-to/synchronized-chart.md @@ -1,15 +1,15 @@ --- layout: post -title: Synchronized Chart in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Synchronized Chart in Blazor Charts component and much more details. -platform: chart-sdk -control: Chart +title: How to Synchronize Charts in Blazor Charts | Syncfusion® +description: Learn how to synchronize Blazor Charts using Syncfusion. Share tooltip, cursor, and selection across charts by sharing X-Y coordinates. +platform: Blazor +control: Charts documentation: ug --- -# Synchronized Chart in Blazor Charts Component +# How to Synchronize Charts in Blazor Charts A synchronized chart has the ability to access and interact with two or more charts at the same time. This means that actions performed on one chart, such as positioning a cursor, clicking on a specific point, or activating a tooltip, are reflected simultaneously on corresponding positions or data points across other synchronized charts based on their X-Y coordinates. @@ -405,4 +405,4 @@ You can maintain constant zoom levels across multiple charts using the [OnZoomEn Check out the JSON file used for the above samples from here [Synchronized Chart Data](https://www.syncfusion.com/downloads/support/directtrac/general/ze/synchronized-data641318336). -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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/chart-sdk/blazor/charts/how-to/threshold.md b/chart-sdk/blazor/charts/how-to/threshold.md index 1309f9855..ba4e01977 100644 --- a/chart-sdk/blazor/charts/how-to/threshold.md +++ b/chart-sdk/blazor/charts/how-to/threshold.md @@ -1,15 +1,15 @@ --- layout: post -title: Threshold in Chart in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Threshold in Chart in Blazor Charts component and more. -platform: chart-sdk -control: Chart +title: How to Add a Threshold in Blazor Charts | Syncfusion® +description: Learn how to add a threshold to a Blazor Chart using Syncfusion. Mark a threshold value with a horizontal stripline bound to a vertical axis. +platform: Blazor +control: Charts documentation: ug --- -# Threshold in Chart in Blazor Charts Component +# How to Add a Threshold in Blazor Charts The threshold level can be indicated in the chart using the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStripline.html). Follow the steps below to add a threshold to the chart. @@ -112,4 +112,4 @@ The complete code snippet for the preceding steps is available below. } ``` -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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/chart-sdk/blazor/charts/how-to/tool-tip-table.md b/chart-sdk/blazor/charts/how-to/tool-tip-table.md index a95e75387..598d61fb8 100644 --- a/chart-sdk/blazor/charts/how-to/tool-tip-table.md +++ b/chart-sdk/blazor/charts/how-to/tool-tip-table.md @@ -1,13 +1,13 @@ --- layout: post -title: Table in Tooltip in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Table in Tooltip in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: How to Show a Table in Tooltip in Blazor Charts | Syncfusion® +description: Learn how to show a table in a Blazor Charts tooltip using Syncfusion. Use ChartTooltipSettings Template with a Razor template to render HTML. +platform: Blazor +control: Charts documentation: ug --- -# Table in Tooltip in Blazor Charts Component +# How to Show a Table in Tooltip in Blazor Charts A table type tooltip can be created using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html#Syncfusion_Blazor_Charts_ChartTooltipSettings_Template) property in [ChartTooltipSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTooltipSettings.html). Follow the steps below to display a table inside the tooltip. @@ -118,4 +118,4 @@ When the mouse is moved over the chart series points, the tooltip is displayed i ``` -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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/chart-sdk/blazor/charts/images/appearance/blazor-chart-title-position-custom.webp b/chart-sdk/blazor/charts/images/appearance/blazor-chart-title-position-custom.webp index c597b741d..947005e9f 100644 Binary files a/chart-sdk/blazor/charts/images/appearance/blazor-chart-title-position-custom.webp and b/chart-sdk/blazor/charts/images/appearance/blazor-chart-title-position-custom.webp differ diff --git a/chart-sdk/blazor/charts/images/appearance/blazor-chart-title-position.webp b/chart-sdk/blazor/charts/images/appearance/blazor-chart-title-position.webp index 72a299278..b4306cc9e 100644 Binary files a/chart-sdk/blazor/charts/images/appearance/blazor-chart-title-position.webp and b/chart-sdk/blazor/charts/images/appearance/blazor-chart-title-position.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp index 9bffe554f..0dc149dd5 100644 Binary files a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp and b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-axis-at-opposed-position.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-axis-title-alignment.webp b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-axis-title-alignment.webp index 52e3dd389..2d4bcd506 100644 Binary files a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-axis-title-alignment.webp and b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-axis-title-alignment.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-axis-title.webp b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-axis-title.webp index bcf24bebe..01ae8ec58 100644 Binary files a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-axis-title.webp and b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-axis-title.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-cross-axis.webp b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-cross-axis.webp index 4b365a4cc..f47170f1d 100644 Binary files a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-cross-axis.webp and b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-cross-axis.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-custom-gridline.webp b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-custom-gridline.webp index f48e854a6..9d0594908 100644 Binary files a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-custom-gridline.webp and b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-custom-gridline.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-custom-tick-lines.webp b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-custom-tick-lines.webp index 19fb59fb2..4c94a6875 100644 Binary files a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-custom-tick-lines.webp and b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-custom-tick-lines.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-inversed-axis.webp b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-inversed-axis.webp index 793559b26..8a9d62a42 100644 Binary files a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-inversed-axis.webp and b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-inversed-axis.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-multiple-axes.webp b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-multiple-axes.webp index 1081a8bc0..ab1023380 100644 Binary files a/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-multiple-axes.webp and b/chart-sdk/blazor/charts/images/axis-customization/blazor-column-chart-multiple-axes.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-chart-axis-label-in-edge.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-chart-axis-label-in-edge.webp index 76b57b37e..72c3d7ad1 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-chart-axis-label-in-edge.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-chart-axis-label-in-edge.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-custom-label.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-custom-label.webp index a9db678f7..d4e45fedc 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-custom-label.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-custom-label.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-alignment.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-alignment.webp index d1bdbbc09..56617a495 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-alignment.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-alignment.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp index eeb08f744..65a676021 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate45.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp index 805b27fbf..1c377c9c5 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-in-rotate90.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-overflow.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-overflow.webp index 2a7ac5013..c1ecf17a1 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-overflow.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-overflow.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-position.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-position.webp index b63bee3f0..4919b4707 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-position.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-position.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-trim.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-trim.webp index 041fc12ba..36af5ceee 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-trim.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-label-trim.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-line-break-label.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-line-break-label.webp index 3e8119be9..e206bd844 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-line-break-label.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-line-break-label.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-text-template.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-text-template.webp index cb9e9f000..61a15a05e 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-text-template.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-axis-text-template.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-custom-axis-label.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-custom-axis-label.webp index 835d1aad2..788c9a961 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-custom-axis-label.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-custom-axis-label.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp index 60c01a5cc..bfb94a49d 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-hide-smart-axis-label.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-label-customization.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-label-customization.webp index 97fed3d9c..e376fd744 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-label-customization.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-label-customization.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-label-with-custom-border.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-label-with-custom-border.webp index 9476134ff..d5c516717 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-label-with-custom-border.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-label-with-custom-border.webp differ diff --git a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-multi-labels.webp b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-multi-labels.webp index 35f44035a..7af0a704d 100644 Binary files a/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-multi-labels.webp and b/chart-sdk/blazor/charts/images/axis-labels/blazor-column-chart-multi-labels.webp differ diff --git a/chart-sdk/blazor/charts/images/category-axis/blazor-chart-axis-range-and-interval.webp b/chart-sdk/blazor/charts/images/category-axis/blazor-chart-axis-range-and-interval.webp index 0e9a1659b..59ddc1ce8 100644 Binary files a/chart-sdk/blazor/charts/images/category-axis/blazor-chart-axis-range-and-interval.webp and b/chart-sdk/blazor/charts/images/category-axis/blazor-chart-axis-range-and-interval.webp differ diff --git a/chart-sdk/blazor/charts/images/category-axis/blazor-chart-default-axis.webp b/chart-sdk/blazor/charts/images/category-axis/blazor-chart-default-axis.webp index b440fbbce..56076b71c 100644 Binary files a/chart-sdk/blazor/charts/images/category-axis/blazor-chart-default-axis.webp and b/chart-sdk/blazor/charts/images/category-axis/blazor-chart-default-axis.webp differ diff --git a/chart-sdk/blazor/charts/images/category-axis/blazor-chart-index-category-axis.webp b/chart-sdk/blazor/charts/images/category-axis/blazor-chart-index-category-axis.webp index 1646dfe01..e7d67316f 100644 Binary files a/chart-sdk/blazor/charts/images/category-axis/blazor-chart-index-category-axis.webp and b/chart-sdk/blazor/charts/images/category-axis/blazor-chart-index-category-axis.webp differ diff --git a/chart-sdk/blazor/charts/images/category-axis/blazor-diagram-label-position.webp b/chart-sdk/blazor/charts/images/category-axis/blazor-diagram-label-position.webp index b2d6ae1d5..433414527 100644 Binary files a/chart-sdk/blazor/charts/images/category-axis/blazor-diagram-label-position.webp and b/chart-sdk/blazor/charts/images/category-axis/blazor-diagram-label-position.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-dimensions/blazor-chart-size-for-container.webp b/chart-sdk/blazor/charts/images/chart-dimensions/blazor-chart-size-for-container.webp index 1c550da8a..299393f44 100644 Binary files a/chart-sdk/blazor/charts/images/chart-dimensions/blazor-chart-size-for-container.webp and b/chart-sdk/blazor/charts/images/chart-dimensions/blazor-chart-size-for-container.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-dimensions/blazor-chart-size-in-percentage.webp b/chart-sdk/blazor/charts/images/chart-dimensions/blazor-chart-size-in-percentage.webp index 5d3f97182..101ebc681 100644 Binary files a/chart-sdk/blazor/charts/images/chart-dimensions/blazor-chart-size-in-percentage.webp and b/chart-sdk/blazor/charts/images/chart-dimensions/blazor-chart-size-in-percentage.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-dimensions/blazor-chart-size-in-pixel.webp b/chart-sdk/blazor/charts/images/chart-dimensions/blazor-chart-size-in-pixel.webp index 654ec3c0f..89c5a83a1 100644 Binary files a/chart-sdk/blazor/charts/images/chart-dimensions/blazor-chart-size-in-pixel.webp and b/chart-sdk/blazor/charts/images/chart-dimensions/blazor-chart-size-in-pixel.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-area-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-area-chart.webp index a57a93b8a..5c27b2975 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-area-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-area-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.webp index 5d3693af4..882b69872 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart-corner-radius-using_onPointRenderEvent.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart-corner-radius.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart-corner-radius.webp index aca71e07d..093a21095 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart-corner-radius.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart-corner-radius.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart-width-in-pixels.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart-width-in-pixels.webp index a2ecbfb0e..0dfc4c4bc 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart-width-in-pixels.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart-width-in-pixels.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart.webp index 449d17b98..c0627c1cc 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-bar-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-bubble-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-bubble-chart.webp index 4b4fc5ed3..0319f5fb9 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-bubble-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-bubble-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.webp index 3c993fa85..48f2b17d1 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart-corner-radius-onPointRender.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart-corner-radius.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart-corner-radius.webp index 6f94da144..4f2a2958d 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart-corner-radius.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart-corner-radius.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart-width-in-pixels.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart-width-in-pixels.webp index a57b4bab1..f222a614a 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart-width-in-pixels.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart-width-in-pixels.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart.webp index 7d8a7d62e..c336f4dad 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-column-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-high-low-open-close-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-high-low-open-close-chart.webp index bac777a29..243cd9ef9 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-high-low-open-close-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-high-low-open-close-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-line-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-line-chart.webp index e69040eb8..4075d3b05 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-line-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-line-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-pareto-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-pareto-chart.webp new file mode 100644 index 000000000..cdd4b36ee Binary files /dev/null and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-pareto-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-area-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-area-chart.webp index a6d693b4d..6002a9d2d 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-area-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-area-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-column-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-column-chart.webp index d6d696444..7fc887dac 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-column-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-column-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-column-corner-radius-OnPointRender.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-column-corner-radius-OnPointRender.webp index ec7e4fbf2..8a1e21979 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-column-corner-radius-OnPointRender.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-column-corner-radius-OnPointRender.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-column-corner-radius.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-column-corner-radius.webp index ffa3b96f8..fcb575862 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-column-corner-radius.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-column-corner-radius.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-step-area.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-step-area.webp index 9d9ac71b9..acd0dc7d5 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-step-area.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-range-step-area.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-scatter-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-scatter-chart.webp index 0b7a9fb43..391c71329 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-scatter-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-scatter-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-spline-area-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-spline-area-chart.webp index 015242482..b16328455 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-spline-area-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-spline-area-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-spline-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-spline-chart.webp index 1dbe50188..7ac7bb7c8 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-spline-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-spline-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-spline-range-area-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-spline-range-area-chart.webp index 9018ff753..d28c149fc 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-spline-range-area-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-spline-range-area-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-area-100-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-area-100-chart.webp index 311ec6570..9835b7ff6 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-area-100-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-area-100-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-area-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-area-chart.webp index 91448c5b5..4384e6314 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-area-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-area-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointrender.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointrender.webp index f0d845f58..cfba06058 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointrender.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointrender.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.webp index 47c646d55..36d7a196b 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-100-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-100-chart.webp index 081856ba7..68d0567ec 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-100-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-100-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.webp index 9f389ba47..9307084b8 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-chart-corner-radius.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-chart-corner-radius.webp index 49b1a7e70..401ca6105 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-chart-corner-radius.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-chart-corner-radius.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-chart.webp index b37b390d7..9cfdba6a1 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-bar-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.webp index b9e3e9092..a0fbdf974 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius-onPointRender.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.webp index b16978017..52475f7d6 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-100-chart-corner-radius.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-100-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-100-chart.webp index fb904e4ea..e9eeec73c 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-100-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-100-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.webp index 1f8e96f56..0daeea73d 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-chart-corner-radius-onPointRender.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-chart-corner-radius.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-chart-corner-radius.webp index 0de38f6a8..b3a2464bd 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-chart-corner-radius.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-chart-corner-radius.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-chart.webp index 8f8db215f..9d9da75f9 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-column-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-line-100-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-line-100-chart.webp index f46918787..af36f21ac 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-line-100-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-line-100-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-line-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-line-chart.webp index 1f9c6fb95..740ade3f0 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-line-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-stacked-line-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-step-area-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-step-area-chart.webp index 5573b7ee7..d32e2c655 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-step-area-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-step-area-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-step-line-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-step-line-chart.webp index 5abe23642..3da58b8e1 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-step-line-chart.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-step-line-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-vertical-spline-chart.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-vertical-spline-chart.webp new file mode 100644 index 000000000..e826c124f Binary files /dev/null and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-vertical-spline-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.webp b/chart-sdk/blazor/charts/images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.webp index f05888a9d..8f70d8312 100644 Binary files a/chart-sdk/blazor/charts/images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.webp and b/chart-sdk/blazor/charts/images/chart-types-images/blazor-waterfall-chart-corner-radius-onPointRender.webp differ diff --git a/chart-sdk/blazor/charts/images/chart-types-images/lazyload-column.webp b/chart-sdk/blazor/charts/images/chart-types-images/lazyload-column.webp new file mode 100644 index 000000000..522096df4 Binary files /dev/null and b/chart-sdk/blazor/charts/images/chart-types-images/lazyload-column.webp differ diff --git a/chart-sdk/blazor/charts/images/crosshair/blazor-line-chart-with-highlight-background-trackball.webp b/chart-sdk/blazor/charts/images/crosshair/blazor-line-chart-with-highlight-background-trackball.webp index b0f36d85b..910b4b53a 100644 Binary files a/chart-sdk/blazor/charts/images/crosshair/blazor-line-chart-with-highlight-background-trackball.webp and b/chart-sdk/blazor/charts/images/crosshair/blazor-line-chart-with-highlight-background-trackball.webp differ diff --git a/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-axis-based-on-interval.webp b/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-axis-based-on-interval.webp index eabdcc627..500d7fa42 100644 Binary files a/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-axis-based-on-interval.webp and b/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-axis-based-on-interval.webp differ diff --git a/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-axis-based-on-range.webp b/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-axis-based-on-range.webp index 20c2b796c..2ed85cbb1 100644 Binary files a/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-axis-based-on-range.webp and b/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-axis-based-on-range.webp differ diff --git a/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-axis-label-format.webp b/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-axis-label-format.webp index a1a0a420f..d4718e923 100644 Binary files a/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-axis-label-format.webp and b/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-axis-label-format.webp differ diff --git a/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-datetime-axis.webp b/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-datetime-axis.webp index 386a4b193..3651527b8 100644 Binary files a/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-datetime-axis.webp and b/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-datetime-axis.webp differ diff --git a/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-with-datetime-axis.webp b/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-with-datetime-axis.webp index efc0cab0d..5ff2843a9 100644 Binary files a/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-with-datetime-axis.webp and b/chart-sdk/blazor/charts/images/datetime/blazor-line-chart-with-datetime-axis.webp differ diff --git a/chart-sdk/blazor/charts/images/financial-types/blazor-candle-chart.webp b/chart-sdk/blazor/charts/images/financial-types/blazor-candle-chart.webp index f15fd19f9..d2150142a 100644 Binary files a/chart-sdk/blazor/charts/images/financial-types/blazor-candle-chart.webp and b/chart-sdk/blazor/charts/images/financial-types/blazor-candle-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/financial-types/blazor-hilo-chart.webp b/chart-sdk/blazor/charts/images/financial-types/blazor-hilo-chart.webp index c164e45ef..4943b6083 100644 Binary files a/chart-sdk/blazor/charts/images/financial-types/blazor-hilo-chart.webp and b/chart-sdk/blazor/charts/images/financial-types/blazor-hilo-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/getting-started/blazor-chart-column.webp b/chart-sdk/blazor/charts/images/getting-started/blazor-chart-column.webp index 5e25086bc..f7e4f525e 100644 Binary files a/chart-sdk/blazor/charts/images/getting-started/blazor-chart-column.webp and b/chart-sdk/blazor/charts/images/getting-started/blazor-chart-column.webp differ diff --git a/chart-sdk/blazor/charts/images/getting-started/blazor-chart.webp b/chart-sdk/blazor/charts/images/getting-started/blazor-chart.webp index da351fe16..6a92f6597 100644 Binary files a/chart-sdk/blazor/charts/images/getting-started/blazor-chart.webp and b/chart-sdk/blazor/charts/images/getting-started/blazor-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/last value/blazor-column-chart-last-value-label-customization.webp b/chart-sdk/blazor/charts/images/last value/blazor-column-chart-last-value-label-customization.webp new file mode 100644 index 000000000..a61c9824d Binary files /dev/null and b/chart-sdk/blazor/charts/images/last value/blazor-column-chart-last-value-label-customization.webp differ diff --git a/chart-sdk/blazor/charts/images/last value/blazor-column-chart-last-value-label.webp b/chart-sdk/blazor/charts/images/last value/blazor-column-chart-last-value-label.webp new file mode 100644 index 000000000..b622fe567 Binary files /dev/null and b/chart-sdk/blazor/charts/images/last value/blazor-column-chart-last-value-label.webp differ diff --git a/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-chart-logarithmic-axis.webp b/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-chart-logarithmic-axis.webp index 825dff40c..50165e81f 100644 Binary files a/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-chart-logarithmic-axis.webp and b/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-chart-logarithmic-axis.webp differ diff --git a/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-axis-based-on-range.webp b/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-axis-based-on-range.webp index 66af6ab8f..80ecc28b1 100644 Binary files a/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-axis-based-on-range.webp and b/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-axis-based-on-range.webp differ diff --git a/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.webp b/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.webp index 38f0e3c43..7d2080bdb 100644 Binary files a/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.webp and b/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.webp differ diff --git a/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-axis-with-label-format.webp b/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-axis-with-label-format.webp index 44cfc556d..dfad1db91 100644 Binary files a/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-axis-with-label-format.webp and b/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-axis-with-label-format.webp differ diff --git a/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.webp b/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.webp index 6963a1e31..c02fd505c 100644 Binary files a/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.webp and b/chart-sdk/blazor/charts/images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.webp differ diff --git a/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp b/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp index 542c7ca5c..b02aa0043 100644 Binary files a/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp and b/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp differ diff --git a/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-panes-with-column.webp b/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-panes-with-column.webp index 908d8b73d..ab59d3832 100644 Binary files a/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-panes-with-column.webp and b/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-panes-with-column.webp differ diff --git a/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp b/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp index 5a3c0c8ba..88a75c3e8 100644 Binary files a/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp and b/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp differ diff --git a/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp b/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp index 3ba686c2e..f371916f6 100644 Binary files a/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp and b/chart-sdk/blazor/charts/images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp differ diff --git a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-additional-range-padding.webp b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-additional-range-padding.webp index 5d412926f..dc4b890f6 100644 Binary files a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-additional-range-padding.webp and b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-additional-range-padding.webp differ diff --git a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-auto-rangepadding.webp b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-auto-rangepadding.webp index 87dffb093..eca9d2acd 100644 Binary files a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-auto-rangepadding.webp and b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-auto-rangepadding.webp differ diff --git a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-axis-range.webp b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-axis-range.webp index 586b73901..9c47ca8ee 100644 Binary files a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-axis-range.webp and b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-axis-range.webp differ diff --git a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-custom-label-format.webp b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-custom-label-format.webp index 9623e6cc0..a4a1e9a3c 100644 Binary files a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-custom-label-format.webp and b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-custom-label-format.webp differ diff --git a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-grouping-separator.webp b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-grouping-separator.webp index 223124cc3..e3be8f1d9 100644 Binary files a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-grouping-separator.webp and b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-grouping-separator.webp differ diff --git a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-label-format.webp b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-label-format.webp index bd463076c..8cd493abc 100644 Binary files a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-label-format.webp and b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-label-format.webp differ diff --git a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-normal-range-padding.webp b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-normal-range-padding.webp index 4062dfb19..dc358e530 100644 Binary files a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-normal-range-padding.webp and b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-normal-range-padding.webp differ diff --git a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-numeric-axis.webp b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-numeric-axis.webp index 0712edd8e..2062e870a 100644 Binary files a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-numeric-axis.webp and b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-numeric-axis.webp differ diff --git a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-range-without-padding.webp b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-range-without-padding.webp index 499377f2d..e7efb746b 100644 Binary files a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-range-without-padding.webp and b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-range-without-padding.webp differ diff --git a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-round-range-padding.webp b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-round-range-padding.webp index 0645f8b7f..21886a02b 100644 Binary files a/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-round-range-padding.webp and b/chart-sdk/blazor/charts/images/numeric-axis/blazor-line-chart-round-range-padding.webp differ diff --git a/chart-sdk/blazor/charts/images/othertypes/blazor-box-whisker-charts.webp b/chart-sdk/blazor/charts/images/othertypes/blazor-box-whisker-charts.webp index f816e269e..1e524cd9a 100644 Binary files a/chart-sdk/blazor/charts/images/othertypes/blazor-box-whisker-charts.webp and b/chart-sdk/blazor/charts/images/othertypes/blazor-box-whisker-charts.webp differ diff --git a/chart-sdk/blazor/charts/images/othertypes/blazor-error-bar-chart.webp b/chart-sdk/blazor/charts/images/othertypes/blazor-error-bar-chart.webp index e6d7c5167..db59efb1f 100644 Binary files a/chart-sdk/blazor/charts/images/othertypes/blazor-error-bar-chart.webp and b/chart-sdk/blazor/charts/images/othertypes/blazor-error-bar-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/othertypes/blazor-histogram-chart.webp b/chart-sdk/blazor/charts/images/othertypes/blazor-histogram-chart.webp index c3f8104a3..7047f41d5 100644 Binary files a/chart-sdk/blazor/charts/images/othertypes/blazor-histogram-chart.webp and b/chart-sdk/blazor/charts/images/othertypes/blazor-histogram-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/othertypes/blazor-waterfall-chart-corner-radius.webp b/chart-sdk/blazor/charts/images/othertypes/blazor-waterfall-chart-corner-radius.webp new file mode 100644 index 000000000..fa820fccd Binary files /dev/null and b/chart-sdk/blazor/charts/images/othertypes/blazor-waterfall-chart-corner-radius.webp differ diff --git a/chart-sdk/blazor/charts/images/othertypes/blazor-waterfall-chart.webp b/chart-sdk/blazor/charts/images/othertypes/blazor-waterfall-chart.webp index 5c689f8c5..e762c7a74 100644 Binary files a/chart-sdk/blazor/charts/images/othertypes/blazor-waterfall-chart.webp and b/chart-sdk/blazor/charts/images/othertypes/blazor-waterfall-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/polar-radar/blazor-polar-chart.webp b/chart-sdk/blazor/charts/images/polar-radar/blazor-polar-chart.webp index b1ff55d69..2130d71af 100644 Binary files a/chart-sdk/blazor/charts/images/polar-radar/blazor-polar-chart.webp and b/chart-sdk/blazor/charts/images/polar-radar/blazor-polar-chart.webp differ diff --git a/chart-sdk/blazor/charts/images/polar-radar/blazor-radar-chart-line-series.webp b/chart-sdk/blazor/charts/images/polar-radar/blazor-radar-chart-line-series.webp index c84d2f78d..a5cbfcdca 100644 Binary files a/chart-sdk/blazor/charts/images/polar-radar/blazor-radar-chart-line-series.webp and b/chart-sdk/blazor/charts/images/polar-radar/blazor-radar-chart-line-series.webp differ diff --git a/chart-sdk/blazor/charts/images/selection/blazor-column-chart-programmatic-selection.webp b/chart-sdk/blazor/charts/images/selection/blazor-column-chart-programmatic-selection.webp index 808f32968..00e7803f2 100644 Binary files a/chart-sdk/blazor/charts/images/selection/blazor-column-chart-programmatic-selection.webp and b/chart-sdk/blazor/charts/images/selection/blazor-column-chart-programmatic-selection.webp differ diff --git a/chart-sdk/blazor/charts/images/strip-line/blazor-chart-custom-strip-text.webp b/chart-sdk/blazor/charts/images/strip-line/blazor-chart-custom-strip-text.webp index 131ed0951..fa02f3d34 100644 Binary files a/chart-sdk/blazor/charts/images/strip-line/blazor-chart-custom-strip-text.webp and b/chart-sdk/blazor/charts/images/strip-line/blazor-chart-custom-strip-text.webp differ diff --git a/chart-sdk/blazor/charts/images/strip-line/blazor-chart-custom-stripline.webp b/chart-sdk/blazor/charts/images/strip-line/blazor-chart-custom-stripline.webp index cccf4e297..a77a88dba 100644 Binary files a/chart-sdk/blazor/charts/images/strip-line/blazor-chart-custom-stripline.webp and b/chart-sdk/blazor/charts/images/strip-line/blazor-chart-custom-stripline.webp differ diff --git a/chart-sdk/blazor/charts/images/strip-line/blazor-chart-horizontal-strip-line.webp b/chart-sdk/blazor/charts/images/strip-line/blazor-chart-horizontal-strip-line.webp index 7348b591f..99ac20789 100644 Binary files a/chart-sdk/blazor/charts/images/strip-line/blazor-chart-horizontal-strip-line.webp and b/chart-sdk/blazor/charts/images/strip-line/blazor-chart-horizontal-strip-line.webp differ diff --git a/chart-sdk/blazor/charts/images/strip-line/blazor-chart-segmented-stripline.webp b/chart-sdk/blazor/charts/images/strip-line/blazor-chart-segmented-stripline.webp index e78e7c9e7..9b1ddb5b7 100644 Binary files a/chart-sdk/blazor/charts/images/strip-line/blazor-chart-segmented-stripline.webp and b/chart-sdk/blazor/charts/images/strip-line/blazor-chart-segmented-stripline.webp differ diff --git a/chart-sdk/blazor/charts/images/strip-line/blazor-chart-vertical-stripline.webp b/chart-sdk/blazor/charts/images/strip-line/blazor-chart-vertical-stripline.webp index 17267b8c3..614841f07 100644 Binary files a/chart-sdk/blazor/charts/images/strip-line/blazor-chart-vertical-stripline.webp and b/chart-sdk/blazor/charts/images/strip-line/blazor-chart-vertical-stripline.webp differ diff --git a/chart-sdk/blazor/charts/images/tooltip/blazor-chart-nearest-tooltip.webp b/chart-sdk/blazor/charts/images/tooltip/blazor-chart-nearest-tooltip.webp index 336755252..744b20b10 100644 Binary files a/chart-sdk/blazor/charts/images/tooltip/blazor-chart-nearest-tooltip.webp and b/chart-sdk/blazor/charts/images/tooltip/blazor-chart-nearest-tooltip.webp differ diff --git a/chart-sdk/blazor/charts/images/tooltip/blazor-tooltip-enable-highlight.webp b/chart-sdk/blazor/charts/images/tooltip/blazor-tooltip-enable-highlight.webp index f2de87fa5..9639dd496 100644 Binary files a/chart-sdk/blazor/charts/images/tooltip/blazor-tooltip-enable-highlight.webp and b/chart-sdk/blazor/charts/images/tooltip/blazor-tooltip-enable-highlight.webp differ diff --git a/chart-sdk/blazor/charts/images/working-data/blazor-chart-data-binding.webp b/chart-sdk/blazor/charts/images/working-data/blazor-chart-data-binding.webp index c70d90579..b94e81ba3 100644 Binary files a/chart-sdk/blazor/charts/images/working-data/blazor-chart-data-binding.webp and b/chart-sdk/blazor/charts/images/working-data/blazor-chart-data-binding.webp differ diff --git a/chart-sdk/blazor/charts/images/working-data/blazor-chart-empty-point.webp b/chart-sdk/blazor/charts/images/working-data/blazor-chart-empty-point.webp index db771596f..48cb0858a 100644 Binary files a/chart-sdk/blazor/charts/images/working-data/blazor-chart-empty-point.webp and b/chart-sdk/blazor/charts/images/working-data/blazor-chart-empty-point.webp differ diff --git a/chart-sdk/blazor/charts/images/working-data/blazor-chart-no-data-template.webp b/chart-sdk/blazor/charts/images/working-data/blazor-chart-no-data-template.webp index 394bd5cf0..84cb3bb68 100644 Binary files a/chart-sdk/blazor/charts/images/working-data/blazor-chart-no-data-template.webp and b/chart-sdk/blazor/charts/images/working-data/blazor-chart-no-data-template.webp differ diff --git a/chart-sdk/blazor/charts/images/working-data/blazor-chart-web-api-binding.webp b/chart-sdk/blazor/charts/images/working-data/blazor-chart-web-api-binding.webp index 66f3b1953..00909d03c 100644 Binary files a/chart-sdk/blazor/charts/images/working-data/blazor-chart-web-api-binding.webp and b/chart-sdk/blazor/charts/images/working-data/blazor-chart-web-api-binding.webp differ diff --git a/chart-sdk/blazor/charts/images/working-data/observable-collection.webp b/chart-sdk/blazor/charts/images/working-data/observable-collection.webp index ccf81ef9c..f74d61bf7 100644 Binary files a/chart-sdk/blazor/charts/images/working-data/observable-collection.webp and b/chart-sdk/blazor/charts/images/working-data/observable-collection.webp differ diff --git a/chart-sdk/blazor/charts/images/zoom/blazor-area-chart-scroll-bar-customization.webp b/chart-sdk/blazor/charts/images/zoom/blazor-area-chart-scroll-bar-customization.webp index f46389213..382086da8 100644 Binary files a/chart-sdk/blazor/charts/images/zoom/blazor-area-chart-scroll-bar-customization.webp and b/chart-sdk/blazor/charts/images/zoom/blazor-area-chart-scroll-bar-customization.webp differ diff --git a/chart-sdk/blazor/charts/images/zoom/blazor-line-chart-scroll-bar-position.webp b/chart-sdk/blazor/charts/images/zoom/blazor-line-chart-scroll-bar-position.webp index 1e8a47f64..b91424a74 100644 Binary files a/chart-sdk/blazor/charts/images/zoom/blazor-line-chart-scroll-bar-position.webp and b/chart-sdk/blazor/charts/images/zoom/blazor-line-chart-scroll-bar-position.webp differ diff --git a/chart-sdk/blazor/charts/images/zoom/blazor-line-chart-zoom-toolbar-position.webp b/chart-sdk/blazor/charts/images/zoom/blazor-line-chart-zoom-toolbar-position.webp index 3056aec13..1cba49e34 100644 Binary files a/chart-sdk/blazor/charts/images/zoom/blazor-line-chart-zoom-toolbar-position.webp and b/chart-sdk/blazor/charts/images/zoom/blazor-line-chart-zoom-toolbar-position.webp differ diff --git a/chart-sdk/blazor/charts/internationalization.md b/chart-sdk/blazor/charts/internationalization.md index d5766026b..bd5132efd 100644 --- a/chart-sdk/blazor/charts/internationalization.md +++ b/chart-sdk/blazor/charts/internationalization.md @@ -1,13 +1,13 @@ --- layout: post -title: Internationalization in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Internationalization in Blazor Charts component and more. -platform: chart-sdk -control: Chart +title: Blazor Charts Internationalization Examples | Syncfusion® +description: Learn how to globalize Syncfusion Blazor Charts. Configure LabelFormat for axis labels, data labels, and tooltips for cultures such as EUR or ja-JP. +platform: Blazor +control: Charts documentation: ug --- -# Internationalization in Blazor Charts Component +# Blazor Charts Internationalization Internationalization is the process of designing and developing a component that can be easily adapted for users from any culture, region, or language. Below elements in the [Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html) display content based on the internationalization configuration. @@ -82,7 +82,7 @@ Learn more about axis label format in-relation to axis types from the pages belo * [Logarithmic Label Format](./logarithmic-axis#label-format) * [Custom Label Format](./numeric-axis#custom-label-format) -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/line?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/line?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/charts/last-data-label.md b/chart-sdk/blazor/charts/last-data-label.md index 59a77367e..5d5a71c4d 100644 --- a/chart-sdk/blazor/charts/last-data-label.md +++ b/chart-sdk/blazor/charts/last-data-label.md @@ -1,13 +1,13 @@ --- layout: post -title: Last Data Label in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Last Data Label in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Last Data Label Examples | Syncfusion® +description: Learn how to highlight the most recent data point in Syncfusion Blazor Charts. Use ChartLastDataLabel ShowLabel with an indicator line. +platform: Blazor +control: Charts documentation: ug --- -# Last Data Label in Blazor Charts Component +# Blazor Charts Last Data Label The last data label feature highlights the most recent data point in a series by displaying a label along with an indicator line. This enhancement improves visibility and makes it easier to identify the latest value in the chart. The label can be enabled and customized using the [ChartLastDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html) property. @@ -54,7 +54,7 @@ To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/c ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrotEjvfKbMpjHI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Last Data Label in Blazor Column Chart](images/last-value/blazor-column-chart-last-value-label.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rNrxtdMrTSigLZcY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Last Data Label in Blazor Column Chart](images/last-value/blazor-column-chart-last-value-label.webp)" %} ## Customization @@ -121,7 +121,7 @@ In the [ChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVojaDbzJnZIqnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Last Data Label in Blazor Column Chart Customization](images/last-value/blazor-column-chart-last-value-label-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhnDxiLJeWlqFlK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Last Data Label in Blazor Column Chart Customization](images/last-value/blazor-column-chart-last-value-label-customization.webp)" %} ## See also @@ -129,4 +129,4 @@ In the [ChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion * [Tooltip](./tool-tip) * [Marker](./data-markers) -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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. diff --git a/chart-sdk/blazor/charts/legend.md b/chart-sdk/blazor/charts/legend.md index 9ae601c57..314a29b68 100644 --- a/chart-sdk/blazor/charts/legend.md +++ b/chart-sdk/blazor/charts/legend.md @@ -1,13 +1,13 @@ --- layout: post -title: Legend in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Legend and its customization in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Legend Configuration Examples | Syncfusion® +description: Learn how to display and customize legends in Syncfusion Blazor Charts. Enable ChartLegendSettings Visible and configure position and alignment. +platform: Blazor +control: Charts documentation: ug --- -# Legend in Blazor Charts Component +# Blazor Charts Legend The [legend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html) provides information on the series shown in the chart. @@ -773,7 +773,7 @@ To use, add a `LegendItemTemplate` inside any [ChartSeries](https://help.syncfus ``` ![Legend Template in Blazor Column Chart](images/legend/blazor-column-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 Chart Example](https://blazor.syncfusion.com/demos/chart/line?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/line?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/charts/localization.md b/chart-sdk/blazor/charts/localization.md index 4c4e5df27..661d7cfcf 100644 --- a/chart-sdk/blazor/charts/localization.md +++ b/chart-sdk/blazor/charts/localization.md @@ -1,13 +1,13 @@ --- layout: post -title: Localization in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Localization in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Localization Examples | Syncfusion® +description: Learn how to localize Syncfusion Blazor Charts. Configure the localization framework and culture settings for labels, tooltips, and legends. +platform: Blazor +control: Charts documentation: ug --- -# Localization in Blazor Charts Component +# Blazor Charts Localization The [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) component supports localization, enabling you to adapt the UI elements such as labels, tooltips, legends, and other text-based content to different languages and cultures. Localization is an essential feature for building globally accessible applications, as it ensures that users can interact with charts in their preferred language and regional settings. Localization in Blazor components is handled through the common localization framework provided by Syncfusion. By configuring localization properly, you can display translated text for chart elements and ensure consistent formatting based on cultural preferences such as date formats, number formats, and currency symbols. @@ -16,7 +16,7 @@ To implement localization in the [Blazor Charts](https://www.syncfusion.com/blaz By applying localization, the chart component can automatically adapt to the selected culture. For example, date values displayed on the axis will follow the regional format, and numeric values will be shown with appropriate separators and symbols. In addition to text translation, localization also improves the user experience by aligning with regional expectations. For instance, decimal separators may vary between cultures (e.g., . vs ,), and date formats can differ significantly. Proper localization ensures that such variations are handled seamlessly within the chart. -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/line?theme=bootstrap4) 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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. ### Key Benefits of Localization in Charts diff --git a/chart-sdk/blazor/charts/logarithmic-axis.md b/chart-sdk/blazor/charts/logarithmic-axis.md index 683245f8c..953f4df60 100644 --- a/chart-sdk/blazor/charts/logarithmic-axis.md +++ b/chart-sdk/blazor/charts/logarithmic-axis.md @@ -1,13 +1,13 @@ --- layout: post -title: Logarithmic Axis in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Logarithmic Axis in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Logarithmic Axis Examples | Syncfusion® +description: Learn how to use the logarithmic axis in Syncfusion Blazor Charts. Visualize data spanning many orders of magnitude in a single readable view. +platform: Blazor +control: Charts documentation: ug --- -# Logarithmic Axis in Blazor Charts Component +# Blazor Charts Logarithmic Axis @@ -51,7 +51,7 @@ A detailed walkthrough for customizing the logarithmic axis is provided in the v } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLAMLhHLhczYuye?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZLHNRMBJKWGoOWk?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart with Logarithmic Axis](images/logarithmic-axis/blazor-chart-logarithmic-axis.webp)" %} ## Range @@ -91,7 +91,7 @@ The axis range will be calculated automatically based on the provided data; howe } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXrqChBHBgilgqlG?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDhxXdWVpqLMgDHe?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Line Chart Logarithmic Axis based on Range](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.webp)" %} ## Logarithmic base @@ -131,7 +131,7 @@ Logarithmic base can be customized using the [LogBase](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVKWVLHhgBMKubZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXhHZdMhTKqNmdhS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart Logarithmic Axis with Base](images/logarithmic-axis/blazor-line-chart-logarithmic-axis-with-base.webp)" %} ## Logarithmic interval @@ -171,7 +171,7 @@ The interval can be customized using the [Interval](https://help.syncfusion.com/ } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhqMhVdrUVPPtnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXBnZxCVJgKJLgey?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Line Chart Logarithmic Axis based on Interval](images/logarithmic-axis/blazor-line-chart-axis-based-on-range.webp)" %} ## Label format @@ -212,7 +212,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rZBUWrVHBqKsJuuA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Label Format](images/logarithmic-axis/blazor-line-chart-axis-with-label-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNVnXxCBJqqwxiXU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart Logarithmic Axis with Label Format](images/logarithmic-axis/blazor-line-chart-axis-with-label-format.webp)" %} The table below shows the results of applying some commonly used label formats to logarithmic values. @@ -311,9 +311,9 @@ Axis also supports custom label format using placeholders such as {value}K, wher } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrAMhrnBgqGAVip?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart Logarithmic Axis with Custom Label Format](images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLHXRCVJgpHHeDg?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart Logarithmic Axis with Custom Label Format](images/logarithmic-axis/blazor-line-chart-axis-custom-label-format.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/line?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/line?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/charts/multiple-panes.md b/chart-sdk/blazor/charts/multiple-panes.md index 2ae158606..7efb27c98 100644 --- a/chart-sdk/blazor/charts/multiple-panes.md +++ b/chart-sdk/blazor/charts/multiple-panes.md @@ -1,13 +1,13 @@ --- layout: post -title: Multiple Panes in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Multiple Panes in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Multiple Panes Examples | Syncfusion® +description: Learn how to divide Blazor Charts into multiple panes. Use ChartRows and ChartColumns to give each pane its own height, axis, and series. +platform: Blazor +control: Charts documentation: ug --- -# Multiple Panes in Blazor Charts Component +# Blazor Charts Multiple Panes The chart area can be divided into multiple panes using [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartRow.html) and [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartColumn.html) settings. @@ -74,7 +74,7 @@ Use the chart's [Rows](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZrKiLhHhSDlvdrE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rows with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBxNHWLzJlLnsVV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Rows with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-rows.webp)" %} The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAxis.html#Syncfusion_Blazor_Charts_StockChartCommonAxis_Span) property of the axis can be used to span the vertical axis across multiple rows. @@ -132,7 +132,7 @@ The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjrAWhLdhICspjQE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Row spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLdXnWhJflSYgFU?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Row spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-span-with-rows-span.webp)" %} ## Columns @@ -196,7 +196,7 @@ Use the chart's [Columns](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBqirLHryWphYTs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Columns with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBxXxMLffFEQEIX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Columns with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column.webp)" %} The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAxis.html#Syncfusion_Blazor_Charts_StockChartCommonAxis_Span) property of the axis can be used to span the horizontal axis across multiple column. @@ -252,9 +252,9 @@ The [Span](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockC } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVAWBLxhoCQMrEz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Column Spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBntdWBJfEgZHGh?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Column Spanning with Multiple Panes in Blazor Chart](images/multiple-panes/blazor-chart-multiple-panes-with-column-span.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/line?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/line?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/charts/numeric-axis.md b/chart-sdk/blazor/charts/numeric-axis.md index d33c9d5a2..9afe7b8ed 100644 --- a/chart-sdk/blazor/charts/numeric-axis.md +++ b/chart-sdk/blazor/charts/numeric-axis.md @@ -1,15 +1,15 @@ --- layout: post -title: Numeric Axis in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Numeric Axis in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Numeric Axis Examples | Syncfusion® +description: Learn how to use the numeric axis in Syncfusion Blazor Charts. Set ValueType to Double and customize range, interval, and label format. +platform: Blazor +control: Charts documentation: ug --- -# Numeric Axis in Blazor Charts Component +# Blazor Charts Numeric Axis Numeric axis can be used to represent numeric values in a chart. The [ValueType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_ValueType) of an axis is [Double](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ValueType.html#Syncfusion_Blazor_Charts_ValueType_Double) by default. @@ -48,7 +48,7 @@ A detailed walkthrough for customizing the numeric axis is provided in the video } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLgWLhVpXofZgyo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Numeric Axis](images/numeric-axis/blazor-line-chart-numeric-axis.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDVdDdMhfCMeCwNB?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart with Numeric Axis](images/numeric-axis/blazor-line-chart-numeric-axis.webp)" %} ## Range and interval @@ -86,7 +86,7 @@ The axis range will be calculated automatically based on the provided data; howe } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrgiVrhJjoSuZwi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor Line Chart Axis based on Range](images/numeric-axis/blazor-line-chart-axis-range.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXBnDnWhzMCbGeLQ?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Changing Blazor Line Chart Axis based on Range](images/numeric-axis/blazor-line-chart-axis-range.webp)" %} ## Range padding @@ -134,7 +134,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhKWVBhTjobfVue?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart without RangePadding](images/numeric-axis/blazor-line-chart-range-without-padding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVRtHsVfihBPKoc?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart without RangePadding](images/numeric-axis/blazor-line-chart-range-without-padding.webp)" %} **Numeric - Round** @@ -172,7 +172,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZrKMLhBztnCBwWc?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Round RangePadding](images/numeric-axis/blazor-line-chart-round-range-padding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrHZdCVfiBkfAhV?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart with Round RangePadding](images/numeric-axis/blazor-line-chart-round-range-padding.webp)" %} **Numeric - Additional** @@ -210,7 +210,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhgWLrhpZRURFmO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Additional RangePadding](images/numeric-axis/blazor-line-chart-additional-range-padding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNrntxCVpigeAQrT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart with Additional RangePadding](images/numeric-axis/blazor-line-chart-additional-range-padding.webp)" %} **Numeric - Normal** @@ -248,7 +248,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKsrrrpXdxUwHH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Normal RangePadding](images/numeric-axis/blazor-line-chart-normal-range-padding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNLRNniLpMKkVdOy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart with Normal RangePadding](images/numeric-axis/blazor-line-chart-normal-range-padding.webp)" %} **Numeric - Auto** @@ -287,7 +287,7 @@ When the [RangePadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjrUChBVTtmNHCaU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Auto RangePadding](images/numeric-axis/blazor-line-chart-auto-rangepadding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVdXxWBpCTgCCYu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart with Auto RangePadding](images/numeric-axis/blazor-line-chart-auto-rangepadding.webp)" %} ## Label format @@ -330,7 +330,7 @@ Using the [LabelFormat](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjhUChrhpjcKDKLn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Label Formatting in Blazor Line Chart](images/numeric-axis/blazor-line-chart-label-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVHjdCVzipdaCzG?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Label Formatting in Blazor Line Chart](images/numeric-axis/blazor-line-chart-label-format.webp)" %} The table below shows the results of applying various commonly used label formats to numeric data. @@ -440,7 +440,7 @@ To separate groups of thousands for numerical values, use the [UseGroupingSepara ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDBJZqLnepVFKTog?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Grouping Separator in Blazor Line Chart](images/numeric-axis/blazor-line-chart-grouping-separator.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthxNxMrJWegMTjl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Grouping Separator in Blazor Line Chart](images/numeric-axis/blazor-line-chart-grouping-separator.webp)" %} ## Custom label format @@ -478,9 +478,9 @@ Axis also supports custom label format using placeholders such as {value}K, wher } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtBAiVLrzZGdUeri?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Custom Label Format](images/numeric-axis/blazor-line-chart-custom-label-format.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtLxtnsBpioPAlGt?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart with Custom Label Format](images/numeric-axis/blazor-line-chart-custom-label-format.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/line?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/line?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/charts/selection.md b/chart-sdk/blazor/charts/selection.md index f074c2a4d..a522baa6d 100644 --- a/chart-sdk/blazor/charts/selection.md +++ b/chart-sdk/blazor/charts/selection.md @@ -1,15 +1,15 @@ --- layout: post -title: Selection in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Selection feature in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Selection Examples | Syncfusion® +description: Learn how to enable selection in Syncfusion Blazor Charts. Choose Point, Series, Cluster, DragXY, or DragX modes for mouse or touch. +platform: Blazor +control: Charts documentation: ug --- -# Selection in Blazor Charts Component +# Blazor Charts Selection The chart provides selection support for the series and its data points on mouse or touch action. @@ -372,7 +372,7 @@ A point or series can be selected programmatically on a chart using the [Selecte ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjVJtgBxfkYWmfSE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Programmatically Selection in Blazor Column Chart](images/selection/blazor-column-chart-programmatic-selection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BXhnDnCLItVmzuTx?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Programmatically Selection in Blazor Column Chart](images/selection/blazor-column-chart-programmatic-selection.webp)" %} ## Legend Selection @@ -493,7 +493,7 @@ The custom style can be applied to selected points or series using the [Selectio ![Blazor Column Chart with Custom Style Selection](images/selection/blazor-chart-custom-style-selection.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/line?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/line?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/charts/series-label.md b/chart-sdk/blazor/charts/series-label.md index 4642189dc..563399237 100644 --- a/chart-sdk/blazor/charts/series-label.md +++ b/chart-sdk/blazor/charts/series-label.md @@ -1,14 +1,14 @@ --- layout: post -title: Series Label in Blazor Charts Component | Syncfusion -description: Check out and learn here all about the Series label in the Syncfusion Blazor Charts component and much more. +title: Blazor Charts Series Label Examples | Syncfusion® +description: Learn how to display series names inline in Syncfusion Blazor Charts. Use SeriesLabelSettings to improve readability of multi-series charts. platform: Blazor -control: Chart +control: Charts documentation: ug keywords: Blazor Chart series label, series label, chart labels, inline series labels, chart series customization, SeriesLabelSettings --- -# Series Label in Blazor Charts Component +# Blazor Charts Series Label The series label feature displays the name of each series directly within the chart area. This improves readability by helping users identify series inline and reduces reliance on the legend. @@ -191,4 +191,4 @@ In the `SeriesLabelFont`: * [Data Label](./data-labels) * [Legend](./legend) -N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page to explore the available chart features. You can also check the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to learn how chart types are used to visualize data trends over equal intervals. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page to explore the available chart features. You can also check the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=fluent2) to learn how chart types are used to visualize data trends over equal intervals. diff --git a/chart-sdk/blazor/charts/strip-line.md b/chart-sdk/blazor/charts/strip-line.md index 132f3935c..a2589cd4a 100644 --- a/chart-sdk/blazor/charts/strip-line.md +++ b/chart-sdk/blazor/charts/strip-line.md @@ -1,15 +1,15 @@ --- layout: post -title: Stripline in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Stripline in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Stripline Examples | Syncfusion® +description: Learn how to add striplines in Syncfusion Blazor Charts. Use ChartStripline to mark thresholds, ranges, or notable value bands. +platform: Blazor +control: Charts documentation: ug --- -# Stripline in Blazor Charts Component +# Blazor Charts Stripline @@ -58,7 +58,7 @@ By adding the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNhKCVVRhJcQliSp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Horizontal Striplines](images/strip-line/blazor-chart-horizontal-strip-line.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthdDRCBpJybXKNs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart with Horizontal Striplines](images/strip-line/blazor-chart-horizontal-strip-line.webp)" %} ## Vertical striplines @@ -102,7 +102,7 @@ By adding the [ChartStripline](https://help.syncfusion.com/cr/blazor/Syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLUsBBRLpbtIuIn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Vertical Striplines](images/strip-line/blazor-chart-vertical-stripline.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhxNRiBzznsUStq?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart with Vertical Striplines](images/strip-line/blazor-chart-vertical-stripline.webp)" %} ## Striplines customization @@ -146,7 +146,7 @@ The [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVUCVLxVfbqQNji?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Custom Striplines](images/strip-line/blazor-chart-custom-stripline.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhxZHMhJpxeJULY?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart with Custom Striplines](images/strip-line/blazor-chart-custom-stripline.webp)" %} ## Text customization @@ -193,7 +193,7 @@ The [Start](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNVgWVLHBJlQDgKI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Custom Stripline Text](images/strip-line/blazor-chart-custom-strip-text.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtrdtdMVzTnbTmpK?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart with Custom Stripline Text](images/strip-line/blazor-chart-custom-strip-text.webp)" %} ## Segmented stripline @@ -245,7 +245,7 @@ To create a stripline in a specific region with respect to a segment (segmented }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNLqMVhHrJGZtGLh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart With Segmented Stripline](../chart/images/strip-line/blazor-chart-segmented-stripline.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjLRtdshppcHNygP?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart With Segmented Stripline](../chart/images/strip-line/blazor-chart-segmented-stripline.webp)" %} ## Stripline tooltip @@ -433,7 +433,7 @@ The [ChartStriplineTooltipBorder](https://help.syncfusion.com/cr/blazor/Syncfusi ![Blazor Chart with Customized Stripline Tooltip](images/strip-line/blazor-chart-stripline-tooltip-customized.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/line?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/line?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/charts/technical-indicators.md b/chart-sdk/blazor/charts/technical-indicators.md index f5108b29f..e1c7bcab0 100644 --- a/chart-sdk/blazor/charts/technical-indicators.md +++ b/chart-sdk/blazor/charts/technical-indicators.md @@ -1,15 +1,15 @@ --- layout: post -title: Technical Indicators in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Technical Indicators in Blazor Charts component and more. -platform: chart-sdk -control: Chart +title: Blazor Charts Technical Indicators Examples | Syncfusion® +description: Learn how to add technical indicators in Syncfusion Blazor Charts. Use RSI, MACD, Bollinger, Accumulation Distribution, and seven more types. +platform: Blazor +control: Charts documentation: ug --- -# Technical Indicators in Blazor Charts Component +# Blazor Charts Technical Indicators A technical indicator is a mathematical calculation that forecasts financial market direction using historical price, volume, or open interest data. There are 10 different types of technical indicators that can be used with the chart. @@ -1644,7 +1644,7 @@ N> Technical indicators can also be added without series using [DataSource](http ``` -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/line?theme=bootstrap4) 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/line?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/charts/tool-tip.md b/chart-sdk/blazor/charts/tool-tip.md index de47a393c..9cef1aae2 100644 --- a/chart-sdk/blazor/charts/tool-tip.md +++ b/chart-sdk/blazor/charts/tool-tip.md @@ -1,13 +1,13 @@ --- layout: post -title: Tooltip in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Tooltip and its customization in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Tooltip Examples | Syncfusion® +description: Learn how to enable tooltips in Syncfusion Blazor Charts. Set ChartTooltipSettings Enable to true. Supports templates and custom formatting. +platform: Blazor +control: Charts documentation: ug --- -# Tooltip in Blazor Charts Component +# Blazor Charts Tooltip @@ -335,7 +335,7 @@ By enabling the [EnableHighlight](https://help.syncfusion.com/cr/blazor/Syncfusi ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZretJjTJXQadkbO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart tooltip with highlight series](images/tooltip/blazor-tooltip-enable-highlight.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZBRNniBJeIZMugw?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart tooltip with highlight series](images/tooltip/blazor-tooltip-enable-highlight.webp)" %} ## Displaying tooltip for nearest data point @@ -390,9 +390,9 @@ N> By default, `ShowNearestTooltip` property in [ChartSeries](https://help.syncf ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtBoZJtzTMXtrCZt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart shows nearest tooltip](images/tooltip/blazor-chart-nearest-tooltip.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBRNxMrTSSSftnE?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart shows nearest tooltip](images/tooltip/blazor-chart-nearest-tooltip.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/line?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/line?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/charts/trend-lines.md b/chart-sdk/blazor/charts/trend-lines.md index f69c2d8c2..08ab39f3b 100644 --- a/chart-sdk/blazor/charts/trend-lines.md +++ b/chart-sdk/blazor/charts/trend-lines.md @@ -1,15 +1,15 @@ --- layout: post -title: Trendlines in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about the Trendlines in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Trendlines Examples | Syncfusion® +description: Learn how to add trendlines in Syncfusion Blazor Charts. Use Linear, Exponential, Logarithmic, Power, Polynomial, or MovingAverage. +platform: Blazor +control: Charts documentation: ug --- -# Trendlines in Blazor Charts Component +# Blazor Charts Trendlines Trendlines are used to show the price's direction and pace. Except for bar series, trendlines can be generated for Cartesian series like Line, Column, Scatter, Area, Candle, Hilo, and so on. In addition, a series can have multiple trendlines. There are six different types of trendlines that can be used on the chart. They are as follows: @@ -493,7 +493,7 @@ The value set to [BackwardForecast](https://help.syncfusion.com/cr/blazor/Syncfu The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTrendline.html#Syncfusion_Blazor_Charts_ChartTrendline_Fill) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTrendline.html#Syncfusion_Blazor_Charts_ChartTrendline_Width) properties are used to customize the appearance of the trendline. -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/line?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/line?theme=fluent2) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. ## Show or hide a trendline diff --git a/chart-sdk/blazor/charts/working-with-data.md b/chart-sdk/blazor/charts/working-with-data.md index 93e79a0df..c66415a33 100644 --- a/chart-sdk/blazor/charts/working-with-data.md +++ b/chart-sdk/blazor/charts/working-with-data.md @@ -1,15 +1,15 @@ --- layout: post -title: Working with Data in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about working with data in Blazor Charts component, it's elements and more. -platform: chart-sdk -control: Chart +title: Blazor Charts Working with Data Examples | Syncfusion® +description: Learn how to bind data to Syncfusion Blazor Charts. Use IEnumerable via DataSource or SfDataManager for RESTful and remote data binding. +platform: Blazor +control: Charts documentation: ug --- -# Working with Data in Blazor Charts Component +# Blazor Charts Working with Data The 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.Charts.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. @@ -54,7 +54,7 @@ An IEnumerable object can be assigned to the [DataSource](https://help.syncfusio } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBKCrrVgRsckQvf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Data Binding](images/working-data/blazor-chart-data-binding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrHNnCrgFYTMqKl?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line 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. @@ -172,7 +172,7 @@ Assign service data as an instance of [SfDataManager](https://help.syncfusion.co ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBAihBrgvFhnbIU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Remote Data Binding in Blazor Chart](images/working-data/blazor-chart-remote-data-binding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVdZnWhUuDQBhXs?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Remote Data Binding in Blazor Chart](images/working-data/blazor-chart-remote-data-binding.webp)" %} ### Binding with OData services @@ -201,7 +201,7 @@ The [WebApiAdaptor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLxXVDKBZhqezPa?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Web API Binding](images/working-data/blazor-chart-web-api-binding.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLnNHsLqurpOmXI?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart with Web API Binding](images/working-data/blazor-chart-web-api-binding.webp)" %} ### Sending additional parameters to the server @@ -234,7 +234,7 @@ The following sample code shows how to send parameters using the Query property } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZBKCBBLKbOUqsQL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLRDdsrqEeGltNy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} ## Entity Framework @@ -503,7 +503,7 @@ The [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system.c } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXVUiLBLAkpRpchN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Chart with Web API Binding](images/working-data/observable-collection.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBxjdCrgYnhNxJu?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Chart with Web API Binding](images/working-data/observable-collection.webp)" %} ## Empty points @@ -552,7 +552,7 @@ Empty points are defined as data points having NaN values. Empty points can be c } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLUWVrBKOfaDiKg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hZhHNdCVUkHSFMPH?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" %} **Customizing empty point** @@ -602,7 +602,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartE } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLgMVhLAaIiyPBB?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Column Chart with Empty Points](images/working-data/blazor-chart-empty-point.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hXBHtdWhgEmNMoif?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Column Chart with Empty Points](images/working-data/blazor-chart-empty-point.webp)" %} ## Handling No Data @@ -664,9 +664,9 @@ When no data is available to render in the chart, the [NoDataTemplate](https://h ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrSZEZbBiUMPlvJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[No Data Template in Blazor Chart](images/working-data/blazor-chart-no-data-template.gif)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVRXdWrgOwvpoNS?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[No Data Template in Blazor Chart](images/working-data/blazor-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/line?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/line?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/charts/zooming.md b/chart-sdk/blazor/charts/zooming.md index 156ac3477..a05be326e 100644 --- a/chart-sdk/blazor/charts/zooming.md +++ b/chart-sdk/blazor/charts/zooming.md @@ -1,15 +1,15 @@ --- layout: post -title: Zooming in Blazor Charts Component | Syncfusion® -description: Checkout and learn here all the features about Zooming functionality in Blazor Charts component and much more. -platform: chart-sdk -control: Chart +title: Blazor Charts Zooming and Panning Examples | Syncfusion® +description: Learn how to enable zooming and panning in Syncfusion Blazor Charts. Use selection, mouse wheel, or pinch gestures via ChartZoomSettings. +platform: Blazor +control: Charts documentation: ug --- -# Zooming in Blazor Charts Component +# Blazor Charts Zooming and Panning -A detailed walkthrough demonstrating how to configure and use zooming and panning in the Blazor charts is presented in the video below. +A detailed walkthrough demonstrating how to configure and use zooming and panning in the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) is presented in the video below. {% youtube "youtube:https://www.youtube.com/watch?v=-fqwvVMI9Ec" %} @@ -242,7 +242,7 @@ The zoom toolbar in the chart can be repositioned using the [ChartZoomToolbarPos }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXroZHVnTUnzfkob?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with Zooming Toolbar Positioning](./images/zoom/blazor-line-chart-zoom-toolbar-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtrxNHshpuQbgFmO?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart with Zooming Toolbar Positioning](./images/zoom/blazor-line-chart-zoom-toolbar-position.webp)" %} ## Enable pan @@ -416,7 +416,7 @@ The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Ch }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rNryXRBRpKfeaJfn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Line Chart with customized scrollbar position](./images/zoom/blazor-line-chart-scroll-bar-position.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDrnNHWBTaFegDhy?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Line Chart with customized scrollbar position](./images/zoom/blazor-line-chart-scroll-bar-position.webp)" %} ### Customization @@ -476,7 +476,7 @@ Scrollbar appearance and behavior are customizable using [ChartAxisScrollbarSett }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBSXaDvCHkxWpZV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Area Chart with scrollbar customization](images/zoom/blazor-area-chart-scroll-bar-customization.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBRjxsrpOEMasUM?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Area Chart with scrollbar customization](images/zoom/blazor-area-chart-scroll-bar-customization.webp)" %} ## Auto interval on zooming @@ -543,7 +543,7 @@ The axis interval will be calculated automatically with respect to the zoomed ra ![Auto Interval on Zooming in Blazor Area Chart](images/zoom/blazor-area-chart-auto-interval-zooming.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/line?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/line?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/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.