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