diff --git a/blazor/chart/chart-annotations.md b/blazor/chart/chart-annotations.md
index f3c6085be6..a096cdb234 100644
--- a/blazor/chart/chart-annotations.md
+++ b/blazor/chart/chart-annotations.md
@@ -1,7 +1,7 @@
---
layout: post
title: Annotation in Blazor Charts Component | Syncfusion
-description: Checkout and learn here all about using Annotation in Syncfusion Blazor Charts component and much more.
+description: Check out and learn how to configure and customize Annotation in Syncfusion Blazor Charts component.
platform: Blazor
control: Chart
documentation: ug
@@ -9,21 +9,20 @@ documentation: ug
# Annotation in Blazor Charts Component
-Annotations are texts, shapes, or images that are used to highlight a specific region of interest in a chart.
+Annotations are texts, shapes, or images used to highlight specific regions of interest in a chart.
-You can learn how to add annotations to Blazor Charts by watching the video below.
+Learn how to add Annotations to Blazor Charts by watching the video below.
{% youtube "youtube:https://www.youtube.com/watch?v=TpUoXrYlCkU" %}
- The [ChartAnnotations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotations.html) property allows to add annotations to the chart. Specify the ID of the element that needs to be displayed in the chart area by using the [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotation.html#Syncfusion_Blazor_Charts_ChartAnnotation_Content) property of the annotation.
+The [ChartAnnotations](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotations.html) allows annotations to be added to the chart. The [Content](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotation.html#Syncfusion_Blazor_Charts_ChartAnnotation_Content) property specifies the element to display in the chart area.
```cshtml
@using Syncfusion.Blazor.Charts
-
-
+
@@ -39,7 +38,7 @@ You can learn how to add annotations to Blazor Charts by watching the video belo
-@code{
+@code {
string data = "France";
public class ChartData
@@ -49,15 +48,15 @@ You can learn how to add annotations to Blazor Charts by watching the video belo
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50 },
- new ChartData{ Country= "China", Gold=40 },
- new ChartData{ Country= "Japan", Gold=70 },
- new ChartData{ Country= "Australia", Gold=60},
- new ChartData{ Country= "France", Gold=50 },
- new ChartData{ Country= "Germany", Gold=40 },
- new ChartData{ Country= "Italy", Gold=40 },
- new ChartData{ Country= "Sweden", Gold=30 }
+ {
+ new ChartData { Country = "USA", Gold = 50 },
+ new ChartData { Country = "China", Gold = 40 },
+ new ChartData { Country = "Japan", Gold = 70 },
+ new ChartData { Country = "Australia", Gold = 60},
+ new ChartData { Country = "France", Gold = 50 },
+ new ChartData { Country = "Germany", Gold = 40 },
+ new ChartData { Country = "Italy", Gold = 40 },
+ new ChartData { Country = "Sweden", Gold = 30 }
};
}
@@ -67,15 +66,14 @@ You can learn how to add annotations to Blazor Charts by watching the video belo
## Region
-The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotation.html#Syncfusion_Blazor_Charts_ChartAnnotation_Region) property can be used to insert annotations in relation to a series or a chart. By default, it is positioned with respect to a [Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Regions.html#Syncfusion_Blazor_Charts_Regions_Chart).
+Use the [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotation.html#Syncfusion_Blazor_Charts_ChartAnnotation_Region) property to position annotations relative to a series or the chart. By default, annotations are positioned with respect to the [Chart](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Regions.html#Syncfusion_Blazor_Charts_Regions_Chart).
```cshtml
@using Syncfusion.Blazor.Charts
-
-
+
@@ -91,7 +89,7 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Char
-@code{
+@code {
string Country = "Australia";
public class ChartData
@@ -101,15 +99,15 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Char
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50 },
- new ChartData{ Country= "China", Gold=40 },
- new ChartData{ Country= "Japan", Gold=70 },
- new ChartData{ Country= "Australia", Gold=60},
- new ChartData{ Country= "France", Gold=50 },
- new ChartData{ Country= "Germany", Gold=40 },
- new ChartData{ Country= "Italy", Gold=40 },
- new ChartData{ Country= "Sweden", Gold=30 }
+ {
+ new ChartData { Country = "USA", Gold = 50 },
+ new ChartData { Country = "China", Gold = 40 },
+ new ChartData { Country = "Japan", Gold = 70 },
+ new ChartData { Country = "Australia", Gold = 60},
+ new ChartData { Country = "France", Gold = 50 },
+ new ChartData { Country = "Germany", Gold = 40 },
+ new ChartData { Country = "Italy", Gold = 40 },
+ new ChartData { Country = "Sweden", Gold = 30 }
};
}
@@ -117,17 +115,16 @@ The [Region](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Char
-## Co-ordinate units
+## Coordinate units
-The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotation.html#Syncfusion_Blazor_Charts_ChartAnnotation_CoordinateUnits) property allows to specify the annotation's coordinate units either in [Pixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Units.html#Syncfusion_Blazor_Charts_Units_Pixel) or [Point](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Units.html#Syncfusion_Blazor_Charts_Units_Point).
+Set the annotation's coordinate units using the [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAnnotation.html#Syncfusion_Blazor_Charts_ChartAnnotation_CoordinateUnits) property. Choose between [Pixel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Units.html#Syncfusion_Blazor_Charts_Units_Pixel) or [Point](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Units.html#Syncfusion_Blazor_Charts_Units_Point).
```cshtml
@using Syncfusion.Blazor.Charts
-
-
+
@@ -143,7 +140,7 @@ The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
-@code{
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -151,15 +148,15 @@ The [CoordinateUnits](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50 },
- new ChartData{ Country= "China", Gold=40 },
- new ChartData{ Country= "Japan", Gold=70 },
- new ChartData{ Country= "Australia", Gold=60},
- new ChartData{ Country= "France", Gold=50 },
- new ChartData{ Country= "Germany", Gold=40 },
- new ChartData{ Country= "Italy", Gold=40 },
- new ChartData{ Country= "Sweden", Gold=30 }
+ {
+ new ChartData { Country = "USA", Gold = 50 },
+ new ChartData { Country = "China", Gold = 40 },
+ new ChartData { Country = "Japan", Gold = 70 },
+ new ChartData { Country = "Australia", Gold = 60},
+ new ChartData { Country = "France", Gold = 50 },
+ new ChartData { Country = "Germany", Gold = 40 },
+ new ChartData { Country = "Italy", Gold = 40 },
+ new ChartData { Country = "Sweden", Gold = 30 }
};
}
@@ -172,4 +169,4 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla
## See also
* [Tooltip](./tool-tip)
-* [Legend](./legend)
\ No newline at end of file
+* [Legend](./legend)
diff --git a/blazor/chart/chart-appearance.md b/blazor/chart/chart-appearance.md
index ef00a5ce9f..70961bc519 100644
--- a/blazor/chart/chart-appearance.md
+++ b/blazor/chart/chart-appearance.md
@@ -1,7 +1,7 @@
---
layout: post
title: Appearance in Blazor Charts Component | Syncfusion
-description: Checkout and learn here all about Appearance Customization in Syncfusion Blazor Charts component and much more.
+description: Check out and learn how to customize Chart Appearance in Syncfusion Blazor Charts component for enhanced visual presentation.
platform: Blazor
control: Chart
documentation: ug
@@ -11,15 +11,14 @@ documentation: ug
## Custom color palette
-The default color of series or points can be changed by providing a custom color palette to the [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Palettes) property.
+Change the default color of series or points by providing a custom color palette to the [Palettes](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Palettes) property.
```cshtml
@using Syncfusion.Blazor.Charts
-
-
+
@@ -31,7 +30,7 @@ The default color of series or points can be changed by providing a custom color
-@code{
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -41,15 +40,15 @@ The default color of series or points can be changed by providing a custom color
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ {
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
public String[] palettes = new String[] { "#E94649", "#F6B53F", "#6FAAB0" };
@@ -69,7 +68,7 @@ The default color of series or points can be changed by providing a custom color
-The chart's background color can be customized using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Background) property and the border color and width can be customized based on the specified value in [ChartBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartBorder.html).
+Customize the chart's background color using the [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Background) property. Adjust border color and width with [ChartBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartBorder.html).
```cshtml
@@ -86,7 +85,7 @@ The chart's background color can be customized using the [Background](https://he
-@code{
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -94,15 +93,15 @@ The chart's background color can be customized using the [Background](https://he
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50 },
- new ChartData{ Country="China", Gold=40 },
- new ChartData{ Country= "Japan", Gold=70 },
- new ChartData{ Country= "Australia", Gold=60},
- new ChartData{ Country= "France", Gold=50 },
- new ChartData{ Country= "Germany", Gold=40 },
- new ChartData{ Country= "Italy", Gold=40 },
- new ChartData{ Country= "Sweden", Gold=30 }
+ {
+ new ChartData { Country = "USA", Gold = 50 },
+ new ChartData { Country = "China", Gold = 40 },
+ new ChartData { Country = "Japan", Gold = 70 },
+ new ChartData { Country = "Australia", Gold = 60 },
+ new ChartData { Country = "France", Gold = 50 },
+ new ChartData { Country = "Germany", Gold = 40 },
+ new ChartData { Country = "Italy", Gold = 40 },
+ new ChartData { Country = "Sweden", Gold = 30 }
};
}
@@ -112,7 +111,7 @@ The chart's background color can be customized using the [Background](https://he
### Chart margin
-The chart's margin from its container can be customized using the [ChartMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartMargin.html).
+Set the chart margin from its container using the [ChartMargin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartMargin.html) property.
```cshtml
@@ -123,8 +122,7 @@ The chart's margin from its container can be customized using the [ChartMargin](
-
-
+
@@ -132,7 +130,7 @@ The chart's margin from its container can be customized using the [ChartMargin](
-@code{
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -140,15 +138,15 @@ The chart's margin from its container can be customized using the [ChartMargin](
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50 },
- new ChartData{ Country="China", Gold=40 },
- new ChartData{ Country= "Japan", Gold=70 },
- new ChartData{ Country= "Australia", Gold=60},
- new ChartData{ Country= "France", Gold=50 },
- new ChartData{ Country= "Germany", Gold=40 },
- new ChartData{ Country= "Italy", Gold=40 },
- new ChartData{ Country= "Sweden", Gold=30 }
+ {
+ new ChartData { Country = "USA", Gold = 50 },
+ new ChartData { Country = "China", Gold = 40 },
+ new ChartData { Country = "Japan", Gold = 70 },
+ new ChartData { Country = "Australia", Gold = 60 },
+ new ChartData { Country = "France", Gold = 50 },
+ new ChartData { Country = "Germany", Gold = 40 },
+ new ChartData { Country = "Italy", Gold = 40 },
+ new ChartData { Country = "Sweden", Gold = 30 }
};
}
@@ -158,9 +156,7 @@ The chart's margin from its container can be customized using the [ChartMargin](
### Chart area customization
-Using [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartArea.html#Syncfusion_Blazor_Charts_ChartArea_Background) and [ChartAreaBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAreaBorder.html) properties, you can change the background color and border of the chart area. Width for the chart area can be customized using [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartArea.html#Syncfusion_Blazor_Charts_ChartArea_Width) property.
-
-Using [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartArea.html#Syncfusion_Blazor_Charts_ChartArea_Background) and [ChartAreaBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAreaBorder.html) properties, you can change the background color and border of the chart area. Width for the chart area can be customized using [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartArea.html#Syncfusion_Blazor_Charts_ChartArea_Width) property.
+Change the background color and border of the chart area using [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartArea.html#Syncfusion_Blazor_Charts_ChartArea_Background) and [ChartAreaBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartAreaBorder.html). Customize the chart area width with the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartArea.html#Syncfusion_Blazor_Charts_ChartArea_Width) property.
```cshtml
@@ -178,7 +174,7 @@ Using [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
-@code{
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -186,15 +182,15 @@ Using [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50 },
- new ChartData{ Country="China", Gold=40 },
- new ChartData{ Country= "Japan", Gold=70 },
- new ChartData{ Country= "Australia", Gold=60},
- new ChartData{ Country= "France", Gold=50 },
- new ChartData{ Country= "Germany", Gold=40 },
- new ChartData{ Country= "Italy", Gold=40 },
- new ChartData{ Country= "Sweden", Gold=30 }
+ {
+ new ChartData { Country = "USA", Gold = 50 },
+ new ChartData { Country = "China", Gold = 40 },
+ new ChartData { Country = "Japan", Gold = 70 },
+ new ChartData { Country = "Australia", Gold = 60 },
+ new ChartData { Country = "France", Gold = 50 },
+ new ChartData { Country = "Germany", Gold = 40 },
+ new ChartData { Country = "Italy", Gold = 40 },
+ new ChartData { Country = "Sweden", Gold = 30 }
};
}
@@ -204,14 +200,14 @@ Using [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Chart
## Animation
-The [Animation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Animation) property allows to customize animation for a certain series. The [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAnimation.html#Syncfusion_Blazor_Charts_StockChartCommonAnimation_Enable) property can be used to enable or disable the series animation. The duration of the animation is specified by [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAnimation.html#Syncfusion_Blazor_Charts_StockChartCommonAnimation_Duration) property, and [Delay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAnimation.html#Syncfusion_Blazor_Charts_StockChartCommonAnimation_Delay) property allows to start the animation at a specific moment.
+Customize series animation using the [Animation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Animation) property. Enable or disable animation with [Enable](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAnimation.html#Syncfusion_Blazor_Charts_StockChartCommonAnimation_Enable), set duration with [Duration](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAnimation.html#Syncfusion_Blazor_Charts_StockChartCommonAnimation_Duration), and specify a start delay with [Delay](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.StockChartCommonAnimation.html#Syncfusion_Blazor_Charts_StockChartCommonAnimation_Delay).
```cshtml
@using Syncfusion.Blazor.Charts
-
+
@@ -231,7 +227,7 @@ The [Animation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C
}
public List MedalDetails = new List
- {
+ {
new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
@@ -247,7 +243,7 @@ The [Animation](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.C
## Chart title
-The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Title) property can be used to give the chart a title in-order to provide information about the data displayed.
+Add a chart title using the [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_Title) property to provide information about the displayed data.
```cshtml
@@ -256,8 +252,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfCha
-
-
+
@@ -265,7 +260,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfCha
-@code{
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -273,15 +268,15 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfCha
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50 },
- new ChartData{ Country="China", Gold=40 },
- new ChartData{ Country= "Japan", Gold=70 },
- new ChartData{ Country= "Australia", Gold=60},
- new ChartData{ Country= "France", Gold=50 },
- new ChartData{ Country= "Germany", Gold=40 },
- new ChartData{ Country= "Italy", Gold=40 },
- new ChartData{ Country= "Sweden", Gold=30 }
+ {
+ new ChartData { Country = "USA", Gold = 50 },
+ new ChartData { Country = "China", Gold = 40 },
+ new ChartData { Country = "Japan", Gold = 70 },
+ new ChartData { Country = "Australia", Gold = 60 },
+ new ChartData { Country = "France", Gold = 50 },
+ new ChartData { Country = "Germany", Gold = 40 },
+ new ChartData { Country = "Italy", Gold = 40 },
+ new ChartData { Country = "Sweden", Gold = 30 }
};
}
@@ -291,7 +286,7 @@ The [Title](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfCha
### Title position
-The [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html#Syncfusion_Blazor_Charts_ChartTitleStyle_Position) property customizes the placement of the chart title. It supports the following options: [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Right), [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Left), [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Bottom), [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Top), and [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Custom), providing flexible title alignment based on layout requirements. By default, the chart title appears at the top of the chart.
+Customize the chart title placement using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html#Syncfusion_Blazor_Charts_ChartTitleStyle_Position) property. Options include [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Right), [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Left), [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Bottom), [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Top), and [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitlePosition.html#Syncfusion_Blazor_Charts_ChartTitlePosition_Custom). By default, the title appears at the **top**.
N> The subtitle, which appears below the title, will also be positioned along with the title when the `Position` property is set.
@@ -302,8 +297,7 @@ N> The subtitle, which appears below the title, will also be positioned along wi
-
-
+
@@ -311,7 +305,7 @@ N> The subtitle, which appears below the title, will also be positioned along wi
-@code{
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -319,21 +313,22 @@ N> The subtitle, which appears below the title, will also be positioned along wi
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50 },
- new ChartData{ Country="China", Gold=40 },
- new ChartData{ Country= "Japan", Gold=70 },
- new ChartData{ Country= "Australia", Gold=60},
- new ChartData{ Country= "France", Gold=50 },
- new ChartData{ Country= "Germany", Gold=40 },
- new ChartData{ Country= "Italy", Gold=40 },
- new ChartData{ Country= "Sweden", Gold=30 }
+ {
+ new ChartData { Country = "USA", Gold = 50 },
+ new ChartData { Country = "China", Gold = 40 },
+ new ChartData { Country = "Japan", Gold = 70 },
+ new ChartData { Country = "Australia", Gold = 60 },
+ new ChartData { Country = "France", Gold = 50 },
+ new ChartData { Country = "Germany", Gold = 40 },
+ new ChartData { Country = "Italy", Gold = 40 },
+ new ChartData { Country = "Sweden", Gold = 30 }
};
}
```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BZLIZEryzUPiuQCS?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hthIjzjTrISHobHi?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
When the `Position` is set to `Custom`, the title can be positioned anywhere on the chart using the [X](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html#Syncfusion_Blazor_Charts_ChartTitleStyle_X) and [Y](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html#Syncfusion_Blazor_Charts_ChartTitleStyle_Y) properties in [ChartTitleStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartTitleStyle.html). This provides precise control over the title’s location, enabling customization to fit specific design or layout needs. The `X` and `Y` values specify the horizontal and vertical coordinates, respectively.
@@ -342,7 +337,6 @@ When the `Position` is set to `Custom`, the title can be positioned anywhere on
@using Syncfusion.Blazor.Charts
-
@@ -363,25 +357,26 @@ When the `Position` is set to `Custom`, the title can be positioned anywhere on
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50 },
- new ChartData{ Country="China", Gold=40 },
- new ChartData{ Country= "Japan", Gold=70 },
- new ChartData{ Country= "Australia", Gold=60},
- new ChartData{ Country= "France", Gold=50 },
- new ChartData{ Country= "Germany", Gold=40 },
- new ChartData{ Country= "Italy", Gold=40 },
- new ChartData{ Country= "Sweden", Gold=30 }
+ {
+ new ChartData { Country = "USA", Gold = 50 },
+ new ChartData { Country = "China", Gold = 40 },
+ new ChartData { Country = "Japan", Gold = 70 },
+ new ChartData { Country = "Australia", Gold = 60 },
+ new ChartData { Country = "France", Gold = 50 },
+ new ChartData { Country = "Germany", Gold = 40 },
+ new ChartData { Country = "Italy", Gold = 40 },
+ new ChartData { Country = "Sweden", Gold = 30 }
};
}
```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BXrotuVozgajpbhW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
+
-{% previewsample "https://blazorplayground.syncfusion.com/embed/BjLoXTtfLyEQbMWr?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5" %}
## Chart subtitle
-The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_SubTitle) property can be used to add a subtitle to the chart in-order to provide additional information about the data displayed.
+Add a subtitle using the [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.SfChart.html#Syncfusion_Blazor_Charts_SfChart_SubTitle) property for additional information about the chart data.
```cshtml
@@ -392,8 +387,7 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf
-
-
+
@@ -401,7 +395,7 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf
-@code{
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -409,15 +403,15 @@ The [SubTitle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Sf
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50 },
- new ChartData{ Country="China", Gold=40 },
- new ChartData{ Country= "Japan", Gold=70 },
- new ChartData{ Country= "Australia", Gold=60},
- new ChartData{ Country= "France", Gold=50 },
- new ChartData{ Country= "Germany", Gold=40 },
- new ChartData{ Country= "Italy", Gold=40 },
- new ChartData{ Country= "Sweden", Gold=30 }
+ {
+ new ChartData { Country = "USA", Gold = 50 },
+ new ChartData { Country = "China", Gold = 40 },
+ new ChartData { Country = "Japan", Gold = 70 },
+ new ChartData { Country = "Australia", Gold = 60 },
+ new ChartData { Country = "France", Gold = 50 },
+ new ChartData { Country = "Germany", Gold = 40 },
+ new ChartData { Country = "Italy", Gold = 40 },
+ new ChartData { Country = "Sweden", Gold = 30 }
};
}
@@ -429,5 +423,5 @@ N> The chart components do not use any CSS style for customization; chart elemen
## 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-series.md b/blazor/chart/chart-series.md
index fb8076b8d6..bf3ff76dce 100644
--- a/blazor/chart/chart-series.md
+++ b/blazor/chart/chart-series.md
@@ -1,7 +1,7 @@
---
layout: post
title: Mixed Chart in Blazor Charts Component | Syncfusion
-description: Checkout and learn here all about the Mixed Chart in Syncfusion Blazor Charts component and much more.
+description: Check out and learn how to configure the Mixed Chart in Syncfusion Blazor Charts component for combining multiple series types in one visualization.
platform: Blazor
control: Chart
documentation: ug
@@ -9,16 +9,16 @@ documentation: ug
# Mixed Chart in Blazor Charts Component
-## Multiple chart series
+## Multiple Chart Series
-The [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html) property allows to add multiple series to the chart. The series are rendered in the order they were added to the series array.
+The [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html) property enables multiple series to be added to a chart. Series are rendered in the order they appear in the series array.
```cshtml
@using Syncfusion.Blazor.Charts
-
+
@@ -30,7 +30,7 @@ The [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
-@code{
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -41,14 +41,14 @@ The [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
public List MedalDetails = new List
{
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
}
@@ -56,9 +56,9 @@ The [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
-## Combination chart series
+## Series Combination
-A chart can be created by combining several chart types such as line, column, and so on.
+A chart can be created by combining different chart types, such as line and column. Bar series cannot be combined with other series due to axis orientation differences.
N> Bar series cannot be combined with any other series as the axis orientation is different from other series.
@@ -67,7 +67,7 @@ N> Bar series cannot be combined with any other series as the axis orientation i
@using Syncfusion.Blazor.Charts
-
+
@@ -84,7 +84,7 @@ N> Bar series cannot be combined with any other series as the axis orientation i
-@code{
+@code {
public class ChartData
{
public string X { get; set; }
@@ -97,17 +97,17 @@ N> Bar series cannot be combined with any other series as the axis orientation i
public List SalesReports = new List
{
- new ChartData { X= "2005", Y= 1.2, Y1= 0.5, Y2= 0.7, Y3= -0.8, Y4= 1.5 },
- new ChartData { X= "2006", Y= 1, Y1= 0.5, Y2= 1.4, Y3= 0, Y4= 2.3 },
- new ChartData { X= "2007", Y= 1, Y1= 0.5, Y2= 1.5, Y3= -1, Y4= 2 },
- new ChartData { X= "2008", Y= 0.25, Y1= 0.35, Y2= 0.35, Y3= -.35, Y4= 0.1 },
- new ChartData { X= "2009", Y= 0.1, Y1= 0.9, Y2= -2.7, Y3= -0.3, Y4= -2.7 },
- new ChartData { X= "2010", Y= 1, Y1= 0.5, Y2= 0.5, Y3= -0.5, Y4= 1.8 },
- new ChartData { X= "2011", Y= 0.1, Y1= 0.25, Y2= 0.25, Y3= 0, Y4= 2 },
- new ChartData { X= "2012", Y= -0.25, Y1= -0.5, Y2= -0.1, Y3= -0.4, Y4= 0.4 },
- new ChartData { X= "2013", Y= 0.25, Y1= 0.5, Y2= -0.3, Y3= 0, Y4= 0.9 },
- new ChartData { X= "2014", Y= 0.6, Y1= 0.6, Y2= -0.6, Y3= -0.6, Y4= 0.4 },
- new ChartData { X= "2015", Y= 0.9, Y1= 0.5, Y2= 0, Y3= -0.3, Y4= 1.3 }
+ new ChartData { X = "2005", Y = 1.2, Y1 = 0.5, Y2 = 0.7, Y3 = -0.8, Y4 = 1.5 },
+ new ChartData { X = "2006", Y = 1, Y1 = 0.5, Y2 = 1.4, Y = 0, Y4 = 2.3 },
+ new ChartData { X = "2007", Y = 1, Y1 = 0.5, Y2 = 1.5, Y3 = -1, Y4 = 2 },
+ new ChartData { X = "2008", Y = 0.25, Y1 = 0.35, Y2 = 0.35, Y3 = -.35, Y4 = 0.1 },
+ new ChartData { X = "2009", Y = 0.1, Y1 = 0.9, Y2 = -2.7, Y3 = -0.3, Y4 = -2.7 },
+ new ChartData { X = "2010", Y = 1, Y1 = 0.5, Y2 = 0.5, Y3 = -0.5, Y4 = 1.8 },
+ new ChartData { X = "2011", Y = 0.1, Y1 = 0.25, Y2 = 0.25, Y3 = 0, Y4 = 2 },
+ new ChartData { X = "2012", Y = -0.25, Y1 = -0.5, Y2 = -0.1, Y3 = -0.4, Y4 = 0.4 },
+ new ChartData { X = "2013", Y = 0.25, Y1 = 0.5, Y2 = -0.3, Y3 = 0, Y4 = 0.9 },
+ new ChartData { X = "2014", Y = 0.6, Y1 = 0.6, Y2 = -0.6, Y3 = -0.6, Y4 = 0.4 },
+ new ChartData { X = "2015", Y = 0.9, Y1 = 0.5, Y2 = 0, Y3 = -0.3, Y4 = 1.3 }
};
}
diff --git a/blazor/chart/data-label-template.md b/blazor/chart/data-label-template.md
index c4a2bf05ce..61048e2ce6 100644
--- a/blazor/chart/data-label-template.md
+++ b/blazor/chart/data-label-template.md
@@ -1,7 +1,7 @@
---
layout: post
-title: Datalabel Template in Blazor Charts Component | Syncfusion
-description: Checkout and learn here all about the Datalabel Template in Syncfusion Blazor Charts component and much more.
+title: Data Label Template in Blazor Charts Component | Syncfusion
+description: Check out and learn how to configure Data Label Template in Syncfusion Blazor Charts component to display custom content on chart data points.
platform: Blazor
control: Chart
documentation: ug
@@ -9,11 +9,12 @@ documentation: ug
-# Datalabel Template in Blazor Charts Component
+# Data Label Template in Blazor Charts Component
-Text and interior information for a point can be bound from a datasource other than the x and y values. The implicit named parameter context can be used to access the aggregate values within the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Template). To retrieve aggregate values inside the template, type cast the context as [ChartDataPointInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataPointInfo.html). The context attribute can also be used to modify the name of this implicit parameter. For example, the data label information can be accessed using context in the template as shown below.
+Text and additional information for a data point can be bound from a datasource beyond the x and y values. Use the implicit named parameter context to access aggregate values within the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Template). To retrieve aggregate values inside the template, type cast the context as [ChartDataPointInfo](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataPointInfo.html). You can also modify the name of this implicit parameter using the context attribute.
```cshtml
+
@{
@@ -55,7 +56,7 @@ Text and interior information for a point can be bound from a datasource other t
-@code{
+@code {
public class Data
{
public string X { get; set; }
@@ -65,10 +66,10 @@ Text and interior information for a point can be bound from a datasource other t
public List SalesReports = new List
{
- new Data{ X= "Jan", Y= 3, Text= "January" },
- new Data{ X= "Feb", Y= 3.5, Text= "February" },
- new Data{ X= "Mar", Y= 7, Text= "March" },
- new Data{ X= "Apr", Y= 13.5, Text= "April" }
+ new Data{ X = "Jan", Y = 3, Text = "January" },
+ new Data{ X = "Feb", Y = 3.5, Text = "February" },
+ new Data{ X = "Mar", Y = 7, Text = "March" },
+ new Data{ X = "Apr", Y = 13.5, Text = "April" }
};
}
diff --git a/blazor/chart/data-labels.md b/blazor/chart/data-labels.md
index 0ffd5d1232..0e9d3f8f93 100644
--- a/blazor/chart/data-labels.md
+++ b/blazor/chart/data-labels.md
@@ -1,7 +1,7 @@
---
layout: post
title: Data Labels in Blazor Charts Component | Syncfusion
-description: Checkout and learn here all about the Data Labels in Syncfusion Blazor Charts component and much more.
+description: Check out and learn how to configure and customize Data Labels in Syncfusion Blazor Charts component.
platform: Blazor
control: Chart
documentation: ug
@@ -9,14 +9,14 @@ documentation: ug
# Data Labels in Blazor Charts Component
-[Data label](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html) can be added to a [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html) by enabling the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Visible) option in the data label settings. By default, the labels will organize themselves intelligently without overlapping.
+[Data labels](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html) can be added to a [ChartSeries](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html) by enabling the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Visible) option in the data label settings. Labels automatically organize themselves to avoid overlap.
```cshtml
@using Syncfusion.Blazor.Charts
-
+
@@ -27,7 +27,7 @@ documentation: ug
-@code{
+@code {
public class Data
{
public string X { get; set; }
@@ -36,20 +36,21 @@ documentation: ug
public List WeatherReports = new List
{
- new Data{ X= "Jan", Y= 3 },
- new Data{ X= "Feb", Y= 3.5 },
- new Data{ X= "Mar", Y= 7 },
- new Data{ X= "Apr", Y= 13.5 }
+ new Data { X = "Jan", Y = 3 },
+ new Data { X = "Feb", Y = 3.5 },
+ new Data { X = "Mar", Y = 7 },
+ new Data { X = "Apr", Y = 13.5 }
};
}
```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BNVIZYrIfXsIMOJL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Position
-Using [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Position) property, the label can be placed either on [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LabelPosition.html#Syncfusion_Blazor_Charts_LabelPosition_Top), [Middle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LabelPosition.html#Syncfusion_Blazor_Charts_LabelPosition_Middle), [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LabelPosition.html#Syncfusion_Blazor_Charts_LabelPosition_Bottom) or [Outer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LabelPosition.html#Syncfusion_Blazor_Charts_LabelPosition_Outer).
+Set the label position using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Position) property: [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LabelPosition.html#Syncfusion_Blazor_Charts_LabelPosition_Top), [Middle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LabelPosition.html#Syncfusion_Blazor_Charts_LabelPosition_Middle), [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LabelPosition.html#Syncfusion_Blazor_Charts_LabelPosition_Bottom), or [Outer](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LabelPosition.html#Syncfusion_Blazor_Charts_LabelPosition_Outer). The `Outer` position applies only to column and bar series.
```cshtml
@@ -76,10 +77,10 @@ Using [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.
public List WeatherReports = new List
{
- new Data{ X= "Jan", Y= 3 },
- new Data{ X= "Feb", Y= 3.5 },
- new Data{ X= "Mar", Y= 7 },
- new Data{ X= "Apr", Y= 13.5 }
+ new Data { X = "Jan", Y = 3 },
+ new Data { X = "Feb", Y = 3.5 },
+ new Data { X = "Mar", Y = 7 },
+ new Data { X = "Apr", Y = 13.5 }
};
}
@@ -91,18 +92,18 @@ N> The position `Outer` is applicable only for column and bar series.
## Template
-Label content can be formatted by using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Template) option. Inside the template, one can add the placeholder text **${point.x}** and **${point.y}** to display the corresponding data point value.
+Format label content using the [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Template) option. Use placeholders like **${point.x}** and **${point.y}** to display data point values.
## Text mapping
-The [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Name) property can be used to map text from a datasource to a data label.
+Map text from a datasource to a data label using the [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Name) property.
```cshtml
@using Syncfusion.Blazor.Charts
-
+
@@ -113,7 +114,7 @@ The [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartD
-@code{
+@code {
public class Data
{
public string X { get; set; }
@@ -123,10 +124,10 @@ The [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartD
public List WeatherReports = new List
{
- new Data{ X= "Jan", Y= 3, Text= "January" },
- new Data{ X= "Feb", Y= 3.5, Text= "February" },
- new Data{ X= "Mar", Y= 7, Text= "March" },
- new Data{ X= "Apr", Y= 13.5, Text= "April" }
+ new Data { X = "Jan", Y = 3, Text = "January" },
+ new Data { X = "Feb", Y = 3.5, Text = "February" },
+ new Data { X = "Mar", Y = 7, Text = "March" },
+ new Data { X = "Apr", Y = 13.5, Text = "April" }
};
}
@@ -136,15 +137,14 @@ The [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartD
## Format
-Data label for the chart can be formatted using [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Format) property. You can use the global formatting options, such as 'N1', 'P1', and 'C1'.
+Format data labels using the [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Format) property. Supported formats include 'N1', 'P1', and 'C1'.
```cshtml
@using Syncfusion.Blazor.Charts
-
-
+
@@ -155,7 +155,7 @@ Data label for the chart can be formatted using [Format](https://help.syncfusion
-@code{
+@code {
public class Data
{
public string X { get; set; }
@@ -165,10 +165,10 @@ Data label for the chart can be formatted using [Format](https://help.syncfusion
public List WeatherReports = new List
{
- new Data{ X= "Jan", Y= 3, Text= "January" },
- new Data{ X= "Feb", Y= 3.5, Text= "February" },
- new Data{ X= "Mar", Y= 7, Text= "March" },
- new Data{ X= "Apr", Y= 13.5, Text= "April" }
+ new Data { X = "Jan", Y = 3, Text = "January" },
+ new Data { X = "Feb", Y = 3.5, Text = "February" },
+ new Data { X = "Mar", Y = 7, Text = "March" },
+ new Data { X = "Apr", Y = 13.5, Text = "April" }
};
}
@@ -178,14 +178,14 @@ Data label for the chart can be formatted using [Format](https://help.syncfusion
## Margin
-The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Margin) option can be applied to the data label to create space around the element.
+Apply [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Margin) to create space around the data label.
```cshtml
@using Syncfusion.Blazor.Charts
-
+
@@ -222,14 +222,14 @@ The [Margin](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Char
## Customization
-Data label can be customized using [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Fill) property and the color and width of data label border can be customized based on the specified value in [ChartDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabelBorder.html). Rounded corners can also be applied using [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Rx) and [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Ry) properties.
+Customize data label color using the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Fill) property. Adjust border color and width with [ChartDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabelBorder.html). Apply rounded corners using [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Rx) and [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartDataLabel.html#Syncfusion_Blazor_Charts_ChartDataLabel_Ry).
```cshtml
@using Syncfusion.Blazor.Charts
-
+
@@ -242,7 +242,7 @@ Data label can be customized using [Fill](https://help.syncfusion.com/cr/blazor/
-@code{
+@code {
public class Data
{
public string X { get; set; }
@@ -252,10 +252,10 @@ Data label can be customized using [Fill](https://help.syncfusion.com/cr/blazor/
public List WeatherReports = new List
{
- new Data{ X= "Jan", Y= 3, Text= "January" },
- new Data{ X= "Feb", Y= 3.5, Text= "February" },
- new Data{ X= "Mar", Y= 7, Text= "March" },
- new Data{ X= "Apr", Y= 13.5, Text= "April" }
+ new Data { X = "Jan", Y = 3, Text = "January" },
+ new Data { X = "Feb", Y = 3.5, Text = "February" },
+ new Data { X = "Mar", Y = 7, Text = "March" },
+ new Data { X = "Apr", Y = 13.5, Text = "April" }
};
}
@@ -268,4 +268,4 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla
## See also
* [Tooltip](./tool-tip)
-* [Legend](./legend)
\ No newline at end of file
+* [Legend](./legend)
diff --git a/blazor/chart/data-markers.md b/blazor/chart/data-markers.md
index 1e66f7fb3d..ce4583b575 100644
--- a/blazor/chart/data-markers.md
+++ b/blazor/chart/data-markers.md
@@ -1,7 +1,7 @@
---
layout: post
title: Markers in Blazor Charts Component | Syncfusion
-description: Checkout and learn here all about the available Markers in Syncfusion Blazor Charts component and much more.
+description: Check out and learn how to configure and customize Markers in Syncfusion Blazor Charts component to enhance data point visibility and styling.
platform: Blazor
control: Chart
documentation: ug
@@ -9,7 +9,7 @@ documentation: ug
# Markers in Blazor Charts Component
-[Data markers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html) are used to provide information about the data points in a series. Each data point can be adorned with a shape.
+[Data markers](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html) provide information about data points in a series. Each point can be adorned with a shape.
@@ -17,7 +17,7 @@ documentation: ug
-Markers can be added to the points by enabling the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_Visible) property to **true** of [ChartMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartMarker.html).
+Enable markers by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_Visible) property to **true** in [ChartMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartMarker.html).
```cshtml
@@ -31,7 +31,7 @@ Markers can be added to the points by enabling the [Visible](https://help.syncf
-@code{
+@code {
public class ChartData
{
public double X { get; set; }
@@ -40,23 +40,24 @@ Markers can be added to the points by enabling the [Visible](https://help.syncf
public List ConsumerReports = new List
{
- new ChartData{ X= 2005, Y= 28 },
- new ChartData{ X= 2006, Y= 25 },
- new ChartData{ X= 2007, Y= 26 },
- new ChartData{ X= 2008, Y= 27 },
- new ChartData{ X= 2009, Y= 32 },
- new ChartData{ X= 2010, Y= 35 },
- new ChartData{ X= 2011, Y= 30 }
+ new ChartData { X = 2005, Y = 28 },
+ new ChartData { X = 2006, Y = 25 },
+ new ChartData { X = 2007, Y = 26 },
+ new ChartData { X = 2008, Y = 27 },
+ new ChartData { X = 2009, Y = 32 },
+ new ChartData { X = 2010, Y = 35 },
+ new ChartData { X = 2011, Y = 30 }
};
}
```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/rDVetuhIUaRERJbW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Shape
-Markers can be assigned with different shapes such as [Rectangle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartShape.html#Syncfusion_Blazor_Charts_ChartShape_Rectangle), [Circle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartShape.html#Syncfusion_Blazor_Charts_ChartShape_Circle), [Diamond](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartShape.html#Syncfusion_Blazor_Charts_ChartShape_Diamond) etc. using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_Shape) property.
+Assign different shapes to markers, such as [Rectangle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartShape.html#Syncfusion_Blazor_Charts_ChartShape_Rectangle), [Circle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartShape.html#Syncfusion_Blazor_Charts_ChartShape_Circle), or [Diamond](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartShape.html#Syncfusion_Blazor_Charts_ChartShape_Diamond), using the [Shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_Shape) property.
```cshtml
@@ -79,13 +80,13 @@ Markers can be assigned with different shapes such as [Rectangle](https://help.s
public List ConsumerReports = new List
{
- new ChartData{ X= 2005, Y= 28 },
- new ChartData{ X= 2006, Y= 25 },
- new ChartData{ X= 2007, Y= 26 },
- new ChartData{ X= 2008, Y= 27 },
- new ChartData{ X= 2009, Y= 32 },
- new ChartData{ X= 2010, Y= 35 },
- new ChartData{ X= 2011, Y= 30 }
+ new ChartData { X = 2005, Y = 28 },
+ new ChartData { X = 2006, Y = 25 },
+ new ChartData { X = 2007, Y = 26 },
+ new ChartData { X = 2008, Y = 27 },
+ new ChartData { X = 2009, Y = 32 },
+ new ChartData { X = 2010, Y = 35 },
+ new ChartData { X = 2011, Y = 30 }
};
}
@@ -95,14 +96,14 @@ Markers can be assigned with different shapes such as [Rectangle](https://help.s
## Auto marker shape
-By default, the chart [marker shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_Shape) is set to [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartShape.html#Syncfusion_Blazor_Charts_ChartShape_Auto). When **Auto** is set and marker is enabled in the chart at the same time, each series is rendered with a unique marker shape.
+By default, the chart [marker shape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_Shape) is set to [Auto](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartShape.html#Syncfusion_Blazor_Charts_ChartShape_Auto). When enabled, each series is rendered with a unique marker shape.
```cshtml
@using Syncfusion.Blazor.Charts
-
+
@@ -140,11 +141,11 @@ By default, the chart [marker shape](https://help.syncfusion.com/cr/blazor/Syncf
public List ConsumerReports = new List
{
- new ChartData{ X= new DateTime(2005,01,01), Y1 = 100, Y2 = 190, Y3 = 40, Y4 = 125, Y5 = 160, Y6 = 80 },
- new ChartData{ X= new DateTime(2006,01,01), Y1 = 120, Y2 = 140, Y3 = 100, Y4 = 190, Y5 = 170, Y6 = 30 },
- new ChartData{ X= new DateTime(2007,01,01), Y1 = 110, Y2 = 80, Y3 = 60, Y4 = 125, Y5 = 140, Y6 = 40 },
- new ChartData{ X= new DateTime(2008,01,01), Y1 = 40, Y2 = 120, Y3 = 75, Y4 = 180, Y5 = 150, Y6 = 90 },
- new ChartData{ X= new DateTime(2009,01,01), Y1 = 170, Y2 = 80, Y3 = 30, Y4 = 125, Y5 = 140, Y6 = 100 },
+ new ChartData { X= new DateTime(2005, 01, 01), Y1 = 100, Y2 = 190, Y3 = 40, Y4 = 125, Y5 = 160, Y6 = 80 },
+ new ChartData { X= new DateTime(2006, 01, 01), Y1 = 120, Y2 = 140, Y3 = 100, Y4 = 190, Y5 = 170, Y6 = 30 },
+ new ChartData { X= new DateTime(2007, 01, 01), Y1 = 110, Y2 = 80, Y3 = 60, Y4 = 125, Y5 = 140, Y6 = 40 },
+ new ChartData { X= new DateTime(2008, 01, 01), Y1 = 40, Y2 = 120, Y3 = 75, Y4 = 180, Y5 = 150, Y6 = 90 },
+ new ChartData { X= new DateTime(2009, 01, 01), Y1 = 170, Y2 = 80, Y3 = 30, Y4 = 125, Y5 = 140, Y6 = 100 }
};
}
@@ -154,7 +155,7 @@ By default, the chart [marker shape](https://help.syncfusion.com/cr/blazor/Syncf
## Images
-Apart from shapes, one can also add custom images to mark the data point using the [ImageUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_ImageUrl) property by specifying [Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartShape.html#Syncfusion_Blazor_Charts_ChartShape_Image) shape for marker.
+Custom images can be used as markers by setting the [ImageUrl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_ImageUrl) property and specifying [Image](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartShape.html#Syncfusion_Blazor_Charts_ChartShape_Image) as the marker shape.
```cshtml
@@ -169,7 +170,7 @@ Apart from shapes, one can also add custom images to mark the data point using t
-@code{
+@code {
public class ChartData
{
public double X { get; set; }
@@ -178,13 +179,13 @@ Apart from shapes, one can also add custom images to mark the data point using t
public List ConsumerReports = new List
{
- new ChartData{ X= 2005, Y= 28 },
- new ChartData{ X= 2006, Y= 25 },
- new ChartData{ X= 2007, Y= 26 },
- new ChartData{ X= 2008, Y= 27 },
- new ChartData{ X= 2009, Y= 32 },
- new ChartData{ X= 2010, Y= 35 },
- new ChartData{ X= 2011, Y= 30 }
+ new ChartData { X = 2005, Y = 28 },
+ new ChartData { X = 2006, Y = 25 },
+ new ChartData { X = 2007, Y = 26 },
+ new ChartData { X = 2008, Y = 27 },
+ new ChartData { X = 2009, Y = 32 },
+ new ChartData { X = 2010, Y = 35 },
+ new ChartData { X = 2011, Y = 30 }
};
}
@@ -194,15 +195,15 @@ Apart from shapes, one can also add custom images to mark the data point using t
## Fill marker with series color
-Marker can be filled with the series color by setting [IsFilled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_IsFilled) property to **true** of [ChartMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartMarker.html).
+Fill markers with the series color by setting [IsFilled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_IsFilled) to **true** in [ChartMarker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartMarker.html).
```cshtml
@using Syncfusion.Blazor.Charts
-
-
+
+
@@ -220,13 +221,13 @@ Marker can be filled with the series color by setting [IsFilled](https://help.sy
public List ConsumerReports = new List
{
- new ChartData{ X= 2005, Y= 28 },
- new ChartData{ X= 2006, Y= 25 },
- new ChartData{ X= 2007, Y= 26 },
- new ChartData{ X= 2008, Y= 27 },
- new ChartData{ X= 2009, Y= 32 },
- new ChartData{ X= 2010, Y= 35 },
- new ChartData{ X= 2011, Y= 30 }
+ new ChartData { X = 2005, Y = 28 },
+ new ChartData { X = 2006, Y = 25 },
+ new ChartData { X = 2007, Y = 26 },
+ new ChartData { X = 2008, Y = 27 },
+ new ChartData { X = 2009, Y = 32 },
+ new ChartData { X = 2010, Y = 35 },
+ new ChartData { X = 2011, Y = 30 }
};
}
@@ -236,15 +237,14 @@ Marker can be filled with the series color by setting [IsFilled](https://help.sy
## Customization
-Markers color can be customized using [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_Fill) property and the border color and width can be customized based on the specified value in [ChartMarkerBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartMarkerBorder.html).
+Customize marker color using the [Fill](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartCommonMarker.html#Syncfusion_Blazor_Charts_ChartCommonMarker_Fill) property. Adjust border color and width with [ChartMarkerBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartMarkerBorder.html).
```cshtml
@using Syncfusion.Blazor.Charts
-
-
+
@@ -264,13 +264,13 @@ Markers color can be customized using [Fill](https://help.syncfusion.com/cr/blaz
public List ConsumerReports = new List
{
- new ChartData{ X= 2005, Y= 28 },
- new ChartData{ X= 2006, Y= 25 },
- new ChartData{ X= 2007, Y= 26 },
- new ChartData{ X= 2008, Y= 27 },
- new ChartData{ X= 2009, Y= 32 },
- new ChartData{ X= 2010, Y= 35 },
- new ChartData{ X= 2011, Y= 30 }
+ new ChartData { X = 2005, Y = 28 },
+ new ChartData { X = 2006, Y = 25 },
+ new ChartData { X = 2007, Y = 26 },
+ new ChartData { X = 2008, Y = 27 },
+ new ChartData { X = 2009, Y = 32 },
+ new ChartData { X = 2010, Y = 35 },
+ new ChartData { X = 2011, Y = 30 }
};
}
diff --git a/blazor/chart/last-data-label.md b/blazor/chart/last-data-label.md
index 06bd611a35..78e96478c9 100644
--- a/blazor/chart/last-data-label.md
+++ b/blazor/chart/last-data-label.md
@@ -1,7 +1,7 @@
---
layout: post
title: Last Data Label in Blazor Charts Component | Syncfusion
-description: Checkout and learn here all about the Last Data Label in Syncfusion Blazor Charts component and much more.
+description: Checkout and learn how to configure and customize Last Data Label in Syncfusion Blazor Charts component and much more.
platform: Blazor
control: Chart
documentation: ug
@@ -9,11 +9,11 @@ documentation: ug
# Last Data Label in Blazor Charts Component
-The last data label feature highlights the most recent data point in a series by displaying a label along with an indicator line. This enhancement improves visibility and makes it easier to identify the latest value in the chart. The label can be enabled and customized using the [ChartLastDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html) property.
+The last data label feature highlights the most recent data point in a series by displaying a label and indicator line. This improves visibility and makes it easier to identify the latest value in the chart. Enable and customize the label using the [ChartLastDataLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html) property.
## Enable last data label
-To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html#Syncfusion_Blazor_Charts_ChartLastDataLabel_ShowLabel) property of the `ChartLastDataLabel` configuration to **true** within the series settings.
+Set the [ShowLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html#Syncfusion_Blazor_Charts_ChartLastDataLabel_ShowLabel) property of `ChartLastDataLabel` to **true** in the series settings to display the last data label.
```cshtml
@@ -22,7 +22,7 @@ To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/c
-
+
@@ -53,15 +53,15 @@ To enable the last data label, set the [ShowLabel](https://help.syncfusion.com/c
}
```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrotEjvfKbMpjHI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/VXrotEjvfKbMpjHI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
## Customization
-The appearance of the last data label can be customized using various properties defined across different settings.
+Customize the appearance of the last data label using these properties:
-In the `ChartLastDataLabel`:
+`ChartLastDataLabel` contains following properties for customization:
* [Background](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html#Syncfusion_Blazor_Charts_ChartLastDataLabel_Background): Sets the background color of the last data label container.
* [LineColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html#Syncfusion_Blazor_Charts_ChartLastDataLabel_LineColor): Sets the color of the indicator line.
* [LineWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html#Syncfusion_Blazor_Charts_ChartLastDataLabel_LineWidth): Sets the width of the indicator line.
@@ -69,16 +69,16 @@ In the `ChartLastDataLabel`:
* [Rx](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html#Syncfusion_Blazor_Charts_ChartLastDataLabel_Rx): Sets the horizontal corner radius of the label container.
* [Ry](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabel.html#Syncfusion_Blazor_Charts_ChartLastDataLabel_Ry): Sets the vertical corner radius of the label container.
-In the [ChartLastDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelBorder.html):
+[ChartLastDataLabelBorder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelBorder.html) contains following properties for customization:
* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelBorder.html#Syncfusion_Blazor_Charts_ChartLastDataLabelBorder_Color): Sets the border color of the label container.
* [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelBorder.html#Syncfusion_Blazor_Charts_ChartLastDataLabelBorder_Width): Sets the border width of the label container.
-In the [ChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelFont.html):
+[ChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelFont.html) contains following properties customization:
* [Size](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_ChartLastDataLabelFont_Size): Sets the font size of the label text.
* [Color](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_ChartLastDataLabelFont_Color): Sets the font color of the label text.
* [FontFamily](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_ChartLastDataLabelFont_FontFamily): Specifies the font family of the label text.
* [FontWeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_ChartLastDataLabelFont_FontWeight): Sets the font weight of the label text.
-* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_ChartLastDataLabelFont_FontStyle): Sets the font style of the label text.
+* [FontStyle](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLastDataLabelFont.html#Syncfusion_Blazor_Charts_ChartLastDataLabelFont_FontStyle): Sets the font style of the label text.
```cshtml
@@ -87,7 +87,7 @@ In the [ChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion
-
+
@@ -121,14 +121,14 @@ In the [ChartLastDataLabelFont](https://help.syncfusion.com/cr/blazor/Syncfusion
}
```
+{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVojaDbzJnZIqnR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
-{% previewsample "https://blazorplayground.syncfusion.com/embed/hjVojaDbzJnZIqnR?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.
## See also
-* [Data Label](./data-labels)
+* [Data label](./data-labels)
* [Tooltip](./tool-tip)
* [Marker](./data-markers)
-
-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.
diff --git a/blazor/chart/legend.md b/blazor/chart/legend.md
index 5ef0b5071f..20865c9b56 100644
--- a/blazor/chart/legend.md
+++ b/blazor/chart/legend.md
@@ -1,7 +1,7 @@
---
layout: post
title: Legend in Blazor Charts Component | Syncfusion
-description: Checkout and learn here all about the Legends and its customization in Syncfusion Blazor Charts component and much more.
+description: Check out and learn how to configure and customize Legends in Syncfusion Blazor Charts component to improve series identification and chart clarity.
platform: Blazor
control: Chart
documentation: ug
@@ -9,22 +9,22 @@ documentation: ug
# Legend in Blazor Charts Component
-The [legend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html) provides information on the series shown in the chart.
+The [legend](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html) provides information about the series shown in the chart.
-You can learn how to add legend to Blazor Charts by watching the video below.
+Learn how to add legends to Blazor Charts by watching the video below.
{% youtube "youtube:https://www.youtube.com/watch?v=mra9AP4HBPc" %}
## Enable legend
-To display the legend for the chart, set the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Visible) property in [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html) to **true**.
+Display the legend by setting the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Visible) property in [ChartLegendSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html) to **true**.
```cshtml
@using Syncfusion.Blazor.Charts
-
+
@@ -32,11 +32,10 @@ To display the legend for the chart, set the [Visible](https://help.syncfusion.c
-
+
-@code{
-
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -46,15 +45,15 @@ To display the legend for the chart, set the [Visible](https://help.syncfusion.c
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ {
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
}
@@ -69,15 +68,14 @@ To display the legend for the chart, set the [Visible](https://help.syncfusion.c
**Legend Position**
-
-The legend can be placed at [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Left), [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Right), [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Top), [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Bottom) or [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Custom) position of the chart using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Position) property. By default, the legend appears at the bottom of the chart.
+Set the legend position to [Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Left), [Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Right), [Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Top), [Bottom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Bottom), or [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendPosition.html#Syncfusion_Blazor_Charts_LegendPosition_Custom) using the [Position](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Position) property. By default, the legend appears at the **Bottom**.
```cshtml
@using Syncfusion.Blazor.Charts
-
+
@@ -85,11 +83,10 @@ The legend can be placed at [Left](https://help.syncfusion.com/cr/blazor/Syncfu
-
+
-@code{
-
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -99,15 +96,15 @@ The legend can be placed at [Left](https://help.syncfusion.com/cr/blazor/Syncfu
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ {
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
}
@@ -122,7 +119,7 @@ The [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Lege
@using Syncfusion.Blazor.Charts
-
+
@@ -134,12 +131,11 @@ The [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Lege
-
+
-@code{
-
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -150,14 +146,14 @@ The [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Lege
public List MedalDetails = new List
{
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
}
@@ -166,10 +162,9 @@ The [Custom](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Lege
-
## Legend Reverse
-You can reverse the order of the legend items by using the [Reverse](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Reverse) property. By default, legend for the first series in the collection will be placed first.
+Reverse the order of legend items using the [Reverse](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Reverse) property. By default, the first series appears first in the legend.
```cshtml
@@ -202,15 +197,15 @@ You can reverse the order of the legend items by using the [Reverse](https://hel
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ {
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
}
@@ -222,16 +217,14 @@ You can reverse the order of the legend items by using the [Reverse](https://hel
**Legend Alignment**
-
-Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Alignment) property, place the legend in [Centre](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Center), [Far](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Far), or [Near](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Near) alignment.
+Set legend alignment to [Centre](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Center), [Far](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Far), or [Near](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.Alignment.html#Syncfusion_Blazor_Charts_Alignment_Near) using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Alignment) property.
```cshtml
@using Syncfusion.Blazor.Charts
-
-
+
@@ -242,11 +235,10 @@ Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
-
+
-@code{
-
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -256,15 +248,15 @@ Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ {
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
}
@@ -273,11 +265,11 @@ Using the [Alignment](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Ch
-## Legend customization
+## Legend Customization
### Legend Shape
-The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_LegendShape) property in the [Series](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html) can be used to change the shape of the legend icon. The default icon shape for legends is [SeriesType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendShape.html#Syncfusion_Blazor_Charts_LegendShape_SeriesType).
+Change the legend icon shape using the [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_LegendShape) property in the series. The default shape is [SeriesType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.LegendShape.html#Syncfusion_Blazor_Charts_LegendShape_SeriesType).
```cshtml
@@ -295,8 +287,7 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
-@code{
-
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -306,15 +297,15 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ {
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
}
@@ -324,14 +315,14 @@ The [LegendShape](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
### Legend Size
-When the legend is placed on the top or bottom of the chart, it takes up 20% - 25% of the chart's height, and 20% - 25% of the chart's width when it is positioned on the left or right side of the chart. So, the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Height) properties can be used to adjust the default legend size.
+Adjust legend size using the [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Width) and [Height](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_Height) properties.
```cshtml
@using Syncfusion.Blazor.Charts
-
+
@@ -347,8 +338,7 @@ When the legend is placed on the top or bottom of the chart, it takes up 20% - 2
-@code{
-
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -358,15 +348,15 @@ When the legend is placed on the top or bottom of the chart, it takes up 20% - 2
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ {
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
}
@@ -376,7 +366,7 @@ When the legend is placed on the top or bottom of the chart, it takes up 20% - 2
### Legend Shape Size
-The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_ShapeHeight) and [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_ShapeWidth) properties can be used to adjust the dimensions of the legend shape.
+Set legend shape dimensions using [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_ShapeHeight) and [ShapeWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_ShapeWidth).
```cshtml
@@ -398,8 +388,7 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
-@code{
-
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -409,15 +398,15 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ {
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
}
@@ -427,7 +416,7 @@ The [ShapeHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
### Legend Item Padding
-The [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_ItemPadding) property can be used to adjust the space between the legend items.
+Adjust space between legend items using the [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_ItemPadding) property.
```cshtml
@@ -458,15 +447,15 @@ The [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ {
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
}
@@ -476,15 +465,14 @@ The [ItemPadding](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
### Legend Paging
-When the legend items exceed legend bounds, paging will be enabled by default. End user can view each legend item using the navigation buttons to navigate between pages.
+Paging is enabled by default when legend items exceed legend bounds. Use navigation buttons to view all legend items.
```cshtml
@using Syncfusion.Blazor.Charts
-
-
+
@@ -500,8 +488,7 @@ When the legend items exceed legend bounds, paging will be enabled by default. E
-@code{
-
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -511,15 +498,15 @@ When the legend items exceed legend bounds, paging will be enabled by default. E
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ {
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
}
@@ -529,15 +516,15 @@ When the legend items exceed legend bounds, paging will be enabled by default. E
### Legend Text Wrap
-When the legend text exceeds the container, the text can be wrapped by using [TextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_TextWrap) Property. End user can also wrap the legend text based on the [MaximumLabelWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_MaximumLabelWidth) property.
+Wrap legend text using [TextWrap](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_TextWrap) and [MaximumLabelWidth](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_MaximumLabelWidth) properties.
```cshtml
@using Syncfusion.Blazor.Charts
-
-
+
+
@@ -551,8 +538,7 @@ When the legend text exceeds the container, the text can be wrapped by using [Te
-@code{
-
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -562,15 +548,15 @@ When the legend text exceeds the container, the text can be wrapped by using [Te
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ {
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
}
@@ -580,14 +566,14 @@ When the legend text exceeds the container, the text can be wrapped by using [Te
## Series selection based on legend
-By default, when you click on the legend item, the appropriate series visibility is collapsed. On the other hand, [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_ToggleVisibility) property is used to disable such functionality.
+By default, clicking a legend item collapses the corresponding series. Disable this with the [ToggleVisibility](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartLegendSettings.html#Syncfusion_Blazor_Charts_ChartLegendSettings_ToggleVisibility) property.
```cshtml
@using Syncfusion.Blazor.Charts
-
+
@@ -598,10 +584,10 @@ By default, when you click on the legend item, the appropriate series visibility
-
+
-@code{
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -611,15 +597,15 @@ By default, when you click on the legend item, the appropriate series visibility
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ {
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
}
@@ -629,15 +615,14 @@ By default, when you click on the legend item, the appropriate series visibility
## Hiding legend item
-The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Name) will be displayed as the legend text by default. One can skip the legend for particular series by providing an empty string to the series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Name) property.
+The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Name) is displayed as the legend text by default. Skip the legend for a series by providing an empty string to the series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_Name) property.
```cshtml
@using Syncfusion.Blazor.Charts
-
-
+
@@ -648,11 +633,10 @@ The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
-
-
+
-@code{
-
+
+@code {
public class ChartData
{
public string Country { get; set; }
@@ -662,15 +646,15 @@ The series [Name](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts
}
public List MedalDetails = new List
- {
- new ChartData{ Country= "USA", Gold=50, Silver=70, Bronze=45 },
- new ChartData{ Country="China", Gold=40, Silver= 60, Bronze=55 },
- new ChartData{ Country= "Japan", Gold=70, Silver= 60, Bronze=50 },
- new ChartData{ Country= "Australia", Gold=60, Silver= 56, Bronze=40 },
- new ChartData{ Country= "France", Gold=50, Silver= 45, Bronze=35 },
- new ChartData{ Country= "Germany", Gold=40, Silver=30, Bronze=22 },
- new ChartData{ Country= "Italy", Gold=40, Silver=35, Bronze=37 },
- new ChartData{ Country= "Sweden", Gold=30, Silver=25, Bronze=27 }
+ {
+ new ChartData { Country = "USA", Gold = 50, Silver = 70, Bronze = 45 },
+ new ChartData { Country = "China", Gold = 40, Silver = 60, Bronze = 55 },
+ new ChartData { Country = "Japan", Gold = 70, Silver = 60, Bronze = 50 },
+ new ChartData { Country = "Australia", Gold = 60, Silver = 56, Bronze = 40 },
+ new ChartData { Country = "France", Gold = 50, Silver = 45, Bronze = 35 },
+ new ChartData { Country = "Germany", Gold = 40, Silver = 30, Bronze = 22 },
+ new ChartData { Country = "Italy", Gold = 40, Silver = 35, Bronze = 37 },
+ new ChartData { Country = "Sweden", Gold = 30, Silver = 25, Bronze = 27 }
};
}
@@ -683,4 +667,4 @@ N> Refer to our [Blazor Charts](https://www.syncfusion.com/blazor-components/bla
## See also
* [Data label](./data-labels)
-* [Marker](./data-markers)
\ No newline at end of file
+* [Marker](./data-markers)