Class AccumulationChartLegendSettings
Legend is used to help readers understand the plotted data. The chart legend shows information about the datasets that are appearing on the chart.
Inherited Members
Namespace: Syncfusion.Blazor.Charts
Assembly: Syncfusion.Blazor.dll
Syntax
public class AccumulationChartLegendSettings : SfBaseComponent, ILegend
Constructors
AccumulationChartLegendSettings()
Declaration
public AccumulationChartLegendSettings()
Properties
Alignment
Gets or sets the alignment of the legend in an Syncfusion.Blazor.Charts.AccumulationChart.
Declaration
public Alignment Alignment { get; set; }
Property Value
Type | Description |
---|---|
Alignment | One of the Alignment enumerations that specifies the legend alignment. Options include: |
Remarks
The alignment of the legend within the Syncfusion.Blazor.Charts.AccumulationChart functions as follows:
Near
: Aligns the legend to the top-left if Position isLegendPosition.Top
and to the right-top if Position isLegendPosition.Right
.Center
: Aligns the legend to the top center if Position isLegendPosition.Top
and to the right center if Position isLegendPosition.Right
.Far
: Aligns the legend to the top-right if Position isLegendPosition.Top
and to the right-bottom if Position isLegendPosition.Right
.
Examples
// This example demonstrates how to set the legend alignment in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartLegendSettings Visible="true" Alignment="Alignment.Far"></AccumulationChartLegendSettings>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
</SfAccumulationChart>
Background
Gets or sets the background color of the SfAccumulationChart legend area.
Declaration
public string Background { get; set; }
Property Value
Type | Description |
---|---|
System.String | A string value specifying the background color of the SfAccumulationChart legend area. The default value is transparent. |
Remarks
The value can be specified in hex or rgba format, following valid CSS color string conventions.
Examples
// This example demonstrates how to set the background color of the legend in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" Background="#4266f9"></AccumulationChartLegendSettings>
</SfAccumulationChart>
Border
Gets or sets the options to customize the border of the legend in the SfAccumulationChart.
Declaration
public AccumulationChartLegendBorder Border { get; set; }
Property Value
Type | Description |
---|---|
AccumulationChartLegendBorder | Accepts the instance of the AccumulationChartLegendBorder class. The default value is a new instance of the AccumulationChartLegendBorder class. |
Remarks
Use this property to customize the border of the legend in the SfAccumulationChart.
Examples
// This example demonstrates how to set the border of the legend in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true">
<AccumulationChartLegendBorder Width="2" Color="blue"></AccumulationChartLegendBorder>
</AccumulationChartLegendSettings>
</SfAccumulationChart>
Description
Gets or sets the description for accessibility purposes, particularly when focused on the legend element by screen readers.
Declaration
public string Description { get; set; }
Property Value
Type | Description |
---|---|
System.String | A string representing the accessibility description for the legend. The default value is an empty string. |
Remarks
Use this property to provide a description for the legend element for accessibility purposes in the SfAccumulationChart.
Examples
// This example demonstrates how to set the accessibility description for a legend in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" Description="This legend shows all the different browser details"></AccumulationChartLegendSettings>
</SfAccumulationChart>
EnableHighlight
Gets or sets a value indicating whether to enable highlighting when hovered over the legend element in the SfAccumulationChart.
Declaration
public bool EnableHighlight { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if highlight options are enabled; otherwise, false. The default value is false. |
Remarks
If set to true, when hovered over the legend element, the respective series point will be highlighted in the SfAccumulationChart.
Examples
// The following code snippet demonstrates how to enable highlighting in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" EnableHighlight="true"></AccumulationChartLegendSettings>
</SfAccumulationChart>
Height
Gets or sets the height for the legend in the SfAccumulationChart.
Declaration
public string Height { get; set; }
Property Value
Type | Description |
---|---|
System.String | A string representing the height of the legend element. The default value is null. The height will be automatically calculated based on the legend's position if not specified. |
Remarks
Accepts values in either pixels or percentage.
Examples
// This example demonstrates how to set the height for a legend in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" Height="150px"></AccumulationChartLegendSettings>
</SfAccumulationChart>
IsInversed
Gets or sets a value indicating whether to inverse the legend item content (image and text) in the SfAccumulationChart.
Declaration
public bool IsInversed { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if the legend content should be inversed, displaying text before the associated shape; otherwise, false. The default value is false. |
Remarks
When set to true, the legend element will display the text before the associated shape. This differs from the default behavior, where the shape is shown first, followed by the text.
Examples
// The following code snippet demonstrates how to inverse the legend item content in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" IsInversed="true"></AccumulationChartLegendSettings>
</SfAccumulationChart>
ItemPadding
Gets or sets the padding between legend items in the SfAccumulationChart.
Declaration
public double ItemPadding { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A double representing the padding between legend items. The default value is |
Remarks
Use this property to increase or decrease the padding between legend items. This is applicable for top and bottom legend positions only.
Examples
// This example demonstrates how to set the padding between legend items in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" ItemPadding="30" Position="LegendPosition.Top"></AccumulationChartLegendSettings>
</SfAccumulationChart>
Location
Gets or sets an instance of AccumulationChartLocation that specifies the location of the legend relative to the SfAccumulationChart. If X is set to 20, the legend will move 20 pixels to the right of the SfAccumulationChart.
Declaration
public AccumulationChartLocation Location { get; set; }
Property Value
Type | Description |
---|---|
AccumulationChartLocation | The default value is an instance of AccumulationChartLocation. |
Remarks
The Position must be set to LegendPosition.Custom
to position the legend in the SfAccumulationChart using the specified X and Y offsets.
Examples
// This example demonstrates how to customize the location of the legend in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" Position="LegendPosition.Custom">
<AccumulationChartLocation X="30" Y="50"></AccumulationChartLocation>
</AccumulationChartLegendSettings>
</SfAccumulationChart>
Margin
Gets or sets an instance of AccumulationChartLegendMargin which specifies the margin for the legend in the SfAccumulationChart.
Declaration
public AccumulationChartLegendMargin Margin { get; set; }
Property Value
Type | Description |
---|---|
AccumulationChartLegendMargin | The default value is an instance of AccumulationChartLegendMargin allowing customization of left, right, top, and bottom margins. |
Remarks
The AccumulationChartLegendMargin class provides options to customize the left, right, top, and bottom margins of the accumulation chart legend. Adjusting these margins controls the space between the legend and the surrounding elements.
Examples
// This example demonstrates how to customize the margin of the legend in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true">
<AccumulationChartLegendBorder Width="2" Color="blue"></AccumulationChartLegendBorder>
<AccumulationChartLegendMargin Top="10" Bottom="10" Left="10" Right="10"></AccumulationChartLegendMargin>
</AccumulationChartLegendSettings>
</SfAccumulationChart>
MaximumLabelWidth
Gets or sets the maximum width of the individual legend item after which they get trimmed, wrapped, or clipped in the SfAccumulationChart.
Declaration
public double MaximumLabelWidth { get; set; }
Property Value
Type | Description |
---|---|
System.Double | Specifies the maximum width for the legend text. The default value is |
Remarks
Use this property to define the maximum width of individual legend items. If the legend text exceeds this specified width, it will be trimmed, wrapped, or clipped based on the TextOverflow property settings.
Examples
// The following code snippet demonstrates how to set the MaximumLabelWidth property in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" MaximumLabelWidth="100" TextOverflow="LabelOverflow.Ellipse"></AccumulationChartLegendSettings>
</SfAccumulationChart>
Opacity
Gets or sets the opacity of the legend background in the SfAccumulationChart.
Declaration
public double Opacity { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A double representing the opacity of the legend background, where 0 is fully transparent and 1 is fully opaque. The default value is 1. |
Remarks
The provided background color will be rendered with the specified opacity value.
Examples
// This example demonstrates how to set the opacity for a legend background in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" Background="#4266f9" Opacity="0.5"></AccumulationChartLegendSettings>
</SfAccumulationChart>
Padding
Gets or sets the padding around the legend collection in the SfAccumulationChart.
Declaration
public double Padding { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A double representing the padding around the legend collection. The default value is 8. |
Remarks
Use this property to increase or decrease the padding around the legend collection.
Examples
// This example demonstrates how to set the padding around the legend collection in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" Padding="10"></AccumulationChartLegendSettings>
</SfAccumulationChart>
PageSettings
Gets or sets an instance of AccumulationChartLegendPageSettings which specifies the customization options for legend arrow size and font styles for paging number texts in the SfAccumulationChart.
Declaration
public AccumulationChartLegendPageSettings PageSettings { get; set; }
Property Value
Type | Description |
---|---|
AccumulationChartLegendPageSettings | The default value is an instance of AccumulationChartLegendPageSettings, enabling customization of arrow size and paging text font styles. |
Remarks
The AccumulationChartLegendPageSettings class provides options to customize the appearance of paging elements in the legend, including the size of the arrows and the font style of the paging numbers.
Examples
// The following code snippet demonstrates how to customize the paging of the legend in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true">
<AccumulationChartLegendPageSettings ArrowSize="10"></AccumulationChartLegendPageSettings>
</AccumulationChartLegendSettings>
</SfAccumulationChart>
Position
Gets or sets the position of the legend in the SfAccumulationChart.
Declaration
public LegendPosition Position { get; set; }
Property Value
Type | Description |
---|---|
LegendPosition | One of the LegendPosition enumerations that specifies the position of the legend. Options include:
|
Remarks
Use this property to position the legend at the top, left, bottom, or right of the SfAccumulationChart.
Examples
// This example demonstrates how to set the legend position in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" Position="LegendPosition.Right"></AccumulationChartLegendSettings>
</SfAccumulationChart>
Reverse
Gets or sets a value indicating whether to reverse the order of legend items in the SfAccumulationChart.
Declaration
public bool Reverse { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if the legend items should be reversed; otherwise, false. The default value is false. |
Remarks
When set to true, the order of legend items will be reversed, meaning the last point in the collection will be displayed first in the legend.
Examples
// The following code snippet demonstrates how to set the Reverse property for legend items in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" Reverse="true"></AccumulationChartLegendSettings>
</SfAccumulationChart>
ShapeHeight
Gets or sets the height of the legend shape in the SfAccumulationChart.
Declaration
public double ShapeHeight { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A double representing the height of the legend shape. The default value is 10. |
Remarks
Use this property to customize the height of the legend shape.
Examples
// The following code snippet demonstrates how to set the height of the legend shape:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" ShapeHeight="15"></AccumulationChartLegendSettings>
</SfAccumulationChart>
ShapePadding
Gets or sets the padding between the legend shape and legend text in the SfAccumulationChart.
Declaration
public double ShapePadding { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A double representing the padding between the legend shape and legend text. The default value is 5. |
Remarks
Set this property to increase or decrease the padding between the legend shape and legend text.
Examples
// The following code snippet demonstrates how to set the padding between the legend shape and legend text:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" ShapePadding="8"></AccumulationChartLegendSettings>
</SfAccumulationChart>
ShapeWidth
Gets or sets the width of the legend shape in the SfAccumulationChart.
Declaration
public double ShapeWidth { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A double representing the width of the legend shape. The default value is 10. |
Remarks
Use this property to customize the width of the legend shape.
Examples
// The following code snippet demonstrates how to set the width of the legend shape:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" ShapeWidth="20"></AccumulationChartLegendSettings>
</SfAccumulationChart>
TabIndex
Gets or sets the tab index for the legend item in the SfAccumulationChart. This property is used for accessibility purposes, allowing users to navigate through legend items using the keyboard.
Declaration
public double TabIndex { get; set; }
Property Value
Type | Description |
---|---|
System.Double | A double representing the tab index order of the legend item. The default value is 3. |
Remarks
Use this property to enhance the accessibility by setting the order in which users navigate through legend items using keyboard navigation.
Examples
// The following code snippet demonstrates how to set the tab index for the legend in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" TabIndex="2"></AccumulationChartLegendSettings>
</SfAccumulationChart>
TextOverflow
Gets or sets the text overflow behavior to apply when the individual legend text overflows the legend bounds or MaximumLabelWidth.
Declaration
public LabelOverflow TextOverflow { get; set; }
Property Value
Type | Description |
---|---|
LabelOverflow | One of the LabelOverflow enumeration values that specifies the text overflow option. The options include:
The default value is Ellipse. |
Remarks
Use this property to set the text overflow behavior when the individual legend text overflows the legend bounds or MaximumLabelWidth.
Examples
// The following code snippet demonstrates how to configure the TextOverflow property in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" TextOverflow="LabelOverflow.Clip"></AccumulationChartLegendSettings>
</SfAccumulationChart>
TextStyle
Gets or sets the AccumulationChartLegendFont instance that specifies the text style of the legend in the SfAccumulationChart.
Declaration
public AccumulationChartLegendFont TextStyle { get; set; }
Property Value
Type | Description |
---|---|
AccumulationChartLegendFont | The default value is a new instance of AccumulationChartLegendFont. |
Remarks
The legend text font and alignment can be customized using this AccumulationChartLegendFont instance.
Examples
// This example demonstrates how to customize the legend text style in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true">
<AccumulationChartLegendFont Size="16px" FontFamily="Arial" FontWeight="600" FontStyle="bold" Color="blue" Opacity=0.5></AccumulationChartLegendFont>
</AccumulationChartLegendSettings>
</SfAccumulationChart>
TextWrap
Gets or sets the text wrap behavior when the individual legend text overflows the legend bounds or MaximumLabelWidth.
Declaration
public TextWrap TextWrap { get; set; }
Property Value
Type | Description |
---|---|
TextWrap | One of the TextWrap enumeration values that specify the text wrap option. The options include:
|
Remarks
This property is applicable only when TextOverflow is set to LabelOverflow.Ellipse.
Examples
// The following code snippet demonstrates how to configure the TextWrap property in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" TextWrap="TextWrap.Wrap" TextOverflow="LabelOverflow.Ellipse"></AccumulationChartLegendSettings>
</SfAccumulationChart>
ToggleVisibility
Gets or sets a value indicating whether the series' visibility in the SfAccumulationChart collapses when a legend item is clicked.
Declaration
public bool ToggleVisibility { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if the series' visibility collapses on the legend item click; otherwise, false. The default value is true. |
Remarks
When set to true, clicking a legend item toggles the visibility of the corresponding series in the SfAccumulationChart. If set to false, clicking the legend will not affect the series' visibility.
Examples
// The following code snippet demonstrates how to set the ToggleVisibility property in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" ToggleVisibility="false"></AccumulationChartLegendSettings>
</SfAccumulationChart>
Visible
Gets or sets a value indicating the visibility of the legend in the SfAccumulationChart.
Declaration
public bool Visible { get; set; }
Property Value
Type | Description |
---|---|
System.Boolean | true if the legend is visible; otherwise, false. The default value is true. |
Remarks
Setting this property to true will display the legend in the SfAccumulationChart. If set to false, the legend will be hidden.
Examples
// The following code snippet demonstrates how to set the visibility of the legend in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
</SfAccumulationChart>
Width
Gets or sets the width for the legend in the SfAccumulationChart.
Declaration
public string Width { get; set; }
Property Value
Type | Description |
---|---|
System.String | A string representing the width of the legend. The width can be defined in pixels or percentage. The default value is an empty string. |
Remarks
The width can be specified in either pixels (e.g., "100px") or percentage (e.g., "50%"). The value will be applied based on the legend's position.
Examples
// The following code snippet demonstrates how to set the width of the legend in an accumulation chart:
<SfAccumulationChart>
<AccumulationChartSeriesCollection>
<AccumulationChartSeries DataSource="@StatisticsDetails" XName="Browser" YName="Users"></AccumulationChartSeries>
</AccumulationChartSeriesCollection>
<AccumulationChartLegendSettings Visible="true" Width="50%"></AccumulationChartLegendSettings>
</SfAccumulationChart>
Methods
BuildRenderTree(RenderTreeBuilder)
Declaration
protected override void BuildRenderTree(RenderTreeBuilder __builder)
Parameters
Type | Name | Description |
---|---|---|
Microsoft.AspNetCore.Components.Rendering.RenderTreeBuilder | __builder |