diff --git a/blazor/chart/chart-types/range-area.md b/blazor/chart/chart-types/range-area.md index 67bec2cd54..004dfee470 100644 --- a/blazor/chart/chart-types/range-area.md +++ b/blazor/chart/chart-types/range-area.md @@ -1,7 +1,7 @@ --- layout: post title: Range Area in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about Range Area Chart in Syncfusion Blazor Charts component and much more. +description: Check out and learn how to configure and customize the Range Area Chart in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug @@ -12,18 +12,18 @@ documentation: ug ## Range area -[Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) shows variation in the data values for a given time. The area between the high and low range is filled. To render a [Range Area](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) series in your chart, you need to follow a few steps to configure it correctly. Here's a concise guide on how to do this: +[Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) visualizes the variation between high and low values for each data point over a category or time. The area between the high and low values is filled to show the range clearly. To render a [Range Area](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) series, configure the following: -1. **Set the series type**: Define the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [`RangeArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_RangeArea) in your chart configuration. This indicates that the data should be represented as a range area chart, which is ideal for visualizing a range of values for each data point. This type of chart is particularly useful for displaying data that has a range between a minimum and maximum value, such as temperature ranges, stock price ranges, or any other type of data that varies within a specific interval. +1. Set the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to [`RangeArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_RangeArea). This chart type is suitable for data that has both minimum and maximum values per point, such as temperature ranges or price bands. -2. **Provide high and low values**: The [`RangeArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_RangeArea) 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 range, while the low value represents the minimum range for each data point. These values define the upper and lower boundaries of the area for each point on the chart. +2. Provide both high and low values. The series requires two y-values for each data point: [`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). If either value is not provided, the point is treated as empty and is not plotted. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -56,18 +56,18 @@ documentation: ug ![Blazor Range Area Chart](../images/chart-types-images/blazor-range-area-chart.png) -N> Refer to our [Blazor Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Range Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-area?theme=bootstrap5) to know how to show variations in the data values for a given time. +N> Refer to the [Blazor Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) feature tour page for additional capabilities. Explore the [Blazor Range Area Chart example](https://blazor.syncfusion.com/demos/chart/range-area?theme=bootstrap5) to learn how to display range variations over time. ## 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 series [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. The data can come from [`SfDataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or a list of business objects. For details, see [Working with data](../working-with-data). Map data fields to [`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). ```cshtml @using Syncfusion.Blazor.Charts - + @@ -100,11 +100,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 [Range Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_RangeArea) series. +Use the following properties to customize the [Range Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_RangeArea) 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 series color. ```cshtml @@ -140,7 +140,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BjVJXFiuLpnrqRsI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the range area series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. +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 apply a smooth color transition. ```cshtml @@ -187,7 +187,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 level of the series fill. ```cshtml @@ -225,7 +225,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 pattern of dashes and gaps in the series border. +The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DashArray) property specifies the dash and gap pattern for the series border. ```cshtml @@ -267,7 +267,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.ChartSeriesBorder.html#Syncfusion_Blazor_Charts_ChartSeriesBorder_Color) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html#Syncfusion_Blazor_Charts_ChartSeriesBorder_Width) of series border. +The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html) settings control the border [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html#Syncfusion_Blazor_Charts_ChartSeriesBorder_Color) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html#Syncfusion_Blazor_Charts_ChartSeriesBorder_Width) of the series. ```cshtml @@ -309,7 +309,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ## 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` or `double.NaN` values are considered empty. Empty points are ignored and not plotted. **Mode** @@ -353,7 +353,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 customize the fill color of empty points. ```cshtml @@ -394,7 +394,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 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) of empty points. ```cshtml @@ -439,7 +439,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 allows customizing 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 @@ -484,7 +484,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 rendering. ```cshtml @@ -528,9 +528,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BZrJZECqhFrrVKBi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for an overview of chart features, and explore the [Blazor Chart example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) for additional chart types. ## 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/range-step-area.md b/blazor/chart/chart-types/range-step-area.md index 65292cee8a..340a8d0b26 100644 --- a/blazor/chart/chart-types/range-step-area.md +++ b/blazor/chart/chart-types/range-step-area.md @@ -1,7 +1,7 @@ --- layout: post title: Range Step Area in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about Range Step Area Chart in Syncfusion Blazor Charts component and much more. +description: Check out and learn how to configure and customize Range Step Area Chart in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug @@ -11,18 +11,18 @@ documentation: ug ## Range Step Area -[Range Step Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-step-area-chart) is used to display continuous data points as a series of steps that vary between high and low values over an interval of time for different categories. To render a range step area series in your chart, you need to follow a few steps to configure it correctly. Here's a concise guide on how to do this: +[Range Step Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-step-area-chart) displays continuous data as steps between paired high and low values across categories or time. It is useful for visualizing ranges such as temperature bands, uncertainty intervals, or minimum–maximum variations. -1. **Set the series type**: Define the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [`RangeStepArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_RangeStepArea) in your chart configuration. This indicates that the data should be represented as a range step area chart, which is ideal for displaying data points as a range with high and low values. It connects these points with vertical and horizontal lines, creating a step like appearance. +1. **Set the series type**: Define the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [`RangeStepArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_RangeStepArea). The chart connects data with horizontal and vertical segments, creating a step-like appearance for the band between high and low values. -2. **Provide high and low values**: The [`RangeStepArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_RangeStepArea) 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 range, while the low value represents the minimum range for each data point. These values define the upper and lower boundaries of the area for each point on the chart. +2. **Provide high and low values**: The [`RangeStepArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_RangeStepArea) series requires two y-values for each point. Map both the [`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) fields. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -58,20 +58,20 @@ documentation: ug } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJZlsOgSpJondZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hthoNErzsfYwdVev?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Range Step Area Chart](../images/chart-types-images/blazor-range-step-area.png) ## 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 using the series [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. The source can be an [`SfDataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or a list of business objects. For correct rendering, map [`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). See [Working with data](../working-with-data) for more options. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -107,7 +107,7 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJZlsOgSpJondZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrIZOrTsIWtzfZZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} > Refer to our [Blazor Range Step Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-step-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Range Step Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-step-area?theme=bootstrap5) to know how to show variations in the data values for a given time. @@ -117,14 +117,14 @@ The following properties can be used to customize the [Range Step Area](https:// **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 series color. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -160,16 +160,16 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrJjFMuAepPfLMK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVyDarJCHlsGMnq?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 range step area series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can also reference a gradient for a smooth color transition. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -214,18 +214,18 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrfZFWYKegwYTsm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBoZarTMxYSJZki?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} **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 sets the transparency of the series fill. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -261,18 +261,18 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDLzDvWYKIIkDoAH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htroNOLJCGNGobZt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} **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 controls the dash pattern of the series border. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -308,18 +308,18 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVztFsugovVdcLp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVSZOLJCwWFeIUU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} **StepPosition** -Use the [`StepPosition`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_StepPosition) property to change the position of the steps in a range step area series. +Use the [`StepPosition`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_StepPosition) property to adjust where steps render relative to data points (for example, `Left`, `Center`, or `Right`). Choose the option that best matches the sampling or bucket alignment of the data. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -355,18 +355,18 @@ Use the [`StepPosition`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhTNliuUdrVOsTt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZreXOLJMmJzByZs?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} **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) controls 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). ```cshtml @using Syncfusion.Blazor.Charts - + @@ -374,7 +374,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. - + @@ -402,15 +402,15 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVztFsugovVdcLp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjryXEBpimdHVZrl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> 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. +> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour and explore the [Blazor Chart examples](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) for additional chart types and scenarios. ## 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 lets you customize 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 @@ -418,7 +418,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C - + @@ -458,11 +458,11 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVptbCagmtfNOtA?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXBItEBziPVSsXNz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### 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 it is rendered. ```cshtml @@ -470,7 +470,7 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch - + @@ -511,9 +511,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVJXkWKqjxGQeNS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrIZEhfMbUINPGz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## See also -* [Data Label](../data-labels) +* [Data label](../data-labels) * [Tooltip](../tool-tip) diff --git a/blazor/chart/chart-types/spline-range-area.md b/blazor/chart/chart-types/spline-range-area.md index 296df614eb..58a6ddff87 100644 --- a/blazor/chart/chart-types/spline-range-area.md +++ b/blazor/chart/chart-types/spline-range-area.md @@ -1,7 +1,7 @@ --- layout: post title: Spline Range Area in Blazor Charts component | Syncfusion -description: Checkout and learn here all about Spline Range Area Chart in Syncfusion Blazor Charts component and much more. +description: Check out and learn how to configure and customize Spline Range Area Chart in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug @@ -11,18 +11,18 @@ documentation: ug ## Spline Range Area -[Spline Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) shows variation in data values over time and fills the high and low range areas accordingly. To render a [spline range area](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) series in your chart, you need to follow a few steps to configure it correctly. Here's a concise guide on how to do this: +[Spline Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) visualizes a continuous band between low and high y-values across categories or time, using a smoothed (spline) curve. Configure the series as follows: -1. **Set the series type**: Define the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) as [`SplineRangeArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_SplineRangeArea) in your chart configuration. This indicates that the data should be represented as a spline range area chart, which is ideal for visualizing continuous data points as a set of splines that vary between high and low values over intervals of time and across different categories. +1. **Set the series type**: Assign the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to [`SplineRangeArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_SplineRangeArea) to render a spline range area band. -2. **Provide high and low values**: The [`SplineRangeArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_SplineRangeArea) 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 range, while the low value represents the minimum range for each data point. These values define the upper and lower boundaries of the area for each point on the chart. +2. **Provide high and low values**: Each point must define both [`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) values. These determine the upper and lower boundaries of the filled band for that x-value. ```cshtml @using Syncfusion.Blazor.Charts - + @@ -54,18 +54,18 @@ documentation: ug ![Blazor Spline Range Area Chart](../images/chart-types-images/blazor-spline-range-area-chart.png) -> Refer to our [Blazor Spline Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Spline Range Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-area?theme=bootstrap5) to know how to show variations in the data values for a given time. +> Refer to the [Blazor Spline Range Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/range-area-chart) feature tour for additional capabilities. Explore our [Blazor Spline Range Area Chart Example](https://blazor.syncfusion.com/demos/chart/range-area?theme=bootstrap5) to know how to show variations in the data values for a given time. ## 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 series using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. It accepts [`SfDataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or a collection of model objects. Map the data fields to [`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). For more details, see [Working with data](../working-with-data). ```cshtml @using Syncfusion.Blazor.Charts - + @@ -97,11 +97,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 [Spline Range Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_SplineRangeArea) series. +Use the following properties to customize the [Spline Range Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_SplineRangeArea) 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 color of the band. ```cshtml @@ -138,7 +138,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/VNVfDvCaUYLJHtBm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property can be used to apply a gradient color to the spline range area series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property also accepts a gradient via `Fill="url(#gradientId)"`. Ensure the matching `` with the referenced gradient is present in the page DOM. ```cshtml @@ -186,7 +186,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 band fill. ```cshtml @@ -225,7 +225,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 controls the dash pattern of the series border. ```cshtml @@ -267,7 +267,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C **Border** -[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. +[ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html) 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 @@ -277,8 +277,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C - + @@ -305,15 +304,15 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVKiVVHpnirchKL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BtBetYBpiEPCEItd?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` or `double.NaN` 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 control how missing data is displayed. The default is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). ```cshtml @@ -353,7 +352,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 color empty points. ```cshtml @@ -394,7 +393,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 style empty point borders, 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 @@ -439,7 +438,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 can modify series-level settings (for example, [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 @@ -484,7 +483,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 customizes individual points before they are rendered (for example, conditional coloring). ```cshtml @@ -528,9 +527,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hthJjOWAAyDCPNQg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -> 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. +> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour for an overview of chart types and capabilities. Explore the [Charts demo](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) for additional examples. ## See also -* [Data Label](../data-labels) +* [Data label](../data-labels) * [Tooltip](../tool-tip) diff --git a/blazor/chart/chart-types/stack-area.md b/blazor/chart/chart-types/stack-area.md index 11a0d84274..983dbd64f8 100644 --- a/blazor/chart/chart-types/stack-area.md +++ b/blazor/chart/chart-types/stack-area.md @@ -1,7 +1,7 @@ --- layout: post title: 100% Stacked Area in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about 100% Stacked Area Chart in Syncfusion Blazor Charts component and more. +description: Check out and learn how to configure and customize 100% Stacked Area Chart in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug @@ -11,19 +11,19 @@ documentation: ug ## 100% Stacked Area Chart -[100% Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) displays multiple series of data as stacked areas, 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 area](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-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 [`StackingArea100`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingArea100) in your chart configuration. This indicates that the data should be represented as a 100% stacked area chart, where the cumulative values for each data point are expressed as a percentage of the total. This ensures that the sum of all series at each point is always 100%. +[100% Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) displays multiple series as stacked areas where each stack represents a percentage of the total at that X value. The y-axis always ranges from 0 to 100%. To render a [100% stacked area](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) series, set the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to [`StackingArea100`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingArea100). Values are normalized per point so the sum of all series at each X value is 100%. For accurate stacking, ensure that series share the same X values. ```cshtml @using Syncfusion.Blazor.Charts - + - - - + + + @@ -38,41 +38,41 @@ documentation: ug public List ChartDataList = 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/rNBAiVhnTxBScRGk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -![Blazor Stacked Area100 Chart](../images/chart-types-images/blazor-stacked-area-100-chart.png) +![Blazor Stacked Area 100 Chart](../images/chart-types-images/blazor-stacked-area-100-chart.png) -N> Refer to our [Blazor 100% Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor 100% Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/percent-stacked-area?theme=bootstrap5) to know how to render and configure the 100% Stacked Area type chart. +N> Refer to the [Blazor 100% Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/100-stacked-area-chart) feature tour page for additional capabilities. Explore the [Blazor 100% Stacked Area Chart example](https://blazor.syncfusion.com/demos/chart/percent-stacked-area?theme=bootstrap5) to see rendering and configuration options. ## 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 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 provided via [`SfDataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or a list of business objects. For details, see [Working with data](../working-with-data). 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 render points correctly. ```cshtml @using Syncfusion.Blazor.Charts - + - - - + + + @@ -87,16 +87,16 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. public List ChartDataList = 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 } }; } @@ -109,7 +109,7 @@ The following properties can be used to customize the [100% Stacked Area](https: **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 used to paint the area for a series. ```cshtml @@ -136,23 +136,23 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public List ChartDataList = 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/rjBztPikzoCgUnJJ?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 area series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property also supports gradients. Use an SVG gradient reference to apply smooth color transitions. ```cshtml @@ -206,16 +206,16 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public List ChartDataList = 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 } }; } @@ -224,7 +224,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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill). ```cshtml @@ -251,16 +251,16 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha public List ChartDataList = 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 } }; } @@ -269,7 +269,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 defines the dash pattern of the series border. Provide a comma-separated sequence of lengths (for example, "5,5") to render dashed outlines. ```cshtml @@ -302,16 +302,16 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C public List ChartDataList = 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 } }; } @@ -320,7 +320,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.ChartSeriesBorder.html#Syncfusion_Blazor_Charts_ChartSeriesBorder_Color) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html#Syncfusion_Blazor_Charts_ChartSeriesBorder_Width) of series border. +The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html) property configures the border of the series area. Use [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html#Syncfusion_Blazor_Charts_ChartSeriesBorder_Color) and [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesBorder.html#Syncfusion_Blazor_Charts_ChartSeriesBorder_Width) to emphasize boundaries. ```cshtml @@ -330,13 +330,13 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. - + - + - + @@ -353,21 +353,21 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. public List ChartDataList = 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/LXLAiBrHpHBFoZcx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBoZEBzhesBgrhE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Empty points @@ -375,7 +375,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 define how empty or missing 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 @@ -415,18 +415,18 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public List ExpenseReports = new List { - new ChartData { X = "Food" , Y = 90, Y1 = 40 , Y2= 70, Y3= 120}, - new ChartData { X = "Transport", Y = 80, Y1 = 90, Y2= 110, Y3= 70 }, - new ChartData { X = "Medical",Y = 50, Y1 = 80, Y2= 120, Y3= 50 }, - new ChartData { X = "Clothes",Y = 70, Y1 = 30, Y2= 60, Y3= 180 }, - new ChartData { X = "Personal Care", Y = 30, Y1 = 80, Y2= 80, Y3= 30 }, - new ChartData { X = "Books", Y = double.NaN, Y1 = 40, Y2= double.NaN, Y3= 270}, - new ChartData { X = "Fitness",Y = 100, Y1 = 30, Y2= 70, Y3= 40 }, - new ChartData { X = "Electricity", Y = 55, Y1 = 95, Y2= 55, Y3= 75}, - new ChartData { X = "Tax", Y = 20, Y1 = 50, Y2= 40, Y3= 65 }, - new ChartData { X = "Pet Care", Y = 40, Y1 = 20, Y2= 80, Y3= 95 }, - new ChartData { X = "Education", Y = 45, Y1 = 15, Y2= 45, Y3= 195 }, - new ChartData { X = "Entertainment", Y = 75, Y1 = 45, Y2= 65, Y3= 115 } + new ChartData { X = "Food", Y = 90, Y1 = 40 , Y2 = 70, Y3 = 120 }, + new ChartData { X = "Transport", Y = 80, Y1 = 90, Y2 = 110, Y3 = 70 }, + new ChartData { X = "Medical", Y = 50, Y1 = 80, Y2 = 120, Y3 = 50 }, + new ChartData { X = "Clothes", Y = 70, Y1 = 30, Y2 = 60, Y3 = 180 }, + new ChartData { X = "Personal Care", Y = 30, Y1 = 80, Y2 = 80, Y3 = 30 }, + new ChartData { X = "Books", Y = double.NaN, Y1 = 40, Y2 = double.NaN, Y3 = 270 }, + new ChartData { X = "Fitness", Y = 100, Y1 = 30, Y2 = 70, Y3 = 40 }, + new ChartData { X = "Electricity", Y = 55, Y1 = 95, Y2 = 55, Y3 = 75 }, + new ChartData { X = "Tax", Y = 20, Y1 = 50, Y2 = 40, Y3 = 65 }, + new ChartData { X = "Pet Care", Y = 40, Y1 = 20, Y2 = 80, Y3 = 95 }, + new ChartData { X = "Education", Y = 45, Y1 = 15, Y2 = 45, Y3 = 195 }, + new ChartData { X = "Entertainment", Y = 75, Y1 = 45, Y2 = 65, Y3 = 115 } }; } @@ -435,7 +435,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 customize the fill color of empty points. ```cshtml @@ -475,18 +475,18 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public List ExpenseReports = new List { - new ChartData { X = "Food" , Y = 90, Y1 = 40 , Y2= 70, Y3= 120}, - new ChartData { X = "Transport", Y = 80, Y1 = 90, Y2= 110, Y3= 70 }, - new ChartData { X = "Medical",Y = 50, Y1 = 80, Y2= 120, Y3= 50 }, - new ChartData { X = "Clothes",Y = 70, Y1 = 30, Y2= 60, Y3= 180 }, - new ChartData { X = "Personal Care", Y = 30, Y1 = 80, Y2= 80, Y3= 30 }, - new ChartData { X = "Books", Y = double.NaN, Y1 = 40, Y2= double.NaN, Y3= 270}, - new ChartData { X = "Fitness",Y = 100, Y1 = 30, Y2= 70, Y3= 40 }, - new ChartData { X = "Electricity", Y = 55, Y1 = 95, Y2= 55, Y3= 75}, - new ChartData { X = "Tax", Y = 20, Y1 = 50, Y2= 40, Y3= 65 }, - new ChartData { X = "Pet Care", Y = 40, Y1 = 20, Y2= 80, Y3= 95 }, - new ChartData { X = "Education", Y = 45, Y1 = 15, Y2= 45, Y3= 195 }, - new ChartData { X = "Entertainment", Y = 75, Y1 = 45, Y2= 65, Y3= 115 } + new ChartData { X = "Food", Y = 90, Y1 = 40 , Y2 = 70, Y3 = 120 }, + new ChartData { X = "Transport", Y = 80, Y1 = 90, Y2 = 110, Y3 = 70 }, + new ChartData { X = "Medical", Y = 50, Y1 = 80, Y2 = 120, Y3 = 50 }, + new ChartData { X = "Clothes", Y = 70, Y1 = 30, Y2 = 60, Y3 = 180 }, + new ChartData { X = "Personal Care", Y = 30, Y1 = 80, Y2 = 80, Y3 = 30 }, + new ChartData { X = "Books", Y = double.NaN, Y1 = 40, Y2 = double.NaN, Y3 = 270 }, + new ChartData { X = "Fitness", Y = 100, Y1 = 30, Y2 = 70, Y3 = 40 }, + new ChartData { X = "Electricity", Y = 55, Y1 = 95, Y2 = 55, Y3 = 75 }, + new ChartData { X = "Tax", Y = 20, Y1 = 50, Y2 = 40, Y3 = 65 }, + new ChartData { X = "Pet Care", Y = 40, Y1 = 20, Y2 = 80, Y3 = 95 }, + new ChartData { X = "Education", Y = 45, Y1 = 15, Y2 = 45, Y3 = 195 }, + new ChartData { X = "Entertainment", Y = 75, Y1 = 45, Y2 = 65, Y3 = 115 } }; } @@ -495,7 +495,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 [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 @@ -537,18 +537,18 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart public List ExpenseReports = new List { - new ChartData { X = "Food" , Y = 90, Y1 = 40 , Y2= 70, Y3= 120}, - new ChartData { X = "Transport", Y = 80, Y1 = 90, Y2= 110, Y3= 70 }, - new ChartData { X = "Medical",Y = 50, Y1 = 80, Y2= 120, Y3= 50 }, - new ChartData { X = "Clothes",Y = 70, Y1 = 30, Y2= 60, Y3= 180 }, - new ChartData { X = "Personal Care", Y = 30, Y1 = 80, Y2= 80, Y3= 30 }, - new ChartData { X = "Books", Y = double.NaN, Y1 = 40, Y2= double.NaN, Y3= 270}, - new ChartData { X = "Fitness",Y = 100, Y1 = 30, Y2= 70, Y3= 40 }, - new ChartData { X = "Electricity", Y = 55, Y1 = 95, Y2= 55, Y3= 75}, - new ChartData { X = "Tax", Y = 20, Y1 = 50, Y2= 40, Y3= 65 }, - new ChartData { X = "Pet Care", Y = 40, Y1 = 20, Y2= 80, Y3= 95 }, - new ChartData { X = "Education", Y = 45, Y1 = 15, Y2= 45, Y3= 195 }, - new ChartData { X = "Entertainment", Y = 75, Y1 = 45, Y2= 65, Y3= 115 } + new ChartData { X = "Food", Y = 90, Y1 = 40 , Y2 = 70, Y3 = 120 }, + new ChartData { X = "Transport", Y = 80, Y1 = 90, Y2 = 110, Y3 = 70 }, + new ChartData { X = "Medical", Y = 50, Y1 = 80, Y2 = 120, Y3 = 50 }, + new ChartData { X = "Clothes", Y = 70, Y1 = 30, Y2 = 60, Y3 = 180 }, + new ChartData { X = "Personal Care", Y = 30, Y1 = 80, Y2 = 80, Y3 = 30 }, + new ChartData { X = "Books", Y = double.NaN, Y1 = 40, Y2 = double.NaN, Y3 = 270 }, + new ChartData { X = "Fitness", Y = 100, Y1 = 30, Y2 = 70, Y3 = 40 }, + new ChartData { X = "Electricity", Y = 55, Y1 = 95, Y2 = 55, Y3 = 75 }, + new ChartData { X = "Tax", Y = 20, Y1 = 50, Y2 = 40, Y3 = 65 }, + new ChartData { X = "Pet Care", Y = 40, Y1 = 20, Y2 = 80, Y3 = 95 }, + new ChartData { X = "Education", Y = 45, Y1 = 15, Y2 = 45, Y3 = 195 }, + new ChartData { X = "Entertainment", Y = 75, Y1 = 45, Y2 = 65, Y3 = 115 } }; } @@ -557,9 +557,9 @@ 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 as data labels. If all values in a stack segment are negative, the label is displayed 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. +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 when set to **true**. ```cshtml @using Syncfusion.Blazor.Charts @@ -597,16 +597,16 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha public List ChartDataList = 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 } }; } ``` @@ -615,7 +615,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha ### Customization -The stack labels can be customized using the `ChartStackLabelSettings` properties as given below. +Stack labels can be customized 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. @@ -623,16 +623,16 @@ 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 for stack labels uses [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: +Border customization uses [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. @@ -684,16 +684,16 @@ We can customize the border of the stack labels using the [ChartStackLabelBorder public List ChartDataList = 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 } }; } ``` @@ -703,7 +703,7 @@ 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 allows 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 @@ -747,16 +747,16 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C public List ChartDataList = 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 } }; } @@ -765,7 +765,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 customizes individual data points before they are rendered. ```cshtml @@ -804,25 +804,25 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch public List ChartDataList = 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/LXLTXuCUUmeoHyRh?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for an overview of features, and explore the [Blazor Chart example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) for additional chart types and time-dependent data visualization. ## 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-area.md b/blazor/chart/chart-types/stacked-area.md index 5345b6d270..6986ff63f1 100644 --- a/blazor/chart/chart-types/stacked-area.md +++ b/blazor/chart/chart-types/stacked-area.md @@ -1,7 +1,7 @@ --- layout: post title: Stacked Area in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about Stacked Area Chart in Syncfusion Blazor Charts component and more. +description: Check out and learn how to configure and customize Stacked Area Chart in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug @@ -11,19 +11,19 @@ documentation: ug ## Stacked Area -[Blazor Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-area-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 area](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-area-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 [`StackingArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingArea) in your chart configuration. This indicates that the data should be represented as a stacked area chart, which is ideal for showing the contribution of each part to a total over time or across other categorical data. +The [Blazor Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-area-chart) stacks Y values in series order to show each value’s contribution to the total. Set the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to [`StackingArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingArea) to render this series, which is useful for illustrating composition over time or categories. When numeric years are used with a Category axis, they are treated as categorical values. ```cshtml @using Syncfusion.Blazor.Charts - + - - - + + + @@ -36,43 +36,43 @@ documentation: ug public double Y2 { get; set; } } - public List ChartDatas = new List + public List ChartPoints = 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/LDhUsVLxzRMlYUSx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVIZuhTVCcAzwDR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Stacked Area Chart](../images/chart-types-images/blazor-stacked-area-chart.png) -N> Refer to our [Blazor Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Stacked Area Chart Example](https://blazor.syncfusion.com/demos/chart/stacked-area?theme=bootstrap5) to know how to render and configure the Stacked Area type chart. +N> Refer to the [Blazor Stacked Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/stacked-area-chart) feature tour for additional capabilities. Explore the [Blazor Stacked Area Chart example](https://blazor.syncfusion.com/demos/chart/stacked-area?theme=bootstrap5) for additional examples in the Stacked Area Chart. ## 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 a series using the [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. The data source can be an [`SfDataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html) or a list of business objects. For details, see [Working with data](../working-with-data). Map the 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). ```cshtml @using Syncfusion.Blazor.Charts - + - - - + + + @@ -87,29 +87,29 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. public List ChartDatas = 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/LDhUsVLxzRMlYUSx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZVIZuhTVCcAzwDR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Series customization -The following properties can be used to customize the [Stacked Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingArea) series. +Use the following properties to customize the [Stacked Area](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StackingArea) 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 series color. ```cshtml @@ -119,9 +119,9 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS - - - + + + @@ -134,25 +134,25 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public double Y2 { get; set; } } - public List ChartDatas = new List + public List ChartPoints = 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/VDLTNPsufiIAQhTr?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDBetkBfLLrMnYIu?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 area series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. +To apply gradients, reference an SVG gradient by id using `url(#...)` via the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property. Define the gradient in an inline `` block. ```cshtml @@ -162,9 +162,9 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS - - - + + + @@ -204,28 +204,28 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public double Y2 { get; set; } } - public List ChartDatas = new List + public List ChartPoints = 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/LNBpXbWYTilVqwGp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LjrejarzrVARhXWL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} **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 color. ```cshtml @@ -235,9 +235,9 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha - - - + + + @@ -250,27 +250,27 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha public double Y2 { get; set; } } - public List ChartDatas = new List + public List ChartPoints = 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/hDLTXvsYzrjDnWhZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLSNkrfrBfwOUQP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} **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 configures the dash pattern of the series border (stroke) as comma-separated lengths. ```cshtml @@ -280,13 +280,13 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C - + - + - + @@ -301,27 +301,27 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C public double Y2 { get; set; } } - public List ChartDatas = new List + public List ChartPoints = 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/VjhKsrhdpxrCydRe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXrIjkhfBBdgIlvm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} **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 set 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 @@ -331,13 +331,13 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. - + - + - + @@ -352,31 +352,31 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. public double Y2 { get; set; } } - public List ChartDatas = new List + public List ChartPoints = 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/VjhKsrhdpxrCydRe?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVeDkhJBMyrgcSa?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` or `double.NaN` values are considered empty. Empty points are ignored and 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 control how empty or missing 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 @@ -416,18 +416,18 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public List ExpenseReports = new List { - new ChartData { X = "Food" , Y = 90, Y1 = 40 , Y2= 70, Y3= 120}, - new ChartData { X = "Transport", Y = 80, Y1 = 90, Y2= 110, Y3= 70 }, - new ChartData { X = "Medical",Y = 50, Y1 = 80, Y2= 120, Y3= 50 }, - new ChartData { X = "Clothes",Y = 70, Y1 = 30, Y2= 60, Y3= 180 }, - new ChartData { X = "Personal Care", Y = 30, Y1 = 80, Y2= 80, Y3= 30 }, - new ChartData { X = "Books", Y = double.NaN, Y1 = 40, Y2= double.NaN, Y3= 270}, - new ChartData { X = "Fitness",Y = 100, Y1 = 30, Y2= 70, Y3= 40 }, - new ChartData { X = "Electricity", Y = 55, Y1 = 95, Y2= 55, Y3= 75}, - new ChartData { X = "Tax", Y = 20, Y1 = 50, Y2= 40, Y3= 65 }, - new ChartData { X = "Pet Care", Y = 40, Y1 = 20, Y2= 80, Y3= 95 }, - new ChartData { X = "Education", Y = 45, Y1 = 15, Y2= 45, Y3= 195 }, - new ChartData { X = "Entertainment", Y = 75, Y1 = 45, Y2= 65, Y3= 115 } + new ChartData { X= "Food" , Y= 90, Y1= 40 , Y2= 70, Y3 = 120 }, + new ChartData { X= "Transport", Y= 80, Y1= 90, Y2= 110, Y3= 70 }, + new ChartData { X= "Medical",Y= 50, Y1= 80, Y2= 120, Y3= 50 }, + new ChartData { X= "Clothes",Y= 70, Y1= 30, Y2= 60, Y3= 180 }, + new ChartData { X= "Personal Care", Y= 30, Y1= 80, Y2= 80, Y3= 30 }, + new ChartData { X= "Books", Y= double.NaN, Y1= 40, Y2= double.NaN, Y3= 270 }, + new ChartData { X= "Fitness",Y= 100, Y1= 30, Y2= 70, Y3= 40 }, + new ChartData { X= "Electricity", Y= 55, Y1= 95, Y2= 55, Y3= 75 }, + new ChartData { X= "Tax", Y= 20, Y1= 50, Y2= 40, Y3= 65 }, + new ChartData { X= "Pet Care", Y= 40, Y1= 20, Y2= 80, Y3= 95 }, + new ChartData { X= "Education", Y= 45, Y1= 15, Y2= 45, Y3= 195 }, + new ChartData { X= "Entertainment", Y= 75, Y1= 45, Y2= 65, Y3= 115 } }; } @@ -436,7 +436,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 customize the fill color for empty points. ```cshtml @@ -476,18 +476,18 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. public List ExpenseReports = new List { - new ChartData { X = "Food" , Y = 90, Y1 = 40 , Y2= 70, Y3= 120}, - new ChartData { X = "Transport", Y = 80, Y1 = 90, Y2= 110, Y3= 70 }, - new ChartData { X = "Medical",Y = 50, Y1 = 80, Y2= 120, Y3= 50 }, - new ChartData { X = "Clothes",Y = 70, Y1 = 30, Y2= 60, Y3= 180 }, - new ChartData { X = "Personal Care", Y = 30, Y1 = 80, Y2= 80, Y3= 30 }, - new ChartData { X = "Books", Y = double.NaN, Y1 = 40, Y2= double.NaN, Y3= 270}, - new ChartData { X = "Fitness",Y = 100, Y1 = 30, Y2= 70, Y3= 40 }, - new ChartData { X = "Electricity", Y = 55, Y1 = 95, Y2= 55, Y3= 75}, - new ChartData { X = "Tax", Y = 20, Y1 = 50, Y2= 40, Y3= 65 }, - new ChartData { X = "Pet Care", Y = 40, Y1 = 20, Y2= 80, Y3= 95 }, - new ChartData { X = "Education", Y = 45, Y1 = 15, Y2= 45, Y3= 195 }, - new ChartData { X = "Entertainment", Y = 75, Y1 = 45, Y2= 65, Y3= 115 } + new ChartData { X= "Food" , Y= 90, Y1= 40 , Y2= 70, Y3 = 120 }, + new ChartData { X= "Transport", Y= 80, Y1= 90, Y2= 110, Y3= 70 }, + new ChartData { X= "Medical",Y= 50, Y1= 80, Y2= 120, Y3= 50 }, + new ChartData { X= "Clothes",Y= 70, Y1= 30, Y2= 60, Y3= 180 }, + new ChartData { X= "Personal Care", Y= 30, Y1= 80, Y2= 80, Y3= 30 }, + new ChartData { X= "Books", Y= double.NaN, Y1= 40, Y2= double.NaN, Y3= 270 }, + new ChartData { X= "Fitness",Y= 100, Y1= 30, Y2= 70, Y3= 40 }, + new ChartData { X= "Electricity", Y= 55, Y1= 95, Y2= 55, Y3= 75 }, + new ChartData { X= "Tax", Y= 20, Y1= 50, Y2= 40, Y3= 65 }, + new ChartData { X= "Pet Care", Y= 40, Y1= 20, Y2= 80, Y3= 95 }, + new ChartData { X= "Education", Y= 45, Y1= 15, Y2= 45, Y3= 195 }, + new ChartData { X= "Entertainment", Y= 75, Y1= 45, Y2= 65, Y3= 115 } }; } @@ -496,7 +496,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 [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 @@ -538,18 +538,18 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart public List ExpenseReports = new List { - new ChartData { X = "Food" , Y = 90, Y1 = 40 , Y2= 70, Y3= 120}, - new ChartData { X = "Transport", Y = 80, Y1 = 90, Y2= 110, Y3= 70 }, - new ChartData { X = "Medical",Y = 50, Y1 = 80, Y2= 120, Y3= 50 }, - new ChartData { X = "Clothes",Y = 70, Y1 = 30, Y2= 60, Y3= 180 }, - new ChartData { X = "Personal Care", Y = 30, Y1 = 80, Y2= 80, Y3= 30 }, - new ChartData { X = "Books", Y = double.NaN, Y1 = 40, Y2= double.NaN, Y3= 270}, - new ChartData { X = "Fitness",Y = 100, Y1 = 30, Y2= 70, Y3= 40 }, - new ChartData { X = "Electricity", Y = 55, Y1 = 95, Y2= 55, Y3= 75}, - new ChartData { X = "Tax", Y = 20, Y1 = 50, Y2= 40, Y3= 65 }, - new ChartData { X = "Pet Care", Y = 40, Y1 = 20, Y2= 80, Y3= 95 }, - new ChartData { X = "Education", Y = 45, Y1 = 15, Y2= 45, Y3= 195 }, - new ChartData { X = "Entertainment", Y = 75, Y1 = 45, Y2= 65, Y3= 115 } + new ChartData { X= "Food" , Y= 90, Y1= 40 , Y2= 70, Y3 = 120 }, + new ChartData { X= "Transport", Y= 80, Y1= 90, Y2= 110, Y3= 70 }, + new ChartData { X= "Medical",Y= 50, Y1= 80, Y2= 120, Y3= 50 }, + new ChartData { X= "Clothes",Y= 70, Y1= 30, Y2= 60, Y3= 180 }, + new ChartData { X= "Personal Care", Y= 30, Y1= 80, Y2= 80, Y3= 30 }, + new ChartData { X= "Books", Y= double.NaN, Y1= 40, Y2= double.NaN, Y3= 270 }, + new ChartData { X= "Fitness",Y= 100, Y1= 30, Y2= 70, Y3= 40 }, + new ChartData { X= "Electricity", Y= 55, Y1= 95, Y2= 55, Y3= 75 }, + new ChartData { X= "Tax", Y= 20, Y1= 50, Y2= 40, Y3= 65 }, + new ChartData { X= "Pet Care", Y= 40, Y1= 20, Y2= 80, Y3= 95 }, + new ChartData { X= "Education", Y= 45, Y1= 15, Y2= 45, Y3= 195 }, + new ChartData { X= "Entertainment", Y= 75, Y1= 45, Y2= 65, Y3= 115 } }; } @@ -558,31 +558,31 @@ 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 as data labels. If all values in a stack are negative, the label appears 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 using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html#Syncfusion_Blazor_Charts_ChartStackLabelSettings_Visible) property in [ChartStackLabelSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartStackLabelSettings.html). Setting it to **true** will display the stack labels. ```cshtml + @using Syncfusion.Blazor.Charts - - + - + - + @@ -590,8 +590,7 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha - - + @code { @@ -603,26 +602,27 @@ The [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha public double Y2 { get; set; } } - public List ChartDatas = new List + public List ChartPoints = 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/hNryjdBnTsAhjnHH?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjBIDYhJhqWaLtCJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### Customization -The stack labels can be customized using the `ChartStackLabelSettings` properties as given below. +Stack labels can be customized 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. @@ -630,16 +630,16 @@ 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: +The font can be customized 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: +The border can be customized 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. @@ -652,26 +652,26 @@ 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 - - + - + - + @@ -695,28 +695,29 @@ We can customize the border of the stack labels using the [ChartStackLabelBorder public double Y2 { get; set; } } - public List ChartDatas = new List + public List ChartPoints = 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/BtLoDxLdfizfRptS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZrSZEhJhgfGHZAX?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 can 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 rendering. ```cshtml @@ -726,9 +727,9 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C - - - + + + @@ -758,27 +759,27 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C } } - public List ChartDatas = new List + public List ChartPoints = 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/LXVTjviYzAmlMaxt?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rZVoZOBphqRgiyMO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ### 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 point before it is rendered. ```cshtml @@ -824,18 +825,18 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch public List ExpenseReports = new List { - new ChartData { X = "Food" , Y = 90, Y1 = 40 , Y2= 70, Y3= 120}, - new ChartData { X = "Transport", Y = 80, Y1 = 90, Y2= 110, Y3= 70 }, - new ChartData { X = "Medical",Y = 50, Y1 = 80, Y2= 120, Y3= 50 }, - new ChartData { X = "Clothes",Y = 70, Y1 = 30, Y2= 60, Y3= 180 }, - new ChartData { X = "Personal Care", Y = 30, Y1 = 80, Y2= 80, Y3= 30 }, - new ChartData { X = "Books", Y = 10, Y1 = 40, Y2= 30, Y3= 270}, - new ChartData { X = "Fitness",Y = 100, Y1 = 30, Y2= 70, Y3= 40 }, - new ChartData { X = "Electricity", Y = 55, Y1 = 95, Y2= 55, Y3= 75}, - new ChartData { X = "Tax", Y = 20, Y1 = 50, Y2= 40, Y3= 65 }, - new ChartData { X = "Pet Care", Y = 40, Y1 = 20, Y2= 80, Y3= 95 }, - new ChartData { X = "Education", Y = 45, Y1 = 15, Y2= 45, Y3= 195 }, - new ChartData { X = "Entertainment", Y = 75, Y1 = 45, Y2= 65, Y3= 115 } + new ChartData { X= "Food" , Y= 90, Y1= 40 , Y2= 70, Y3= 120 }, + new ChartData { X= "Transport", Y= 80, Y1= 90, Y2= 110, Y3= 70 }, + new ChartData { X= "Medical",Y= 50, Y1= 80, Y2= 120, Y3= 50 }, + new ChartData { X= "Clothes",Y= 70, Y1= 30, Y2= 60, Y3= 180 }, + new ChartData { X= "Personal Care", Y= 30, Y1= 80, Y2= 80, Y3= 30 }, + new ChartData { X= "Books", Y= 10, Y1= 40, Y2= 30, Y3= 270 }, + new ChartData { X= "Fitness",Y= 100, Y1= 30, Y2= 70, Y3= 40 }, + new ChartData { X= "Electricity", Y= 55, Y1= 95, Y2= 55, Y3= 75 }, + new ChartData { X= "Tax", Y= 20, Y1= 50, Y2= 40, Y3= 65 }, + new ChartData { X= "Pet Care", Y= 40, Y1= 20, Y2= 80, Y3= 95 }, + new ChartData { X= "Education", Y= 45, Y1= 15, Y2= 45, Y3= 195 }, + new ChartData { X= "Entertainment", Y= 75, Y1= 45, Y2= 65, Y3= 115 } }; public void PointRender(PointRenderEventArgs args) @@ -847,9 +848,9 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/BXrfZuMAURdafsLu?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour for an overview of chart capabilities, and explore the [Blazor Chart examples](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) for additional chart types and time-based scenarios. ## 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/step-area.md b/blazor/chart/chart-types/step-area.md index a1c787d95f..53ee03f75c 100644 --- a/blazor/chart/chart-types/step-area.md +++ b/blazor/chart/chart-types/step-area.md @@ -1,7 +1,7 @@ --- layout: post title: Step Area in Blazor Charts Component | Syncfusion -description: Checkout and learn here all about Step Area Chart in Syncfusion Blazor Charts component and much more. +description: Check out and learn how to configure and customize Step Area Chart in Syncfusion Blazor Charts component. platform: Blazor control: Chart documentation: ug @@ -11,17 +11,17 @@ documentation: ug ## Step Area -[Step Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/step-area-chart) is similar to a step line chart, but with the areas connected with lines shaded. To render a [step area](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/step-area-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 [`StepArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StepArea) in your chart configuration. This indicates that the data should be represented as a step area chart, which connects data points with vertical and horizontal lines, creating a step like appearance. +A [Step Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/step-area-chart) displays values with horizontal and vertical segments and shades the area beneath, producing a step-like appearance. To render a step area series, set the series [`Type`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Type) to [`StepArea`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeriesType.html#Syncfusion_Blazor_Charts_ChartSeriesType_StepArea) in the chart configuration. ```cshtml @using Syncfusion.Blazor.Charts - + - + @@ -30,42 +30,41 @@ documentation: ug public class ChartData { public string X { get; set; } - public double Low { get; set; } - public double High { get; set; } + public double Y { get; set; } } public List WeatherReports = new List { - new ChartData { X= "Sun", Low= 2.5, High= 9.8 }, - new ChartData { X= "Mon", Low= 4.7, High= 11.4 }, - new ChartData { X= "Tue", Low= 6.4, High= 14.4 }, - new ChartData { X= "Wed", Low= 9.6, High= 17.2 }, - new ChartData { X= "Thu", Low= 7.5, High= 15.1 }, - new ChartData { X= "Fri", Low= 3.0, High= 10.5 }, - new ChartData { X= "Sat", Low= 1.2, High= 7.9 } + new ChartData { X= "Sun", Y= 2.5 }, + new ChartData { X= "Mon", Y= 4.7 }, + new ChartData { X= "Tue", Y= 6.4 }, + new ChartData { X= "Wed", Y= 9.6 }, + new ChartData { X= "Thu", Y= 7.5 }, + new ChartData { X= "Fri", Y= 3.0 }, + new ChartData { X= "Sat", Y= 1.2 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsBhHTngrkaFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBoZaVJrvVXrRjd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor Step Area Chart](../images/chart-types-images/blazor-step-area-chart.png) -N> Refer to our [Blazor Step Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/step-area-chart) feature tour page to know about its other groundbreaking feature representations. Explore our [Blazor Step Area Chart Example](https://blazor.syncfusion.com/demos/chart/step-area?theme=bootstrap5) to know how to render and configure the Step Area type chart. +N> Refer to the [Blazor Step Area Chart](https://www.syncfusion.com/blazor-components/blazor-charts/chart-types/step-area-chart) feature tour for additional capabilities. Explore the [Blazor Step Area Chart example](https://blazor.syncfusion.com/demos/chart/step-area?theme=bootstrap5) to learn how to render and configure the Step Area Chart. ## 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 series [`DataSource`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DataSource) property. The data source can be a list of business objects or provided via [`SfDataManager`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Data.SfDataManager.html). For details, see [Working with data](../working-with-data). Map fields to the series using [`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). ```cshtml @using Syncfusion.Blazor.Charts - + - + @@ -74,24 +73,23 @@ You can bind data to the chart using the [`DataSource`](https://help.syncfusion. public class ChartData { public string X { get; set; } - public double Low { get; set; } - public double High { get; set; } + public double Y { get; set; } } public List WeatherReports = new List { - new ChartData { X= "Sun", Low= 2.5, High= 9.8 }, - new ChartData { X= "Mon", Low= 4.7, High= 11.4 }, - new ChartData { X= "Tue", Low= 6.4, High= 14.4 }, - new ChartData { X= "Wed", Low= 9.6, High= 17.2 }, - new ChartData { X= "Thu", Low= 7.5, High= 15.1 }, - new ChartData { X= "Fri", Low= 3.0, High= 10.5 }, - new ChartData { X= "Sat", Low= 1.2, High= 7.9 } + new ChartData { X= "Sun", Y= 2.5 }, + new ChartData { X= "Mon", Y= 4.7 }, + new ChartData { X= "Tue", Y= 6.4 }, + new ChartData { X= "Wed", Y= 9.6 }, + new ChartData { X= "Thu", Y= 7.5 }, + new ChartData { X= "Fri", Y= 3.0 }, + new ChartData { X= "Sat", Y= 1.2 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhUsBhHTngrkaFC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/rjBoZaVJrvVXrRjd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Series customization @@ -99,7 +97,7 @@ The following properties can be used to customize the [Step Area](https://help.s **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. +Use the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property to set the series color. ```cshtml @@ -109,7 +107,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS - + @@ -118,26 +116,25 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public class ChartData { public string X { get; set; } - public double Low { get; set; } - public double High { get; set; } + public double Y { get; set; } } public List WeatherReports = new List { - new ChartData { X= "Sun", Low= 2.5, High= 9.8 }, - new ChartData { X= "Mon", Low= 4.7, High= 11.4 }, - new ChartData { X= "Tue", Low= 6.4, High= 14.4 }, - new ChartData { X= "Wed", Low= 9.6, High= 17.2 }, - new ChartData { X= "Thu", Low= 7.5, High= 15.1 }, - new ChartData { X= "Fri", Low= 3.0, High= 10.5 }, - new ChartData { X= "Sat", Low= 1.2, High= 7.9 } + new ChartData { X= "Sun", Y= 2.5 }, + new ChartData { X= "Mon", Y= 4.7 }, + new ChartData { X= "Tue", Y= 6.4 }, + new ChartData { X= "Wed", Y= 9.6 }, + new ChartData { X= "Thu", Y= 7.5 }, + new ChartData { X= "Fri", Y= 3.0 }, + new ChartData { X= "Sat", Y= 1.2 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hZBpjlCufmZYLVMX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZByDOLfBbQrIodl?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 step area series. By configuring this property with gradient values, you can create a visually appealing effect in which the color transitions smoothly from one shade to another. +The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Fill) property also supports gradients by referencing an SVG definition (for example, `url(#grad1)`), enabling smooth color transitions. ```cshtml @@ -147,7 +144,7 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS - + @@ -165,28 +162,27 @@ The [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartS public class ChartData { public string X { get; set; } - public double Low { get; set; } - public double High { get; set; } + public double Y { get; set; } } public List WeatherReports = new List { - new ChartData { X= "Sun", Low= 2.5, High= 9.8 }, - new ChartData { X= "Mon", Low= 4.7, High= 11.4 }, - new ChartData { X= "Tue", Low= 6.4, High= 14.4 }, - new ChartData { X= "Wed", Low= 9.6, High= 17.2 }, - new ChartData { X= "Thu", Low= 7.5, High= 15.1 }, - new ChartData { X= "Fri", Low= 3.0, High= 10.5 }, - new ChartData { X= "Sat", Low= 1.2, High= 7.9 } + new ChartData { X= "Sun", Y= 2.5 }, + new ChartData { X= "Mon", Y= 4.7 }, + new ChartData { X= "Tue", Y= 6.4 }, + new ChartData { X= "Wed", Y= 9.6 }, + new ChartData { X= "Thu", Y= 7.5 }, + new ChartData { X= "Fri", Y= 3.0 }, + new ChartData { X= "Sat", Y= 1.2 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BjrztPMEzcTnzOXU?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjVojEBzBFFxjEnK?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} **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. +Use the [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Opacity) property to control the transparency of the series fill. ```cshtml @@ -196,7 +192,7 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha - + @@ -205,28 +201,27 @@ The [Opacity](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Cha public class ChartData { public string X { get; set; } - public double Low { get; set; } - public double High { get; set; } + public double Y { get; set; } } public List WeatherReports = new List { - new ChartData { X= "Sun", Low= 2.5, High= 9.8 }, - new ChartData { X= "Mon", Low= 4.7, High= 11.4 }, - new ChartData { X= "Tue", Low= 6.4, High= 14.4 }, - new ChartData { X= "Wed", Low= 9.6, High= 17.2 }, - new ChartData { X= "Thu", Low= 7.5, High= 15.1 }, - new ChartData { X= "Fri", Low= 3.0, High= 10.5 }, - new ChartData { X= "Sat", Low= 1.2, High= 7.9 } + new ChartData { X= "Sun", Y= 2.5 }, + new ChartData { X= "Mon", Y= 4.7 }, + new ChartData { X= "Tue", Y= 6.4 }, + new ChartData { X= "Wed", Y= 9.6 }, + new ChartData { X= "Thu", Y= 7.5 }, + new ChartData { X= "Fri", Y= 3.0 }, + new ChartData { X= "Sat", Y= 1.2 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNrzXbMuTcIuVPvx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BjhejkBTVPafxaGC?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} **DashArray** -The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DashArray) property determines the pattern of dashes and gaps in the series border. +Use the [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DashArray) property to specify the dash and gap pattern for the series border. ```cshtml @@ -235,7 +230,7 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C - + @@ -245,28 +240,27 @@ The [DashArray](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C public class ChartData { public string X { get; set; } - public double Low { get; set; } - public double High { get; set; } + public double Y { get; set; } } public List WeatherReports = new List { - new ChartData { X= "Sun", Low= 2.5, High= 9.8 }, - new ChartData { X= "Mon", Low= 4.7, High= 11.4 }, - new ChartData { X= "Tue", Low= 6.4, High= 14.4 }, - new ChartData { X= "Wed", Low= 9.6, High= 17.2 }, - new ChartData { X= "Thu", Low= 7.5, High= 15.1 }, - new ChartData { X= "Fri", Low= 3.0, High= 10.5 }, - new ChartData { X= "Sat", Low= 1.2, High= 7.9 } + new ChartData { X= "Sun", Y= 2.5 }, + new ChartData { X= "Mon", Y= 4.7 }, + new ChartData { X= "Tue", Y= 6.4 }, + new ChartData { X= "Wed", Y= 9.6 }, + new ChartData { X= "Thu", Y= 7.5 }, + new ChartData { X= "Fri", Y= 3.0 }, + new ChartData { X= "Sat", Y= 1.2 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgWhBxpxgIqdqw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVoDuhfLYCadgJm?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} **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 @@ -275,7 +269,7 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. - + @@ -285,24 +279,23 @@ The [ChartSeriesBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. public class ChartData { public string X { get; set; } - public double Low { get; set; } - public double High { get; set; } + public double Y { get; set; } } public List WeatherReports = new List { - new ChartData { X= "Sun", Low= 2.5, High= 9.8 }, - new ChartData { X= "Mon", Low= 4.7, High= 11.4 }, - new ChartData { X= "Tue", Low= 6.4, High= 14.4 }, - new ChartData { X= "Wed", Low= 9.6, High= 17.2 }, - new ChartData { X= "Thu", Low= 7.5, High= 15.1 }, - new ChartData { X= "Fri", Low= 3.0, High= 10.5 }, - new ChartData { X= "Sat", Low= 1.2, High= 7.9 } + new ChartData { X= "Sun", Y= 2.5 }, + new ChartData { X= "Mon", Y= 4.7 }, + new ChartData { X= "Tue", Y= 6.4 }, + new ChartData { X= "Wed", Y= 9.6 }, + new ChartData { X= "Thu", Y= 7.5 }, + new ChartData { X= "Fri", Y= 3.0 }, + new ChartData { X= "Sat", Y= 1.2 } }; } ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgWhBxpxgIqdqw?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNBotYBJBYBaDlPX?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ## Empty points @@ -310,7 +303,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 or missing points are rendered. The default mode is [`Gap`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.EmptyPointMode.html#Syncfusion_Blazor_Charts_EmptyPointMode_Gap). ```cshtml @@ -320,7 +313,7 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. - + @@ -331,7 +324,6 @@ Use the [`Mode`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. { public string X { get; set; } public double Y { get; set; } - public double High { get; set; } } public List WeatherReports = new List @@ -351,7 +343,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 customize the fill color of empty points. ```cshtml @@ -361,7 +353,7 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. - + @@ -373,7 +365,6 @@ Use the [`Fill`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts. { public string X { get; set; } public double Y { get; set; } - public double High { get; set; } } public List WeatherReports = new List @@ -393,7 +384,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 set the 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) for empty points. ```cshtml @@ -403,7 +394,7 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart - + @@ -417,7 +408,6 @@ Use the [`Border`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart { public string X { get; set; } public double Y { get; set; } - public double High { get; set; } } public List WeatherReports = new List @@ -439,7 +429,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 lets you adjust 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 @@ -449,7 +439,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C - + @@ -458,8 +448,7 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C public class ChartData { public string X { get; set; } - public double Low { get; set; } - public double High { get; set; } + public double Y { get; set; } } public void SeriesRender(SeriesRenderEventArgs args) @@ -469,13 +458,13 @@ The [`OnSeriesRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.C public List WeatherReports = new List { - new ChartData { X= "Sun", Low= 2.5, High= 9.8 }, - new ChartData { X= "Mon", Low= 4.7, High= 11.4 }, - new ChartData { X= "Tue", Low= 6.4, High= 14.4 }, - new ChartData { X= "Wed", Low= 9.6, High= 17.2 }, - new ChartData { X= "Thu", Low= 7.5, High= 15.1 }, - new ChartData { X= "Fri", Low= 3.0, High= 10.5 }, - new ChartData { X= "Sat", Low= 1.2, High= 7.9 } + new ChartData { X= "Sun", Y= 2.5 }, + new ChartData { X= "Mon", Y= 4.7 }, + new ChartData { X= "Tue", Y= 6.4 }, + new ChartData { X= "Wed", Y= 9.6 }, + new ChartData { X= "Thu", Y= 7.5 }, + new ChartData { X= "Fri", Y= 3.0 }, + new ChartData { X= "Sat", Y= 1.2 } }; } @@ -485,7 +474,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 each data point is rendered. ```cshtml @@ -495,7 +484,7 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch - + @@ -505,8 +494,7 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch public class ChartData { public string X { get; set; } - public double Low { get; set; } - public double High { get; set; } + public double Y { get; set; } } public void PointRender(PointRenderEventArgs args) @@ -516,22 +504,22 @@ The [`OnPointRender`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch public List WeatherReports = new List { - new ChartData { X= "Sun", Low= 2.5, High= 9.8 }, - new ChartData { X= "Mon", Low= 4.7, High= 11.4 }, - new ChartData { X= "Tue", Low= 6.4, High= 14.4 }, - new ChartData { X= "Wed", Low= 9.6, High= 17.2 }, - new ChartData { X= "Thu", Low= 7.5, High= 15.1 }, - new ChartData { X= "Fri", Low= 3.0, High= 10.5 }, - new ChartData { X= "Sat", Low= 1.2, High= 7.9 } + new ChartData { X= "Sun", Y= 2.5 }, + new ChartData { X= "Mon", Y= 4.7 }, + new ChartData { X= "Tue", Y= 6.4 }, + new ChartData { X= "Wed", Y= 9.6 }, + new ChartData { X= "Thu", Y= 7.5 }, + new ChartData { X= "Fri", Y= 3.0 }, + new ChartData { X= "Sat", Y= 1.2 } }; } ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/rNVfZaWgUFkdqzow?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour page for its groundbreaking feature representations and also explore our [Blazor Chart Example](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) to know various chart types and how to represent time-dependent data, showing trends at equal intervals. +N> Refer to the [Blazor Charts](https://www.syncfusion.com/blazor-components/blazor-charts) feature tour to explore key capabilities, and see the [Blazor Chart examples](https://blazor.syncfusion.com/demos/chart/line?theme=bootstrap5) for additional chart types. ## 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/images/chart-types-images/blazor-range-step-area.png b/blazor/chart/images/chart-types-images/blazor-range-step-area.png index 5998140570..0f96698116 100644 Binary files a/blazor/chart/images/chart-types-images/blazor-range-step-area.png and b/blazor/chart/images/chart-types-images/blazor-range-step-area.png differ diff --git a/blazor/chart/images/chart-types-images/blazor-step-area-chart.png b/blazor/chart/images/chart-types-images/blazor-step-area-chart.png index b3ccaa1232..c4076c273d 100644 Binary files a/blazor/chart/images/chart-types-images/blazor-step-area-chart.png and b/blazor/chart/images/chart-types-images/blazor-step-area-chart.png differ