From 4365fe334a647a4a92fa1f21efe1b8d5aeda9213 Mon Sep 17 00:00:00 2001 From: mohammednowfel4989 Date: Thu, 25 Sep 2025 12:18:53 +0530 Subject: [PATCH 1/2] 983838: Updated the UG content and example changes in the chart control (Polar based types). --- blazor/chart/chart-types/bubble.md | 446 ++++++++++++------------ blazor/chart/chart-types/high-low.md | 264 +++++++------- blazor/chart/chart-types/polar.md | 361 ++++++++++--------- blazor/chart/chart-types/radar.md | 248 +++++++------ blazor/chart/chart-types/scatter.md | 250 ++++++------- blazor/chart/chart-types/stack-bar.md | 100 +++--- blazor/chart/chart-types/stacked-bar.md | 173 +++++---- 7 files changed, 912 insertions(+), 930 deletions(-) diff --git a/blazor/chart/chart-types/bubble.md b/blazor/chart/chart-types/bubble.md index 6fef39f06a..6cd6febc49 100644 --- a/blazor/chart/chart-types/bubble.md +++ b/blazor/chart/chart-types/bubble.md @@ -1,17 +1,17 @@ --- layout: post -title: Bubble in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about the Bubble Chart in Syncfusion Blazor Charts component and much more. +title: Bubble Chart in Blazor Charts Component | Syncfusion +description: Check out and learn how to configure and customize the Bubble Chart in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug --- -# Bubble in Blazor Charts Component +# Bubble Chart in Blazor Charts Component -## Bubble +## Bubble Chart -[Bubble Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bubble-chart) is similar to the Scatter chart but it also visualizes the third parameter by its size. To render a bubble series, set series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [Bubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Bubble). It visualizes data with three parameters such as [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_XName), [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YName), and [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Size). The bubble size depends on third parameter. +The Bubble Chart is similar to the Scatter chart but visualizes a third parameter using the marker size. To render a bubble series, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to [Bubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Bubble). It displays data with three parameters: [XName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_XName), [YName](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_YName), and [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Size). The bubble size is determined by the third parameter. ```cshtml @@ -24,7 +24,7 @@ documentation: ug -@code{ +@code { public class ChartData { public double X { get; set; } @@ -34,24 +34,24 @@ documentation: ug public List SalesReports = new List { - new ChartData { X= 92.2, Y= 7.8, Text= "China" }, - new ChartData { X= 74, Y= 6.5, Text= "India" }, - new ChartData { X= 90.4, Y= 6.0, Text= "Indonesia" }, - new ChartData { X= 99.4, Y= 2.2, Text= "US" }, - new ChartData { X= 88.6, Y= 1.3, Text= "Brazil" }, - new ChartData { X= 99, Y= 0.7, Text= "Germany" }, - new ChartData { X= 72, Y= 2.0, Text= "Egypt" }, - new ChartData { X= 99.6, Y= 3.4, Text= "Russia" }, - new ChartData { X= 99, Y= 0.2, Text= "Japan" }, - new ChartData { X= 86.1, Y= 4.0, Text= "Mexico" }, - new ChartData { X= 92.6, Y= 6.6, Text= "Philippines" }, - new ChartData { X= 61.3, Y= 1.45, Text= "Nigeria" }, - new ChartData { X= 82.2, Y= 3.97, Text= "Hong Kong" }, - new ChartData { X= 79.2, Y= 3.9, Text= "Netherland" }, - new ChartData { X= 72.5, Y= 4.5, Text= "Jordan" }, - new ChartData { X= 81, Y= 3.5, Text= "Australia" }, - new ChartData { X= 66.8, Y= 3.9, Text= "Mongolia" }, - new ChartData { X= 78.4, Y= 2.9, Text= "Taiwan" } + new ChartData { X = 92.2, Y = 7.8, Text = "China" }, + new ChartData { X = 74, Y = 6.5, Text = "India" }, + new ChartData { X = 90.4, Y = 6.0, Text = "Indonesia" }, + new ChartData { X = 99.4, = 2.2, Text = "US" }, + new ChartData { X = 88.6, Y = 1.3, Text = "Brazil" }, + new ChartData { X = 99, Y = 0.7, Text = "Germany" }, + new ChartData { X = 72, Y = 2.0, Text = "Egypt" }, + new ChartData { X = 99.6, Y = 3.4, Text = "Russia" }, + new ChartData { X = 99, Y = 0.2, Text = "Japan" }, + new ChartData { X = 86.1, Y = 4.0, Text = "Mexico" }, + new ChartData { X = 92.6, Y = 6.6, Text = "Philippines" }, + new ChartData { X = 61.3, = 1.45, Text = "Nigeria" }, + new ChartData { X = 82.2, Y = 3.97, Text = "Hong Kong" }, + new ChartData { X = 79.2, Y = 3.9, Text = "Netherland" }, + new ChartData { X = 72.5, Y = 4.5, Text = "Jordan" }, + new ChartData { X = 81, Y = 3.5, Text = "Australia" }, + new ChartData { X = 66.8, Y = 3.9, Text = "Mongolia" }, + new ChartData { X = 78.4, Y = 2.9, Text = "Taiwan" } }; } @@ -60,11 +60,11 @@ documentation: ug ![Blazor Bubble Chart](../images/chart-types-images/blazor-bubble-chart.png) -N> Refer to our [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 our [Blazor Bubble Chart Example](https://blazor.syncfusion.com/demos/chart/bubble?theme=bootstrap5) to know how to render and configure the bubble type charts. +Refer to the [Blazor Bubble Charts](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/bubble-chart) feature tour page for more feature details. Explore the [Blazor Bubble Chart Example](https://blazor.syncfusion.com/demos/chart/bubble?theme=bootstrap5) for interactive examples. ## Binding data with series -You can bind data to the chart using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property within the series configuration. 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. More information on data binding can be found [here](../working-with-data). To display the data correctly, map the fields from the data to the chart 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. +Bind data to the chart using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property in the series configuration. 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) or a list of business objects. For more information, see [Working with Data](../working-with-data). Map the data fields to the chart 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. ```cshtml @@ -77,7 +77,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. -@code{ +@code { public class ChartData { public double X { get; set; } @@ -87,24 +87,24 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. public List SalesReports = new List { - new ChartData { X= 92.2, Y= 7.8, Text= "China" }, - new ChartData { X= 74, Y= 6.5, Text= "India" }, - new ChartData { X= 90.4, Y= 6.0, Text= "Indonesia" }, - new ChartData { X= 99.4, Y= 2.2, Text= "US" }, - new ChartData { X= 88.6, Y= 1.3, Text= "Brazil" }, - new ChartData { X= 99, Y= 0.7, Text= "Germany" }, - new ChartData { X= 72, Y= 2.0, Text= "Egypt" }, - new ChartData { X= 99.6, Y= 3.4, Text= "Russia" }, - new ChartData { X= 99, Y= 0.2, Text= "Japan" }, - new ChartData { X= 86.1, Y= 4.0, Text= "Mexico" }, - new ChartData { X= 92.6, Y= 6.6, Text= "Philippines" }, - new ChartData { X= 61.3, Y= 1.45, Text= "Nigeria" }, - new ChartData { X= 82.2, Y= 3.97, Text= "Hong Kong" }, - new ChartData { X= 79.2, Y= 3.9, Text= "Netherland" }, - new ChartData { X= 72.5, Y= 4.5, Text= "Jordan" }, - new ChartData { X= 81, Y= 3.5, Text= "Australia" }, - new ChartData { X= 66.8, Y= 3.9, Text= "Mongolia" }, - new ChartData { X= 78.4, Y= 2.9, Text= "Taiwan" } + new ChartData { X = 92.2, Y = 7.8, Text = "China" }, + new ChartData { X = 74, Y = 6.5, Text = "India" }, + new ChartData { X = 90.4, Y = 6.0, Text = "Indonesia" }, + new ChartData { X = 99.4, = 2.2, Text = "US" }, + new ChartData { X = 88.6, Y = 1.3, Text = "Brazil" }, + new ChartData { X = 99, Y = 0.7, Text = "Germany" }, + new ChartData { X = 72, Y = 2.0, Text = "Egypt" }, + new ChartData { X = 99.6, Y = 3.4, Text = "Russia" }, + new ChartData { X = 99, Y = 0.2, Text = "Japan" }, + new ChartData { X = 86.1, Y = 4.0, Text = "Mexico" }, + new ChartData { X = 92.6, Y = 6.6, Text = "Philippines" }, + new ChartData { X = 61.3, = 1.45, Text = "Nigeria" }, + new ChartData { X = 82.2, Y = 3.97, Text = "Hong Kong" }, + new ChartData { X = 79.2, Y = 3.9, Text = "Netherland" }, + new ChartData { X = 72.5, Y = 4.5, Text = "Jordan" }, + new ChartData { X = 81, Y = 3.5, Text = "Australia" }, + new ChartData { X = 66.8, Y = 3.9, Text = "Mongolia" }, + new ChartData { X = 78.4, Y = 2.9, Text = "Taiwan" } }; } @@ -113,11 +113,11 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. ## Series customization -The following properties can be used to customize the [Bubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Bubble) series. +Customize the [Bubble](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Bubble) series using the following properties: **Fill** -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property determines the color applied to the series. +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property sets the color for the series. ```cshtml @@ -140,31 +140,31 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public List SalesReports = new List { - new ChartData { X= 92.2, Y= 7.8, Text= "China" }, - new ChartData { X= 74, Y= 6.5, Text= "India" }, - new ChartData { X= 90.4, Y= 6.0, Text= "Indonesia" }, - new ChartData { X= 99.4, Y= 2.2, Text= "US" }, - new ChartData { X= 88.6, Y= 1.3, Text= "Brazil" }, - new ChartData { X= 99, Y= 0.7, Text= "Germany" }, - new ChartData { X= 72, Y= 2.0, Text= "Egypt" }, - new ChartData { X= 99.6, Y= 3.4, Text= "Russia" }, - new ChartData { X= 99, Y= 0.2, Text= "Japan" }, - new ChartData { X= 86.1, Y= 4.0, Text= "Mexico" }, - new ChartData { X= 92.6, Y= 6.6, Text= "Philippines" }, - new ChartData { X= 61.3, Y= 1.45, Text= "Nigeria" }, - new ChartData { X= 82.2, Y= 3.97, Text= "Hong Kong" }, - new ChartData { X= 79.2, Y= 3.9, Text= "Netherland" }, - new ChartData { X= 72.5, Y= 4.5, Text= "Jordan" }, - new ChartData { X= 81, Y= 3.5, Text= "Australia" }, - new ChartData { X= 66.8, Y= 3.9, Text= "Mongolia" }, - new ChartData { X= 78.4, Y= 2.9, Text= "Taiwan" } + new ChartData { X = 92.2, Y = 7.8, Text = "China" }, + new ChartData { X = 74, Y = 6.5, Text = "India" }, + new ChartData { X = 90.4, Y = 6.0, Text = "Indonesia" }, + new ChartData { X = 99.4, = 2.2, Text = "US" }, + new ChartData { X = 88.6, Y = 1.3, Text = "Brazil" }, + new ChartData { X = 99, Y = 0.7, Text = "Germany" }, + new ChartData { X = 72, Y = 2.0, Text = "Egypt" }, + new ChartData { X = 99.6, Y = 3.4, Text = "Russia" }, + new ChartData { X = 99, Y = 0.2, Text = "Japan" }, + new ChartData { X = 86.1, Y = 4.0, Text = "Mexico" }, + new ChartData { X = 92.6, Y = 6.6, Text = "Philippines" }, + new ChartData { X = 61.3, = 1.45, Text = "Nigeria" }, + new ChartData { X = 82.2, Y = 3.97, Text = "Hong Kong" }, + new ChartData { X = 79.2, Y = 3.9, Text = "Netherland" }, + new ChartData { X = 72.5, Y = 4.5, Text = "Jordan" }, + new ChartData { X = 81, Y = 3.5, Text = "Australia" }, + new ChartData { X = 66.8, Y = 3.9, Text = "Mongolia" }, + new ChartData { X = 78.4, Y = 2.9, Text = "Taiwan" } }; } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hjBJjFLDKFITLPEy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -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, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. +Apply a gradient color to the bubble series by configuring the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property with gradient values. ```cshtml @@ -196,24 +196,24 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public List SalesReports = new List { - new ChartData { X= 92.2, Y= 7.8, Text= "China" }, - new ChartData { X= 74, Y= 6.5, Text= "India" }, - new ChartData { X= 90.4, Y= 6.0, Text= "Indonesia" }, - new ChartData { X= 99.4, Y= 2.2, Text= "US" }, - new ChartData { X= 88.6, Y= 1.3, Text= "Brazil" }, - new ChartData { X= 99, Y= 0.7, Text= "Germany" }, - new ChartData { X= 72, Y= 2.0, Text= "Egypt" }, - new ChartData { X= 99.6, Y= 3.4, Text= "Russia" }, - new ChartData { X= 99, Y= 0.2, Text= "Japan" }, - new ChartData { X= 86.1, Y= 4.0, Text= "Mexico" }, - new ChartData { X= 92.6, Y= 6.6, Text= "Philippines" }, - new ChartData { X= 61.3, Y= 1.45, Text= "Nigeria" }, - new ChartData { X= 82.2, Y= 3.97, Text= "Hong Kong" }, - new ChartData { X= 79.2, Y= 3.9, Text= "Netherland" }, - new ChartData { X= 72.5, Y= 4.5, Text= "Jordan" }, - new ChartData { X= 81, Y= 3.5, Text= "Australia" }, - new ChartData { X= 66.8, Y= 3.9, Text= "Mongolia" }, - new ChartData { X= 78.4, Y= 2.9, Text= "Taiwan" } + new ChartData { X = 92.2, Y = 7.8, Text = "China" }, + new ChartData { X = 74, Y = 6.5, Text = "India" }, + new ChartData { X = 90.4, Y = 6.0, Text = "Indonesia" }, + new ChartData { X = 99.4, = 2.2, Text = "US" }, + new ChartData { X = 88.6, Y = 1.3, Text = "Brazil" }, + new ChartData { X = 99, Y = 0.7, Text = "Germany" }, + new ChartData { X = 72, Y = 2.0, Text = "Egypt" }, + new ChartData { X = 99.6, Y = 3.4, Text = "Russia" }, + new ChartData { X = 99, Y = 0.2, Text = "Japan" }, + new ChartData { X = 86.1, Y = 4.0, Text = "Mexico" }, + new ChartData { X = 92.6, Y = 6.6, Text = "Philippines" }, + new ChartData { X = 61.3, = 1.45, Text = "Nigeria" }, + new ChartData { X = 82.2, Y = 3.97, Text = "Hong Kong" }, + new ChartData { X = 79.2, Y = 3.9, Text = "Netherland" }, + new ChartData { X = 72.5, Y = 4.5, Text = "Jordan" }, + new ChartData { X = 81, Y = 3.5, Text = "Australia" }, + new ChartData { X = 66.8, Y = 3.9, Text = "Mongolia" }, + new ChartData { X = 78.4, Y = 2.9, Text = "Taiwan" } }; } @@ -222,7 +222,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS **Opacity** -The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Opacity) property specifies the transparency level of the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill). Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. +The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Opacity) property controls the transparency of the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) color, allowing adjustment of the series' appearance. ```cshtml @@ -235,7 +235,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha -@code{ +@code { public class ChartData { public double X { get; set; } @@ -246,24 +246,24 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha public List SalesReports = new List { - new ChartData { X= 92.2, Y= 7.8, Size= 1.347, Text= "China" }, - new ChartData { X= 74, Y= 6.5, Size= 1.241, Text= "India" }, - new ChartData { X= 90.4, Y= 6.0, Size= 0.238, Text= "Indonesia" }, - new ChartData { X= 99.4, Y= 2.2, Size= 0.312, Text= "US" }, - new ChartData { X= 88.6, Y= 1.3, Size= 0.197, Text= "Brazil" }, - new ChartData { X= 99, Y= 0.7, Size= 0.0818, Text= "Germany" }, - new ChartData { X= 72, Y= 2.0, Size= 0.0826, Text= "Egypt" }, - new ChartData { X= 99.6, Y= 3.4, Size= 0.143, Text= "Russia" }, - new ChartData { X= 99, Y= 0.2, Size= 0.128, Text= "Japan" }, - new ChartData { X= 86.1, Y= 4.0, Size= 0.115, Text= "Mexico" }, - new ChartData { X= 92.6, Y= 6.6, Size= 0.096, Text= "Philippines" }, - new ChartData { X= 61.3, Y= 1.45, Size= 0.162, Text= "Nigeria" }, - new ChartData { X= 82.2, Y= 3.97, Size= 0.7, Text= "Hong Kong" }, - new ChartData { X= 79.2, Y= 3.9, Size= 0.162, Text= "Netherland" }, - new ChartData { X= 72.5, Y= 4.5, Size= 0.7, Text= "Jordan" }, - new ChartData { X= 81, Y= 3.5, Size= 0.21, Text= "Australia" }, - new ChartData { X= 66.8, Y= 3.9, Size= 0.028, Text= "Mongolia" }, - new ChartData { X= 78.4, Y= 2.9, Size= 0.231, Text= "Taiwan" } + new ChartData { X = 92.2, Y = 7.8, Text = "China" }, + new ChartData { X = 74, Y = 6.5, Text = "India" }, + new ChartData { X = 90.4, Y = 6.0, Text = "Indonesia" }, + new ChartData { X = 99.4, = 2.2, Text = "US" }, + new ChartData { X = 88.6, Y = 1.3, Text = "Brazil" }, + new ChartData { X = 99, Y = 0.7, Text = "Germany" }, + new ChartData { X = 72, Y = 2.0, Text = "Egypt" }, + new ChartData { X = 99.6, Y = 3.4, Text = "Russia" }, + new ChartData { X = 99, Y = 0.2, Text = "Japan" }, + new ChartData { X = 86.1, Y = 4.0, Text = "Mexico" }, + new ChartData { X = 92.6, Y = 6.6, Text = "Philippines" }, + new ChartData { X = 61.3, = 1.45, Text = "Nigeria" }, + new ChartData { X = 82.2, Y = 3.97, Text = "Hong Kong" }, + new ChartData { X = 79.2, Y = 3.9, Text = "Netherland" }, + new ChartData { X = 72.5, Y = 4.5, Text = "Jordan" }, + new ChartData { X = 81, Y = 3.5, Text = "Australia" }, + new ChartData { X = 66.8, Y = 3.9, Text = "Mongolia" }, + new ChartData { X = 78.4, Y = 2.9, Text = "Taiwan" } }; } @@ -272,7 +272,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha ## Bubble size mapping -The [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Size) property can be used to map the size value specified from datasource. +Map the size value from the data source using the [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Size) property. ```cshtml @@ -296,24 +296,24 @@ The [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public List SalesReports = new List { - new ChartData { X= 92.2, Y= 7.8, Size= 1.347, Text= "China" }, - new ChartData { X= 74, Y= 6.5, Size= 1.241, Text= "India" }, - new ChartData { X= 90.4, Y= 6.0, Size= 0.238, Text= "Indonesia" }, - new ChartData { X= 99.4, Y= 2.2, Size= 0.312, Text= "US" }, - new ChartData { X= 88.6, Y= 1.3, Size= 0.197, Text= "Brazil" }, - new ChartData { X= 99, Y= 0.7, Size= 0.0818, Text= "Germany" }, - new ChartData { X= 72, Y= 2.0, Size= 0.0826, Text= "Egypt" }, - new ChartData { X= 99.6, Y= 3.4, Size= 0.143, Text= "Russia" }, - new ChartData { X= 99, Y= 0.2, Size= 0.128, Text= "Japan" }, - new ChartData { X= 86.1, Y= 4.0, Size= 0.115, Text= "Mexico" }, - new ChartData { X= 92.6, Y= 6.6, Size= 0.096, Text= "Philippines" }, - new ChartData { X= 61.3, Y= 1.45, Size= 0.162, Text= "Nigeria" }, - new ChartData { X= 82.2, Y= 3.97, Size= 0.7, Text= "Hong Kong" }, - new ChartData { X= 79.2, Y= 3.9, Size= 0.162, Text= "Netherland" }, - new ChartData { X= 72.5, Y= 4.5, Size= 0.7, Text= "Jordan" }, - new ChartData { X= 81, Y= 3.5, Size= 0.21, Text= "Australia" }, - new ChartData { X= 66.8, Y= 3.9, Size= 0.028, Text= "Mongolia" }, - new ChartData { X= 78.4, Y= 2.9, Size= 0.231, Text= "Taiwan" } + new ChartData { X = 92.2, Y = 7.8, Size = 1.347, Text = "China" }, + new ChartData { X = 74, Y = 6.5, Size = 1.241, Text = "India" }, + new ChartData { X = 90.4, Y = 6.0, Size = 0.238, Text = "Indonesia" }, + new ChartData { X = 99.4, Y = 2.2, Size = 0.312, Text = "US" }, + new ChartData { X = 88.6, Y = 1.3, Size = 0.197, Text = "Brazil" }, + new ChartData { X = 99, Y = 0.7, Size = 0.0818, Text = "Germany" }, + new ChartData { X = 72, Y = 2.0, Size = 0.0826, Text = "Egypt" }, + new ChartData { X = 99.6, Y = 3.4, Size = 0.143, Text = "Russia" }, + new ChartData { X = 99, Y = 0.2, Size = 0.128, Text = "Japan" }, + new ChartData { X = 86.1, Y = 4.0, Size = 0.115, Text = "Mexico" }, + new ChartData { X = 92.6, Y = 6.6, Size = 0.096, Text = "Philippines" }, + new ChartData { X = 61.3, Y = 1.45, Size = 0.162, Text = "Nigeria" }, + new ChartData { X = 82.2, Y = 3.97, Size = 0.7, Text = "Hong Kong" }, + new ChartData { X = 79.2, Y = 3.9, Size = 0.162, Text = "Netherland" }, + new ChartData { X = 72.5, Y = 4.5, Size = 0.7, Text = "Jordan" }, + new ChartData { X = 81, Y = 3.5, Size = 0.21, Text = "Australia" }, + new ChartData { X = 66.8, Y = 3.9, Size = 0.028, Text = "Mongolia" }, + new ChartData { X = 78.4, Y = 2.9, Size = 0.231, Text = "Taiwan" } }; } @@ -322,11 +322,11 @@ The [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS ## 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. +Data points with `null`, `double.NaN`, or `undefined` values are considered empty and are not plotted. **Mode** -Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). +Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Mode) property to specify how empty or missing data points are handled. The default mode is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). ```cshtml @@ -350,24 +350,24 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public List SalesReports = new List { - new ChartData { X= 92.2, Y= 7.8, Text= "China" }, - new ChartData { X= 74, Y= 6.5, Text= "India" }, - new ChartData { X= 90.4, Y= 6.0, Text= "Indonesia" }, - new ChartData { X= 99.4, Y= 2.2, Text= "US" }, - new ChartData { X= 88.6, Y= 1.3, Text= "Brazil" }, - new ChartData { X= 99, Y= 0.7, Text= "Germany" }, - new ChartData { X= 72, Y= 2.0, Text= "Egypt" }, - new ChartData { X= 99.6, Y= 3.4, Text= "Russia" }, - new ChartData { X= 99, Y= 0.2, Text= "Japan" }, - new ChartData { X= 86.1, Y= double.NaN, Text= "Mexico" }, - new ChartData { X= 92.6, Y= 6.6, Text= "Philippines" }, - new ChartData { X= 61.3, Y= 1.45, Text= "Nigeria" }, - new ChartData { X= 82.2, Y= 3.97, Text= "Hong Kong" }, - new ChartData { X= 79.2, Y= 3.9, Text= "Netherland" }, - new ChartData { X= 72.5, Y= 4.5, Text= "Jordan" }, - new ChartData { X= 81, Y= 3.5, Text= "Australia" }, - new ChartData { X= 66.8, Y= 3.9, Text= "Mongolia" }, - new ChartData { X= 78.4, Y= 2.9, Text= "Taiwan" } + new ChartData { X = 92.2, Y = 7.8, Text = "China" }, + new ChartData { X = 74, Y = 6.5, Text = "India" }, + new ChartData { X = 90.4, Y = 6.0, Text = "Indonesia" }, + new ChartData { X = 99.4, Y = 2.2, Text = "US" }, + new ChartData { X = 88.6, Y = 1.3, Text = "Brazil" }, + new ChartData { X = 99, Y = 0.7, Text = "Germany" }, + new ChartData { X = 72, Y = 2.0, Text = "Egypt" }, + new ChartData { X = 99.6, Y = 3.4, Text = "Russia" }, + new ChartData { X = 99, Y = 0.2, Text = "Japan" }, + new ChartData { X = 86.1, Y = double.NaN, Text = "Mexico" }, + new ChartData { X = 92.6, Y = 6.6, Text = "Philippines" }, + new ChartData { X = 61.3, Y = 1.45, Text = "Nigeria" }, + new ChartData { X = 82.2, Y = 3.97, Text = "Hong Kong" }, + new ChartData { X = 79.2, Y = 3.9, Text = "Netherland" }, + new ChartData { X = 72.5, Y = 4.5, Text = "Jordan" }, + new ChartData { X = 81, Y = 3.5, Text = "Australia" }, + new ChartData { X = 66.8, Y = 3.9, Text = "Mongolia" }, + new ChartData { X = 78.4, Y = 2.9, Text = "Taiwan" } }; } @@ -376,7 +376,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. **Fill** -Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Fill) property to customize the fill color of empty points in the series. +Customize the fill color of empty points using the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Fill) property. ```cshtml @@ -401,24 +401,24 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public List SalesReports = new List { - new ChartData { X= 92.2, Y= 7.8, Text= "China" }, - new ChartData { X= 74, Y= 6.5, Text= "India" }, - new ChartData { X= 90.4, Y= 6.0, Text= "Indonesia" }, - new ChartData { X= 99.4, Y= 2.2, Text= "US" }, - new ChartData { X= 88.6, Y= 1.3, Text= "Brazil" }, - new ChartData { X= 99, Y= 0.7, Text= "Germany" }, - new ChartData { X= 72, Y= 2.0, Text= "Egypt" }, - new ChartData { X= 99.6, Y= 3.4, Text= "Russia" }, - new ChartData { X= 99, Y= 0.2, Text= "Japan" }, - new ChartData { X= 86.1, Y= double.NaN, Text= "Mexico" }, - new ChartData { X= 92.6, Y= 6.6, Text= "Philippines" }, - new ChartData { X= 61.3, Y= 1.45, Text= "Nigeria" }, - new ChartData { X= 82.2, Y= 3.97, Text= "Hong Kong" }, - new ChartData { X= 79.2, Y= 3.9, Text= "Netherland" }, - new ChartData { X= 72.5, Y= 4.5, Text= "Jordan" }, - new ChartData { X= 81, Y= 3.5, Text= "Australia" }, - new ChartData { X= 66.8, Y= 3.9, Text= "Mongolia" }, - new ChartData { X= 78.4, Y= 2.9, Text= "Taiwan" } + new ChartData { X = 92.2, Y = 7.8, Text = "China" }, + new ChartData { X = 74, Y = 6.5, Text = "India" }, + new ChartData { X = 90.4, Y = 6.0, Text = "Indonesia" }, + new ChartData { X = 99.4, Y = 2.2, Text = "US" }, + new ChartData { X = 88.6, Y = 1.3, Text = "Brazil" }, + new ChartData { X = 99, Y = 0.7, Text = "Germany" }, + new ChartData { X = 72, Y = 2.0, Text = "Egypt" }, + new ChartData { X = 99.6, Y = 3.4, Text = "Russia" }, + new ChartData { X = 99, Y = 0.2, Text = "Japan" }, + new ChartData { X = 86.1, Y = double.NaN, Text = "Mexico" }, + new ChartData { X = 92.6, Y = 6.6, Text = "Philippines" }, + new ChartData { X = 61.3, Y = 1.45, Text = "Nigeria" }, + new ChartData { X = 82.2, Y = 3.97, Text = "Hong Kong" }, + new ChartData { X = 79.2, Y = 3.9, Text = "Netherland" }, + new ChartData { X = 72.5, Y = 4.5, Text = "Jordan" }, + new ChartData { X = 81, Y = 3.5, Text = "Australia" }, + new ChartData { X = 66.8, Y = 3.9, Text = "Mongolia" }, + new ChartData { X = 78.4, Y = 2.9, Text = "Taiwan" } }; } @@ -427,7 +427,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. **Border** -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. +Customize the border width and color of empty points using the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Border) property, including [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). ```cshtml @@ -453,24 +453,24 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart public List SalesReports = new List { - new ChartData { X= 92.2, Y= 7.8, Text= "China" }, - new ChartData { X= 74, Y= 6.5, Text= "India" }, - new ChartData { X= 90.4, Y= 6.0, Text= "Indonesia" }, - new ChartData { X= 99.4, Y= 2.2, Text= "US" }, - new ChartData { X= 88.6, Y= 1.3, Text= "Brazil" }, - new ChartData { X= 99, Y= 0.7, Text= "Germany" }, - new ChartData { X= 72, Y= 2.0, Text= "Egypt" }, - new ChartData { X= 99.6, Y= 3.4, Text= "Russia" }, - new ChartData { X= 99, Y= 0.2, Text= "Japan" }, - new ChartData { X= 86.1, Y= double.NaN, Text= "Mexico" }, - new ChartData { X= 92.6, Y= 6.6, Text= "Philippines" }, - new ChartData { X= 61.3, Y= 1.45, Text= "Nigeria" }, - new ChartData { X= 82.2, Y= 3.97, Text= "Hong Kong" }, - new ChartData { X= 79.2, Y= 3.9, Text= "Netherland" }, - new ChartData { X= 72.5, Y= 4.5, Text= "Jordan" }, - new ChartData { X= 81, Y= 3.5, Text= "Australia" }, - new ChartData { X= 66.8, Y= 3.9, Text= "Mongolia" }, - new ChartData { X= 78.4, Y= 2.9, Text= "Taiwan" } + new ChartData { X = 92.2, Y = 7.8, Text = "China" }, + new ChartData { X = 74, Y = 6.5, Text = "India" }, + new ChartData { X = 90.4, Y = 6.0, Text = "Indonesia" }, + new ChartData { X = 99.4, Y = 2.2, Text = "US" }, + new ChartData { X = 88.6, Y = 1.3, Text = "Brazil" }, + new ChartData { X = 99, Y = 0.7, Text = "Germany" }, + new ChartData { X = 72, Y = 2.0, Text = "Egypt" }, + new ChartData { X = 99.6, Y = 3.4, Text = "Russia" }, + new ChartData { X = 99, Y = 0.2, Text = "Japan" }, + new ChartData { X = 86.1, Y = double.NaN, Text = "Mexico" }, + new ChartData { X = 92.6, Y = 6.6, Text = "Philippines" }, + new ChartData { X = 61.3, Y = 1.45, Text = "Nigeria" }, + new ChartData { X = 82.2, Y = 3.97, Text = "Hong Kong" }, + new ChartData { X = 79.2, Y = 3.9, Text = "Netherland" }, + new ChartData { X = 72.5, Y = 4.5, Text = "Jordan" }, + new ChartData { X = 81, Y = 3.5, Text = "Australia" }, + new ChartData { X = 66.8, Y = 3.9, Text = "Mongolia" }, + new ChartData { X = 78.4, Y = 2.9, Text = "Taiwan" } }; } @@ -481,7 +481,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart ### Series render -The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSeriesRender) event allows you to customize series properties, such as [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Data), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Fill), and [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Series), before they are rendered on the chart. +The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSeriesRender) event enables customization of series properties, such as [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Data), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Fill), and [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Series), before rendering. ```cshtml @@ -489,7 +489,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C - + @@ -510,24 +510,24 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C public List SalesReports = new List { - new ChartData { X= 92.2, Y= 7.8, Text= "China" }, - new ChartData { X= 74, Y= 6.5, Text= "India" }, - new ChartData { X= 90.4, Y= 6.0, Text= "Indonesia" }, - new ChartData { X= 99.4, Y= 2.2, Text= "US" }, - new ChartData { X= 88.6, Y= 1.3, Text= "Brazil" }, - new ChartData { X= 99, Y= 0.7, Text= "Germany" }, - new ChartData { X= 72, Y= 2.0, Text= "Egypt" }, - new ChartData { X= 99.6, Y= 3.4, Text= "Russia" }, - new ChartData { X= 99, Y= 0.2, Text= "Japan" }, - new ChartData { X= 86.1, Y= 4.0, Text= "Mexico" }, - new ChartData { X= 92.6, Y= 6.6, Text= "Philippines" }, - new ChartData { X= 61.3, Y= 1.45, Text= "Nigeria" }, - new ChartData { X= 82.2, Y= 3.97, Text= "Hong Kong" }, - new ChartData { X= 79.2, Y= 3.9, Text= "Netherland" }, - new ChartData { X= 72.5, Y= 4.5, Text= "Jordan" }, - new ChartData { X= 81, Y= 3.5, Text= "Australia" }, - new ChartData { X= 66.8, Y= 3.9, Text= "Mongolia" }, - new ChartData { X= 78.4, Y= 2.9, Text= "Taiwan" } + new ChartData { X = 92.2, Y = 7.8, Text = "China" }, + new ChartData { X = 74, Y = 6.5, Text = "India" }, + new ChartData { X = 90.4, Y = 6.0, Text = "Indonesia" }, + new ChartData { X = 99.4, = 2.2, Text = "US" }, + new ChartData { X = 88.6, Y = 1.3, Text = "Brazil" }, + new ChartData { X = 99, Y = 0.7, Text = "Germany" }, + new ChartData { X = 72, Y = 2.0, Text = "Egypt" }, + new ChartData { X = 99.6, Y = 3.4, Text = "Russia" }, + new ChartData { X = 99, Y = 0.2, Text = "Japan" }, + new ChartData { X = 86.1, Y = 4.0, Text = "Mexico" }, + new ChartData { X = 92.6, Y = 6.6, Text = "Philippines" }, + new ChartData { X = 61.3, = 1.45, Text = "Nigeria" }, + new ChartData { X = 82.2, Y = 3.97, Text = "Hong Kong" }, + new ChartData { X = 79.2, Y = 3.9, Text = "Netherland" }, + new ChartData { X = 72.5, Y = 4.5, Text = "Jordan" }, + new ChartData { X = 81, Y = 3.5, Text = "Australia" }, + new ChartData { X = 66.8, Y = 3.9, Text = "Mongolia" }, + new ChartData { X = 78.4, Y = 2.9, Text = "Taiwan" } }; } @@ -536,7 +536,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C ### Point render -The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnPointRender) event allows you to customize each data point before it is rendered on the chart. +The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnPointRender) event allows customization of each data point before rendering. ```cshtml @@ -544,7 +544,7 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch - + @@ -565,24 +565,24 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch public List SalesReports = new List { - new ChartData { X= 92.2, Y= 7.8, Text= "China" }, - new ChartData { X= 74, Y= 6.5, Text= "India" }, - new ChartData { X= 90.4, Y= 6.0, Text= "Indonesia" }, - new ChartData { X= 99.4, Y= 2.2, Text= "US" }, - new ChartData { X= 88.6, Y= 1.3, Text= "Brazil" }, - new ChartData { X= 99, Y= 0.7, Text= "Germany" }, - new ChartData { X= 72, Y= 2.0, Text= "Egypt" }, - new ChartData { X= 99.6, Y= 3.4, Text= "Russia" }, - new ChartData { X= 99, Y= 0.2, Text= "Japan" }, - new ChartData { X= 86.1, Y= 4.0, Text= "Mexico" }, - new ChartData { X= 92.6, Y= 6.6, Text= "Philippines" }, - new ChartData { X= 61.3, Y= 1.45, Text= "Nigeria" }, - new ChartData { X= 82.2, Y= 3.97, Text= "Hong Kong" }, - new ChartData { X= 79.2, Y= 3.9, Text= "Netherland" }, - new ChartData { X= 72.5, Y= 4.5, Text= "Jordan" }, - new ChartData { X= 81, Y= 3.5, Text= "Australia" }, - new ChartData { X= 66.8, Y= 3.9, Text= "Mongolia" }, - new ChartData { X= 78.4, Y= 2.9, Text= "Taiwan" } + new ChartData { X = 92.2, Y = 7.8, Text = "China" }, + new ChartData { X = 74, Y = 6.5, Text = "India" }, + new ChartData { X = 90.4, Y = 6.0, Text = "Indonesia" }, + new ChartData { X = 99.4, = 2.2, Text = "US" }, + new ChartData { X = 88.6, Y = 1.3, Text = "Brazil" }, + new ChartData { X = 99, Y = 0.7, Text = "Germany" }, + new ChartData { X = 72, Y = 2.0, Text = "Egypt" }, + new ChartData { X = 99.6, Y = 3.4, Text = "Russia" }, + new ChartData { X = 99, Y = 0.2, Text = "Japan" }, + new ChartData { X = 86.1, Y = 4.0, Text = "Mexico" }, + new ChartData { X = 92.6, Y = 6.6, Text = "Philippines" }, + new ChartData { X = 61.3, = 1.45, Text = "Nigeria" }, + new ChartData { X = 82.2, Y = 3.97, Text = "Hong Kong" }, + new ChartData { X = 79.2, Y = 3.9, Text = "Netherland" }, + new ChartData { X = 72.5, Y = 4.5, Text = "Jordan" }, + new ChartData { X = 81, Y = 3.5, Text = "Australia" }, + new ChartData { X = 66.8, Y = 3.9, Text = "Mongolia" }, + new ChartData { X = 78.4, Y = 2.9, Text = "Taiwan" } }; } @@ -593,5 +593,5 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also -* [Data Label](../data-labels) -* [Tooltip](../tool-tip) \ No newline at end of file +* [Data label](../data-labels) +* [Tooltip](../tool-tip) diff --git a/blazor/chart/chart-types/high-low.md b/blazor/chart/chart-types/high-low.md index 6aadf2c31f..a1eb4b14c1 100644 --- a/blazor/chart/chart-types/high-low.md +++ b/blazor/chart/chart-types/high-low.md @@ -1,30 +1,30 @@ --- layout: post -title: Hilo in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about the Hilo Chart in Syncfusion Blazor Charts component and much more. +title: Hilo Chart in Blazor Charts Component | Syncfusion +description: Check out and learn how to configure and customize the Hilo Chart in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug --- -# Hilo in Blazor Charts Component +# Hilo Chart in Blazor Charts Component -## Hilo +## Hilo Chart -[Hilo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Hilo) series illustrates the price movements in stock using the higher and lower values and it can be rendered by specifying the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [Hilo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Hilo). +The [Hilo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Hilo) series illustrates price movements in stocks using higher and lower values. Render the series by setting the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to [Hilo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Hilo). -To learn how to create a Hilo chart, you can watch this video. +You can also learn how to create a Hilo chart using Blazor Charts by watching the video below. {% youtube "youtube:https://www.youtube.com/watch?v=KDOI77kV34Q" %} -This indicates that the data should be represented as a hilo chart, which shows the high and low values for each data point, illustrating price movements in stocks and providing a clear visualization of price ranges. The [Hilo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Hilo) series requires two y-values for each data point, you need to specify both the high and low values. The high value represents the maximum price, while the low value represents the minimum price of the stock. +This chart type displays high and low values for each data point, providing a clear visualization of price ranges. The Hilo series requires two y-values for each data point: high (maximum price) and low (minimum price). ```cshtml @using Syncfusion.Blazor.Charts - + @@ -32,7 +32,7 @@ This indicates that the data should be represented as a hilo chart, which shows -@code{ +@code { public class Data { public string X { get; set; } @@ -42,18 +42,18 @@ This indicates that the data should be represented as a hilo chart, which shows public List StockDetails = new List { - new Data{ X= "Jan", Low= 87, High= 200 }, - new Data{ X= "Feb", Low= 45, High= 135 }, - new Data{ X= "Mar", Low= 19, High= 85 }, - new Data{ X= "Apr", Low= 31, High= 108 }, - new Data{ X= "May", Low= 27, High= 80 }, - new Data{ X= "June",Low= 84, High= 130 }, - new Data{ X= "Jul", Low= 77, High=150 }, - new Data{ X= "Aug", Low= 54, High= 125 }, - new Data{ X= "Sep", Low= 60, High= 155 }, - new Data{ X= "Oct", Low= 60, High= 180 }, - new Data{ X= "Nov", Low= 88, High= 180 }, - new Data{ X= "Dec", Low= 84, High= 230 } + new Data { X = "Jan", Low = 87, High = 200 }, + new Data { X = "Feb", Low = 45, High = 135 }, + new Data { X = "Mar", Low = 19, High = 85 }, + new Data { X = "Apr", Low = 31, High = 108 }, + new Data { X = "May", Low = 27, High = 80 }, + new Data { X = "June", Low = 84, High = 130 }, + new Data { X = "Jul", Low = 77, High = 150 }, + new Data { X = "Aug", Low = 54, High = 125 }, + new Data { X = "Sep", Low = 60, High = 155 }, + new Data { X = "Oct", Low = 60, High = 180 }, + new Data { X = "Nov", Low = 88, High = 180 }, + new Data { X = "Dec", Low = 84, High = 230 } }; } @@ -62,11 +62,11 @@ This indicates that the data should be represented as a hilo chart, which shows ![Blazor Hilo Chart](../images/financial-types/blazor-hilo-chart.png) -N> Refer to our [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 our [Blazor Hilo Chart Example](https://blazor.syncfusion.com/demos/chart/hilo) to know how to render and configure the Hilo type series. +Refer to the [Blazor Hilo Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/hilo-chart) feature tour page for more feature details. Explore the [Blazor Hilo Chart Example](https://blazor.syncfusion.com/demos/chart/hilo) to learn how to render and configure the Hilo series with interactive examples. ## Binding data with series -You can bind data to the chart using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property within the series configuration. 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. More information on data binding can be found [here](../working-with-data). To display the data correctly, map the fields from the data to the chart series' [`XName`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_XName), [`High`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_High) and [`Low`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Low) properties. +Bind data to the chart using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property in the series configuration. 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) or a list of business objects. For more information, see [Working with Data](../working-with-data). Map the data fields to the chart series' [`XName`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_XName), [`High`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_High), and [`Low`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Low) properties. ```cshtml @@ -81,7 +81,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. -@code{ +@code { public class Data { public string X { get; set; } @@ -91,18 +91,18 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. public List StockDetails = new List { - new Data{ X= "Jan", Low= 87, High= 200 }, - new Data{ X= "Feb", Low= 45, High= 135 }, - new Data{ X= "Mar", Low= 19, High= 85 }, - new Data{ X= "Apr", Low= 31, High= 108 }, - new Data{ X= "May", Low= 27, High= 80 }, - new Data{ X= "June",Low= 84, High= 130 }, - new Data{ X= "Jul", Low= 77, High=150 }, - new Data{ X= "Aug", Low= 54, High= 125 }, - new Data{ X= "Sep", Low= 60, High= 155 }, - new Data{ X= "Oct", Low= 60, High= 180 }, - new Data{ X= "Nov", Low= 88, High= 180 }, - new Data{ X= "Dec", Low= 84, High= 230 } + new Data { X = "Jan", Low = 87, High = 200 }, + new Data { X = "Feb", Low = 45, High = 135 }, + new Data { X = "Mar", Low = 19, High = 85 }, + new Data { X = "Apr", Low = 31, High = 108 }, + new Data { X = "May", Low = 27, High = 80 }, + new Data { X = "June", Low = 84, High = 130 }, + new Data { X = "Jul", Low = 77, High = 150 }, + new Data { X = "Aug", Low = 54, High = 125 }, + new Data { X = "Sep", Low = 60, High = 155 }, + new Data { X = "Oct", Low = 60, High = 180 }, + new Data { X = "Nov", Low = 88, High = 180 }, + new Data { X = "Dec", Low = 84, High = 230 } }; } @@ -111,11 +111,11 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. ## Series customization -The following properties can be used to customize the [Hilo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Hilo) series. +Customize the [Hilo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Hilo) series using the following properties: **Fill** -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property determines the color applied to the series. +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property sets the color for the series. ```cshtml @@ -140,25 +140,25 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public List StockDetails = new List { - new Data{ X= "Jan", Low= 87, High= 200 }, - new Data{ X= "Feb", Low= 45, High= 135 }, - new Data{ X= "Mar", Low= 19, High= 85 }, - new Data{ X= "Apr", Low= 31, High= 108 }, - new Data{ X= "May", Low= 27, High= 80 }, - new Data{ X= "June",Low= 84, High= 130 }, - new Data{ X= "Jul", Low= 77, High=150 }, - new Data{ X= "Aug", Low= 54, High= 125 }, - new Data{ X= "Sep", Low= 60, High= 155 }, - new Data{ X= "Oct", Low= 60, High= 180 }, - new Data{ X= "Nov", Low= 88, High= 180 }, - new Data{ X= "Dec", Low= 84, High= 230 } + new Data { X = "Jan", Low = 87, High = 200 }, + new Data { X = "Feb", Low = 45, High = 135 }, + new Data { X = "Mar", Low = 19, High = 85 }, + new Data { X = "Apr", Low = 31, High = 108 }, + new Data { X = "May", Low = 27, High = 80 }, + new Data { X = "June", Low = 84, High = 130 }, + new Data { X = "Jul", Low = 77, High = 150 }, + new Data { X = "Aug", Low = 54, High = 125 }, + new Data { X = "Sep", Low = 60, High = 155 }, + new Data { X = "Oct", Low = 60, High = 180 }, + new Data { X = "Nov", Low = 88, High = 180 }, + new Data { X = "Dec", Low = 84, High = 230 } }; } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BXBpjPVXpydPcQUK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -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. +Apply a gradient color to the hilo series by configuring the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property with gradient values. ```cshtml @@ -192,18 +192,18 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public List StockDetails = new List { - new Data{ X= "Jan", Low= 87, High= 200 }, - new Data{ X= "Feb", Low= 45, High= 135 }, - new Data{ X= "Mar", Low= 19, High= 85 }, - new Data{ X= "Apr", Low= 31, High= 108 }, - new Data{ X= "May", Low= 27, High= 80 }, - new Data{ X= "June",Low= 84, High= 130 }, - new Data{ X= "Jul", Low= 77, High=150 }, - new Data{ X= "Aug", Low= 54, High= 125 }, - new Data{ X= "Sep", Low= 60, High= 155 }, - new Data{ X= "Oct", Low= 60, High= 180 }, - new Data{ X= "Nov", Low= 88, High= 180 }, - new Data{ X= "Dec", Low= 84, High= 230 } + new Data { X = "Jan", Low = 87, High = 200 }, + new Data { X = "Feb", Low = 45, High = 135 }, + new Data { X = "Mar", Low = 19, High = 85 }, + new Data { X = "Apr", Low = 31, High = 108 }, + new Data { X = "May", Low = 27, High = 80 }, + new Data { X = "June", Low = 84, High = 130 }, + new Data { X = "Jul", Low = 77, High = 150 }, + new Data { X = "Aug", Low = 54, High = 125 }, + new Data { X = "Sep", Low = 60, High = 155 }, + new Data { X = "Oct", Low = 60, High = 180 }, + new Data { X = "Nov", Low = 88, High = 180 }, + new Data { X = "Dec", Low = 84, High = 230 } }; } @@ -212,7 +212,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS **Opacity** -The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Opacity) property specifies the transparency level of the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill). Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. +The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Opacity) property controls the transparency of the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) color, allowing adjustment of the series' appearance. ```cshtml @@ -238,18 +238,18 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha public List StockDetails = new List { - new Data{ X= "Jan", Low= 87, High= 200 }, - new Data{ X= "Feb", Low= 45, High= 135 }, - new Data{ X= "Mar", Low= 19, High= 85 }, - new Data{ X= "Apr", Low= 31, High= 108 }, - new Data{ X= "May", Low= 27, High= 80 }, - new Data{ X= "June",Low= 84, High= 130 }, - new Data{ X= "Jul", Low= 77, High=150 }, - new Data{ X= "Aug", Low= 54, High= 125 }, - new Data{ X= "Sep", Low= 60, High= 155 }, - new Data{ X= "Oct", Low= 60, High= 180 }, - new Data{ X= "Nov", Low= 88, High= 180 }, - new Data{ X= "Dec", Low= 84, High= 230 } + new Data { X = "Jan", Low = 87, High = 200 }, + new Data { X = "Feb", Low = 45, High = 135 }, + new Data { X = "Mar", Low = 19, High = 85 }, + new Data { X = "Apr", Low = 31, High = 108 }, + new Data { X = "May", Low = 27, High = 80 }, + new Data { X = "June", Low = 84, High = 130 }, + new Data { X = "Jul", Low = 77, High = 150 }, + new Data { X = "Aug", Low = 54, High = 125 }, + new Data { X = "Sep", Low = 60, High = 155 }, + new Data { X = "Oct", Low = 60, High = 180 }, + new Data { X = "Nov", Low = 88, High = 180 }, + new Data { X = "Dec", Low = 84, High = 230 } }; } @@ -258,11 +258,11 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha ## 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. +Data points with `null`, `double.NaN`, or `undefined` values are considered empty and are not plotted. **Mode** -Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). +Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Mode) property to specify how empty or missing data points are handled. The default mode is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). ```cshtml @@ -289,18 +289,18 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public List StockDetails = new List { - new Data{ X= "Jan", Low= 87, High= 200 }, - new Data{ X= "Feb", Low= 45, High= 135 }, - new Data{ X= "Mar", Low= 19, High= 85 }, - new Data{ X= "Apr", Low= 31, High= 108 }, - new Data{ X= "May", Low= 27, High= 80 }, - new Data{ X= "June",Low= double.NaN, High= double.NaN }, - new Data{ X= "Jul", Low= 77, High=150 }, - new Data{ X= "Aug", Low= 54, High= 125 }, - new Data{ X= "Sep", Low= 60, High= 155 }, - new Data{ X= "Oct", Low= 60, High= 180 }, - new Data{ X= "Nov", Low= 88, High= 180 }, - new Data{ X= "Dec", Low= 84, High= 230 } + new Data { X = "Jan", Low = 87, High = 200 }, + new Data { X = "Feb", Low = 45, High = 135 }, + new Data { X = "Mar", Low = 19, High = 85 }, + new Data { X = "Apr", Low = 31, High = 108 }, + new Data { X = "May", Low = 27, High = 80 }, + new Data { X = "June", Low = double.NaN, High = double.NaN }, + new Data { X = "Jul", Low = 77, High = 150 }, + new Data { X = "Aug", Low = 54, High = 125 }, + new Data { X = "Sep", Low = 60, High = 155 }, + new Data { X = "Oct", Low = 60, High = 180 }, + new Data { X = "Nov", Low = 88, High = 180 }, + new Data { X = "Dec", Low = 84, High = 230 } }; } @@ -309,7 +309,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. **Fill** -Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Fill) property to customize the fill color of empty points in the series. +Customize the fill color of empty points using the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Fill) property. ```cshtml @@ -336,18 +336,18 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public List StockDetails = new List { - new Data{ X= "Jan", Low= 87, High= 200 }, - new Data{ X= "Feb", Low= 45, High= 135 }, - new Data{ X= "Mar", Low= 19, High= 85 }, - new Data{ X= "Apr", Low= 31, High= 108 }, - new Data{ X= "May", Low= 27, High= 80 }, - new Data{ X= "June",Low= double.NaN, High= double.NaN }, - new Data{ X= "Jul", Low= 77, High=150 }, - new Data{ X= "Aug", Low= 54, High= 125 }, - new Data{ X= "Sep", Low= 60, High= 155 }, - new Data{ X= "Oct", Low= 60, High= 180 }, - new Data{ X= "Nov", Low= 88, High= 180 }, - new Data{ X= "Dec", Low= 84, High= 230 } + new Data { X = "Jan", Low = 87, High = 200 }, + new Data { X = "Feb", Low = 45, High = 135 }, + new Data { X = "Mar", Low = 19, High = 85 }, + new Data { X = "Apr", Low = 31, High = 108 }, + new Data { X = "May", Low = 27, High = 80 }, + new Data { X = "June", Low = double.NaN, High = double.NaN }, + new Data { X = "Jul", Low = 77, High = 150 }, + new Data { X = "Aug", Low = 54, High = 125 }, + new Data { X = "Sep", Low = 60, High = 155 }, + new Data { X = "Oct", Low = 60, High = 180 }, + new Data { X = "Nov", Low = 88, High = 180 }, + new Data { X = "Dec", Low = 84, High = 230 } }; } @@ -358,7 +358,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. ### Series render -The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSeriesRender) event allows you to customize series properties, such as [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Data), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Fill), and [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Series), before they are rendered on the chart. +The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSeriesRender) event enables customization of series properties, such as [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Data), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Fill), and [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Series), before rendering. ```cshtml @@ -388,18 +388,18 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C public List StockDetails = new List { - new Data{ X= "Jan", Low= 87, High= 200 }, - new Data{ X= "Feb", Low= 45, High= 135 }, - new Data{ X= "Mar", Low= 19, High= 85 }, - new Data{ X= "Apr", Low= 31, High= 108 }, - new Data{ X= "May", Low= 27, High= 80 }, - new Data{ X= "June",Low= 84, High= 130 }, - new Data{ X= "Jul", Low= 77, High=150 }, - new Data{ X= "Aug", Low= 54, High= 125 }, - new Data{ X= "Sep", Low= 60, High= 155 }, - new Data{ X= "Oct", Low= 60, High= 180 }, - new Data{ X= "Nov", Low= 88, High= 180 }, - new Data{ X= "Dec", Low= 84, High= 230 } + new Data { X = "Jan", Low = 87, High = 200 }, + new Data { X = "Feb", Low = 45, High = 135 }, + new Data { X = "Mar", Low = 19, High = 85 }, + new Data { X = "Apr", Low = 31, High = 108 }, + new Data { X = "May", Low = 27, High = 80 }, + new Data { X = "June", Low = 84, High = 130 }, + new Data { X = "Jul", Low = 77, High = 150 }, + new Data { X = "Aug", Low = 54, High = 125 }, + new Data { X = "Sep", Low = 60, High = 155 }, + new Data { X = "Oct", Low = 60, High = 180 }, + new Data { X = "Nov", Low = 88, High = 180 }, + new Data { X = "Dec", Low = 84, High = 230 } }; } @@ -408,15 +408,15 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C ### Point render -The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnPointRender) event allows you to customize each data point before it is rendered on the chart. +The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnPointRender) event allows customization of each data point before rendering. ```cshtml @using Syncfusion.Blazor.Charts + - @@ -438,18 +438,18 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch public List StockDetails = new List { - new Data{ X= "Jan", Low= 87, High= 200 }, - new Data{ X= "Feb", Low= 45, High= 135 }, - new Data{ X= "Mar", Low= 19, High= 85 }, - new Data{ X= "Apr", Low= 31, High= 108 }, - new Data{ X= "May", Low= 27, High= 80 }, - new Data{ X= "June",Low= 84, High= 130 }, - new Data{ X= "Jul", Low= 77, High=150 }, - new Data{ X= "Aug", Low= 54, High= 125 }, - new Data{ X= "Sep", Low= 60, High= 155 }, - new Data{ X= "Oct", Low= 60, High= 180 }, - new Data{ X= "Nov", Low= 88, High= 180 }, - new Data{ X= "Dec", Low= 84, High= 230 } + new Data { X = "Jan", Low = 87, High = 200 }, + new Data { X = "Feb", Low = 45, High = 135 }, + new Data { X = "Mar", Low = 19, High = 85 }, + new Data { X = "Apr", Low = 31, High = 108 }, + new Data { X = "May", Low = 27, High = 80 }, + new Data { X = "June", Low = 84, High = 130 }, + new Data { X = "Jul", Low = 77, High = 150 }, + new Data { X = "Aug", Low = 54, High = 125 }, + new Data { X = "Sep", Low = 60, High = 155 }, + new Data { X = "Oct", Low = 60, High = 180 }, + new Data { X = "Nov", Low = 88, High = 180 }, + new Data { X = "Dec", Low = 84, High = 230 } }; } @@ -460,5 +460,5 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also -* [Data Label](../data-labels) -* [Tooltip](../tool-tip) \ No newline at end of file +* [Data label](../data-labels) +* [Tooltip](../tool-tip) diff --git a/blazor/chart/chart-types/polar.md b/blazor/chart/chart-types/polar.md index c8859e58ef..6971bee9ea 100644 --- a/blazor/chart/chart-types/polar.md +++ b/blazor/chart/chart-types/polar.md @@ -1,23 +1,23 @@ --- layout: post -title: Polar in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about the Polar Chart in Syncfusion Blazor Charts component and much more. +title: Polar Chart in Blazor Charts Component | Syncfusion +description: Check out and learn how to configure and customize the Polar Chart in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug --- -# Polar in Blazor Charts Component +# Polar Chart in Blazor Charts Component -## Polar +## Polar Chart -[Polar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/polar-chart) series visualizes data in terms of values and angles. It provides options for visual comparison between several quantitative or qualitative aspects of a situation. +The [Polar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/polar-chart) series visualizes data using values and angles, providing options for visual comparison between quantitative or qualitative aspects. -You can learn how to create a Polar chart using Blazor Charts by watching the video below. +You can also learn how to create a Polar chart using Blazor Charts by watching the video below. {% youtube "youtube:https://www.youtube.com/watch?v=Q5odgrcbSO0" %} -To render a [polar](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/polar-chart) series in your chart, Define the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [`Polar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Polar) in your chart configuration. This indicates that the data should be represented as a polar chart, which is ideal for plotting data points on a circular graph. +To render a [polar](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/polar-chart) series, set the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to [`Polar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Polar) in the chart configuration. This displays data points on a circular graph. ```cshtml @@ -40,26 +40,26 @@ To render a [polar](https://www.syncfusion.com/blazor-components/blazor-charts/c public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData { X = 2005, Y = 28 }, + new ChartData { X = 2006, Y = 25 }, + new ChartData { X = 2007, Y = 26 }, + new ChartData { X = 2008, Y = 27 }, + new ChartData { X = 2009, Y = 32 }, + new ChartData { X = 2010, Y = 35 }, + new ChartData { X = 2011, Y = 30 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthpXPhXfsXrrssZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthpXPhXfsXrrssZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Polar Chart](../images/polar-radar/blazor-polar-chart.png) -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. +Refer to the [Blazor Polar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/polar-chart) feature tour page for more feature details. Explore the [Blazor Polar Chart Example](https://blazor.syncfusion.com/demos/chart/polar-line) to learn how to render and configure polar charts with interactive examples. ## Binding data with series -You can bind data to the chart using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property within the series configuration. 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. More information on data binding can be found [here](../working-with-data). To display the data correctly, map the fields from the data to the chart 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. +Bind data to the chart using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property in the series configuration. 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) or a list of business objects. For more information, see [Working with Data](../working-with-data). Map the data fields to the chart 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. ```cshtml @@ -82,26 +82,26 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData { X = 2005, Y = 28 }, + new ChartData { X = 2006, Y = 25 }, + new ChartData { X = 2007, Y = 26 }, + new ChartData { X = 2008, Y = 27 }, + new ChartData { X = 2009, Y = 32 }, + new ChartData { X = 2010, Y = 35 }, + new ChartData { X = 2011, Y = 30 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BthpXPhXfsXrrssZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BthpXPhXfsXrrssZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Draw types - To change the series plotting type to [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line), [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Column), [Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Area), [RangeColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_RangeColumn), [Spline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Spline), [Scatter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Scatter), [StackingArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_StackingArea), and [StackingColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_StackingColumn), use the Polar's [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) property. [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) is set to [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line) by default. +Change the series plotting type using the [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) property. Supported types include [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line), [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Column), [Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Area), [RangeColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_RangeColumn), [Spline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Spline), [Scatter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Scatter), [StackingArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_StackingArea), and [StackingColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_StackingColumn). The default is [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line). ### Line -To render a [line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line) series in [Polar Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Polar), specify the [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) property to [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line). [IsClosed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_IsClosed) property specifies whether to join start and end point of a line series used in [Polar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/polar-chart) to form a closed path. The default value of [IsClosed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_IsClosed) property is **true**. +Render a [line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line) series in Polar Chart by setting the [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) property to [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line). The [IsClosed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_IsClosed) property determines whether to join the start and end points to form a closed path. The default value is **true**. ```cshtml @@ -116,7 +116,7 @@ To render a [line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart -@code{ +@code { public class ChartData { public double X { get; set; } @@ -125,22 +125,22 @@ To render a [line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData { X = 2005, Y = 28 }, + new ChartData { X = 2006, Y = 25 }, + new ChartData { X = 2007, Y = 26 }, + new ChartData { X = 2008, Y = 27 }, + new ChartData { X = 2009, Y = 32 }, + new ChartData { X = 2010, Y = 35 }, + new ChartData { X = 2011, Y = 30 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzDbVjfMVssote?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZVzDbVjfMVssote?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Spline -To render a [spline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Spline) draw type, Define the series [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) as [Spline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Spline) in your chart configuration. This indicates that the data should be represented as a polar spline chart, with smooth, curved lines connecting each data point. +Render a [spline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Spline) draw type by setting the series [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) to [Spline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Spline). This displays a polar spline chart with smooth, curved lines. ```cshtml @@ -155,7 +155,7 @@ To render a [spline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cha -@code{ +@code { public class ChartData { public double X { get; set;} @@ -164,22 +164,22 @@ To render a [spline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cha public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData { X = 2005, Y = 28 }, + new ChartData { X = 2006, Y = 25 }, + new ChartData { X = 2007, Y = 26 }, + new ChartData { X = 2008, Y = 27 }, + new ChartData { X = 2009, Y = 32 }, + new ChartData { X = 2010, Y = 35 }, + new ChartData { X = 2011, Y = 30 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthpNlLZTCqugtIw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthpNlLZTCqugtIw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Area -To render an [area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Area) draw type, define the series [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) as [Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Area) in your chart configuration. This indicates that the data should be represented as a polar area chart, with filled areas below the lines connecting each data point. +Render an [area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Area) draw type by setting the series [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) to [Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Area). This displays a polar area chart with filled areas below the lines. ```cshtml @@ -194,7 +194,7 @@ To render an [area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char -@code{ +@code { public class ChartData { public double X { get; set; } @@ -203,22 +203,22 @@ To render an [area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData { X = 2005, Y = 28 }, + new ChartData { X = 2006, Y = 25 }, + new ChartData { X = 2007, Y = 26 }, + new ChartData { X = 2008, Y = 27 }, + new ChartData { X = 2009, Y = 32 }, + new ChartData { X = 2010, Y = 35 }, + new ChartData { X = 2011, Y = 30 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBzjlBXTWSRXqYZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBzjlBXTWSRXqYZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Stacked Area -To render a [stacking area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_StackingArea) draw type, Define the series [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) as [StackingArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_StackingArea) in your chart configuration. This indicates that the data should be represented as a polar stacked area chart, with areas stacked on top of each other, displaying the cumulative value of multiple series. +Render a [stacking area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_StackingArea) draw type by setting the series [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) to [StackingArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_StackingArea). This displays a polar stacked area chart, showing cumulative values of multiple series. ```cshtml @@ -243,7 +243,7 @@ To render a [stacking area](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla -@code{ +@code { public class ChartData { public double X { get; set; } @@ -254,31 +254,31 @@ To render a [stacking area](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla public List SalesReports = new List { - new ChartData{ X=2000, Y= 0.61, Y1= 0.03, Y2= 0.48}, - new ChartData{ X=2001, Y= 0.81, Y1= 0.05, Y2= 0.53 }, - new ChartData{ X=2002, Y= 0.91, Y1= 0.06, Y2= 0.57 }, - new ChartData{ X=2003, Y= 1, Y1= 0.09, Y2= 0.61 }, - new ChartData{ X=2004, Y= 1.19, Y1= 0.14, Y2= 0.63 }, - new ChartData{ X=2005, Y= 1.47, Y1= 0.20, Y2= 0.64 }, - new ChartData{ X=2006, Y= 1.74, Y1= 0.29, Y2= 0.66 }, - new ChartData{ X=2007, Y= 1.98, Y1= 0.46, Y2= 0.76 }, - new ChartData{ X=2008, Y= 1.99, Y1= 0.64, Y2= 0.77 }, - new ChartData{ X=2009, Y= 1.70, Y1= 0.75, Y2= 0.55 } + new ChartData { X = 2000, Y = 0.61, Y1 = 0.03, Y2 = 0.48}, + new ChartData { X = 2001, Y = 0.81, Y1 = 0.05, Y2 = 0.53 }, + new ChartData { X = 2002, Y = 0.91, Y1 = 0.06, Y2 = 0.57 }, + new ChartData { X = 2003, Y = 1, Y1 = 0.09, Y2 = 0.61 }, + new ChartData { X = 2004, Y = 1.19, Y1 = 0.14, Y2 = 0.63 }, + new ChartData { X = 2005, Y = 1.47, Y1 = 0.20, Y2 = 0.64 }, + new ChartData { X = 2006, Y = 1.74, Y1 = 0.29, Y2 = 0.66 }, + new ChartData { X = 2007, Y = 1.98, Y1 = 0.46, Y2 = 0.76 }, + new ChartData { X = 2008, Y = 1.99, Y1 = 0.64, Y2 = 0.77 }, + new ChartData { X = 2009, Y = 1.70, Y1 = 0.75, Y2 = 0.55 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhJNvrtTiQtUrwf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhJNvrtTiQtUrwf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Column -To render a [column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Column) draw type, define the series [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) as [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Column) in your chart configuration. This indicates that the data should be represented as a polar column chart, allowing for the comparison of values across categories. +Render a [column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Column) draw type by setting the series [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) to [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Column). This displays a polar column chart for comparing values across categories. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -287,7 +287,7 @@ To render a [column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cha -@code{ +@code { public class ChartData { public double X { get; set; } @@ -296,22 +296,22 @@ To render a [column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Cha public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData { X = 2005, Y = 28 }, + new ChartData { X = 2006, Y = 25 }, + new ChartData { X = 2007, Y = 26 }, + new ChartData { X = 2008, Y = 27 }, + new ChartData { X = 2009, Y = 32 }, + new ChartData { X = 2010, Y = 35 }, + new ChartData { X = 2011, Y = 30 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrJZbhZfivRPCTM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrJZbhZfivRPCTM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Stacked column -To render a [stacking column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_StackingColumn) draw type, define the series [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) as [StackingColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_StackingColumn) in your chart configuration. This indicates that the data should be represented as a polar stacked column chart, with each column consisting of multiple segments stacked on top of each other. +Render a [stacking column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_StackingColumn) draw type by setting the series [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) to [StackingColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_StackingColumn). This displays a polar stacked column chart with multiple segments stacked in each column. ```cshtml @@ -333,7 +333,7 @@ To render a [stacking column](https://help.syncfusion.com/cr/blazor/Syncfusion.B -@code{ +@code { public class ChartData { public double X { get; set; } @@ -344,33 +344,32 @@ To render a [stacking column](https://help.syncfusion.com/cr/blazor/Syncfusion.B public List SalesReports = new List { - new ChartData{ X=2000, Y= 0.61, Y1= 0.03, Y2= 0.48}, - new ChartData{ X=2001, Y= 0.81, Y1= 0.05, Y2= 0.53 }, - new ChartData{ X=2002, Y= 0.91, Y1= 0.06, Y2= 0.57 }, - new ChartData{ X=2003, Y= 1, Y1= 0.09, Y2= 0.61 }, - new ChartData{ X=2004, Y= 1.19, Y1= 0.14, Y2= 0.63 }, - new ChartData{ X=2005, Y= 1.47, Y1= 0.20, Y2= 0.64 }, - new ChartData{ X=2006, Y= 1.74, Y1= 0.29, Y2= 0.66 }, - new ChartData{ X=2007, Y= 1.98, Y1= 0.46, Y2= 0.76 }, - new ChartData{ X=2008, Y= 1.99, Y1= 0.64, Y2= 0.77 }, - new ChartData{ X=2009, Y= 1.70, Y1= 0.75, Y2= 0.55 } + new ChartData { X = 2000, Y = 0.61, Y1 = 0.03, Y2 = 0.48}, + new ChartData { X = 2001, Y = 0.81, Y1 = 0.05, Y2 = 0.53 }, + new ChartData { X = 2002, Y = 0.91, Y1 = 0.06, Y2 = 0.57 }, + new ChartData { X = 2003, Y = 1, Y1 = 0.09, Y2 = 0.61 }, + new ChartData { X = 2004, Y = 1.19, Y1 = 0.14, Y2 = 0.63 }, + new ChartData { X = 2005, Y = 1.47, Y1 = 0.20, Y2 = 0.64 }, + new ChartData { X = 2006, Y = 1.74, Y1 = 0.29, Y2 = 0.66 }, + new ChartData { X = 2007, Y = 1.98, Y1 = 0.46, Y2 = 0.76 }, + new ChartData { X = 2008, Y = 1.99, Y1 = 0.64, Y2 = 0.77 }, + new ChartData { X = 2009, Y = 1.70, Y1 = 0.75, Y2 = 0.55 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLJXbBDTLZKLCRn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLJXbBDTLZKLCRn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Range column -To render a [range column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_RangeColumn) draw type, define the series [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) as [RangeColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_RangeColumn) in your chart configuration. This indicates that the data should be represented as a polar range column chart, where each column spans a range of values. +Render a [range column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_RangeColumn) draw type by setting the series [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) to [RangeColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_RangeColumn). This displays a polar range column chart, where each column spans a range of values. ```cshtml @using Syncfusion.Blazor.Charts - - + -@code{ +@code { public class ChartData { public string X { get; set; } @@ -389,35 +388,34 @@ To render a [range column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz public List WeatherReports = new List { - new ChartData{ X="Jan", Low= 0.7, High= 6.1 }, - new ChartData{ X="Feb", Low=1.3, High=6.3 }, - new ChartData{ X="Mar", Low= 1.9, High= 8.5 }, - new ChartData{ X= "Apr", Low= 3.1, High= 10.8 }, - new ChartData{ X="May", Low= 5.7, High= 14.40 }, - new ChartData { X= "Jun", Low= 8.4, High= 16.90 }, - new ChartData { X= "Jul", Low= 10.6,High= 19.20 }, - new ChartData { X= "Aug", Low= 10.5,High= 18.9 }, - new ChartData { X= "Sep", Low= 8.5, High= 16.1 }, - new ChartData { X= "Oct", Low= 6.0, High= 12.5 }, - new ChartData { X= "Nov", Low= 1.5, High= 6.9 }, - new ChartData { X= "Dec", Low= 5.1, High= 12.1 } + new ChartData { X = "Jan", Low = 0.7, High = 6.1 }, + new ChartData { X = "Feb", Low = 1.3, High = 6.3 }, + new ChartData { X = "Mar", Low = 1.9, High = 8.5 }, + new ChartData { X = "Apr", Low = 3.1, High = 10.8 }, + new ChartData { X = "May", Low = 5.7, High = 14.40 }, + new ChartData { X = "Jun", Low = 8.4, High = 16.90 }, + new ChartData { X = "Jul", Low = 10.6,High = 19.20 }, + new ChartData { X = "Aug", Low = 10.5,High = 18.9 }, + new ChartData { X = "Sep", Low = 8.5, High = 16.1 }, + new ChartData { X = "Oct", Low = 6.0, High = 12.5 }, + new ChartData { X = "Nov", Low = 1.5, High = 6.9 }, + new ChartData { X = "Dec", Low = 5.1, High = 12.1 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLpjlhZfVAjIYyK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDLpjlhZfVAjIYyK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Scatter - -To render a [scatter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Scatter) draw type, define the series [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) as [Scatter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Scatter) in your chart configuration. This indicates that the data should be represented as a polar scatter chart. + +Render a [scatter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Scatter) draw type by setting the series [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) to [Scatter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Scatter). This displays a polar scatter chart. ```cshtml @using Syncfusion.Blazor.Charts - - + -@code{ +@code { public class ChartData { public double X { get; set; } @@ -435,32 +433,31 @@ To render a [scatter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData { X = 2005, Y = 28 }, + new ChartData { X = 2006, Y = 25 }, + new ChartData { X = 2007, Y = 26 }, + new ChartData { X = 2008, Y = 27 }, + new ChartData { X = 2009, Y = 32 }, + new ChartData { X = 2010, Y = 35 }, + new ChartData { X = 2011, Y = 30 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LthfNlrDfBJUztOA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LthfNlrDfBJUztOA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Series customization ### Start angle -To customize the start angle of the [Polar Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Polar), use [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_StartAngle) property. By default, [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_StartAngle) value is **0**. +Customize the start angle of the Polar Chart using the [StartAngle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_StartAngle) property. The default value is **0**. ```cshtml @using Syncfusion.Blazor.Charts - - + -@code{ +@code { public class ChartData { public double X { get; set; } @@ -478,22 +475,22 @@ To customize the start angle of the [Polar Chart](https://help.syncfusion.com/cr public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData { X = 2005, Y = 28 }, + new ChartData { X = 2006, Y = 25 }, + new ChartData { X = 2007, Y = 26 }, + new ChartData { X = 2008, Y = 27 }, + new ChartData { X = 2009, Y = 32 }, + new ChartData { X = 2010, Y = 35 }, + new ChartData { X = 2011, Y = 30 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhTDPBZphQtaNHK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZhTDPBZphQtaNHK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Radius -To customize the radius of the [Polar Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Polar), use [Coefficient](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_Coefficient) property. By default, [Coefficient](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_Coefficient) value is **100**. +Customize the radius of the Polar Chart using the [Coefficient](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_Coefficient) property. The default value is **100**. ```cshtml @@ -519,26 +516,26 @@ To customize the radius of the [Polar Chart](https://help.syncfusion.com/cr/blaz public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData { X = 2005, Y = 28 }, + new ChartData { X = 2006, Y = 25 }, + new ChartData { X = 2007, Y = 26 }, + new ChartData { X = 2008, Y = 27 }, + new ChartData { X = 2009, Y = 32 }, + new ChartData { X = 2010, Y = 35 }, + new ChartData { X = 2011, Y = 30 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLJjFLZfLwTKJNf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VXLJjFLZfLwTKJNf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## 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. +Data points with `null`, `double.NaN`, or `undefined` values are considered empty and are not plotted. **Mode** -Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). +Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Mode) property to specify how empty or missing data points are handled. The default mode is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). ```cshtml @@ -563,13 +560,13 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= double.NaN }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData{ X = 2005, Y = 28 }, + new ChartData{ X = 2006, Y = 25 }, + new ChartData{ X = 2007, Y = 26 }, + new ChartData{ X = 2008, Y = double.NaN }, + new ChartData{ X = 2009, Y = 32 }, + new ChartData{ X = 2010, Y = 35 }, + new ChartData{ X = 2011, Y = 30 } }; } @@ -578,7 +575,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. **Fill** -Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Fill) property to customize the fill color of empty points in the series. +Customize the fill color of empty points using the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Fill) property. ```cshtml @@ -603,13 +600,13 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= double.NaN }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData{ X = 2005, Y = 28 }, + new ChartData{ X = 2006, Y = 25 }, + new ChartData{ X = 2007, Y = 26 }, + new ChartData{ X = 2008, Y = double.NaN }, + new ChartData{ X = 2009, Y = 32 }, + new ChartData{ X = 2010, Y = 35 }, + new ChartData{ X = 2011, Y = 30 } }; } @@ -618,7 +615,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. **Border** -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. +Customize the border width and color of empty points using the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Border) property, including [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). ```cshtml @@ -645,13 +642,13 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= double.NaN }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData{ X = 2005, Y = 28 }, + new ChartData{ X = 2006, Y = 25 }, + new ChartData{ X = 2007, Y = 26 }, + new ChartData{ X = 2008, Y = double.NaN }, + new ChartData{ X = 2009, Y = 32 }, + new ChartData{ X = 2010, Y = 35 }, + new ChartData{ X = 2011, Y = 30 } }; } @@ -662,7 +659,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart ### Series render -The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSeriesRender) event allows you to customize series properties, such as [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Data), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Fill), and [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Series), before they are rendered on the chart. +The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSeriesRender) event enables customization of series properties, such as [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Data), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Fill), and [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Series), before rendering. ```cshtml @@ -670,7 +667,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C - + @@ -690,13 +687,13 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData{ X = 2005, Y = 28 }, + new ChartData{ X = 2006, Y = 25 }, + new ChartData{ X = 2007, Y = 26 }, + new ChartData{ X = 2008, Y = 27 }, + new ChartData{ X = 2009, Y = 32 }, + new ChartData{ X = 2010, Y = 35 }, + new ChartData{ X = 2011, Y = 30 } }; } @@ -706,7 +703,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C ### Point render -The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnPointRender) event allows you to customize each data point before it is rendered on the chart. +The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnPointRender) event allows customization of each data point before rendering. ```cshtml @@ -714,7 +711,7 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch - + @@ -753,5 +750,5 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also -* [Data Label](../data-labels) -* [Tooltip](../tool-tip) \ No newline at end of file +* [Data label](../data-labels) +* [Tooltip](../tool-tip) diff --git a/blazor/chart/chart-types/radar.md b/blazor/chart/chart-types/radar.md index 0d45ec0d0d..d76fb3703c 100644 --- a/blazor/chart/chart-types/radar.md +++ b/blazor/chart/chart-types/radar.md @@ -1,40 +1,39 @@ --- layout: post -title: Radar in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about the Radar Chart in Syncfusion Blazor Charts component and much more. +title: Radar Chart in Blazor Charts Component | Syncfusion +description: Check out and learn how to configure and customize the Radar Chart in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug --- -# Radar in Blazor Charts Component +# Radar Chart in Blazor Charts Component -## Radar - -[Radar](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/radar-chart) series visualizes data in terms of values and angles. It provides option for visual comparison between several quantitative or qualitative aspects of a situation. +## Radar Chart -You can learn how to create a Radar chart using Blazor Charts by watching the video below. +The [Radar](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/radar-chart) series visualizes data using values and angles, providing options for visual comparison between quantitative or qualitative aspects. + +You can also learn how to create a Radar chart using Blazor Charts by watching the video below. {% youtube "youtube:https://www.youtube.com/watch?v=Q5odgrcbSO0" %} -To render a radar chart, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to [Radar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Radar). To render a [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line) series in [Radar Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Radar), specify the [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) property to [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line). [IsClosed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_IsClosed) property specifies whether to join start and end point of a line series used in [Radar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/Radar-chart) to form a closed path. The default value of [IsClosed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_IsClosed) property is **true**. +To render a radar chart, set the series [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to [Radar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Radar). For a [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line) series in Radar Chart, set the [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) property to [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line). The [IsClosed](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_IsClosed) property determines whether to join the start and end points to form a closed path. The default value is **true**. ```cshtml @using Syncfusion.Blazor.Charts - - + + Type="ChartSeriesType.Radar" DrawType="ChartDrawType.Line"> -@code{ +@code { public class ChartData { public double X { get; set; } @@ -43,43 +42,42 @@ To render a radar chart, set the series [Type](https://help.syncfusion.com/cr/bl public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData{ X = 2005, Y = 28 }, + new ChartData{ X = 2006, Y = 25 }, + new ChartData{ X = 2007, Y = 26 }, + new ChartData{ X = 2008, Y = 27 }, + new ChartData{ X = 2009, Y = 32 }, + new ChartData{ X = 2010, Y = 35 }, + new ChartData{ X = 2011, Y = 30 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXbrXfzZtZPkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXbrXfzZtZPkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Radar Chart with Line Series](../images/polar-radar/blazor-radar-chart-line-series.png) -N> Refer to our [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 our [Blazor Radar Chart Example](https://blazor.syncfusion.com/demos/chart/polar-line) to know how to render and configure the Radar type chart. +Refer to the [Blazor Radar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/radar-chart) feature tour page for more feature details. Explore the [Blazor Radar Chart Example](https://blazor.syncfusion.com/demos/chart/polar-line) to learn how to render and configure radar charts with interactive examples. -### Draw type +## Binding data with series -Similar to the polar chart, use the [`DrawType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) property to change the series plotting type in a Radar chart to line, column, area, range column, spline, scatter, stacking area, spline area, or stacking column. The default value of [`DrawType`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) is [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line). +Bind data to the chart using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property in the series configuration. 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) or a list of business objects. For more information, see [Working with Data](../working-with-data). Map the data fields to the chart 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. ```cshtml @using Syncfusion.Blazor.Charts - - + + Type="ChartSeriesType.Radar"> -@code{ +@code { public class ChartData { public double X { get; set; } @@ -88,34 +86,33 @@ Similar to the polar chart, use the [`DrawType`](https://help.syncfusion.com/cr/ public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData{ X = 2005, Y = 28 }, + new ChartData{ X = 2006, Y = 25 }, + new ChartData{ X = 2007, Y = 26 }, + new ChartData{ X = 2008, Y = 27 }, + new ChartData{ X = 2009, Y = 32 }, + new ChartData{ X = 2010, Y = 35 }, + new ChartData{ X = 2011, Y = 30 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXbrXfzZtZPkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXbrXfzZtZPkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Binding data with series +### Draw type -You can bind data to the chart using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property within the series configuration. 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. More information on data binding can be found [here](../working-with-data). To display the data correctly, map the fields from the data to the chart 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. +Change the series plotting type using the [DrawType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DrawType) property. Supported types include [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line), [Column](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Column), [Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Area), [RangeColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_RangeColumn), [Spline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Spline), [Scatter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Scatter), [StackingArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_StackingArea), and [StackingColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_StackingColumn). The default is [Line](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDrawType.html#Syncfusion_Blazor_Charts_ChartDrawType_Line). ```cshtml @using Syncfusion.Blazor.Charts - - + + Type="ChartSeriesType.Radar" DrawType="ChartDrawType.Column"> @@ -129,32 +126,31 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData{ X = 2005, Y = 28 }, + new ChartData{ X = 2006, Y = 25 }, + new ChartData{ X = 2007, Y = 26 }, + new ChartData{ X = 2008, Y = 27 }, + new ChartData{ X = 2009, Y = 32 }, + new ChartData{ X = 2010, Y = 35 }, + new ChartData{ X = 2011, Y = 30 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LjhfXbrXfzZtZPkh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rthetYLIVhbGOOBl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Series customization ### Start angle - -To customize the start angle of the [Radar Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Radar), use [StartAngle](https://help.syncfusion.com/cr/blazor#Syncfusion_Blazor_Charts_ChartCommonAxis_StartAngle/Syncfusion.Blazor.html/Syncfusion.Blazor.html) property. By default, [StartAngle](https://help.syncfusion.com/cr/blazor#Syncfusion_Blazor_Charts_ChartCommonAxis_StartAngle/Syncfusion.Blazor.html/Syncfusion.Blazor.html) value is **0**. + +Customize the start angle of the Radar Chart using the [StartAngle](https://help.syncfusion.com/cr/blazor#Syncfusion_Blazor_Charts_ChartCommonAxis_StartAngle/Syncfusion.Blazor.html/Syncfusion.Blazor.html) property. The default value is **0**. ```cshtml @using Syncfusion.Blazor.Charts - - + -@code{ +@code { public class ChartData { public double X { get; set; } @@ -172,39 +168,38 @@ To customize the start angle of the [Radar Chart](https://help.syncfusion.com/cr public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData{ X = 2005, Y = 28 }, + new ChartData{ X = 2006, Y = 25 }, + new ChartData{ X = 2007, Y = 26 }, + new ChartData{ X = 2008, Y = 27 }, + new ChartData{ X = 2009, Y = 32 }, + new ChartData{ X = 2010, Y = 35 }, + new ChartData{ X = 2011, Y = 30 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBpZPhtzpLTqzjV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBpZPhtzpLTqzjV?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Coefficient in axis - -To customize the radius of the [Radar Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Radar), use [Coefficient](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_Coefficient) property. By default, [Coefficient](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_Coefficient) value is **100**. + +Customize the radius of the Radar Chart using the [Coefficient](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAxis.html#Syncfusion_Blazor_Charts_ChartAxis_Coefficient) property. The default value is **100**. ```cshtml @using Syncfusion.Blazor.Charts - - + + Type="ChartSeriesType.Radar" DrawType="ChartDrawType.Line"> -@code{ +@code { public class ChartData { public double X { get; set; } @@ -213,27 +208,28 @@ To customize the radius of the [Radar Chart](https://help.syncfusion.com/cr/blaz public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData{ X = 2005, Y = 28 }, + new ChartData{ X = 2006, Y = 25 }, + new ChartData{ X = 2007, Y = 26 }, + new ChartData{ X = 2008, Y = 27 }, + new ChartData{ X = 2009, Y = 32 }, + new ChartData{ X = 2010, Y = 35 }, + new ChartData{ X = 2011, Y = 30 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLJNPVjfzqCoYbb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLJNPVjfzqCoYbb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for more feature details and explore the [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to learn about various chart types and time-dependent data representation. -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. ## 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. +Data points with `null`, `double.NaN`, or `undefined` values are considered empty and are not plotted. **Mode** -Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). +Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Mode) property to specify how empty or missing data points are handled. The default mode is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). ```cshtml @@ -242,7 +238,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. + Type="Syncfusion.Blazor.Charts.ChartSeriesType.Radar"> @@ -258,13 +254,13 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= double.NaN }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData{ X = 2005, Y = 28 }, + new ChartData{ X = 2006, Y = 25 }, + new ChartData{ X = 2007, Y = 26 }, + new ChartData{ X = 2008, Y = double.NaN }, + new ChartData{ X = 2009, Y = 32 }, + new ChartData{ X = 2010, Y = 35 }, + new ChartData{ X = 2011, Y = 30 } }; } @@ -273,7 +269,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. **Fill** -Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Fill) property to customize the fill color of empty points in the series. +Customize the fill color of empty points using the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Fill) property. ```cshtml @@ -282,7 +278,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. + Type="Syncfusion.Blazor.Charts.ChartSeriesType.Radar"> @@ -298,13 +294,13 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= double.NaN }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData{ X = 2005, Y = 28 }, + new ChartData{ X = 2006, Y = 25 }, + new ChartData{ X = 2007, Y = 26 }, + new ChartData{ X = 2008, Y = double.NaN }, + new ChartData{ X = 2009, Y = 32 }, + new ChartData{ X = 2010, Y = 35 }, + new ChartData{ X = 2011, Y = 30 } }; } @@ -313,7 +309,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. **Border** -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. +Customize the border width and color of empty points using the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Border) property, including [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). ```cshtml @@ -322,7 +318,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart + Type="Syncfusion.Blazor.Charts.ChartSeriesType.Radar"> @@ -340,13 +336,13 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= double.NaN }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData{ X = 2005, Y = 28 }, + new ChartData{ X = 2006, Y = 25 }, + new ChartData{ X = 2007, Y = 26 }, + new ChartData{ X = 2008, Y = double.NaN }, + new ChartData{ X = 2009, Y = 32 }, + new ChartData{ X = 2010, Y = 35 }, + new ChartData{ X = 2011, Y = 30 } }; } @@ -357,7 +353,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart ### Series render -The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSeriesRender) event allows you to customize series properties, such as [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Data), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Fill), and [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Series), before they are rendered on the chart. +The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSeriesRender) event enables customization of series properties, such as [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Data), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Fill), and [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Series), before rendering. ```cshtml @@ -365,9 +361,9 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C - + + Type="Syncfusion.Blazor.Charts.ChartSeriesType.Radar" /> @@ -385,13 +381,13 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData{ X = 2005, Y = 28 }, + new ChartData{ X = 2006, Y = 25 }, + new ChartData{ X = 2007, Y = 26 }, + new ChartData{ X = 2008, Y = 27 }, + new ChartData{ X = 2009, Y = 32 }, + new ChartData{ X = 2010, Y = 35 }, + new ChartData{ X = 2011, Y = 30 } }; } @@ -400,7 +396,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C ### Point render -The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnPointRender) event allows you to customize each data point before it is rendered on the chart. +The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnPointRender) event allows customization of each data point before rendering. ```cshtml @@ -408,9 +404,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch - + + Type="Syncfusion.Blazor.Charts.ChartSeriesType.Radar"> @@ -430,13 +426,13 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch public List SalesReports = new List { - new ChartData{ X= 2005, Y= 28 }, - new ChartData{ X= 2006, Y= 25 }, - new ChartData{ X= 2007, Y= 26 }, - new ChartData{ X= 2008, Y= 27 }, - new ChartData{ X= 2009, Y= 32 }, - new ChartData{ X= 2010, Y= 35 }, - new ChartData{ X= 2011, Y= 30 } + new ChartData{ X = 2005, Y = 28 }, + new ChartData{ X = 2006, Y = 25 }, + new ChartData{ X = 2007, Y = 26 }, + new ChartData{ X = 2008, Y = 27 }, + new ChartData{ X = 2009, Y = 32 }, + new ChartData{ X = 2010, Y = 35 }, + new ChartData{ X = 2011, Y = 30 } }; } @@ -447,5 +443,5 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also -* [Data Label](../data-labels) -* [Tooltip](../tool-tip) \ No newline at end of file +* [Data label](../data-labels) +* [Tooltip](../tool-tip) diff --git a/blazor/chart/chart-types/scatter.md b/blazor/chart/chart-types/scatter.md index 8ea2aa4e4d..2f1442c3b5 100644 --- a/blazor/chart/chart-types/scatter.md +++ b/blazor/chart/chart-types/scatter.md @@ -1,24 +1,24 @@ --- layout: post -title: Scatter in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about the Scatter Chart in Syncfusion Blazor Charts component and much more. +title: Scatter Chart in Blazor Charts Component | Syncfusion +description: Check out and learn how to configure and customize the Scatter Chart in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug --- -# Scatter in Blazor Charts Component +# Scatter Chart in Blazor Charts Component -## Scatter +## Scatter Chart -[Scatter Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) is used to visualize the relationship between two Cartesian parameters. To render a [scatter](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) series in your chart, define the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [`Scatter`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Scatter) in your chart configuration. This indicates that the data should be displayed as individual points scattered across the chart. +The Scatter Chart visualizes relationships between two Cartesian parameters by displaying data points as individual markers. To configure a scatter chart, set the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to [`Scatter`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Scatter). ```cshtml @using Syncfusion.Blazor.Charts - + @@ -28,7 +28,7 @@ documentation: ug -@code{ +@code { public class ChartData { public string X { get; set; } @@ -38,34 +38,34 @@ documentation: ug public List ChartDataList = new List { - new ChartData { X= "USA", YValue= 46, YValue1=56 }, - new ChartData { X= "GBR", YValue= 27, YValue1=17 }, - new ChartData { X= "CHN", YValue= 26, YValue1=36 }, - new ChartData { X= "UK", YValue= 56, YValue1=16 }, - new ChartData { X= "AUS", YValue= 12, YValue1=46 }, - new ChartData { X= "IND", YValue= 26, YValue1=16 }, - new ChartData { X= "DEN", YValue= 26, YValue1=12 }, - new ChartData { X= "MEX", YValue= 34, YValue1=32}, + new ChartData { X = "USA", YValue = 46, YValue1 = 56 }, + new ChartData { X = "GBR", YValue = 27, YValue1 = 17 }, + new ChartData { X = "CHN", YValue = 26, YValue1 = 36 }, + new ChartData { X = "UK", YValue = 56, YValue1 = 16 }, + new ChartData { X = "AUS", YValue = 12, YValue1 = 46 }, + new ChartData { X = "IND", YValue = 26, YValue1 = 16 }, + new ChartData { X = "DEN", YValue = 26, YValue1 = 12 }, + new ChartData { X = "MEX", YValue = 34, YValue1 = 32 } }; } -``` +``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfXFhZrfpVHHMy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Scatter Chart](../images/chart-types-images/blazor-scatter-chart.png) -N> Refer to our [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 our [Blazor Scatter Chart Example](https://blazor.syncfusion.com/demos/chart/scatter?theme=bootstrap5) to know how to plot data with two numeric parameters. +Refer to the [Blazor Scatter Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/scatter-chart) feature tour page for additional feature details. Explore the [Blazor Scatter Chart Example](https://blazor.syncfusion.com/demos/chart/scatter?theme=bootstrap5) to learn how to plot data with two numeric parameters. ## Binding data with series -You can bind data to the chart using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property within the series configuration. 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. More information on data binding can be found [here](../working-with-data). To display the data correctly, map the fields from the data to the chart 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. +Bind data to the scatter chart using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. The chart supports both local and remote data binding through [`SfDataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). Map data fields 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. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -75,7 +75,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. -@code{ +@code { public class ChartData { public string X { get; set; } @@ -85,14 +85,14 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. public List ChartDataList = new List { - new ChartData { X= "USA", YValue= 46, YValue1=56 }, - new ChartData { X= "GBR", YValue= 27, YValue1=17 }, - new ChartData { X= "CHN", YValue= 26, YValue1=36 }, - new ChartData { X= "UK", YValue= 56, YValue1=16 }, - new ChartData { X= "AUS", YValue= 12, YValue1=46 }, - new ChartData { X= "IND", YValue= 26, YValue1=16 }, - new ChartData { X= "DEN", YValue= 26, YValue1=12 }, - new ChartData { X= "MEX", YValue= 34, YValue1=32}, + new ChartData { X = "USA", YValue = 46, YValue1 = 56 }, + new ChartData { X = "GBR", YValue = 27, YValue1 = 17 }, + new ChartData { X = "CHN", YValue = 26, YValue1 = 36 }, + new ChartData { X = "UK", YValue = 56, YValue1 = 16 }, + new ChartData { X = "AUS", YValue = 12, YValue1 = 46 }, + new ChartData { X = "IND", YValue = 26, YValue1 = 16 }, + new ChartData { X = "DEN", YValue = 26, YValue1 = 12 }, + new ChartData { X = "MEX", YValue = 34, YValue1 = 32 } }; } @@ -101,18 +101,18 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. ## Series customization -The following properties can be used to customize the [Scatter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Scatter) series. +Customize the [Scatter](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Scatter) series using the following properties: **Fill** -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property determines the color applied to the series. +Set the color of scatter points using the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property. Accepts named colors, hexadecimal codes, or RGB values. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -132,28 +132,28 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public List ChartDataList = new List { - new ChartData { X= "USA", YValue= 46, YValue1=56 }, - new ChartData { X= "GBR", YValue= 27, YValue1=17 }, - new ChartData { X= "CHN", YValue= 26, YValue1=36 }, - new ChartData { X= "UK", YValue= 56, YValue1=16 }, - new ChartData { X= "AUS", YValue= 12, YValue1=46 }, - new ChartData { X= "IND", YValue= 26, YValue1=16 }, - new ChartData { X= "DEN", YValue= 26, YValue1=12 }, - new ChartData { X= "MEX", YValue= 34, YValue1=32}, + new ChartData { X = "USA", YValue = 46, YValue1 = 56 }, + new ChartData { X = "GBR", YValue = 27, YValue1 = 17 }, + new ChartData { X = "CHN", YValue = 26, YValue1 = 36 }, + new ChartData { X = "UK", YValue = 56, YValue1 = 16 }, + new ChartData { X = "AUS", YValue = 12, YValue1 = 46 }, + new ChartData { X = "IND", YValue = 26, YValue1 = 16 }, + new ChartData { X = "DEN", YValue = 26, YValue1 = 12 }, + new ChartData { X = "MEX", YValue = 34, YValue1 = 32 } }; } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/htrfXbhXVJoqDDfv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -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. +Apply gradient colors to scatter points by referencing a gradient definition in the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -193,14 +193,14 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public List ChartDataList = new List { - new ChartData { X= "USA", YValue= 46, YValue1=56 }, - new ChartData { X= "GBR", YValue= 27, YValue1=17 }, - new ChartData { X= "CHN", YValue= 26, YValue1=36 }, - new ChartData { X= "UK", YValue= 56, YValue1=16 }, - new ChartData { X= "AUS", YValue= 12, YValue1=46 }, - new ChartData { X= "IND", YValue= 26, YValue1=16 }, - new ChartData { X= "DEN", YValue= 26, YValue1=12 }, - new ChartData { X= "MEX", YValue= 34, YValue1=32}, + new ChartData { X = "USA", YValue = 46, YValue1 = 56 }, + new ChartData { X = "GBR", YValue = 27, YValue1 = 17 }, + new ChartData { X = "CHN", YValue = 26, YValue1 = 36 }, + new ChartData { X = "UK", YValue = 56, YValue1 = 16 }, + new ChartData { X = "AUS", YValue = 12, YValue1 = 46 }, + new ChartData { X = "IND", YValue = 26, YValue1 = 16 }, + new ChartData { X = "DEN", YValue = 26, YValue1 = 12 }, + new ChartData { X = "MEX", YValue = 34, YValue1 = 32 } }; } @@ -209,14 +209,14 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS **Opacity** -The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Opacity) property specifies the transparency level of the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill). Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. +The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Opacity) property controls the transparency of the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) color, allowing adjustment of the series' appearance. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -230,7 +230,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha -@code{ +@code { public class ChartData { public string X { get; set; } @@ -240,14 +240,14 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha public List ChartDataList = new List { - new ChartData { X= "USA", YValue= 46, YValue1=56 }, - new ChartData { X= "GBR", YValue= 27, YValue1=17 }, - new ChartData { X= "CHN", YValue= 26, YValue1=36 }, - new ChartData { X= "UK", YValue= 56, YValue1=16 }, - new ChartData { X= "AUS", YValue= 12, YValue1=46 }, - new ChartData { X= "IND", YValue= 26, YValue1=16 }, - new ChartData { X= "DEN", YValue= 26, YValue1=12 }, - new ChartData { X= "MEX", YValue= 34, YValue1=32}, + new ChartData { X = "USA", YValue = 46, YValue1 = 56 }, + new ChartData { X = "GBR", YValue = 27, YValue1 = 17 }, + new ChartData { X = "CHN", YValue = 26, YValue1 = 36 }, + new ChartData { X = "UK", YValue = 56, YValue1 = 16 }, + new ChartData { X = "AUS", YValue = 12, YValue1 = 46 }, + new ChartData { X = "IND", YValue = 26, YValue1 = 16 }, + new ChartData { X = "DEN", YValue = 26, YValue1 = 12 }, + new ChartData { X = "MEX", YValue = 34, YValue1 = 32 } }; } @@ -256,14 +256,14 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha **Shape** -The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_Shape) property allows you to customize the appearance of the markers by specifying different shapes. +Customize marker appearance using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_Shape) property. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -285,14 +285,14 @@ The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart public List ChartDataList = new List { - new ChartData { X= "USA", YValue= 46, YValue1=56 }, - new ChartData { X= "GBR", YValue= 27, YValue1=17 }, - new ChartData { X= "CHN", YValue= 26, YValue1=36 }, - new ChartData { X= "UK", YValue= 56, YValue1=16 }, - new ChartData { X= "AUS", YValue= 12, YValue1=46 }, - new ChartData { X= "IND", YValue= 26, YValue1=16 }, - new ChartData { X= "DEN", YValue= 26, YValue1=12 }, - new ChartData { X= "MEX", YValue= 34, YValue1=32}, + new ChartData { X = "USA", YValue = 46, YValue1 = 56 }, + new ChartData { X = "GBR", YValue = 27, YValue1 = 17 }, + new ChartData { X = "CHN", YValue = 26, YValue1 = 36 }, + new ChartData { X = "UK", YValue = 56, YValue1 = 16 }, + new ChartData { X = "AUS", YValue = 12, YValue1 = 46 }, + new ChartData { X = "IND", YValue = 26, YValue1 = 16 }, + new ChartData { X = "DEN", YValue = 26, YValue1 = 12 }, + new ChartData { X = "MEX", YValue = 34, YValue1 = 32 } }; } @@ -301,18 +301,18 @@ The [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Chart ## 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. +Data points with `null`, `double.NaN`, or `undefined` values are treated as empty and are not plotted. **Mode** -Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). +Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Mode) property to specify how empty or missing data points are handled. The default mode is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). ```cshtml @using Syncfusion.Blazor.Charts - + @@ -336,14 +336,14 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public List ChartDataList = new List { - new ChartData { X= "USA", YValue= 46, YValue1=56 }, - new ChartData { X= "GBR", YValue= 27, YValue1=17 }, - new ChartData { X= "CHN", YValue= 26, YValue1=36 }, - new ChartData { X= "UK", YValue= double.NaN, YValue1=double.NaN }, - new ChartData { X= "AUS", YValue= 12, YValue1=46 }, - new ChartData { X= "IND", YValue= 26, YValue1=16 }, - new ChartData { X= "DEN", YValue= 26, YValue1=12 }, - new ChartData { X= "MEX", YValue= 34, YValue1=32}, + new ChartData { X = "USA", YValue = 46, YValue1 = 56 }, + new ChartData { X = "GBR", YValue = 27, YValue1 = 17 }, + new ChartData { X = "CHN", YValue = 26, YValue1 = 36 }, + new ChartData { X = "UK", YValue = double.NaN, YValue1 = double.NaN }, + new ChartData { X = "AUS", YValue = 12, YValue1 = 46 }, + new ChartData { X = "IND", YValue = 26, YValue1 = 16 }, + new ChartData { X = "DEN", YValue = 26, YValue1 = 12 }, + new ChartData { X = "MEX", YValue = 34, YValue1 = 32 } }; } @@ -352,14 +352,14 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. **Fill** -Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Fill) property to customize the fill color of empty points in the series. +Customize the fill color of empty points using the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Fill) property. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -383,30 +383,30 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public List ChartDataList = new List { - new ChartData { X= "USA", YValue= 46, YValue1=56 }, - new ChartData { X= "GBR", YValue= 27, YValue1=17 }, - new ChartData { X= "CHN", YValue= 26, YValue1=36 }, - new ChartData { X= "UK", YValue= double.NaN, YValue1=double.NaN }, - new ChartData { X= "AUS", YValue= 12, YValue1=46 }, - new ChartData { X= "IND", YValue= 26, YValue1=16 }, - new ChartData { X= "DEN", YValue= 26, YValue1=12 }, - new ChartData { X= "MEX", YValue= 34, YValue1=32}, + new ChartData { X = "USA", YValue = 46, YValue1 = 56 }, + new ChartData { X = "GBR", YValue = 27, YValue1 = 17 }, + new ChartData { X = "CHN", YValue = 26, YValue1 = 36 }, + new ChartData { X = "UK", YValue = double.NaN, YValue1 = double.NaN }, + new ChartData { X = "AUS", YValue = 12, YValue1 = 46 }, + new ChartData { X = "IND", YValue = 26, YValue1 = 16 }, + new ChartData { X = "DEN", YValue = 26, YValue1 = 12 }, + new ChartData { X = "MEX", YValue = 34, YValue1 = 32 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBJDbBjrelxszvS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrojEVeCPGbxAhp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} **Border** -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. +Customize the border width and color of empty points using the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Border) property, including [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). ```cshtml @using Syncfusion.Blazor.Charts - + @@ -434,14 +434,14 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart public List ChartDataList = new List { - new ChartData { X= "USA", YValue= 46, YValue1=56 }, - new ChartData { X= "GBR", YValue= 27, YValue1=17 }, - new ChartData { X= "CHN", YValue= 26, YValue1=36 }, - new ChartData { X= "UK", YValue= double.NaN, YValue1=double.NaN }, - new ChartData { X= "AUS", YValue= 12, YValue1=46 }, - new ChartData { X= "IND", YValue= 26, YValue1=16 }, - new ChartData { X= "DEN", YValue= 26, YValue1=12 }, - new ChartData { X= "MEX", YValue= 34, YValue1=32}, + new ChartData { X = "USA", YValue = 46, YValue1 = 56 }, + new ChartData { X = "GBR", YValue = 27, YValue1 = 17 }, + new ChartData { X = "CHN", YValue = 26, YValue1 = 36 }, + new ChartData { X = "UK", YValue = double.NaN, YValue1 = double.NaN }, + new ChartData { X = "AUS", YValue = 12, YValue1 = 46 }, + new ChartData { X = "IND", YValue = 26, YValue1 = 16 }, + new ChartData { X = "DEN", YValue = 26, YValue1 = 12 }, + new ChartData { X = "MEX", YValue = 34, YValue1 = 32 } }; } @@ -452,15 +452,15 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart ### Series render -The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSeriesRender) event allows you to customize series properties, such as [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Data), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Fill), and [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Series), before they are rendered on the chart. +The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSeriesRender) event enables customization of series properties, such as [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Data), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Fill), and [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Series), before rendering. ```cshtml @using Syncfusion.Blazor.Charts - - + + @@ -490,14 +490,14 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C public List ChartDataList = new List { - new ChartData { X= "USA", YValue= 46, YValue1=56 }, - new ChartData { X= "GBR", YValue= 27, YValue1=17 }, - new ChartData { X= "CHN", YValue= 26, YValue1=36 }, - new ChartData { X= "UK", YValue= 56, YValue1=16 }, - new ChartData { X= "AUS", YValue= 12, YValue1=46 }, - new ChartData { X= "IND", YValue= 26, YValue1=16 }, - new ChartData { X= "DEN", YValue= 26, YValue1=12 }, - new ChartData { X= "MEX", YValue= 34, YValue1=32}, + new ChartData { X = "USA", YValue = 46, YValue1 = 56 }, + new ChartData { X = "GBR", YValue = 27, YValue1 = 17 }, + new ChartData { X = "CHN", YValue = 26, YValue1 = 36 }, + new ChartData { X = "UK", YValue = 56, YValue1 = 16 }, + new ChartData { X = "AUS", YValue = 12, YValue1 = 46 }, + new ChartData { X = "IND", YValue = 26, YValue1 = 16 }, + new ChartData { X = "DEN", YValue = 26, YValue1 = 12 }, + new ChartData { X = "MEX", YValue = 34, YValue1 = 32 } }; } @@ -506,14 +506,14 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C ### Point render -The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnPointRender) event allows you to customize each data point before it is rendered on the chart. +The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnPointRender) event allows customization of each data point before rendering. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -541,14 +541,14 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch public List ChartDataList = new List { - new ChartData { X= "USA", YValue= 46, YValue1=56 }, - new ChartData { X= "GBR", YValue= 27, YValue1=17 }, - new ChartData { X= "CHN", YValue= 26, YValue1=36 }, - new ChartData { X= "UK", YValue= 56, YValue1=16 }, - new ChartData { X= "AUS", YValue= 12, YValue1=46 }, - new ChartData { X= "IND", YValue= 26, YValue1=16 }, - new ChartData { X= "DEN", YValue= 26, YValue1=12 }, - new ChartData { X= "MEX", YValue= 34, YValue1=32}, + new ChartData { X = "USA", YValue = 46, YValue1 = 56 }, + new ChartData { X = "GBR", YValue = 27, YValue1 = 17 }, + new ChartData { X = "CHN", YValue = 26, YValue1 = 36 }, + new ChartData { X = "UK", YValue = 56, YValue1 = 16 }, + new ChartData { X = "AUS", YValue = 12, YValue1 = 46 }, + new ChartData { X = "IND", YValue = 26, YValue1 = 16 }, + new ChartData { X = "DEN", YValue = 26, YValue1 = 12 }, + new ChartData { X = "MEX", YValue = 34, YValue1 = 32 } }; } @@ -559,5 +559,5 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also -* [Data Label](../data-labels) -* [Tooltip](../tool-tip) \ No newline at end of file +* [Data label](../data-labels) +* [Tooltip](../tool-tip) diff --git a/blazor/chart/chart-types/stack-bar.md b/blazor/chart/chart-types/stack-bar.md index 5a55359407..71df1cba6b 100644 --- a/blazor/chart/chart-types/stack-bar.md +++ b/blazor/chart/chart-types/stack-bar.md @@ -1,7 +1,7 @@ --- layout: post title: 100% Stacked Bar in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about 100% Stacked Bar Chart in Syncfusion Blazor Charts component and more. +description: Check out and learn how to configure and customize the 100% Stacked Bar Chart in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug @@ -11,7 +11,7 @@ documentation: ug ## 100% Stacked Bar -[100% Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart) displays multiple series of data as stacked bars, ensuring that the cumulative proportion of each stacked element always totals 100%. Hence, the y-axis will always be rendered with the range 0–100%. To render a [100% stacked bar](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart) series in your chart, define the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [`StackingBar100`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingBar100) in your chart configuration. This indicates that the data should be represented as a 100% stacked bar chart, with segments that show the percentage contribution of each part. +[100% Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart) displays multiple series as stacked bars where each category’s cumulative total is normalized to 100%. As a result, the y-axis range is constrained to 0–100%, and each segment represents the percentage contribution of its series within that category. To render a [100% stacked bar](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-bar-chart) series, set the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to [`StackingBar100`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingBar100). ```cshtml @@ -42,7 +42,6 @@ documentation: ug public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -60,11 +59,11 @@ documentation: ug ![Blazor Stacked Bar100 Chart](../images/chart-types-images/blazor-stacked-bar-100-chart.png) -N> Refer to our [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 our [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 to explore additional capabilities. The [Blazor 100% Stacked Bar Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-bar?theme=bootstrap5) demonstrates rendering and configuration options with interactive examples. ## Binding data with series -You can bind data to the chart using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property within the series configuration. 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. More information on data binding can be found [here](../working-with-data). To display the data correctly, map the fields from the data to the chart 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. +Bind data using the series [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. The [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) can be an [`SfDataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or a list of business objects. For guidance, see [Working with data](../working-with-data). Map fields to [`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) to display values correctly. ```cshtml @@ -95,7 +94,6 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -113,11 +111,11 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. ## Series customization -The following properties can be used to customize the [100% Stacked Bar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingBar100) series. +Use the following properties to customize the [100% Stacked Bar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingBar100) series. **Fill** -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property determines the color applied to the series. +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property sets the interior color for each series. ```cshtml @@ -148,7 +146,6 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -164,7 +161,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" %} -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, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can reference an SVG gradient to create smooth color transitions for the series segments. ```cshtml @@ -232,7 +229,6 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -250,7 +246,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS **Opacity** -The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Opacity) property specifies the transparency level of the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill). Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. +The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Opacity) property controls the transparency of the series fill, which is useful for improving contrast or overlay readability. ```cshtml @@ -281,7 +277,6 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -299,7 +294,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha **DashArray** -The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DashArray) property determines the dashes of series border. +The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DashArray) property sets the series border’s stroke dash pattern. ```cshtml @@ -334,7 +329,6 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -352,7 +346,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C **Series Border** -The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html) property determines the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonBorder.html#Syncfusion_Blazor_Charts_ChartCommonBorder_Color) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonBorder.html#Syncfusion_Blazor_Charts_ChartCommonBorder_Width) of series border. +Use [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html) to configure the border [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonBorder.html#Syncfusion_Blazor_Charts_ChartCommonBorder_Color) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonBorder.html#Syncfusion_Blazor_Charts_ChartCommonBorder_Width) of the series. ```cshtml @@ -362,16 +356,16 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. - + - + - + - + @@ -387,7 +381,6 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -401,11 +394,11 @@ 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/VjVojELoWpOTsqeW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Corner radius -The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html) property is used to customize the corner radius for 100% Stacked Bar series. This allows you to create bars with rounded corners, giving your chart a more polished appearance. You can customize each corner of the bars using the [BottomLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_BottomLeft), [BottomRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_BottomRight), [TopLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_TopLeft), [TopRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_TopRight) properties. +The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html) property customizes rounded corners for the 100% stacked bar series. Configure individual corners using [BottomLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_BottomLeft), [BottomRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_BottomRight), [TopLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_TopLeft), and [TopRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_TopRight). ```cshtml @@ -451,14 +444,16 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. new StackedData { X = "2020", Y = 202.7, Y1 = 197.3, Y2 = 120.9, Y3 = 82.0 } }; } + ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rDBSNaVeiIiPdEpv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Stacked bar 100 with corner radius](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVejpNfAyexsHPk?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} -We can also 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. +Corner radius can also be applied per point in the series using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event and its [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) argument. ```cshtml + @using Syncfusion.Blazor.Charts @@ -478,7 +473,6 @@ We can also customize the corner radius for individual points in the chart serie @code { - public class StackedData { public string X { get; set; } @@ -510,9 +504,11 @@ We can also customize the corner radius for individual points in the chart serie } } } + ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rXLSDuhIieVodhLL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stacked bar 100 with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-100-chart-corner-radius-onPointRender.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtVSNTZzKmxcZcBe?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} ## Empty points @@ -520,7 +516,7 @@ Data points with `null`, `double.NaN` or `undefined` values are considered empty **Mode** -Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). +Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Mode) property to control how empty points are handled. The default is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). ```cshtml @@ -553,7 +549,6 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -571,7 +566,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. **Fill** -Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Fill) property to customize the fill color of empty points in the series. +Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Fill) property to set a specific color for empty points. ```cshtml @@ -604,7 +599,6 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -622,7 +616,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. **Border** -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. +Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Border) property to customize the empty point border [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). ```cshtml @@ -657,7 +651,6 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -675,11 +668,12 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart ## Stack labels -The stack labels display cumulative total values for stack segments directly using data labels. If all the values in a stack segment are negative, the stack label is displayed below the point. +Stack labels display cumulative totals for each stack directly above the bars using data labels. If all values in a stack are negative, the stack label is positioned below the point. -The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Visible) property of the [ChartStackLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html) is used to enable stack labels. Setting it to **true** will display the stack labels. +Enable stack labels by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Visible) property of [ChartStackLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html) to **true**. ```cshtml + @using Syncfusion.Blazor.Charts @@ -728,7 +722,6 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -742,12 +735,11 @@ 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" %} ### Customization -The stack labels can be customized using the `ChartStackLabelSettings` properties as given below. +Customize stack labels using `ChartStackLabelSettings`: * [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Fill) - Specifies the background color of the stack labels when border is set. The default value is **transparent**. * [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Format) - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value. @@ -755,21 +747,22 @@ The stack labels can be customized using the `ChartStackLabelSettings` propertie * [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Ry) - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**. * [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. The default value is **0**. -We can customize the font of the stack labels using the [ChartStackLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html) properties as given below: +Font customization can be done using [ChartStackLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html): -* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_TextAlignment) - Customizes the alignment of the text within the stack label. -* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontFamily) - Customizes the font family for the stack label text. -* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Size) - Customizes the font size of the stack label text. -* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultFont.html#Syncfusion_Blazor_Charts_ChartDefaultFont_FontStyle) - Customizes the font style of the stack label text. -* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontWeight) - Customizes the font weight of the stack label text. -* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Color) - Customizes the color of the stack label text. +* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_TextAlignment) - Specifies the alignment of the text within the stack label. +* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontFamily) - Specifies the font family for the stack label text. +* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Size) - Specifies the font size of the stack label text. +* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultFont.html#Syncfusion_Blazor_Charts_ChartDefaultFont_FontStyle) - Specifies the font style of the stack label text. +* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontWeight) - Specifies the font weight of the stack label text. +* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Color) - Specifies the color of the stack label text. + +Border customization can be done using [ChartStackLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html): -We can customize the border of the stack labels using the [ChartStackLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html) properties as given below: * [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html#Syncfusion_Blazor_Charts_ChartStackLabelBorder_Width) - Specifies the width of the border around the stack label. * [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultBorder.html#Syncfusion_Blazor_Charts_ChartDefaultBorder_Color) - Specifies the color of the border around the stack label. - To customize the margin, we can use the [ChartStackLabelMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html) properties as given below: +Margin customization can be done using [ChartStackLabelMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html): * [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Bottom) - Specifies the bottom margin of the stack label. * [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Top) - Specifies the top margin of the stack label. @@ -777,10 +770,10 @@ We can customize the border of the stack labels using the [ChartStackLabelBorder * [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Left) - Specifies the left margin of the stack label. ```cshtml + @using Syncfusion.Blazor.Charts - @@ -828,7 +821,6 @@ We can customize the border of the stack labels using the [ChartStackLabelBorder public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -840,15 +832,15 @@ We can customize the border of the stack labels using the [ChartStackLabelBorder new StackedData { X = "2020", Y = 202.7, Y1 = 197.3, Y2 = 120.9, Y3 = 82.0 } }; } -``` +``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BXVIXnLHpDphNnvF?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Events ### Series render -The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSeriesRender) event allows you to customize series properties, such as [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Data), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Fill), and [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Series), before they are rendered on the chart. +The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSeriesRender) event enables customization of series attributes—such as [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Data), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Fill), and [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Series)—before rendering. ```cshtml @@ -918,7 +910,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C ### Point render -The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnPointRender) event allows you to customize each data point before it is rendered on the chart. +The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnPointRender) event enables per-point customization before points are rendered. ```cshtml @@ -968,5 +960,5 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also -* [Data Label](../data-labels) -* [Tooltip](../tool-tip) \ No newline at end of file +* [Data label](../data-labels) +* [Tooltip](../tool-tip) diff --git a/blazor/chart/chart-types/stacked-bar.md b/blazor/chart/chart-types/stacked-bar.md index 3a025f806b..7955925e13 100644 --- a/blazor/chart/chart-types/stacked-bar.md +++ b/blazor/chart/chart-types/stacked-bar.md @@ -1,7 +1,7 @@ --- layout: post title: Stacked Bar in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about Stacked Bar Chart in Syncfusion Blazor Charts component and much more. +description: Check out and learn how to configure and customize the Stacked Bar Chart in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug @@ -11,14 +11,14 @@ documentation: ug ## Stacked Bar -[Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-bar-chart) is a chart with Y values stacked over one another in the series order. It shows the relation between individual values to the total sum of the points. To render a [stacked bar](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-bar-chart) series in your chart, define the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [`StackingBar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingBar) in your chart configuration. This indicates that the data should be represented as a stacked bar chart, where each bar consists of multiple segments stacked horizontally on top of each other. +[Stacked Bar Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-bar-chart) displays y-values stacked in series order to show how individual values contribute to a total. It uses horizontal bars, unlike stacked column charts, which are vertical. To render a [stacked bar](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-bar-chart) series, set the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to [`StackingBar`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingBar). Each bar is composed of multiple segments stacked horizontally. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -42,7 +42,6 @@ documentation: ug public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -60,18 +59,18 @@ documentation: ug ![Blazor Stacked Bar Chart](../images/chart-types-images/blazor-stacked-bar-chart.png) -N> Refer to our [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 our [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 for additional capabilities. Explore the [Blazor Stacked Bar Chart example](https://blazor.syncfusion.com/demos/chart/stacked-bar?theme=bootstrap5) for interactive examples. ## Binding data with series -You can bind data to the chart using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property within the series configuration. 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. More information on data binding can be found [here](../working-with-data). To display the data correctly, map the fields from the data to the chart 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. +Bind data using the series [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. The data can come from an [`SfDataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or a list of business objects. See [Working with data](../working-with-data) for details. Map data fields to [`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) to display values. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -95,7 +94,6 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -113,18 +111,18 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. ## Series customization -The following properties can be used to customize the [Stacked Bar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingBar) series. +Use the following properties to customize the [stacked bar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingBar) series. **Fill** -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property determines the color applied to the series. +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property sets the interior color of the series. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -148,7 +146,6 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -164,14 +161,14 @@ 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" %} -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. +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can also reference an SVG gradient to create smooth color transitions across each stacked segment. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -232,7 +229,6 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -250,14 +246,14 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS **Opacity** -The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Opacity) property specifies the transparency level of the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill). Adjusting this property allows you to control how opaque or transparent the fill color of the series appears. +The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Opacity) property controls the transparency of the series fill (1 is opaque; lower values increase transparency). ```cshtml @using Syncfusion.Blazor.Charts - + @@ -281,7 +277,6 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -299,14 +294,14 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha **DashArray** -The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DashArray) property determines the dashes of series border. +The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DashArray) property sets the stroke dash pattern of the series border. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -334,7 +329,6 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -352,26 +346,26 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C **Series Border** -The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html) property determines the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonBorder.html#Syncfusion_Blazor_Charts_ChartCommonBorder_Color) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonBorder.html#Syncfusion_Blazor_Charts_ChartCommonBorder_Width) of series border. +The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html) configuration sets the [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonBorder.html#Syncfusion_Blazor_Charts_ChartCommonBorder_Color) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonBorder.html#Syncfusion_Blazor_Charts_ChartCommonBorder_Width) of the series border. ```cshtml @using Syncfusion.Blazor.Charts - + - + - + - + - + @@ -387,7 +381,6 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -401,17 +394,18 @@ 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/LjhIjOhSMKdyhFOn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Corner radius -The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html) property is used to customize the corner radius for Stacked Bar series. This allows you to create bars with rounded corners, giving your chart a more polished appearance. You can customize each corner of the bars using the [BottomLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_BottomLeft), [BottomRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_BottomRight), [TopLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_TopLeft), [TopRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_TopRight) properties. +The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html) configuration customizes the corner radius for the stacked bar series to create rounded corners. Each corner can be set independently using [BottomLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_BottomLeft), [BottomRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_BottomRight), [TopLeft](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_TopLeft), and [TopRight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCornerRadius.html#Syncfusion_Blazor_Charts_ChartCornerRadius_TopRight). ```cshtml + @using Syncfusion.Blazor.Charts - + @@ -452,18 +446,19 @@ The [ChartCornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNBoDkrSCUwWZpqN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Stacked bar chart with corner radius](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/hXLIXzXpqbHxThSx?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} -We can also 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. +The corner radius of individual points can be customized using the [OnPointRender](https://blazor.syncfusion.com/documentation/chart/events#onpointrender) event by setting the [CornerRadius](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.PointRenderEventArgs.html#Syncfusion_Blazor_Charts_PointRenderEventArgs_CornerRadius) values in the event arguments. ```cshtml + @using Syncfusion.Blazor.Charts - - + + @@ -509,20 +504,22 @@ We can also customize the corner radius for individual points in the chart serie } } } + ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDLSXYLyiqmlAjAC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor Stacked bar chart with corner radius using OnPointRender event](../images/chart-types-images/blazor-stacked-bar-chart-corner-radius-onPointRender.png) -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVIjTXJKkhNeecS?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %} ## Stacking group -The [StackingGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_StackingGroup) property is used to group stacked bar and 100% stacked bar. Bars with same group name are stacked on top of each other. +Use the [StackingGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_StackingGroup) property to group stacked bar and 100% stacked bar series. Bars with the same group name are stacked together. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -534,7 +531,7 @@ The [StackingGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char -@code{ +@code { public class ChartData { public string X { get; set; } @@ -545,14 +542,14 @@ The [StackingGroup](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Char public List DataSource = new List { - new ChartData { X= "USA", YValue= 46, YValue1=56, YValue2=26}, - new ChartData { X= "GBR", YValue= 27, YValue1=17, YValue2=37}, - new ChartData { X= "CHN", YValue= 26, YValue1=36, YValue2=56}, - new ChartData { X= "UK", YValue= 56, YValue1=16, YValue2=36}, - new ChartData { X= "AUS", YValue= 12, YValue1=46, YValue2=26}, - new ChartData { X= "IND", YValue= 26, YValue1=16, YValue2=76}, - new ChartData { X= "DEN", YValue= 26, YValue1=12, YValue2=42}, - new ChartData { X= "MEX", YValue= 34, YValue1=32, YValue2=82 }, + new ChartData { X = "USA", YValue = 46, YValue1 = 56, YValue2 = 26}, + new ChartData { X = "GBR", YValue = 27, YValue1 = 17, YValue2 = 37}, + new ChartData { X = "CHN", YValue = 26, YValue1 = 36, YValue2 = 56}, + new ChartData { X = "UK", YValue = 56, YValue1 = 16, YValue2 = 36}, + new ChartData { X = "AUS", YValue = 12, YValue1 = 46, YValue2 = 26}, + new ChartData { X = "IND", YValue = 26, YValue1 = 16, YValue2 = 76}, + new ChartData { X = "DEN", YValue = 26, YValue1 = 12, YValue2 = 42}, + new ChartData { X = "MEX", YValue = 34, YValue1 = 32, YValue2 = 82 } }; } @@ -565,14 +562,14 @@ Data points with `null`, `double.NaN` or `undefined` values are considered empty **Mode** -Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Mode) property to define how empty or missing data points are handled in the series. The default mode for empty points is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). +Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Mode) property to control how empty or missing data points are handled in a series. The default is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). ```cshtml @using Syncfusion.Blazor.Charts - + @@ -598,7 +595,6 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -616,14 +612,14 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. **Fill** -Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Fill) property to customize the fill color of empty points in the series. +Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEmptyPointSettings.html#Syncfusion_Blazor_Charts_ChartEmptyPointSettings_Fill) property to set the fill color for empty points. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -649,7 +645,6 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -667,14 +662,14 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. **Border** -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. +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 empty point borders. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -702,7 +697,6 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -720,16 +714,17 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart ## Stack labels -The stack labels display cumulative total values for stack segments directly using data labels. If all the values in a stack segment are negative, the stack label is displayed below the point. +Stack labels display the cumulative total for each stack directly as data labels. If all values in a stack are negative, the stack label appears below the point. When combined with standard data labels, ensure there is sufficient space to avoid overlap. -The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Visible) property of the [ChartStackLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html) is used to enable stack labels. Setting it to **true** will display the stack labels. +The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Visible) property of [ChartStackLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html) enables stack labels. Set it to **true** to display them. ```cshtml + @using Syncfusion.Blazor.Charts - + @@ -772,7 +767,6 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -784,12 +778,13 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha new StackedData { X = "2020", Y = 202.7, Y1 = 197.3, Y2 = 120.9, Y3 = 82.0 } }; } + ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hZrSNxhHTLzDPlkS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Customization -The stack labels can be customized using the `ChartStackLabelSettings` properties as given below. +Customize stack labels using `ChartStackLabelSettings` properties: * [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Fill) - Specifies the background color of the stack labels when border is set. The default value is **transparent**. * [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Format) - Specifies the format of the stack labels. It supports a placeholder `{value}` which will be replaced by the stack label value. @@ -797,21 +792,21 @@ The stack labels can be customized using the `ChartStackLabelSettings` propertie * [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Ry) - Specifies the rounded corner radius along the Y-axis (vertical direction) for the stack label background. The default value is **5**. * [Angle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Angle) - Specifies the rotation angle for stack labels in degrees. The default value is **0**. -We can customize the font of the stack labels using the [ChartStackLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html) properties as given below: +Customize the label font using [ChartStackLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html): -* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_TextAlignment) - Customizes the alignment of the text within the stack label. -* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontFamily) - Customizes the font family for the stack label text. -* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Size) - Customizes the font size of the stack label text. -* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultFont.html#Syncfusion_Blazor_Charts_ChartDefaultFont_FontStyle) - Customizes the font style of the stack label text. -* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontWeight) - Customizes the font weight of the stack label text. -* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Color) - Customizes the color of the stack label text. +* [TextAlignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_TextAlignment) - Specifies the alignment of the text within the stack label. +* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontFamily) - Specifies the font family for the stack label text. +* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Size) - Specifies the font size of the stack label text. +* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultFont.html#Syncfusion_Blazor_Charts_ChartDefaultFont_FontStyle) - Specifies the font style of the stack label text. +* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_FontWeight) - Specifies the font weight of the stack label text. +* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelFont.html#Syncfusion_Blazor_Charts_ChartStackLabelFont_Color) - Specifies the color of the stack label text. -We can customize the border of the stack labels using the [ChartStackLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html) properties as given below: +Customize the label border using [ChartStackLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html): * [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelBorder.html#Syncfusion_Blazor_Charts_ChartStackLabelBorder_Width) - Specifies the width of the border around the stack label. * [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDefaultBorder.html#Syncfusion_Blazor_Charts_ChartDefaultBorder_Color) - Specifies the color of the border around the stack label. - To customize the margin, we can use the [ChartStackLabelMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html) properties as given below: +Customize the margin using [ChartStackLabelMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html): * [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Bottom) - Specifies the bottom margin of the stack label. * [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Top) - Specifies the top margin of the stack label. @@ -819,11 +814,12 @@ We can customize the border of the stack labels using the [ChartStackLabelBorder * [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelMargin.html#Syncfusion_Blazor_Charts_ChartStackLabelMargin_Left) - Specifies the left margin of the stack label. ```cshtml + @using Syncfusion.Blazor.Charts - + @@ -869,7 +865,6 @@ We can customize the border of the stack labels using the [ChartStackLabelBorder public double Y3 { get; set; } } - public List StackedDataList = new List { new StackedData { X = "2014", Y = 111.1, Y1 = 76.9, Y2 = 66.1, Y3 = 34.1 }, @@ -888,15 +883,16 @@ We can customize the border of the stack labels using the [ChartStackLabelBorder ### Series render -The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSeriesRender) event allows you to customize series properties, such as [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Data), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Fill), and [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Series), before they are rendered on the chart. +The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnSeriesRender) event customizes series properties—such as [Data](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Data), [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Fill), and [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SeriesRenderEventArgs.html#Syncfusion_Blazor_Charts_SeriesRenderEventArgs_Series)—before rendering. ```cshtml @using Syncfusion.Blazor.Charts - - + + + @@ -957,15 +953,16 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C ### Point render -The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnPointRender) event allows you to customize each data point before it is rendered on the chart. +The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartEvents.html#Syncfusion_Blazor_Charts_ChartEvents_OnPointRender) event customizes each data point before rendering. ```cshtml @using Syncfusion.Blazor.Charts - - + + + @@ -988,14 +985,14 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch public List StackedDataList = new List { - new ChartData { X= "2014", YValue= 46, YValue1=56 }, - new ChartData { X= "2015", YValue= 27, YValue1=17 }, - new ChartData { X= "2016", YValue= 26, YValue1=36 }, - new ChartData { X= "2017", YValue= 56, YValue1=16 }, - new ChartData { X= "2018", YValue= 12, YValue1=46 }, - new ChartData { X= "2019", YValue= 26, YValue1=16 }, - new ChartData { X= "2020", YValue= 26, YValue1=12 }, - new ChartData { X= "2021", YValue= 34, YValue1=32}, + new ChartData { X = "2014", YValue = 46, YValue1 = 56 }, + new ChartData { X = "2015", YValue = 27, YValue1 = 17 }, + new ChartData { X = "2016", YValue = 26, YValue1 = 36 }, + new ChartData { X = "2017", YValue = 56, YValue1 = 16 }, + new ChartData { X = "2018", YValue = 12, YValue1 = 46 }, + new ChartData { X = "2019", YValue = 26, YValue1 = 16 }, + new ChartData { X = "2020", YValue = 26, YValue1 = 12 }, + new ChartData { X = "2021", YValue = 34, YValue1 = 32} }; } @@ -1006,5 +1003,5 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla ## See also -* [Data Label](../data-labels) -* [Tooltip](../tool-tip) \ No newline at end of file +* [Data label](../data-labels) +* [Tooltip](../tool-tip) From 58c2cf53352912ca0d340044fb73379881528556 Mon Sep 17 00:00:00 2001 From: mohammednowfel4989 Date: Fri, 26 Sep 2025 12:12:18 +0530 Subject: [PATCH 2/2] 983838: Updated content changes mentioned in the Charts UG. --- blazor/chart/chart-types/high-low.md | 2 +- blazor/chart/chart-types/radar.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/blazor/chart/chart-types/high-low.md b/blazor/chart/chart-types/high-low.md index a1eb4b14c1..514165f009 100644 --- a/blazor/chart/chart-types/high-low.md +++ b/blazor/chart/chart-types/high-low.md @@ -13,7 +13,7 @@ documentation: ug The [Hilo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Hilo) series illustrates price movements in stocks using higher and lower values. Render the series by setting the [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to [Hilo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_Hilo). -You can also learn how to create a Hilo chart using Blazor Charts by watching the video below. +Learn how to create a Hilo chart using Blazor Charts by watching the following video. {% youtube "youtube:https://www.youtube.com/watch?v=KDOI77kV34Q" %} diff --git a/blazor/chart/chart-types/radar.md b/blazor/chart/chart-types/radar.md index d76fb3703c..a53aefe6d1 100644 --- a/blazor/chart/chart-types/radar.md +++ b/blazor/chart/chart-types/radar.md @@ -13,7 +13,7 @@ documentation: ug The [Radar](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/radar-chart) series visualizes data using values and angles, providing options for visual comparison between quantitative or qualitative aspects. -You can also learn how to create a Radar chart using Blazor Charts by watching the video below. +A detailed tutorial on creating a Radar chart using Blazor Charts is available in the video below. {% youtube "youtube:https://www.youtube.com/watch?v=Q5odgrcbSO0" %}